|
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.
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.
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.
| 
