Tutorial FLASH - Transiciones con efecto disolver píxeles en Flash.

Versión Flash: 8 y superiores   |   Compatible con ActionScript 2.0   |   Nivel: Medio   |   Hits: 156514

En este tutorial vamos a aprender a hacer transiciones entre elementos gráficos con el conocido efecto de disolución de píxeles. En nuestro caso vamos a hacer la transición entre dos imágenes, pero perfectamente se puede aplicar a cualquier elemento gráfico como clips o vídeos.

En otras aplicaciones como Macromedia Director, este tipo de transiciones vienen incluidas entre sus efectos predeterminados y para crearlas simplemente tenemos que ajustar unos parámetros. Flash, hasta la fecha, no dispone de algo similar así que nos tendremos que buscar la vida con ActionScript para aplicar este efecto en nuestras películas.

Antes de nada, vamos a explicar el mecanismo.

Vamos a aplicar una máscara compuesta por una rejilla de 4 x 4 píxeles a una imagen, cada celda es un clip de película que podemos controlar de manera independiente. En el inicio de la animación, la máscara muestra la imagen entera, es decir, la rejilla está entera. A cada una de las celdas de la rejilla, le damos la orden de desaparecer pasado un periodo de tiempo aleatorio y como cada celda que desaparece nos muestra la imagen que hay debajo de la imagen enmascarada, se produce el efecto. Cuando no queda ninguna celda la imagen de abajo se ve entera y la de arriba enmascarada a desaparecido por completo.

COMO HACERLO.

Partimos de las dos imágenes que serán inicio y final de la transición. Colocamos las imágenes en la misma posición en distintas capas, de modo que esté una encima de la otra. Para que el efecto quede bien, las dos imágenes deben tener las mismas dimensiones.

La imagen de la capa superior es la que se va a "disolver" y dejará visible la de la capa inferior.

Una vez que tengamos situadas las imágenes convertimos en clip de película la situada en la capa superior con origen en la esquina superior izquierda, después le asignamos como nombre de instancia inicio_mc.

Creamos un rectángulo de 4 x 4 píxeles y lo convertimos en clip con el origen en la esquina superior izquierda, lo borramos del escenario y en la librería cambiamos sus opciones de vinculación, le asignamos el identificador celdita y marcamos las opciones Exportar en para ActionScript y Exportar en primer fotograma.

El siguiente paso es definir una función crearRejilla, que nos creará la máscara de rejilla para enmascarar al clip que pasemos como parámetro.

function crearRejilla(enmascarado_mc:MovieClip) {
// tiempo_minimo-> espacio minimo en milisegundos en que la transición empieza
var tiempo_minimo:Number = 500;
// duracion máxima de la transicion en milisegundos
var duracion_transicion:Number = 500;
// creo el clip que enmascará inicio_mc
var maskara:MovieClip = this.createEmptyMovieClip("maskara_mc", 1);
// recoloco en la misma posicion que el clip
maskara._x = enmascarado_mc._x;
maskara._y = enmascarado_mc._y;
// convierto maskara en la mascara del clip
enmascarado_mc.setMask(maskara);
// creo la rejilla
for (var i = 0; i<enmascarado_mc._width; i += 4) {
for (var j = 0; j<enmascarado_mc._height; j += 4) {
// creo un objeto para asignarle propiedades a cada clip de las celdas de la rejilla
var posicion = new Object();
// temporizador-> tiempo que tarda en disolverse cada celda una vez que ha sido creada,
// es un valor entre tiempo_minimo y tiempo_minimo+duracion_transicion
// (ver código dentro clip celda)
posicion.temporizador = tiempo_minimo+Math.ceil(Math.random()*duracion_transicion);
posicion._x = i;
posicion._y = j;
// creo la celda
maskara.attachMovie("celdita", "celda"+i+"_"+j, maskara.getNextHighestDepth(), posicion);
}
}
}

Con esto creamos la máscara de rejilla con sus celdas, pero todavía falta el código que va a utilizar la variable temporizador que hemos definido para cada celda y que es la que indica cuando desaparece cada celda.

Hacemos doble clic en la librería sobre el clip celda para pasar al modo de edición interna. En el primer fotograma podemos este código:

function quitar() {
clearInterval(quitarInterval);
this.removeMovieClip();
}
var quitarInterval = setInterval(this, "quitar", temporizador);
stop();

Con esto lo que hacemos es ejecutar la función quitar, que elimina la celda, una vez que ha transcurrido la cantidad de milisegundos almacenada en temporizador desde que se creó la celda.

Sobre la base de este ejemplo podéis hacer vuestra variaciones para crear nuevos efectos con máscaras. Además, tened en cuenta que la reproducción del efecto es totalmente aleatoria.

NOTA: Si la imagen a enmascarar es muy grande os recomendamos el uso de celdas de mayor tamaño, ya que se pueden experimentar problemas de rendimiento durante la reproducción, especialmente en equipos antiguos.

Tenéis disponible para la descarga el .fla de este ejemplo. pixelTrans.fla

Tutoriales Flash relacionados

Efecto de sobreexposición de imágenes en Flash.