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.

Artículos Relacionados

• Cambiar centro de rotación de un Movieclip en ActionScript 2
• Problemas de carga con Loader y ScrollPane en Flash
• Añadir a un MovieClip un efecto de espejo con Actionscript 2

actionscript

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario