Efectos en Flash. Efecto linterna con mascaras.

por Julio Laguna - redribera team

1.-Introducción.

Vamos a generar un efecto similar al de enfocar con una linterna en una imagen oscura (de
hecho, completamente negra) con Flash 8 (también para MX2004).
Para ello vamos a usar las mascaras de Flash. En concreto el metodo setMask aplicado a una
imagen.

Lo primero de todo, es crear tres capas en la linea de tiempo principal, al igual que muestra en
la imagen. (Las podeís renombrar a vuestro gusto).

Figura 1.1 - Capas a crear.

La capa imagen contendrá la imagen que queremos iluminar (bueno mostrar parcialmente por
la mascara).
Podemos poner cualquier imagen de cualquier tamaño. Yo he escogido una que he encontrado
en internet, y que he exportado a jpg, y luego importado a la biblioteca de Flash. Tened
cuidado, por que por ejemplo si utilizaís FireWorks (o software similar) y utilizaís el metodo
copiar (desde FireWorks) y Pegar (en Flash), se asume que la imagen es png y el fichero
resultante, ocupa bastante espacio. Por ello es mejor, exportar la imagen y luego importarla a la
biblioteca.
Posteriormente debeís convertir la imagen en un simbolo de tipo pelicula (si no no podremos
aplicarle la mascara con ActionScript). La película resultante, la debeís ubicar en la capa
imagen, y importante que le asigneís un nombre a la instancia creada.
En nuestro caso, a la instancia de la imagen, la hemos llamado luz_mc, si utilizaís otro nombre,
recordad modificarlo en el código ActionScript.

Ahora tenemos que crear la mascara, que servirá como foco de la linterna. Para ello insertamos
un nuevo simbolo (en nuestro caso llamado foco), y en el primer fotograma creamos un circulo
(nosotros lo hemos hecho de 200x200). El nuevo simbolo creado lo ubicamos en la linea de
tiempo principal, en la capa mascara, además al igual que hicimos anteriormente, le debemos
asignar un nombre de instancia.
Nosotros la hemos llamado foco_mc.
A la instancia de foco_mc insertada en la capa mascara, le vamos a aplicar un efecto de
desenfocar, para darle un aspecto de luz de foco mas realista. Desgraciadamente, esto solo es
posible con Flash 8 y solo funciona en Players de la versión 8 y superiores. Cuando usemos un
player inferior, simplemente veremos un circulo que muestra la imagen tal cual, y no con un
aspecto de degradado.
Al clip foco_mc, como deciamos, le aplicamos un filtro de desenfocar, con unos parametros que
nos gusten. Así es como lo hemos dejado nosotros.

Figura 1.2 - Efecto desenfocar sobre el foco.

Para que el efecto funcione como mascara sobre la imagen (luz_mc) que queremos ver, es
importante que tengamos activada la opción Utilizar caché de mapa de bits en tiempo de
ejecución, teniendo seleccionado el clip luz_mc si no no funcionara el efecto como mascara
degradada, y simplemente veremos un circulo.

Con todo esto ya estamos preparados para ver nuestro efecto, ahora solo falta generar un poco
de código ActionScript, para decirle a Flash que foco_mc es la mascara de luz_mc, y para
generar un efecto que en tiempo de ejecución mueva esta luz conforme desplazamos el ratón
por la imagen.

Este es el código ActionScript que teneís que introducir en el primer fotograma 1 de la capa
Acciones.

luz_mc.setMask(foco_mc);
foco_mc.onMouseMove=center;
function center(){
this._x=_xmouse-this._width/2;
this._y=_ymouse-this._height/2;
}

Version para Flash Player 8 y Flash 8.

 Descarga del archivo .fla

Aquí os dejo la versión de fichero .fla para poder abrirlo con Flash MX 2004.

El problema con Flash MX 2004, y con versiones anteriores a Flash Player 8, es que no
podemos aplicar al circulo que actua como mascara el efecto de desenfoque, con lo cual la
mascara actua como un simple circulo sin el efecto de degradado que produciría una luz difusa.
No obstante tampoco queda mal.

Version para Flash Player 6 y 7 y Flash MX 2004.

 Descarga del archivo .fla

Finalmente, comentar, que este es un ejemplo muy sencillo del uso de mascaras. El lector debe
darse cuenta, de que igual que hicimos un circulo para usar como mascara, pudimos haber
hecho un cuadrado, y así mismo que al igual que solo utilizamos un fotograma en la mascara,
pudieramos haber realizado una compleja animación, con la que hubieramos obtenido
resultados muy profesionales.
Probad a realizar algunas modificaciones en el clip llamado foco, y añadir algunos fotogramas
mas variando el ancho y alto del circulo y podreís ver a lo que nos referimos.
Esperamos que este tutorial os haya sido de utilidad.