Imagen con efecto de reflejo y movimiento en Actionscript 3

En este Tip aprenderás a reflejar una imagen con Actionscript 3 y aplicarle una transición al pasar el Mouse sobre la imagen.
Cabe destacar que podemos usar el efecto sobre cualquier objeto de clase DisplayObject.

Lo primero que debemos hacer es crear un documento nuevo, crear o importar una imágen la cual podemos convertir tanto en Botón como en MovieClip, asignándole un nombre de instancia en el Panel de Propiedades y un nombre de Clase en el menú Linkage que podemos encontrar haciendo click derecho sobre el elemento en la Librería.

Despues de esto procedemos a crear un Degradado con cuatro niveles de color, de los cuales, los últimos tres tendrán niveles menores de Alpha, he utilizado (de izquierda a derecha) 100, 95, 80 y 0, cargando un poco el selector con alpha 100 hacia la derecha, esto servirá como Máscara para dar el efecto de reflejo, dependiendo de el color de fondo de tu swf, será el color del degradado que tendrás que crear.

Asignamos a la máscara un nombre de clase tal como lo hicimos con la imagen.

Ahora abrimos el Panel de Acciones y escribimos lo siguiente:

Código :

import fl.transitions.Tween;
import fl.transitions.easing.*;

Este código importa la clase Tween y la clase Easing.

Código :

function reflectAndAnimate(target:DisplayObject, ease:Object, expandScale:Number, insetScale:Number, expandTime:Number, insetTime:Number):void
{

Creamos la función que se encargará del reflejo y de la transición del DisplayObject, la cual tiene como parámetros lo siguiente:

• target: El DisplayObject al que se le aplicarán los efectos.
  
• ease: El tipo de Easing que se usará en la transición (Strong, Back, Regular, Bounce, Elastic, None).
  
• expandScale: La escala final que tendrá el DisplayObject al terminar el Easing, tanto de x como de y.
  
• insetScale: La escala a la que regresará el DisplayObject al terminar el efecto (lo más común seria 1, que es la escala que tenia el DisplayObject al principio si esta no fue modificada anteriormente en el código).
  
• expandTime: El tiempo en segundos que tomará al DisplayObject llegar a la escala final.
  
• insetTime: El tiempo en segundos que tomará al DisplayObject llegar a la escala inicial (u otra más pequeña o más grande).
  

Código :

var targetClass:Class = Object(target).constructor;
var targetCopy:DisplayObject = new targetClass();
targetCopy.y = target.y + target.height;
targetCopy.x = target.x;
targetCopy.rotation = 180;
targetCopy.width = target.width;
targetCopy.height = target.height;
targetCopy.scaleX = -target.scaleX;
addChild(targetCopy);
   
var msk:Mask = new Mask();
addChild(msk);
msk.x = targetCopy.x;
msk.y = targetCopy.y;
msk.width = targetCopy.width;
msk.height = targetCopy.height;

En la primera parte de este código, se copia el DisplayObject y se invierte, y en la segunda (donde Mask es el nombre de clase de la máscara) se añade las máscara creada, en ambos se copia el tamaño del parámetro target.

Código :

function mskScale():void
{
   msk.width = target.width;
   msk.height = target.height;
   targetCopy.y = target.y + target.height;
   msk.y = targetCopy.y;
}

var intervalId:Timer = new Timer(1, 0);
intervalId.addEventListener(TimerEvent.TIMER, mskScale);
intervalId.start();

Aquí se crea una función que se encargará de que la máscara siempre sea del tamaño de la copia del target (el DisplayObject al que se aplicara el efecto).

Código :

function expand(event:MouseEvent):void
{
   var xTween:Tween = new Tween(target, "scaleX", ease.easeOut, target.scaleX, expandScale, expandTime, true);
   var yTween:Tween = new Tween(target, "scaleY", ease.easeOut, target.scaleY, expandScale, expandTime, true);
   var cxTween:Tween = new Tween(targetCopy, "scaleX", ease.easeOut, targetCopy.scaleX, -expandScale, expandTime, true);
   var cyTween:Tween = new Tween(targetCopy, "scaleY", ease.easeOut, targetCopy.scaleY, expandScale, expandTime, true);
}

target.addEventListener(MouseEvent.ROLL_OVER, expand);

function inset(event:MouseEvent):void
{
   var xTween:Tween = new Tween(target, "scaleX", ease.easeOut, target.scaleX, insetScale, insetTime, true);
   var yTween:Tween = new Tween(target, "scaleY", ease.easeOut, target.scaleY, insetScale, insetTime, true);
   var cxTween:Tween = new Tween(targetCopy, "scaleX", ease.easeOut, targetCopy.scaleX, -insetScale, insetTime, true);
   var cyTween:Tween = new Tween(targetCopy, "scaleY", ease.easeOut, targetCopy.scaleY, insetScale, insetTime, true);
}

target.addEventListener(MouseEvent.ROLL_OUT, inset);
}

Estas dos funciones crean un objeto Tween que proporcionará el efecto tanto al target como a la copia del target, de lo cual se encargan los eventos ROLL_OVER y ROLL_OUT.

Nota: Como la máscara es regulada por las propiedades ScaleX y ScaleY, el DisplayObject objetivo, no podrá ser modificado en cuanto a tamaño directamente desde el escenario, es decir, si tu imagen es convertida en un MovieClip teniendo tu imagen como Width y Height 100Px, no podrás redimensionarla en el escenario ya que la máscara sería llamada al tamaño en que esta ese MovieClip en la libreria, no al modificado en el stage.
Deberás convertir tu imagen en MovieClip estando en el tamaño que va a ser utilizado en tiempo de ejecución, o modificar su tamaño utilizando scaleX y scaleY antes de llamar a la función.

Este es el código del ejemplo, el cual tiene tres imágenes de 100100Px, convertidas en MovieClip.

Código :

zguillez.scaleX = .5;
zguillez.scaleY = .5;

mx.scaleX = .5;
mx.scaleY = .5;

pedro.scaleX = .8;
pedro.scaleY = .8;

import fl.transitions.Tween;
import fl.transitions.easing.*;

function reflectAndAnimate(target:DisplayObject, ease:Object, expandScale:Number, insetScale:Number, expandTime:Number, insetTime:Number):void
{
   var targetClass:Class = Object(target).constructor;
   var targetCopy:DisplayObject = new targetClass();
   targetCopy.y = target.y + target.height;
   targetCopy.x = target.x;
   targetCopy.rotation = 180;
   targetCopy.width = target.width;
   targetCopy.height = target.height;
   targetCopy.scaleX = -target.scaleX;
   addChild(targetCopy);
   
   var msk:Mask = new Mask();
   addChild(msk);
   msk.x = targetCopy.x;
   msk.y = targetCopy.y;
   msk.width = targetCopy.width;
   msk.height = targetCopy.height;
   
   function mskScale():void
   {
      msk.width = target.width;
      msk.height = target.height;
      targetCopy.y = target.y + target.height;
      msk.y = targetCopy.y;
   }

   var intervalId:Timer = new Timer(1, 0);
   intervalId.addEventListener(TimerEvent.TIMER, mskScale);
   intervalId.start();

   function expand(event:MouseEvent):void
   {
      var xTween:Tween = new Tween(target, "scaleX", ease.easeOut, target.scaleX, expandScale, expandTime, true);
      var yTween:Tween = new Tween(target, "scaleY", ease.easeOut, target.scaleY, expandScale, expandTime, true);
      var cxTween:Tween = new Tween(targetCopy, "scaleX", ease.easeOut, targetCopy.scaleX, -expandScale, expandTime, true);
      var cyTween:Tween = new Tween(targetCopy, "scaleY", ease.easeOut, targetCopy.scaleY, expandScale, expandTime, true);
   }

   target.addEventListener(MouseEvent.ROLL_OVER, expand);

   function inset(event:MouseEvent):void
   {
      var xTween:Tween = new Tween(target, "scaleX", ease.easeOut, target.scaleX, insetScale, insetTime, true);
      var yTween:Tween = new Tween(target, "scaleY", ease.easeOut, target.scaleY, insetScale, insetTime, true);
      var cxTween:Tween = new Tween(targetCopy, "scaleX", ease.easeOut, targetCopy.scaleX, -insetScale, insetTime, true);
      var cyTween:Tween = new Tween(targetCopy, "scaleY", ease.easeOut, targetCopy.scaleY, insetScale, insetTime, true);
   }

   target.addEventListener(MouseEvent.ROLL_OUT, inset);
}

reflectAndAnimate(pedro, Strong, 1.2, .8, .5, 1);
reflectAndAnimate(zguillez, Elastic, 1, .5, .5, 1);
reflectAndAnimate(mx, Back, 1, .5, .5, 1);

Y aquí está el ejemplo:



Espero les sea útil.

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