Efecto de dibujado animado de una imagen en Flash

En varias páginas he utilizado el efecto de dibujar una foto y luego aparecerla o hacerla visible. Este es un efecto bastante simple y muy vistoso.

Lo primero que haremos es importar una imagen ( Ctrl + r ), luego la seleccionamos y la convertimos en MovieClip ( f8 ). Esta es la imagen que utilizaré para aplicarle el efecto:

Generamos cuatro capas arriba de la capa de la imagen y bloqueamos ésta última.

Ahora haremos lo siguiente:
Trazaremos los contornos de la foto en cuatro modos, dos para horizontales y dos para verticales, yo recomiendo que se haga espaciando entre capas, me refiero a que dibujamos una línea horizontal en la dos, la siguiente en la tres, la siguiente en la dos y así. Hacemos lo mismo con las líneas verticales.

Una vez terminado debe quedarnos el trazo de la foto encima de ésta. Para comprobar si las líneas corresponden con exactitud a la imagen, podemos ocultar la capa para ver bien el trazado.

Un vez hecho esto generaremos una capa encima de cada una de las capas que contienen las líneas para crear las máscaras para el efecto.

Hasta este momento la línea de tiempo nos debe quedar de esta manera:



En el ejemplo nombraremos las capas así:
La que contiene la imagen: foto.
Las que contienen las líneas comenzarán con: Lin.
La H refiere a las lineas y máscaras horizontales y la V a las líneas y máscaras Verticales.
Msk refiere a que contiene la máscara correspondiente a esa capa.

Después crearemos un cuadrado en las capas de máscara y generaremos una interpolación, la cual llevará el cuadro de afuera hacia adentro, combinado las dos horizontales y las dos verticales al mismo tiempo para no sobrecargar el procesador.

Estas irán de la siguiente manera:


Como vemos, de afuera hacia adentro, quedando las interpolacioens así, y en vertical lo mismo, sólo que en sentido vertical.

Acá podemos ver la versión final:



Veamos algunos detalles:

Las capas tienen los fotogramas claves ubicados de acuerdo al orden de aparición: primero los horizontales y después los verticales, lo que se mueve es la máscara, las lineas quedan estáticas.
Las líneas abarcan un poco del efecto de aparición de la imagen para darle continuidad, sin embargo no abarcan al final ,y el efecto de la interpolacion de la foto debe hacerse desde un alfa 0% a alfa 100%, después siguen 4 fotogramas claves, cada uno de los cuales llevará un diferente efecto de brillo siendo el orden así:
el primer fotograma clave: brillo 80%
el segundo fotograma clave: brillo 0%
el tercer fotograma clave: brillo 80%
y por último el cuarto fotograma clave: brillo 0%

y en éste último fotograma puse en las acciones ( f9 ) un stop(); para que ahí se detenga y se aprecie la animación.

Es muy importante trabajar con cada capa individual, lo que yo recomiendo es bloquear todas y desbloquear solamente la que vamos a trabajar para que no movamos otros objetos que no corresponden.

El efecto final queda así:

 

Tweet