Comunidad de diseño web y desarrollo en internet online

Cómo hacer un efecto de reflejo en Actionscript 3

El efecto reflejo se ha vuelto muy popular en la Web 2.0, en este tip les mostraré una función en Actionscript 3 para producirlo.

Código :

function mirror(target:MovieClip, maskColor:String):void
{
   /*Este código copia el MovieClip al que queremos aplicar el reflejo y lo posiciona bajo el y lo invierte*/
   
   var targetClass:Class = Object(target).constructor;
   var targetCopy:MovieClip = new targetClass();
   targetCopy.y = target.y + target.height;
   targetCopy.x = target.x;
   targetCopy.scaleY = -1;
   targetCopy.width = target.width;
   targetCopy.height = target.height;
   addChild(targetCopy);
   
   /*Este código construye un Gradient que será aplicado a la copia del MovieClip para que simule el reflejo*/
   
   var msk:MovieClip = new MovieClip();
   var fillType:String = GradientType.LINEAR;
   var colors:Array = [maskColor, maskColor];
   var alphas:Array = [0, 1];
   var ratios:Array = [0, 255];
   var matrix:Matrix = new Matrix();
   matrix.createGradientBox(target.width / 2, target.height / 2, Math.PI / 2, 0, 0);
   var spreadMethod:String = SpreadMethod.PAD;
   msk.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);
   msk.graphics.drawRect(0, 0, target.width, target.height);
   addChild(msk);
   msk.x = targetCopy.x - targetCopy.width / 2;
   msk.y = targetCopy.y - targetCopy.height / 2;
}

mirror(cl, "0xFFFFFF");


Para utilizar esta función es necesario que el MovieClip a reflejar tenga marcada la casilla de Exportar para Actionscript y se le asigne un nombre de Clase.

Si el Gradient creado por Actionscript no te convence puedes crear uno personalizado, exportarlo para actionscript y llamarlo desde la función.


Aqui el ejemplo:

¿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