Efectos en Flash. Efecto linterna con mascaras.

por redribera - redribera team

1.-Introduccin.
Vamos a generar un efecto similar al de enfocar con una linterna en una imagen oscura (de
hecho,

completamente

negra)

con

Flash

(tambin

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 podes 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 tamao. 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 utilizas FireWorks (o software similar) y utilizas 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 debes convertir la imagen en un simbolo de tipo pelicula (si no no podremos
aplicarle la mascara con ActionScript). La pelcula resultante, la debes ubicar en la
capa imagen,

importante

que

le

asignes

un

nombre

la

instancia

creada.

En nuestro caso, a la instancia de la imagen, la hemos llamado luz_mc, si utilizas otro nombre,
recordad modificarlo en el cdigo 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, adems al igual que hicimos anteriormente, le debemos
asignar
Nosotros

un

nombre
la

de
hemos

instancia.
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 versin 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 opcin Utilizar cach de mapa de bits en tiempo de
ejecucin, 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 cdigo ActionScript, para decirle a Flash que foco_mc es la mascara de luz_mc, y para
generar un efecto que en tiempo de ejecucin mueva esta luz conforme desplazamos el ratn
por la imagen.
Este es el cdigo ActionScript que tenes 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;
}

2 EJEMPLO
Aqu os dejo la versin 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 producira una luz difusa.
No obstante tampoco queda mal.
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 animacin, con la que hubieramos obtenido
resultados

muy

profesionales.

Probad a realizar algunas modificaciones en el clip llamado foco, y aadir algunos fotogramas
mas variando el ancho y alto del circulo y podres ver a lo que nos referimos.
Esperamos que este tutorial os haya sido de utilidad.

3 EJEMPO

Crear un banner utilizando mscaras en Flash CS6

Resultado final:

Crear un nuevo documento ActionScript 3.0

Importar una imagen (Ctrl + R) y ponerlo como fondo

Crear un nuevo smbolo de tipo clip de pelcula (Ctrl + F8) llamarla por ejemplo: fotos

Dentro del smbolo en la capa 1 lo renombramos por Foto 1, importamos otra imagen en esta
misma capa.

Crear otra capa llamada mscara y en ella dibujar el siguiente grafico a base de rectngulos

Selecciona todos los rectngulos azules y convertirlo en un smbolo (F8) llamado MiMascara
Ubicar los objetos de esta forma

Crear fotogramas claves (F6) en el frama 25 de en ambas capas, con la tecla direccional mover
hacia la izquierda el smbolo MiMascara hasta que el smbolo azul cubra por completo la
imagen de la capa Foto 1

Crear interpolacin clsica (clic derecho sobre cualquier fotograma de la capa mascara)
Luego clic derecho la capa mascara y seleccionar Mscara

Al final debe quedar as:

Crear 2 capas ms: una llamada Foto 2 y otra Mascara 2, en ambas capas,
primero se debe insertar fotogramas vacos en los las frames 26, luego
importar la imagen 2 (en la capa imagen 2) y en la capa mascara 2 arrastrar
de la biblioteca el smbolo MiMascara, pueden invertir la direccin de la
mscara (Modificar / Transformar / voltear horizontalmente) y luego realizar
los mismos pasos anteriores

Debe ir quedando asitambin aadir ms fotogramas claves (F6) hasta el 50 en la capa foto
1

 y asi pueden ir aadiendo las fotos que sean necesarias.

Por ultimo volver al escenario, de la biblioteca arrastrar el smbolo Fotos,
cambiar la velocidad de los fotogramas por segundo si fuera requerido
y por ultimo presionar Ctrl + Enter.

Bueno eso es todo, espero le haya agradado este pequeo tutorial. Hasta la prxima