Ir al contenido principal

Efecto "Colorear" en Flash

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Hace un par de meses tuve que generar para un banner el efecto de una imagen en tonos de grises que al pasar el mouse encima se vaya "coloreando", este ejercicio me pareció divertido e interesante y por esta razón decidí colocarlo en este blog.

Puedes comenzar a iluminar la imagen de la tortuga en cuanto aparezca.

Para generar este sencillo efecto utilizaremos elementos de: máscaras dinámicas, Sprite, UILoader, además claro de MovieClips y Listeners.

Bueno, pues definamos y acotemos el problema:


  • Permitir que el usuario pueda "colorear" una imagen con el mouse.
  • Se debe mostrar una imagen inicial y una final ( mo importa si son iguales o no ).
  • Las imágenes deben de ser externas al flash para optimizar su tamaño.
  • Cuando el usuario presione el mouse y luego lo mueva sobre la imagen inicial deberá ir mostrando la imagen final.
  • Si el usuario deja de presionar el mouse sobre la imagen, se dejará de "colorear" la imagen final.


Bueno pues comencemos:

Paso 1: Colocar las imágenes.

Para colocar las imágenes utilizaremos un MovieClip y dentro un UILoader, para cargar la imagen; esto para que nos sea más fácil después manipular dichas imágenes y poder agregarles elementos extras como campos de texto, botones, etc.

Generemos entonces un nuevo símbolo MovieClip que llamaremos imagen1, y dentro de él colocaremos un UILoader del tamaño que sea necesario, en esta caso 250x250 pixeles.



Al elemento UILoader le daremos como nombre de instancia imagen, y estaremos utilizando este mismo símbolo tanto para la imagen inicial como para la imagen final. Entonces ya en el escenario colocaremos dos instancias del símbolo imagen1.





A cada una de estas instancias será necesario darles un nombre: foto1 y foto2.


Como estamos usando el mismo símbolo para ambas imágenes sabemos que dentro existe el componente UILoader que llamamos imagen, al cual debemos de darle el dato source para que cargue la imagen deseada.

Para esto utilizaremos el fabuloso lenguaje de Flash: ActionScript 3.0; por lo tanto es muy recomendable crear una capa (layer) especial para el código que se necesitará. A esta capa la llamaremos actions; y seleccionando el primer frame de esa capa abrimos el panel de acciones y escribimos el siguiente código:

foto1.imagen.source = "tortugaColor.jpg";
foto2.imagen.source = "tortugaGrises.jpg";


Y ahora podemos hacer la primera prueba de nuestra aplicación, y debemos ver ambas imagenes cargadas en el escenario.




Ahora debemos ordenar los MoviClips de manera que la imagen final que queremos "esconder" quede arriba de la imagen inicial.


Paso 2: Generar la máscara.


Una vez listas la imágenes, debemos de crear el objeto que funcionará como "pincel", es decir la figura que irá mostrando la imagen final. Para esto usaremos el objeto como máscara.

Cuando se usan máscaras, se pueden ocultar partes de un objeto utilizando otro, en este caso haremos que la máscara vaya cambiando y entonces tendremos una máscara dinámica.

El objeto que será nuestra máscara dinámica será otro MovieClip con la figura que decidamos, en este ejercicio será un círculo.

Debemos, pues crear un nuevo símbolo MovieClip que llamaremos circulo, pero esta vez usaremos las opciones avanzadas para exportarlo también para ActionScript. Esto quiere decir que podré llamar en cualquier momento tantas instancias del objeto como yo necesite tan solo con el nombre del mismo símbolo. Y en el MovieClip dibujamos un pequeño círculo de 20x20 pixeles y lo centramos.


Muy bien ahora ya tenemos todos los ingredientes para hacer el efecto de "colorear", solamente debemos agregar unas líneas de código.


Paso 3: Acciones!!!

Para generar este efecto necesitaremos crear un objeto Sprite que será la máscara (y así le llamaremos) de la imagen final, este Sprite iniciará vacío y se le irán agregando MovieClips circulo, para darle contenido y de esta forma ir mostrando la imagen final.



Después de crear el objeto debemos agregarlo al escenario y asignarlo como máscara del MovieClip foto1, si probamos la película, foto1 no se visualizará.




Debemos entonces agregar un Listener al escenario que detecte con la funcion activarDibujar cuando el usuario solo presione el mouse (no un CLICK); y cuando lo haga se active otro Listener con la función dibujar que detectará cuando el mouse se mueva.


En esta función dibujar será donde crearemos instancias llamadas punto del MovieClip circulo, que se irán agregando al objeto mascara para hacer el efecto de colorear. Cada punto será colocado en la posición del mouse.


Ya casi hemos terminado, solo hace falta generar un último Listener que detecte cuando el mouse se deje de presionar y así interrumpa el efecto.

Y finalmente el código queda:

foto1.imagen.source = "tortugaColor.jpg";
foto2.imagen.source = "tortugaGrises.jpg";

var mascara:Sprite = new Sprite();
addChild(mascara);

foto1.mask = mascara;

stage.addEventListener(MouseEvent.MOUSE_DOWN, activaDibujar);

function activaDibujar (e:MouseEvent) {
stage.addEventListener(MouseEvent.MOUSE_MOVE, dibujar);
}

function dibujar (e:MouseEvent) {

var punto = new circulo();
punto.x = mouseX;
punto.y = mouseY;
mascara.addChild(punto);
}

stage.addEventListener(MouseEvent.MOUSE_UP, desactivaDibujar);

function desactivaDibujar (e:MouseEvent) {

stage.removeEventListener(MouseEvent.MOUSE_MOVE, dibujar);

}




Recordemos que al generar los Listeners con la ayuda de Flash, puede generarnos las primeras líneas de código: import flash.(etc).

Listo!!!!

Aquí encontrarán el archivo fuente (sólo el fla) y aquí el link para ver en acción nuestro efecto.

Muchas gracias y espero haya sido de su agrado. Felices líneas de código!!!

Comentarios

  1. Hola, muy bueno tu tutorial, pero a mi no me sale. crees que me puedas enviar el archivo fla, ya que no está disponible.

    gracias! Mi correo es gilbertoadan@yahoo.com.mx

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Uso de XML con Flash y Actionscript 3.0 / Using XML with Flash and Actionscript 3.0

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados. En el manejo de tecnologías web, existe una muy importante que nos permite organizar y visualizar información, esta tecnología es el XML que significa algo así como Lenguaje de Marcas (ó etiquetas mas bien) Extensible, si quieren conocer un poco más del tema aquí hay un link (español) y aquí otro (inglés) . Una ventaja de usa esta tecnología es que la información que coloquemos es este tipo de archivos se puede usar para visualizarse en diferentes interfaces con diferente tecnología, por ejemplo: un mismo archivo XML nos puede servir para almacenar el inventario de una tienda y que sea visualizado en una página web usando HTML, al mismo tiempo en una aplicación de escritorio usando AIR ( proximamente un post al respecto ) y hasta un archivo swf local, todas estas aplicaciones utilizando el mismo XML de man

Galería de videos AS3

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados. A petición del público (mas bien al amigo Fernando Rojas): una galería de videos! Bueno primero definamos y delimitemos el problema: I. Hacer una galería de videos que sea "fácil" de actualizar II. Que los botones de los videos, tengan una imagen a manera de thumbnail. III. Pare este ejemplo usaremos 4 videos en formato FLV con sus 4 imagenes respectivas. Perfecto, en este ejemplo usaremos el componente FLVPlayback de Flash, que es el reproductor de videos nativo de flash, si desean saber un poco más acerca de este componente lo pueden revisar en este link . Primer Paso: Generar Los Botones. Debemos crear un MovieClip que llamaremos video_btn , que será la base para los botones de los diferentes videos. en este MC, dibujaremos un cuadro con las esquinas redondeadas de 150x120 y agreg