Botón con rollOver y rollOut en Flash

Hola!
Hoy preparé un tutorial de Flash, en el cual les explico cómo hacer un botón para que al situar el cursor encima (rollOver) y al alejarlo (rollOut) se ejecuten diferentes animaciones. Es muy fácil de realizar y para que realice la acción vamos a necesitar un sencillo código Actionscript.


En primer lugar abrimos un Nuevo documento de Flash, ya sea de actionscript 2.0 o de actionscript 3.0, pueden elegir el que mejor sepan manejar o el que quieran utilizar. Vamos al menú Insertar -> Nuevo Símbolo -> Le damos un nombre (por ejemplo, Botón) -> Elegimos de tipo Clip de Película o Movieclip. 
Dentro de este clip de película vamos a diseñar el botón. Vamos a utilizar 4 fotogramas: el primero para el estado de "Reposo", el segundo para el estado de "MouseOver" o "RollOver", el tercero para el estado "Press" y el cuarto para el estado "Release".

En este caso vamos a hacer un botón sencillo con un cambio de color.
En el primer fotograma, es decir, el fotograma del estado Reposo, vamos a dibujar un rectángulo de color azul, por ejemplo #6532FF, con bordes redondeados y sin contorno. En una nueva capa escribimos un texto, yo en este caso escribí botón y usé como color un gris claro, por ejemplo #CCCCCC.

En el segundo fotograma insertamos un fotograma clave (click derecho + insertar fotograma clave) vamos a seleccionar el rectángulo y presionar F8 para convertirlo en clip de película. De nombre le pondremos "rollOver". Hacemos doble click sobre él y en el fotograma 10 por ejemplo, insertamos un fotograma clave y ahí cambiamos el color azul a un azul claro, por ejemplo,  #6598FF. Seleccionamos el fotograma 1, hacemos click derecho y seleccionamos la opción Crear Interpolación de forma. Ya tenemos la animación de rollOver, solo falta colocar un stop al final. Para eso, en una nueva capa, insertamos un fotograma clave en el último fotograma de la animación y escribimos en el panel de acciones (F9):
stop();
Y listo. Ya podemos volver a la instancia del botón.

En el tercer fotograma simplemente copiamos el dibujo del botón del último fotograma del estado rollOver (del MC rollOver).

Para el cuarto y último fotograma (estado rollOut), vamos a insertar la misma animación que insertamos en el estado rollOver pero con los fotogramas invertidos. Para eso vamos a abrir la biblioteca, donde tenemos guardado el símbolo del estado rollOver. Hacemos Click derecho > Duplicar, y al MC de nombre le ponemos "rollOut". Después hacemos doble clic para modificarlo. Una vez "dentro", seleccionamos todos los fotogramas de la capa de la animación, hacemos click derecho y seleccionamos la opción Invertir fotogramas. Después volvemos a la instancia del botón y arrastramos desde la biblioteca el movieclip "rollOut", y lo movemos para hacerlo coincidir con la posición x e y del rectángulo del fotograma 3. Para guiarnos podemos utilizar papel cebolla o simplemente modificar la posición en el panel de propiedades copiando las del fotograma 3.

Insertamos una nueva capa y en el panel de acciones escribimos:
stop();


Bueno, ahora lo último que falta para hacer funcionar nuestro botón es programarlo. Volvamos a la escena principal.


Si estás usando Actionscript 2.0, seleccioná el botón y escribile este código en el panel de acciones: 



//acción para pasar al estado "rollOver"
on(rollOver){
        this.gotoAndStop(2);
}
//acción para pasar al estado "press"
on(press){
        this.gotoAndStop(3);
}
//acción para pasar al estado "rollOut"
on(rollOut){
        this.gotoAndStop(4);
}
//acción para pasar al estado "release"
on(release){
        this.gotoAndStop(4);
        //acción "ir a URL"
        getURL("http://www.google.com.ar/", "_self");

}

Si estás usando Actionscript 3.0, ponele al botón como nombre de instancia "boton" y escribí este código en una nueva capa, en el panel de acciones: 


//mostrar "handCursor" (manito que aparece en los enlaces) 
boton.addEventListener (MouseEvent.ROLL_OVER, mano);
function mano (event):void {
        boton.buttonMode = true;
}
//acción al situar el mouse encima del botón
boton.addEventListener (MouseEvent.ROLL_OVER, rollover);
function rollover (event):void {
        boton.gotoAndStop(2);
}
//acción al alejar el mouse del botón
boton.addEventListener (MouseEvent.ROLL_OUT, rollout);
function rollout (event):void {
        boton.gotoAndStop(4);
}
//acción al presionar el botón
boton.addEventListener (MouseEvent.MOUSE_DOWN, presionado);
function presionado (event):void {
        boton.gotoAndStop(3);
}
//acción ir a URL
boton.addEventListener (MouseEvent.CLICK, iraurl);
function iraurl(event):void {
        navigateToURL(new URLRequest("http://www.google.com.ar/"), "_self");
}


Bueno, espero que este tutorial les haya servido, si tienen cualquier duda recuerden dejar un comentario. Por si les sirve, acá están los archivos para actionscript 2 y actionscript 3.

Ver todos mis tutoriales

Saludos!!
Jime.