Añadir a un MovieClip un efecto de espejo con Actionscript 2

Varias veces he leído a algún clabber que quiere saber como hacer el efecto de espejo de tal o cual pagina, utilizando únicamente flash puesto que no saben, no pueden, o simplemente no les da la gana de hacerlo con un programa de diseño gráfico. Aquí publico la solución utilizando únicamente Actionscript 2, la explico de una manera sencilla, creo yo, es muy importante leer los comentarios al codigo para entenderla mejor. Ahora sin más preámbulos empecemos:

Efecto de Espejo

Para este efecto utilizaremos las propiedades de los MovieClip

• movieclip._yscale
  
• movieclip.duplicateMovieClip
  
• movieclip.beginGradientFill
  

Asi como tambien la API de dibujo de flash.

Previos:

Para comenzar con este tip supondremos los siguiente:

1. Que el fondo de tu película es de color solido, es decir no son ni degradados, ni bitmaps ni nada que se le parezca.
   
2. Que el MC que deseas reflejar ya lo tienes dentro de tu Biblioteca (obvio), y que lo tienes vinculado para Actionscript con el indetificador "original".
   

Dadas estas primeras suposición, empecemos.

PASO 1:

Definiremos una variable que sea igual al color de fondo de la pelicula, como no existe una propiedad que haga eso (al menos no la se) , lo haremos a mano, el código necesario seria el siguiente:

Código :

var fondo = 0xFFFFFF //Suponiendo que el color de fondo sea Blanco

Esta variable nos sera util mas adelante.

PASO 2:

Añadimos al escenario tu MC original, y lo colocamos en cierta posición (x,y)

Código :

this.attachMovie ('original', 'original_mc', _root.getNextHighestDepth()); 
original_mc._x = 10; // modifica este valor por la posicion Horizontal en que deseas aparezca tu MC
original_mc._y = 10; // modifica este valor por la posicion Vertical en que deseas aparezca tu MC

para efecto de este tip utilizare mi avatar como imagen de muestra

PASO 3:

Generamos la imagen de reflejo duplicando el MC original, la reflejamos y la posicionamos debajo del MC original

Código :

original_mc.duplicateMovieClip('reflejo_mc', _root.getNextHighestDepth()); //Duplicamos el MC original
reflejo_mc._yscale = -100; //Giramos el duplicado a manera de escalandolo negativamente
reflejo_mc._x = original_mc._x; //lo colocamos en la misma posición Horizontal que el original,
reflejo_mc._y = original_mc._y + (2*original_mc._height) + 1; //lo colocamos debajo del original, teniendo en cuenta que al escalarla negativamente, el punto de registro a quedado en la esq. inferior izquierda es necesario sumarle el doble del alto original mas 1 pixel

Notese que a la imagen reflejada le aumentamos 1 píxel a su posición Y esto es para que no quede pegada a la imagen original ya que debemos tener en cuanta que en un espejo las imagenes no salen pegadas al objeto original debido al grosor del cristalab, si no hagan la prueba y verán que es cierto, en resumen este píxel adicional es para dar realismo al efecto

PASO 4:

Creamos el degradado que hara el efecto de desvanecimiento de la imagen en el supuesto espejo, para esto utilizamos la propiedad .beginGradientFill:

Código :

this.createEmptyMovieClip('efecto_mc', _root.getNextHighestDepth());
colores = [fondo, fondo]; //Aqui es donde utilizamos la variable definida al principio
tipo = "linear"; // Establecemos el tipo de degradado
alphas = [0, 100]; //Establecemos los niveles de alpha puedes variar el 0 para conseguir diferentes tipos de transparencia inicial
ratios = [0, 150]; //Establecemos la posición inicial de cada color, los valores van de 0 a 255, puedes variar el 150 del ejemplo de aceurdo a tu gusto
matrix = {matrixType:"box", x:0, y:0, w:(original_mc._width), h:(original_mc._height), r:(90/180)*Math.PI}; // definimos la matriz ddel degradado.
efecto_mc.beginGradientFill(tipo, colores, alphas, ratios, matrix, 'pad', 'linearRGB');
efecto_mc.moveTo(0,0); //Empezamos a dibujar el cuadro que contendra el degradado utilizando la API de dibujo
efecto_mc.lineTo(original_mc._width,0); //utilizamos la propiedad _width para obtener el ancho del MC original e igualarla a nuestro efecto espejo
efecto_mc.lineTo(original_mc._width,original_mc._height); //utilizamos la propiedad _height apra obtener la altura del MC original e igualarla a nuestro efecto espejo
efecto_mc.lineTo(0,original_mc._height);
efecto_mc.lineTo(0,0);
efecto_mc.endFill(); //Terminamos el dibujo
efecto_mc._x = original_mc._x; //Posicionamos el efecto en el mismo punto Horizontal del original
efecto_mc._y = original_mc._y + original_mc._height + 1; //Posicionamos el efecto debajo de original mas 1 pixel esto lo coloca directamente encima del reflejo

Como se podrá observar para posicionar el efecto de reflejo no se utilizaron las mismas formulas que para posicionar la imagen reflejada esto debido que al posicionar la imagen reflejada debíamos tener en cuenta que esta había sido girada en base al punto de registro y el efecto de reflejo no había sido girado.

Para entender la creación del fondo degradado, recomiendo leer la ayuda integrada en flash acerca de .beginGradientFill ahi se detalla minuciosamente como se crea un relleno degradado

el resultado final es este:


El codigo completo y sin comentarios seria :

Código :

var fondo = 0xFFFFFF;

this.attachMovie ('original', 'original_mc', _root.getNextHighestDepth());
original_mc._x = 10;
original_mc._y = 10;

original_mc.duplicateMovieClip('reflejo_mc',_root.getNextHighestDepth());
reflejo_mc._yscale = -100;
reflejo_mc._x = original_mc._x;
reflejo_mc._y = original_mc._y + (2*original_mc._height) + 1;

this.createEmptyMovieClip('efecto_mc',_root.getNextHighestDepth());
colores = [fondo, fondo];
tipo = "linear";
alphas = [0, 100];
ratios = [0, 150];
matrix = {matrixType:"box", x:0, y:0, w:(original_mc._width), h:(original_mc._height), r:(90/180)*Math.PI};
efecto_mc.beginGradientFill(tipo, colores, alphas, ratios, matrix, 'pad', 'linearRGB');
efecto_mc.moveTo(0,0);
efecto_mc.lineTo(original_mc._width,0);
efecto_mc.lineTo(original_mc._width,original_mc._height);
efecto_mc.lineTo(0,original_mc._height);
efecto_mc.lineTo(0,0);
efecto_mc.endFill();
efecto_mc._x = original_mc._x;
efecto_mc._y = original_mc._y + original_mc._height + 1;

Espero que este tip les haya sido de mucha ayuda. Hasta la próxima.

 

Tweet