Efecto Reflejo en Flash

Hoy vamos a realizar un pequeño ejercicio en el cual realizaremos el efecto de reflejo (en el agua o en cualquier elemento) con Flash, el cual tendrá también la opción de dragueo del objeto original y su efecto en el reflejado, todo esto en menos de 20 líneas de código escrito en Action Script 2.

Para empezar sólo trabajaremos con el primer fotograma pero en varias capas para que todo quede más claro. Tendremos 5 capas según el nivel que tenga en la escena:

Empezamos de abajo arriba:

Agua: Se trata de un rectángulo sin borde, rellenado del degradado de azul para que parezca agua. Este ocupa todo el ancho de la escena y esta situado a 190 en el ejeY.

Orig y Reflejo: Como su bien nombre indica son las capas correspondientes para indicarnos cual es el objeto reflejado y cual el original. Para este caso he realizado un circulo sin borde y lo he convertido en MovieClip uno lo he puesto en la capa orig instanciado con el nombre de pelota_orig_mc y otro en la capa reflejo instanciado como nombre pelota_reflejo_mc.

Linea: No es más que una línea divisoria que nos servirá para separar el «agua del cielo«, esta puesta para saber donde esta el valor del ejeY de corte

Script: En esta capa no tendremos nada, es la costumbre de dejar una capa sólo para la programación para que sea más fácil de encontrar.

Al final la cosa tiene que quedar más o menos así:

Como hemos dicho anteriormente en procedemos a insertar el script para que funcione en la capa de Script. Para empezar nos declararemos unas variables que nos servirán como límites en la función startDrag, doy por supuesto que todos conocéis los parámetros de esta función (ver los otros posts sobre flash). Sólo necesitaremos dos variables ya que los otros limites (Superior e Izquierdo) son 0 por que es el principio de la escena. Las variables vienen dadas por el ancho de la escena menos el ancho de la pelota (ya que sino puede que quede feo ver la pelota fuera de la escena) y la de límite inferior que viene dado por la posición de la línea divisoria que en este caso es 190:

var limiteinf:Number;
var limiteder:Number;

limiteinf=190-pelota_orig_mc._height;
limiteder=550-pelota_orig_mc._width;

Ahora le daremos eventos sobre el objeto pelota original, para que se pueda draguear. Para empezar el dragueo le diremos que empiece cuando el usuario haga onPress sobre él. Y para parar el dragueo cuando suelte el ratón dentro o fuera del objeto onRelease y onReleaseOutside:

pelota_orig_mc.onPress=function(){
startDrag(pelota_orig_mc, false, 0, 0, limiteder, limiteinf);
}

pelota_orig_mc.onRelease=pelota_orig_mc.onReleaseOutside=function(){
stopDrag();
}

Sólo nos queda decirle al objeto reflejado, que haga eso, reflejarse que se mueva inversamente y que a la vez que se aleja de la línea divisoria este pierda visibilidad (alpha), para ello el objeto tendrá un enterFrame donde cambiará sus _y , _x y _alpha.
En el caso de situar el objeto en el ejeX no hay problema es la misma que la del objeto original, podemos sumarle o restarle un poco para darle un efecto de vista fotográfica. En el caso de que se comporte inversamente en el ejeY le deberemos de saber a partir de donde se dibujo (línea divisoria=190), el máximo de _y que llega el objeto original=190 y para acabar restarle a todo esto la _y del objeto original.Esto se saca con un poco de lógica si el objeto original esta en y=0 entonces el objeto reflejado donde tiene que estar pues a partir de 190 más el desplazamiento del objeto original 190 pues 190+190-0. Este mismo planteamiento nos sirve para sacar el alpha si el objeto original esta arriba del todo este tendrá una _y cercana a 0 pues el objetor reflejado estará menos visible y eso como se consigue dándole esa _y como _alpha pero sumándole más o menos 20 unidades para que no desaparezca:

pelota_reflejo_mc.onEnterFrame=function(){
pelota_reflejo_mc._x=pelota_orig_mc._x;
pelota_reflejo_mc._y=190+190-pelota_orig_mc._y;
pelota_reflejo_mc._alpha=pelota_orig_mc._y+15;
}

Bueno con esto lo conseguiriamos.

EFECTO FINAL

 

Bueno podrías pensar pero eso no es una foto es sencillo, bueno pues si queréis insertamos una fotografía con un lago y que se refleje la línea divisoria estará más o menos a la mitad de la imagen pues vamos allá. Importamos una foto del mismo tamaño que la escena y la situamos en una capa nueva justamente bajo la capa que teníamos de línea, movemos la línea hasta situarla justo donde esta la división entre original y reflejo. Recolocamos los objetos pelota cada uno en su sitio hasta conseguir lo siguiente:

Ahora observamos la _y de la barrita que hace de línea (recordad que antes era 190) y nos damos cuenta que ahora vale (en mi caso) 235. Ahora es tan fácil como cambiar donde antes teníamos 190 por 235 y seguidamente borraremos la capa de línea. Bueno un cambio en el calculo del _alpha es que ahora en vez de sumarle 15 le restamos 30 ya que la línea la hemos movido y los cálculos están en base de cómo estaba antes. Y como último para acabar de darle un efecto más realista en las propiedades del objeto reflejado vamos jugando con la mezcla (yo he utilizado diferencia). Y el resultado es el siguiente:

RESULTADO FINAL