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.
Por Sisco el 18 de Enero de 2007
Por ramiro_o el 18 de Enero de 2007
Se ve como una línea de corte!!
Por lo demas, excelente trabajo!!
Por Teseo el 18 de Enero de 2007
Si movemos a cierta velocidad y no está "cuadrada" la relación entre escala del perlin, dicha velocidad de movimiento y el offset habría corte. Se produce porque al "fundido" del temp no le dá tiempo suficiente a difuminarlo al cabo de varios ciclos se "armonizan" de repente.
Se pueden eliminar del código perfectamente estas lineas:
pt = new flash.geom.Point();
pt.x += .5;
Y el perlin dejarlo así:
img.perlinNoise(60, 50, 5, 9, true, true, 7, true, null);
De ese modo seguirá habiendo evolución, pero menor, y no aparecerán nunca esos "empalmes".
La verdad, debí de postearlo sin ellas. Las proporciones que evitan que eso salga tienen un cálculo algo complejo. Mejoraré el código para incluir su dependencia y más colorido. Esto era un ejemplo simple, aunque funcional, para explicar el método.
Por Freddie el 18 de Enero de 2007
Por Johnny el 18 de Enero de 2007
F :
es lo primero que pensé
Por Teseo el 18 de Enero de 2007
El código entonces quedaría así:
Código :
O buscar una solución intermedia llamando al perlinNoise cada cierto tiempo ( cada 100 frames por ejemplo) si no queremos renunciar totalmente al efecto de evolución.
O hacer capas de desplazamiento para simular la evolución.
etc...
Por roberto el 03 de Febrero de 2007
Por Sneik el 28 de Febrero de 2007
Por brian el 30 de Marzo de 2007
Por brian el 30 de Marzo de 2007
Por Gerard el 02 de Mayo de 2007
dMap = new flash.filters.DisplacementMapFilter(temp,null,8,8,0,0,"wrap");
No se si eso influirá... voy a probarlo
Por CARLOS CAICEDO el 17 de Mayo de 2007
Si es posible enviar el ejemplo, mi correo es [email protected].
Gracias
Nota: Soy nuevo en flash
Por Jaime el 18 de Mayo de 2007
Saludos.-
Por roberto el 23 de Mayo de 2007
Si es posible enviar el ejemplo a [email protected]
Muchas gracias por todo
Por johan D::::::::: el 13 de Junio de 2007
gracias por esos trucos tan excelentes viejo
Por Fabian Manzano el 16 de Junio de 2007
Por Isma el 18 de Junio de 2007
Es cierto este efecto pone el procesador al 100% haber que se puede hacer para optimizar esto, peor la verdad es un efecto buenisimo felicidades Teseo!
Por Teseo el 18 de Junio de 2007
El ejemplo anterior era solo un ejemplo para mostrar la asociación Perlin-Desplazamiento.
Muy pronto lo subiré como añadido aquí mismo.
Por saludos. el 12 de Julio de 2007
Por Lenin Del Castillo C el 16 de Agosto de 2007
Por riveña el 21 de Agosto de 2007
Por riveña el 21 de Agosto de 2007
Gracias
Por ruben el 07 de Diciembre de 2007
Por carlos martinez el 15 de Diciembre de 2007
Por benjamin el 30 de Enero de 2008
Por asael2 el 20 de Febrero de 2008
Por aprendis el 14 de Marzo de 2008
onEnterFrame = function () {
Por MaBoRaK el 18 de Marzo de 2008
Por M el 19 de Marzo de 2008
Mil gracias
Por elvis el 30 de Junio de 2008
Por Raesen el 03 de Septiembre de 2008
Por Teseo el 06 de Septiembre de 2008
Por educoold el 16 de Septiembre de 2008
Por yodepapel el 22 de Septiembre de 2008
Por juan mu;oz el 02 de Diciembre de 2008
Por Friki FlashMan el 07 de Diciembre de 2008
es que cuando importo una imagen con forma redonda me sale un marco y me tapa lo que ai detras, esque no ai alguna barita magica como en el photoshop para borrar lo que no interesa??????????????
Por Friki FlashMan el 07 de Diciembre de 2008
Por Snurffo el 10 de Diciembre de 2008
Por duda el 04 de Febrero de 2009
Por Jano el 18 de Marzo de 2009
Por Jano el 18 de Marzo de 2009
me salen varios errores de ese tipo en la compilacion...ayudenme PLS
Por Alejandra el 17 de Abril de 2009
Por ramon el 26 de Junio de 2009
gracias
Por liliana el 13 de Abril de 2010
Saludos
Por Heiner Chacon el 07 de Julio de 2010
Por Heiner Chacon el 07 de Julio de 2010
Por Jorge Rafael el 20 de Enero de 2011
Por Jota el 07 de Febrero de 2011
Por Mauricio el 28 de Octubre de 2011