Comunidad de diseño web y desarrollo en internet online

Efecto de nubes con la clase BitmapData Flash 8

Este pequeño código no necesita ninguna imagen para trabajar. Crea un MovieClip que llamaremos nubes, le asocia un BitMap y genera las formas y el movimiento.
Además de los movimientos de desplazamiento en ambos ejes, modifica sutilmente la forma de las nubes (evolución) dotando al efecto de mayor realismo. Le he añadido al ejemplo una casita por delante para darle una referencia y un poco de vistosidad.

Así se vería el efecto. Las nubes son 100% generadas por Actionscript.



Para insertarlo en nuestra película, sólo debemos colocar el siguiente código en el primer keyframe (Explicación después del código)

Código :

createEmptyMovieClip("nubes", 0);
img = new flash.display.BitmapData(400, 200);
img2 = img.clone();
temp = img.clone();
nubes.attachBitmap(img, 0);
nubes._xscale = 250;
nubes._yscale = 150;
pt = new flash.geom.Point();
dMap = new flash.filters.DisplacementMapFilter(img, null, 8, 8, 0, 0, "warp");
onEnterFrame = function () {
   pt.x += .5;
   dMap.scaleX -= .8;
   dMap.scaleY -= -.4;
   img.perlinNoise(60, 50, 5, 9, true, true, 7, true, [pt]);
   img.merge(img2, img.rectangle, null, 20, 23, 215);
   temp.copyPixels(img, img.rectangle, null);
   img.applyFilter(temp, img.rectangle, null, dMap);
};
Las variables principales para cambiar son:

dMap.scaleX -= .8; dMap.scaleY -= -.4;
La fuerza del "viento" en ambos ejes. Esta variables también dependen del ajuste de las escalas.

pt.x += 5;
Es el offset del perlinNoise para la primera octava, se pueden añadir mas puntos a la matriz para cada octava, pero uno es suficiente. Tiene un valor algo crítico pues si se "desincroniza" con el desplazamiento puede aparecer un "corte" en el movimiento. Entre .1 y .7 no dará problemas a escalas normales. También se puede eliminar la instrucción si dá problemas sin mayores consecuencias y colocando un null en su parámetro del perlinNoise. Su trabajo es el movimiento interno de las nubes (evolución) fuera del desplazamiento.

img.perlinNoise(60,50,5,9, true,true,7,true,[pt]);
Son los valores de alargamiento de las "nubes", junto con el cambio de escala del moviclip dan la forma. El valor 5 es el número de octavas, Menos valor, mas difuminado. El valor 9 puede ser cualquiera ya que es la semilla aleatoria.

img.merge(img2,img.rectangle,null,20,23,215);
Los valores RGB del cielo, he omitido el alpha por que es por donde trabaja el "warp" del desplazamiento y mejor no tocarlo.

El tamaño del bitMap y la escala de las nubes se ajustan según la necesidad de aplicación. Se pueden añadir mas efectos de color y sombras duplicando el merge con otros valores o también con transformaciones de color.

¿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

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

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