Tutorial

Saludos parceros.. en esta ocasión voy a compartir este tutorial que le servirá a muchos que estén desarrollando sus presentaciones en Flash® y quieran darle más impacto visual a su contenido de multimedia por medio de botones animados. Este es mi primer post y les enseñaré como crear un botón animado con AS 2.0 de forma muy sencilla, solo se debe tener conocimiento básico de AS2, y frescos que no es nada de complicado del mismo modo les iré instruyendo en el progreso. Así que empecemos..

1- Creamos un documento nuevo de AS2 (recomiendo que sea 30 fps, pero lo pueden hacer su gusto).




2- En la línea de tiempo dibujamos nuestro botón o lo importamos (si utilizamos Illustrator, Corel, etc. Eso sí, que esté desagrupado), lo seleccionamos, y en el menú: Insertar>Nuevo símbolo, o presionamos [F8] le damos un nombre, yo le puse "boton inicio" igual ustedes lo nombrarán como quieran, luego lo convertiremos en clip de película.





3- Hecho esto damos doble click al objeto dibujado para entrar a su línea de tiempo y realizar la animación (recomiendo que creen otra capa vacía, allí irán los stop de fotogramas, igualmente se los aclararé más adelante), aquí solamente lo aumenté de tamaño para no dar mucha lora, igual ustedes lo pueden hacer a su gusto, la animación tiene que ser de inicio y regreso.





4- Vamos ahora a insertar fotogramas clave en blanco en la capa vacía que mencione antes, entonces colocamos dos fotogramas en la animación de inicio y otros dos en la animación de vuelta, como está en la imagen:




Seleccionamos el primer fotograma clave en blanco, vamos al menú: Ventana>Acciones o presionamos [F9] y escribimos: stop(); o también pueden presionar [Esc]+[s]+[t], repetimos esto con el tercer fotograma en blanco.
 

  
Ahora seleccionamos el segundo fotograma clave en blanco y vamos a las propiedades, en la casilla “Nombre”, vamos a darle un identificador al fotograma o el nombre (valga la redundancia), que sea corto (el nombre puede ser de su preferencia), un ejemplo como el que yo coloqué “a1” (con las comillas), y hacemos lo mismo con el cuarto fotograma clave en blanco, solo que debe colocarle un nombre distinto, ejemplo mío “a2”.
Ya deberá verse así:




5- Por último, vamos a la escena principal o línea de tiempo principal, seleccionamos nuestro botón y abrimos en panel de acciones o presionamos [F9] y escribimos:

Esta parte del código es muy fácil, se puede teclear para accesos directos, entonces:
Tecleando [Esc]+[o]+[n], seleccionamos y dobleclicleamos “rollOver” y pulsamos [Enter.] para la segunda línea de cogido, seguido escribimos “this.” (sin las comillas) y presionamos [Esc]+[g]+[p] quedará escrito inmediatamente el “gotoAndPlay” y en el paréntesis colocamos el nombre del fotograma donde inicia la animación del botón, en mi caso es el “a1”, luego nos situamos al final de la línea de código (después del “}”) y repetimos la operación, solo que aquí seleccionamos el “rollOut” y en el paréntesis del “gotoAndPlay” colocamos el nombre del fotograma donde empieza la animación de vuelta. Ya hecho esto debe quedar como muestra la imagen siguiente:

De ser así podemos probar nuestra película [Ctrl.]+[Enter.] y miren por si mismos.

Este es mi resultado: