Comunidad de diseño web y desarrollo en internet online

Botón con efecto de Fade-In y Fade-Out en ActionScript 3

Uno de los tutoriales mas visitados y consultados es el Botón con fade-in y fade-out animado de Rosvel, dicho ejemplo esta echo en ActionScript 1, por lo que me puse a investigar como hacer algo bien simple en ActionScript 3. Vamos a basarnos en su código, y a crear una clase a partir de ello.
veamos el código que usa Rosvel en su botón:

Código :

on (rollOver) {
        mc_animado.onEnterFrame = function () {
        if (this._currentframe != 20) {
                        this.nextFrame();
                } else {
                        this.stop();
                        delete this["onEnterFrame"];
                } // end if
        };
}
on (rollOut) {
        mc_animado.onEnterFrame = function () {
                if (this._currentframe != 1) {
                        this.prevFrame();
                }else {
                        this.stop();
                        delete this["onEnterFrame"];
                } // end if
        };

}

Bien, para hacerlo un poco mas reutilizable vamos a declarar esto, como ya dijimos en una clase. En primer lugar dibujamos nuestro botón, un simple clip con una animación.



Luego abrimos un archivo de actionscript y comenzamos con nuestra clase:

Código :

//para el ejemplo ubicaremos la clase en el mismo directorio que el fla
package { 
   // importamos la clase MovieClip, y los eventos de raton
   import flash.display.MovieClip;
   import flash.events.MouseEvent;
   import flash.events.Event;
   //
   public class BotonFade extends MovieClip {
      //
      public function BotonFade():void {
         //
         this.stop(); // detenemos la animación

         // asignamos los eventos de ratón
         this.addEventListener(MouseEvent.MOUSE_OVER, mouse_over);
         this.addEventListener(MouseEvent.MOUSE_OUT, mouse_out);         
      };
      //declaramos la función que hará avanzar la animación
      private function fadeIn(e:Event):void{
         //
         if(this.currentFrame < this.totalFrames){
            //
            this.nextFrame();
         }else{
            //borramos el enter frame una ves terminada la animación
            this.removeEventListener(Event.ENTER_FRAME, fadeIn);
         };
      };
      // asignamos la función fadeIn al pasar el ratón encima
      private function mouse_over(e:MouseEvent):void{
         //
         this.addEventListener(Event.ENTER_FRAME, fadeIn);
                        // para evitar algún bug borramos el enter frame del evento out
         this.removeEventListener(Event.ENTER_FRAME, fadeOut);
      };
      // ahora la función para "rebobinar" la animación
      private function fadeOut(e:Event):void{
         //
         if(this.currentFrame > 1){
            //
            this.prevFrame();
         }else{
            //
            this.removeEventListener(Event.ENTER_FRAME, fadeOut);
         };
      };
      // y hacemos lo mismo que antes: asignamos le función y evitamos la superposición de funciones
      private function mouse_out(e:MouseEvent):void{
         //
         this.addEventListener(Event.ENTER_FRAME, fadeOut);
         this.removeEventListener(Event.ENTER_FRAME, fadeIn);
      };
      
   };
}


Bien, ahora resta asignarle la clase al clip, para ellos vamos a la opción de Linkage ne la librería y la pasamos nuestra clase:



Y ya tenemos nuestro botón:



Ahora bien, podemos ir un poco mas allá y simplificar nuestra clase usando un Tween para la animación, quedando nuestra clase de la siguiente manera:

Código :

package{
   //
   import flash.display.MovieClip;
   import flash.events.MouseEvent;
   import flash.events.Event;
   import fl.transitions.Tween;
   import fl.transitions.easing.*;
   //
   public class BotonFade extends MovieClip {
      //
      private var fade:Tween;
      //
      public function BotonFade():void {
         //
         this.stop();
         //this.buttonMode = true;
         //
         this.addEventListener(MouseEvent.MOUSE_OVER, mouse_over);
         this.addEventListener(MouseEvent.MOUSE_OUT, mouse_out);         
      };
      //
      private function mouse_over(e:MouseEvent):void{
         //
         fade = new Tween(this, "alpha", Strong.easeOut, this.alpha, 0.7, 1, true);
      };
      //
      private function mouse_out(e:MouseEvent):void{
         //
         fade.yoyo();
      };
      
   };
}


De esta forma podemos crearnos pequeñas clases con distintas animaciones cambiando la propiedad en el tween.

¿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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate