Botón con efecto RollOver y RollOut en ActionScript 3

En este tutorial veremos cómo crear un botón sencillo con efecto RollOver, RollOut y Clic en ActionScript 3, ya que varias personas han intentado desarrollar un efecto como lo era en AS2 con las funciones antes mencionadas.

Como ya saben en AS2 el desarrollo de este botón era sencillo, simplemente era crear un clip de película y dentro de éste una zona activa, la cual llevaba el código:

Código :

on(rollOver){
   gotoAndPlay(2);
}

on(rollOut){
   gotoAndPlay(11);
}

on(release){
   getURL("www.cristalab.com")
}

Este nos permite desplegar una animación en un MovieClip para desarrollar botones menos rígidos y mejor animados.

Pero bueno, algunas personas se les han dificultado en AS3, pero no es tan complicado, sólo debemos hacer lo siguiente:

1. Creamos un rectángulo.
   
2. Convertimos nuestro rectángulo en un MovieClip y creamos una interpolación clásica de 30 fotogramas en el cual en el 15 se agrande nuestro rectángulo.
   
3. En el fotograma 1 y 15 de nuestra interpolación agregamos un stop(); para determinar el estado del botón al pasar con nuestro cursor por encima de éste.
   
4. En la escena principal o raíz de nuestro archivo y le damos un nombre de instancia a nuestro MovieClip, en mi caso le nombre como “boton1”.
   
5. Creamos una nueva capa que se llame acciones y agregamos el siguiente código:
   

Código :

stop();

//funcion para ir a una escena llamada "capitulo" y al fotograma 1 de este
boton1.addEventListener(MouseEvent.CLICK,presionado);
function presionado(event:MouseEvent):void
{
   gotoAndPlay(1,"capitulo");
}

//funcion para ir ir al efecto RollOver o cuando el mouse pasa por encima del boton
boton1.addEventListener(MouseEvent.ROLL_OVER,pasado);
function pasado(event:MouseEvent):void
{
   boton1.gotoAndPlay(2);
}

//funcion para ir ir al efecto RollOut o cuando el mouse se quita de encima del boton
boton1.addEventListener(MouseEvent.ROLL_OUT,repasado);
function repasado(event:MouseEvent):void
{
   boton1.gotoAndPlay(16);
}

Con esto pasos crearemos botones con una animación más coherente y no con la básica de un componente .

Programar varios botones

En caso de que algunos deseen programar varios botones en AS3 y no quieran crear funciones para tantos botones (además que sería molesto), les mostrare un código (aunque solo le mostraré una función para cuando presionamos el botón):

Código :

boton1.addEventListener(MouseEvent.CLICK,abrir);
boton2.addEventListener(MouseEvent.CLICK,abrir);

function abrir(e:Event):void
{
//dependiendo de si el boton es MovieClip o Boton el parametro despues de switch es MovieClip o SimpleButton
   switch (MovieClip(e.target))
   {
      case boton1 :
         gotoAndPlay(1,"escena2");
         break;

      case boton2 :
         gotoAndPlay(1,"escena3");
         break;

   }
}

Ya cada uno adaptará el código como más lo necesite. Espero les sirva.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.