RSS
Facebook
G+

Buscador de IntercambioSOS:


Retroceder   Foro de Ayuda IntercambiosvirtualeS > Soporte sobre: Multimedia > Recursos Webmasters & Diseño Web

Respuesta
 
Herramientas Desplegado
Antiguo 23-abr-2013     #1
Sonrisa Programacion Web Flash Basico

Bueno voy a tratar de enseñaros a crear una sencilla web en flash.
Esto lo realizo basandome en Macromedia Flash 8.

Abrimos nuevo documento de flash. Ahora veran que en la linea de tiempo hay una Capa 1, pues trabajaremos sobre ella.
Vamos a empezar creando los botones, asi que cogemos la heramienta Rectangulo (R) y hacemos 3 rectangulos del color que querais eso lo dejo bajo vuestro criterio y con la herramienta de texto (T) encima de cada boton escribimos Boton 1, Boton 2 y Boton 3 para poder identificarlos mas adelante.

Ya tenemos los rectangulos diseñados
Una vez tenemos los 3 rectangulos o cuadrados o circulos como los querais hacer diseñados, seleccionamos la herramienta seleccion (V) y clicamos encima de uno de los rectangulos, ahora apretamos F8 para convertirla en simbolo o clic derecho y convertir simbolo, de nombre le pondremos boton1_btn, en tipo marcamos la opcion Boton, y en registro marcamos en el centro. Hacemos lo mismo con los otros 2 pero cambiando el nombre al segundo le pondremos boton2_btn y al tercero boton3_btn y asi sucesivamente si tuvieras mas botones.

Ya tenemos los botones creados
Ahora con la herramienta de seleccion (V) pulsada, seleccionamos los 3 botones a la vez, apretamos F8 y la convertimos en simbolo, pero esta vez pondremos de nombre web, de tipo Clic de pelicula y registro central.
Ahora en la linea de tiempo, clicamos doble clic encima de Capa 1 y le cambiamos el nombre por el de Web. (Mas adelante explicare porque hacer esto)

Ahora clicamos doble clic encima de cualquier boton para entrar dentro del Clip de pelicula que hicimos con los 3 botones.
Una vez dentro ya nos deja clicar boton por boton. En la linea de tiempo Capa 1, clicamos doble clic y la nombramos Botones.

Ahora arriba en el menu de navegacion, clicamos en Insertar, seguidamente Linea de tiempo, y le damos a Capa. Hacemos esto 2 veces para crear 2 Capas mas en la linea de tiempo.
Ahora clicamos doble clic en las capas nuevas y en la de arriba del todo la nombramos Acciones y en la del medio la nombramos Contenido.

Ya tenemos las Capas Acciones, Contenido y Botones
Bien, ahora en la linea de tiempo Acciones tenemos un Fotograma (los cuadraditos que hay a la derecha de las capas se llaman Fotogramas o Frames) clicamos clic derecho encima de el y seleccionamos Acciones para llamar a sus acciones y le escribimos stop();. Ya podemos cerrar esa ventana de acciones.
La accion stop(); quiere decir que cuando ejecutemos la web, se detenga en esa linea de tiempo y no avanze. Si tuvieramos mas fotogramas creados al lado de ese... al ejecutar la web lo que pasaria seria que se verian todos los fotogramas repetidamente y no podriamos ni ver su contenido.

Vamos a crear 2 fotogramas mas en cada linea de tiempo, esto se hace asi, en acciones por ejemplo vamos al fotograma 3 y 4, los seleccionamos a la vez o 1 por 1 como quieras, y apretamos F6 para que se cree un nuevo fotograma. Esto lo hacemos en Acciones, Contenido y en Botones. Ahora tenemos 3 fotogramas en la linea de tiempo de cada capa.
En los 2 fotogramas que hemos creado de acciones, clicamos clic derecho encima y llamamos a las acciones, y escribimos de nuevo stop(); en los 2 fotogramas. Ahora en los 3 fotogramas de accione tendrias que haber escrito stop();

Ahora vamos al fotograma 2 de la linea contenido.
Seleccionamos la herramienta de texto (T) y escribimos "Estas en contenido Fotograma 2" para que podamos comprobar la funcion de los botones mas adelante. (Esto lo podras editar tu luego, es solo para que te ubiques en tu web)
Hacemos lo mismo en el fotograma 3 de contenido pero esta vez escribimos "Estas en contenido Fotograma 3"

Vamos a poner acciones a los botones para que funcionen como tal
Vamos al fotograma 1 de la capa Botones y clicamos clic derecho en el segundo boton y llamamos a las acciones.
Ahora le escribimos esta accion:
Código: [Seleccionar]

on (press){
gotoAndStop(2);
}

Esta accion quiere decir... Cuando apretemos el boton nos llevara al fotograma 2 y se detendra ahi.
Ahora hacemos exactamente lo mismo en el boton tercero pero esta vez escribiremos estas acciones:
Código: [Seleccionar]

on (press){
gotoAndStop(3);
}

Esto quiere decir lo mismo que antes pero este boton nos llevara al fotograma 3 cuando sea pulsado.

Ahora nos vamos al fotograma 2 de la linea Botones.
Ahora hacemos lo mismo de antes con los botones pero ahora empezando por el boton 1 y en ese boton le escribimos esta accion:
Código: [Seleccionar]

on (press){
gotoAndStop(1);
}

Esto es para que el boton 1 nos devuelva al fotograma 1 cuando lo pulsemos. Recuerda que ahora estas en el fotograma 2.
En el fotograma 1, el boton 1 no tiene funcion porque ya estas en el que seria la pagina principal pero al pulsar el boton 2, este nos llevaria al fotograma 2 de la web por lo tanto ahi si que necesitamos el boton 1 para poder volver a la pagina principal de la web.
Al boton 2 no hace falta ponerle acciones porque ahora mismo estamos en su fotograma.
Al boton 3 ponerle la misma accion que antes
Boton 3
Código: [Seleccionar]

on (press){
gotoAndStop(3);
}


Ahora vamos al fotograma 3 de la linea Botones y hacemos le ponemos las mismas acciones a los botones 1 y 2.
El boton 3 no hace falta ponerle acciones porque estamos en su fotograma.

Ahora vamos a provar lo que hemos hecho.
Pulsamos la tecla CONTROL y sin soltar pulsamos INTRO.
Vemos que salen los 3 botones, y pulsando en ellos podemos navegar por los 3 fotogramas que hemos creado.

Pero los botones son algo sosos no? Vamos a darle una ultima funcion basica.
Vamos al fotograma 1 de la linea botones y hacemos doble clic en el boton 1 para entrar en el.
Una vez dentro vemos que la linea de tiempo es diferente a la de antes, ahora aparecen 4 funciones:
Reposo, Sobre, Presionado y Zona activa.
Vamos a poner una funcion de Sobre. Eso quiere decir que cuando pasemos el raton por encima del boton pero sin pulsarlo, el boton cambiara del fotograma Reposo al Sobre.

Clicamos 1 vez en el fotograma de la linea Sobre y damos a F6 para crear un nuevo Fotograma.
Ahora en ese mismo fotograma ya podemos cambiarle el color del fondo al boton. Clicas en el fondo gris y lo cambias por un Verde por ejemplo. Para cambiar el color clicas al fondo gris y una vez en el, clicamos la herramienta Color Relleno, y cambiamos el gris que tenemos por un verde mismamente y veras que el fondo cambia de color.

Ahora para ver el efecto clica en la linea de tiempo Reposo, y veras que el boton se pone gris, ahora clica en la linea Sobre y veras que se vuelve verde.
Ahora para volver hacia atras pulsamos encima de la linea de tiempo donde dice Web.
Una vez ahi pulsamos doble clic en el boton 2 y hacemos lo mismo. Y luego repetimos una vez mas en el boton 3.

Ahora vamos a provar como queda finalmente nuestra Web basica.
Pulsamos la tecla CONTROL y sin soltar pulsamos INTRO.

Bueno pues basicamente tenemos nuestra Web creada. Ese es el funcionamiento basico de una Web Flash.
Ahora con esto ya podeis editar el contenido que pusimos antes y poner lo que querais vosotros para que quede mas a vuestro gusto la web y los botones podeis hubicarlos en la parte superior o donde querais.
Responder Citando
Los siguientes 7 usuarios agradecen a sonicclon por este mensaje:
asgorreidaa (26-abr-2013), baduser (24-abr-2013), Francisco6812 (23-abr-2013), josner (25-abr-2013), maxiners (25-abr-2013), Muga (25-abr-2013), Tururojo (24-abr-2013)
Antiguo 24-abr-2013     #2
Predeterminado

Gracias por la informacion y Saludos.



Mi Sabiduria, abarca lo que una gota de Agua, en el Oceano del Conocimiento
Responder Citando
Los siguientes 2 usuarios agradecen a Tururojo por este mensaje:
josner (25-abr-2013), sonicclon (24-abr-2013)
Antiguo 24-abr-2013     #3
Predeterminado

post poco vistoso, mucho texto sin formato, sin imagenes, no dan ganas de leer compañero... parece un copy/paste mal hecho
Responder Citando
Los siguientes 2 usuarios agradecen a baduser por este mensaje:
josner (25-abr-2013), sonicclon (24-abr-2013)
Antiguo 25-abr-2013     #4
Predeterminado

Gracias por compartir la información sonicclon.

Responder Citando
Usuarios que han agradecido este mensaje de Muga
josner (25-abr-2013)
Antiguo 25-abr-2013     #5
Predeterminado





El que busca la verdad corre el riesgo de encontrarla.
Responder Citando
Usuarios que han agradecido este mensaje de carmen10
josner (25-abr-2013)
Antiguo 25-abr-2013     #6
Predeterminado

Esperamos las imágenes para ver la aplicación y/o un vídeo de apoyo.


Gracias y esperamos la versión dos mejorada del mismo post..



Saludos
Responder Citando
Antiguo 25-abr-2013     #7
Predeterminado

Bueno el tema es interesante, pero si le incorporara imagenes donde nos explique como es y asi poder dar a entenderse a la comunidad que no tiene mucha experiencia en estos temas.


Trabajando en un mejor futuro.
Ayudando en lo que se pueda.
Agradeciendo los aportes
Responder Citando
Antiguo 26-abr-2013     #8
Predeterminado

Coincido con los comentarios, pero a pesar de ello…

Responder Citando
Respuesta


(0 miembros y 1 visitantes)
 
Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los Códigos BB están Activado
Las Caritas están Activado
[IMG] está Activado
El Código HTML está Desactivado

Ir al Foro

Temas Similares
Tema Autor Foro Respuestas Último mensaje
Problemas con Flash Pro CS6 macl_max Windows 1 04-nov-2012 11:41


Desarrollado por: vBulletin® Versión 3.8.1
Derechos de Autor ©2000 - 2024, Jelsoft Enterprises Ltd.
Ad Management by RedTyger