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