designweb13

Efectos en Flash. Efecto linterna con mascaras.

Buscando información en la web encontre este tutorial que me parecio interesante para compartir con ustedes y creo sera muy util para todos aquellos quienes estamos comenzando en el mundo del diseño con Flash.

.-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 podes renombrar a tu 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 b

iblioteca 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 r

esultante, la debes ubicar en la capa imagen, y importante que le asignes 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 mascar

a, 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;

}

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

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.

Probar a realizar algunas modificaciones en el clip llamado foco, y añadir algunos fotogramas mas variando el ancho y alto del circulo y podran ver a lo que nos referimos.

Esperamos que este tutorial les haya sido de utilidad.