Comunidad de diseño web y desarrollo en internet

Efecto de bandera en imagenes con BitmapData en Flash 8

Este efecto crea el movimiento de oscilación sinusoidal y sombreado basándose en una variación del perlinNoise sincronizado con un desplazamiento del mapa de bits. Es decir, hace que una imagen cualquiera que elijas se anime automáticamente como una bandera ondeando. Trabaja con cualquier tipo de imagen y transparencia. Al dibujar (draw) el motivo en en marco, ya le añadimos una matriz para agrandarlo verticalmente lo suficientemente dado que el movimiento de la imagen aumenta el tamaño original.

Código bandera



Coloca el código en el primer keyframe de una pelicula de Flash. Lee con atención los comentarios del código. Explicación abajo.

Código :

/*Importar cualquier imagen (jpg,png,bmp,gif) y vincular en la biblioteca
con nombre: imagen. Ajustar los parámetros de brillo, velocidad y
nº de ondas según gusto. El MC resultante es: bandera.  LISTO */
import flash.display.BitmapData;
import flash.geom.*;
import flash.filters.DisplacementMapFilter;
br = 180;// brillo de 0 a 256;
velo = 10;//velocidad viento (alabeo);
ond = 10;//nº de ondas que se crean (sombra);
img = BitmapData.loadBitmap("imagen");
w = img.width;
h = 4*img.height/3;
marco = new BitmapData(w, h, true, 0);
ola = marco.clone();
marco.draw(img, new Matrix(1, 0, 0, 1, 0, h/7));
marco2 = marco.clone();
createEmptyMovieClip("bandera", this.getNextHighestDepth());
bandera.attachBitmap(marco, 0);
off = new Point();
ond = ond*.16;
velo = velo*.26;
desMap = new DisplacementMapFilter(ola, null, 8, 8, 24, 20, "clamp");
onEnterFrame = function () {
   off.x -= velo*w/50;
   off.y -= velo*w/100;
   ola.perlinNoise(w, 2*h, 1, 0, true, true, 8, true, [offset]);
   marco.perlinNoise(w/ond, h/(ond*2), 1, 0, true, true, 7, true, [off]);
   marco.merge(marco2, marco.rectangle, null, br, br, br, 256);
   bandera.filters = [desMap];
};

También se puede alterar el factor de escala del desplazamiento produciendo efectos más o menos "violentos". Si se aumenta mucho su escala horizontal, habrá que variar en la matriz del draw también el valor horizontal o el efecto aparecerá sesgado.
desMap = new DisplacementMapFilter(ola, null, 8, 8, 24, 20, "clamp");

Tanto este como el resto de efectos de la colección los voy desarrollando y atendiendo en el foro de Flash dentro de este post: ¿Como puedo lograr hacer un efecto de agua?

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate