Animacin Programada para un Men Flash

Tutorial Flash de Animacin Action Script

Para que la animacin trabaje como un segundo esta del botn ser necesario agregar unas cuantas lneas de cdigo action script. Tutorial Flash 8 Animacin de Men para Sitio Web. En el siguiente tutorial encontraras como realizar una animacin en clip de pelcula, esta animacin simular que es un botn. Sin embargo, el botn estar escondido como un botn invisible (zona activa de un smbolo botn). Para que la animacin trabaje como un segundo esta del botn ser necesario agregar unas cuantas lneas de cdigo action script. Que te prese si :) comenzamos? :) con el tutorial y as tengas una nueva opcin de men web. 1-. Comenzar por hacer un documento con propiedades (ctrl. + J). a)-. Las dimensiones son 300 * 60 pxeles de ancho y alto. b)-. Utilizar como color de fondo para el documento #666666. c)-. Colocar una velocidad de fotograma de 60 fps.

Animacin Programada para un Men Flash Photoshop

2-. Crear el primer smbolo (ctrl. + F8) a)-. Nombrarlo botn inicio. b)-. Seleccionar Clip de pelcula en la opcin Tipo.

3-. Ubicado en el smbolo botn inicio, cambiar el nombre de la capa por el de botn bg. a)-. Hacer visible la barra de Informacin (ctrl. + I) Alinear & Informacin & Transformar. b)-. Dibujar un cuadro (R) con dimensiones 140.0 * 40.0 de ancho y alto. c)-. Colocar del rectngulo en coordenadas X = 0.0 y Y = 0.0. Nota seleccionar la casilla del centro en la parte macada con el asterisco.

4-. Insertar un fotograma clave (F6) en el frame # 10. a)-. Cambiar el color del rectngulo, tal y como se muestra en la imagen.

http://www.solophotoshop.com/Tutorial-Animacion-Programada-para-un-Menu-Flash-c-493.html (2 de 12)07/10/2007 1:58:57

Animacin Programada para un Men Flash Photoshop

5-. Seleccionar un fotograma entere el # 1 y el # 9. a)-. En la barra de propiedades seleccionar la opcin Animar Forma.

6-. Insertar una segunda capa y cambiar el nombre por el de texto. a)-. Luego introducir un campo de Texto esttico con la palabra INICIO. b)-. Colocar el campo de texto en coordenadas X = 0.0 y Y = 0.0.

Animacin Programada para un Men Flash Photoshop

7-. Insertar un fotograma clave (F6) en el frame # 10. a)-. Abrir la barra de Transformar (ctrl. + T) Alinear & Informacin & Transformar. b)-. Seleccionar la casilla de Restringir despus colocar 150 %, con esta accin crecer un poco el texto.

8-. Seleccionar el fotograma # 1 de la capa texto. a)-. En la barra de Propiedades seleccionar en la opcin Animar Forma.

Animacin Programada para un Men Flash Photoshop

9-. Hacer visible la ventana Biblioteca (F11). a)-. Hacer clic con el botn derecho del ratn sobre el smbolo botn inicio. b)-. En el men desplegado seleccionar la opcin Duplicar.

10-. Al duplicar el smbolo aparecer esta opcin, esto es para cambiar el nombre del smbolo solamente. a)-. Luego cambiar el nombre por el de botn galera.

11-. Abrir el smbolo botn galera desde la biblioteca haciendo doble clic sobre este smbolo. a)-. Seleccionar el fotograma # 1 de la capa texto y cambiar el texto por el de GALERA. b)-. Colocar el texto en coordenadas X = 0.0 y Y = 0.0.

http://www.solophotoshop.com/Tutorial-Animacion-Programada-para-un-Menu-Flash-c-493.html (5 de 12)07/10/2007 1:58:57

Animacin Programada para un Men Flash Photoshop

12-. Cambiar el texto del fotograma # 10 por el de GALERA. b)-. Colocar el texto en coordenadas X = 0.0 y Y = 0.0. Nota repetir los pasos 9, 10, 11 y 12 para duplicar el nmero de smbolos y as obtener un men ms completo inicio, galera, contacto, servicios, clientes etc.

13-. Regresar a la Escena y cambiar el nombre de la capa por el de botones. a)-. Arrastrar desde la biblioteca el smbolo botn inicio. b)-. Colocar como Nombre de instancia menu_mc1 c)-. Colocar el smbolo en coordenadas X = 5.0 y Y = 10.0.

Animacin Programada para un Men Flash Photoshop

14-. Arrastrar desde la biblioteca el smbolo botn galera. a)-. Colocar como Nombre de instancia menu_mc2. b)-. Colocar el smbolo en coordenadas X = 155.0 y Y = 10.0. Nota si decides crear ms botones colocar como nombre de instancia menu_mc3, menu_mc4, menu_mc5, menu_mc6 etc. Este cdigo solamente soporta 5 botones.

15-. Crear un nuevo smbolo (ctrl. + F8), nombrarlo zona activa. a)-. El la opcin Tipo seccionar Botn.

http://www.solophotoshop.com/Tutorial-Animacion-Programada-para-un-Menu-Flash-c-493.html (7 de 12)07/10/2007 1:58:57

Animacin Programada para un Men Flash Photoshop

16-. Insertar un fotograma clave (F6) en el frame Zona activa. a)-. Dibujar un rectngulo (R), sin borde y no importa cual sea el color de relleno. b)-. Las dimensiones del rectngulo son 140.0 * 40.0 de ancho y alto. c)-. Colocar la forma dibujada en coordenadas X = 0.0 y Y = 0.0.

17-. Regresar nuevamente a la Escena e insertar una capa ms y cambiar el nombre de la capa por el de botn invisible. a)-. Arrastrar desde la biblioteca el smbolo zona activa y colocarlo en coordenadas X = 5.0 y Y = 10.0.

18-. Seleccionar el smbolo botn no el fotograma de la capa botn invisible. a)-. Abrir la barra de Acciones botn e insertar el siguiente cdigo action script. on (rollOver) { _root.boton_mc1 = true; } on (rollOut) { _root.boton_mc1 = false; }

Animacin Programada para un Men Flash Photoshop

19-. Arrastrar desde la biblioteca el smbolo zona activa en la capa botn invisible. a)-. Colocar el smbolo en coordenadas X = 155.0 y Y = 10.0. Nota arrastrar el smbolo zona activa sobre cada uno de los botones que tengas en la Escena.

20-. Seleccionar el smbolo botn de la capa botn invisible no el fotograma. a)-. Abrir la barra de Acciones botn e insertar el siguiente cdigo action script. on (rollOver) { _root.boton_mc2 = true; } on (rollOut) { _root.boton_mc2 = false; }

Animacin Programada para un Men Flash Photoshop

21-. Insertar una tercera capa y cambiar el nombre por el de cdigo. a)-. Seleccionar el fotograma, abrir la barra de Acciones fotograma e insertar el siguiente cdigo action script. _root.menu_mc1.onEnterFrame = function() { if (boton_mc1) { _root.menu_mc1.nextFrame(); } else { _root.menu_mc1.prevFrame(); } }; _root.menu_mc2.onEnterFrame = function() { if (boton_mc2) { _root.menu_mc2.nextFrame(); } else { _root.menu_mc2.prevFrame(); } }; _root.menu_mc3.onEnterFrame = function() { if (boton_mc3) { _root.menu_mc3.nextFrame(); } else { _root.menu_mc3.prevFrame(); } }; _root.menu_mc3.onEnterFrame = function() { if (boton_mc3) { _root.menu_mc3.nextFrame(); } else { _root.menu_mc3.prevFrame(); } }; _root.menu_mc4.onEnterFrame = function() { if (boton_mc4) { _root.menu_mc4.nextFrame(); } else { _root.menu_mc4.prevFrame(); } }; _root.menu_mc5.onEnterFrame = function() { if (boton_mc5) { _root.menu_mc5.nextFrame(); } else { _root.menu_mc5.prevFrame(); } }; Con esta accin se da por concluido el tutorial, el ejemplo de SWF que aqu presento se le realizaron unos cuantos cambios para representar un men con secciones.

http://www.solophotoshop.com/Tutorial-Animacion-Programada-para-un-Menu-Flash-c-493.html (10 de 12)07/10/2007 1:58:57

Animacin Programada para un Men Flash Photoshop

P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado. Si agregas ms botones cambiar en los pasos 18 y 20 el nmero del _root.boton_mc por el nmero consecutivo o sea _root.boton_mc3, _root.boton_mc4, _root.boton_mc5. Recordar que el cdigo aqu expuesto solamente soporta 5 botones pero si deseas agregar ms botones y no sabes como hacerlo solamente ponerte en contacto y con gusto se te proporcionara la ayuda tcnica deseada.

http://www.solophotoshop.com/Tutorial-Animacion-Programada-para-un-Menu-Flash-c-493.html (11 de 12)07/10/2007 1:58:57