Cómo hacer un botón con animación de rollOver y rollOut

Con este tip quiero mostrarles una manera de hacer un botón con dos animaciones distintas una al situarse el puntero del mouse sobre el botón y otra muy distinta al quitar el puntero.

Esto es muy distinto a hacer un botón con su rollOver y rollOut con una sola animación en retroceso

Primero abrimos un nuevo documento de flash, nos vamos al panel insertar y creamos un nuevo MovieClip le ponemos el nombre que queramos no interesa luego comenzamos creando la apariencia de nuestro botón (como en el ejemplo arriba cree algo sencillo) hacemos un cuadrado y le damos el color que queramos de la medida que mas prefieran yo le di 98x93 img1



A continuación creamos dos capas por encima de la que ya teníamos y le colocamos texto1 y texto2, en esas dos capas vamos a incluir los textos correspondientes, a uno de ellos le damos un tamaño mas grande que el otro para luego animarlos y situarlos en la posición como muestra la imagen para darle el efecto como ya lo vimos en el ejemplo arriba



Ahora vamos con la animación. Cogemos el fotograma en el que se encuentra el texto de mayor tamaño y le damos clic derecho, luego crear la interpolación de movimiento.

Nos situamos en el fotograma 10 de la linea de tiempo y le damos clic derecho e insertamos un fotograma clave y a las demás capas hacemos lo mismo pero ya no insertaremos un fotograma clave, solo ponemos fotogramas comunes o normales para poder visualizar todo y volvemos al fotograma clave que creamos y nos situamos en el

Seleccionamos el objeto y estando en el primer fotograma le aplicamos un alfa de 0% volvemos al fotograma 10 y lo arrastramos hacia abajo en la misma posición del texto pequeño, como verán hay uno enésima de otro pues para solucionar esto nos vamos a la linea de tiempo y seleccionamos la capa que contiene el texto pequeño y clicamos en el fotograma 10 e insertamos un fotograma clave y seleccionamos el texto y lo borramos.

Con esto lograremos que mientras la animación del texto grande se realice al llegar al fotograma 10 el texto pequeño desaparecerá y ya no quedara encima de el. Esto es el rollOver del botón





A continuación nos vamos a la interpolación de movimiento que creamos y nos situamos en el fotograma 20de la linea de tiempo e insertamos un fotograma clave y en las demás capas fotogramas normales ahora para terminar con el efecto del botón hacemos la animación que sera la de salida, la animación de rollOut.

Cogemos el fotograma 20 y seleccionamos el texto, el cual vamos a reducir de tamaño a las dimensiones del texto pequeño para esto tomamos las medidas y las ponemos en el texto grande y lo reduciremos, esto hace que la siguiente animación sea de reducción del texto como se ve en el ejemplo arriba.



Así nos ira quedando nuestra animación...

Con esto tenemos casi terminado nuestro botón lo que sigue es hacer que funcione la animación al contacto con el puntero del mouse para esto vamos a crear tres capas mas encima; nos situamos en una de ellas y crearemos un botón invisible que tenga las medidas de la animación.

¿Como logramos hacerlo? bien creamos un cuadrado y lo situamos encima de toda la animación y presionamos F8 y lo convertimos en botón, nos metemos dentro de su linea de tiempo y para lograr hacer el botón invisible solo arrastramos el primer fotograma hasta la zona activa y ya esta listo.

Regresamos al símbolo, cogemos la siguiente capa y crearemos un fotograma clave en el fotograma 10 lo tenemos seleccionado y le damos el nombre de etiqueta "k2", lo mismo vamos hacer en el primer fotograma de la misma capa y le llamaremos como nombre de etiqueta "k1".





En la figura ya le se ve que en la capa que quedaba cree un fotograma clave en el fotograma 10 esto es para poner un código AS el cual sera un Stop(); esto lo hacemos seleccionando el fotograma 10 y abrimos el panel de acciones y dentro colocamos el código. Lo mismo hacemos en el fotograma 1 de la misma capa. esto hace que la película no reproduzca y se quede en el primer fotograma.

Bueno, después de todo esto culminaremos con la programación del botón transparente para que se lleve acabo la animación rollOver y rollOut . bien comenzamos!! primero seleccionamos el botón trasparente y abrimos el panel de acciones dentro de el ingresamos el siguiente código ActionScrip:

Código :

on(rollOver){
   this.gotoAndPlay("k1")
}
on(rollOut){
   this.gotoAndPlay("k2")
}
on(release){
   //aqui pones la orden que le vas a dar al boton
}

Con esto le decimos a flash, que cuando el puntero del mouse pose sobre el botón vaya y reproduzca la etiqueta "k1" esto seria el rollOver y si el puntero del mouse se desplaza fuera del botón que vaya y reproduzca la etiqueta "k2" esto seria el rollOut (lo de las etiquetas varia según el nombre que le asignes no es necesario que utilices "k1" y "k2" pueden ser los nombre que gustes colocar pero también tendrías que reemplazar el nombre en el código) con esto estamos culminando el botón.

Ahora solo nos queda probarlo pues bien lo tenemos en la biblioteca y lo arrastramos al escenario. porque hacemos esto? pues porque como habíamos creado un MovieClip no estaba en el escenario sino en la biblioteca y por esta razón tenemos que arrastrarlo al escenario principal ahora presionemos control + intro y listo...

Podéis descargaros el archivo del ejemplo aquí.

 

Tweet