sábado, 26 de febrero de 2011

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.

10 comentarios:

  1. Gracias amigo por el tutorial; seria de gran ayuda si incoorporaras el archivo .fla para seguirlo deacuerdo a tu explicación.
    Gracias de todas maneras.

    ResponderEliminar
  2. Gracias por tu comentario.
    En la entrada ya estaban publicados los links a megaupload para descargar los archivos .fla del tutorial.
    Para actionscript 2.0: http://www.megaupload.com/?d=I7YHPFM4
    Para actionscript 3.0: http://www.megaupload.com/?d=1GV21GF4

    Saludos

    ResponderEliminar
    Respuestas
    1. ¿Podrias subir el archivo a otro servido?¿por ejemplo rapidshare? Es que megaupload ya no existe.

      Gracias por el tutorial!

      Eliminar
  3. hay alguna forma de dar alguna excepcion al boton para que al hacer on press permanezca quieto auqnue aparte el cursor de encima del boton? es decir que anule las demas acciones

    Ele

    ResponderEliminar
  4. Gracias por tu comentario,
    No entiendo muy bien tu pregunta. Si lo que querés es desactivar un botón, podés usar el código
    btn.enabled = false;
    Donde "btn" es el nombre de instancia del botón.

    Saludos!

    ResponderEliminar
  5. hola jimena soy jassir y estoy trabajando en una animacion para una pagina web pero tengo muchas dudas acerca de los botones como aplicarles una accion especifica si me pudieras ayudar,como desses si quieres que te lo explique en algun correo o si prefieres que te agregue, no veo tu casilla de correo electronico =) gracias

    ResponderEliminar
  6. Hola jassir! Gracias por tu comentario,
    Te recomiendo pasar por esta entrada:
    http://todotutoriales-jime.blogspot.com/2011/05/codigo-para-botones-en-flash.html
    Si tenés alguna duda sobre ese tutorial en particular, podés dejarme un comentario en la sección de comentarios del mismo.

    Si querés contactarme, utilizá la sección de contacto:
    http://todotutoriales-jime.blogspot.com/p/contacto_5532.html

    Saludos!

    ResponderEliminar
  7. Hola, cómo estás? Muy bueno el tutorial, pero estoy teniendo un pequeño problemita. Necesito que el botón vaya a un fotograma en otra escena, no a una dirección URL, y creo que me está haciendo ruido el "goto" de las acciones propias del botón (para el over y out) con el "goto" que estoy queriendo usar para la acción del botón... se entiende? Podrías poner un código en el que se use "goto" en lugar de Get URL?
    Muchísimas gracias y muy buenos tus tutoriales.
    Josué

    ResponderEliminar
  8. Hola Josué, gracias por tu comentario.
    Creo que este código se adecua a tu necesidad:

    gotoAndStop ("nombre_de_escena", fotograma);

    Ojalá te sirva,
    Tal vez este otro tutorial te sea de utilidad, tiene más explicado el "goto".
    http://todotutoriales-jime.blogspot.com/2011/05/codigo-para-botones-en-flash.html

    Saludos!

    ResponderEliminar
  9. Perdón, me equivoqué y puse el código incompleto y para actionscript 2.

    Sería así:
    function ira (e:MouseEvent):void{
    gotoAndPlay(fotograma, "nombre_de_escena");
    }

    boton.addEventListener (MouseEvent.CLICK, ira);

    Ahí quedaría.
    Saludos

    ResponderEliminar

Si tenés dudas, comentarios u opiniones sobre esta entrada, ¡comentá!