Efectos lago, rio y cascada con BitmapData de Flash 8

Por: Teseo

7 de Febrero del 2007

1401 de clabLevel
Otros artículos de Teseo

50,749 visitas

actionscript

Estos efectos simulan el reflejo de una imagen sobre el agua. De ese modo, puedes crear cualquier imagen y se generarán las ilusiones del reflejo de un lago, del paso de un río o el estar detrás de una cascada. Está basado en la combinación de PerlinNoise con el desplazamiento de mapa de bits. De este modo podemos simular desde un tranquilo lago, hasta aguas torrenciales y cascadas.
En este ejemplo necesitamos solamente la imagen a reflejar vinculada en la biblioteca con el nombre "imagen".

En su forma simple dicho reflejo es uniforme y no presenta profundidad en la distancia. Para dotarle de relieve, hacemos una división de la imagen en tres partes de 1/6, 2/6(1/3) y 3/6(1/2) y aplicamos los desplazamientos y filtros independientemente.
Veamos estos tres ejemplos y la explicación de sus parámetros más significativos.

Efecto lago:

Código :

import flash.display.*;
import flash.geom.*;
import flash.filters.*;
img = BitmapData.loadBitmap("imagen");
w = img.width;
h = img.height;
attachBitmap(img, 1);
createEmptyMovieClip("sal", 0);
sal.attachBitmap(img, 1);
sal._y = 2*img.height;
sal._yscale = -100;
pt1 = new Point();
pt2 = new Point();
pt3 = new Point();
Mx = new Matrix();
ola1 = new BitmapData(w, h/6);
ola2 = new BitmapData(w, h/3);
ola3 = new BitmapData(w, h/2);
dM1 = new DisplacementMapFilter(ola1, new Point(0, 0), null, 4, 0, 20, "clamp");
dM2 = new DisplacementMapFilter(ola2, new Point(0, h/6), null, 4, 0, 50, "clamp");
dM3 = new DisplacementMapFilter(ola3, new Point(0, h/2), null, 4, 0, 120, "clamp");
onEnterFrame = function () {
   pt1.y -= .2;
   pt2.y -= .4;
   pt3.y -= .8;
   ola1.perlinNoise(0, 2, 1, 0, true, true, 4, true, [pt1]);
   ola2.perlinNoise(40, 4, 2, 0, true, true, 4, true, [pt2]);
   ola3.perlinNoise(80, 8, 1, 0, true, true, 4, true, [pt3]);
   sal.filters = [dM1, dM2, dM3];
};

Efecto rio:

Código :

import flash.display.BitmapData;
import flash.geom.*;
import flash.filters.*;
img = BitmapData.loadBitmap("imagen");
attachBitmap(img, 1);
createEmptyMovieClip("sal", 0);
sal.attachBitmap(img, 0);
sal._y = 2*img.height;
sal._yscale = -100;
ola = new BitmapData(img.width, img.height);
pt = new Point();
dM = new DisplacementMapFilter(ola, new Point(), 1, 1, 0, 40, "ignore");
onEnterFrame = function () {
   pt.y -= .3;
   pt.x -= 1.7;
   ola.perlinNoise(20, 4, 1, 0, true, true, 1, true, [pt]);
   sal.filters = [dM];
};

Efecto cascada:

Código :

import flash.display.*;
import flash.geom.*;
import flash.filters.*;
img = BitmapData.loadBitmap("imagen");
w = img.width;
h = img.height;
createEmptyMovieClip("sal", 0);
sal.attachBitmap(img, 1);
pt1 = new Point();
pt2 = new Point();
pt3 = new Point();
ola1 = new BitmapData(w, h/6);
ola2 = new BitmapData(w, 3+h/30);
ola3 = new BitmapData(w, 4*h/5);
dM1 = new DisplacementMapFilter(ola1, new Point(), null, 4, 0, 20, "clamp");
dM2 = new DisplacementMapFilter(ola2, new Point(0, h/6), null, 4, 30, 50, "clamp");
dM3 = new DisplacementMapFilter(ola3, new Point(0, h/5-3), null, 4, 0, 90, "clamp");
onEnterFrame = function () {
   pt1.y -= .4;
   pt2.y -= 2.5;
   pt3.y -= 3;
   ola1.perlinNoise(4, 2, 1, 0, false, true, 4, true, [pt1]);
   ola2.perlinNoise(8, 4, 1, 0, false, true, 4, true, [pt2]);
   ola3.perlinNoise(3, 7, 1, 0, false, true, 4, true, [pt3]);
   sal.filters = [dM3, dM2, dM1];
};

• Efecto de relieve en imagenes con Flash
  
• Efecto de nubes en Flash
  
• Efecto de agua en Flash
  
• Efecto de bandera en imagenes con Flash
  
• Efecto cristal en imagenes con BitmapData en Flash 8

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

Excelentes efectos Teseo!!. Te felicito
Por: XKlibur

esto es mejor que subirte un gif a tu swf
Por: marcioangel_blog

Interesante efecto, se me ocurren varias aplicaciones para ello, gracias por el dato
Por: Aoyama

Gracias! No sabía eso, por eso preguntaba
Por: RattaMono

Me encantan!, me encantan!, no sé para que me pueden servir, pero me gustan mucho!
Gracias de nuevo Te!
Por: Sisco

Gracias, acabo de subir una funcioncita de puzzle para un bitMap cualquiera en el otro post

....La tengo que afinar y añadir alguna cosilla de transiciones para ponerla aquí de tip pero me gusta como funciona por ahora.
Por: Teseo

import flash.display.BitmapData;
import flash.geom.*;
import flash.filters.*;
img = BitmapData.loadBitmap("imagen");
attachBitmap(img, 1);
createEmptyMovieClip("sal", 0);
sal.attachBitmap(img, 0);
sal._y = 2*img.height;
sal._yscale = -100;
ola = new BitmapData(img.width, img.height);
pt = new Point();
dM = new DisplacementMapFilter(ola, new Point(), 1, 1, 0, 40, "ignore");
sal.cacheAsBitmap = true;
setInterval(this, "efectoLago", 100);
efectoLago = function () {
   pt.y -= .3;
   pt.x -= 1.7;
   ola.perlinNoise(20, 4, 1, 0, true, true, 1, true, [pt]);
   sal.filters = [dM];
};

Exactamente Freddie.
Lo mejor forma de implementerlos en una aplicación concreta, (tanto este como los otros efectos que usan desplazamiento+perlin) es con setInterval.
En la corrección que posteé en el efecto de agua para que se detuviera completamente ( ese esel código final que yo uso, no el ejemplo) ya advertía que la mejor manera era con setInterval y así está en ese código.
Además, su uso como función permite manejar el lapso como variable cosa muy util en ciertas ocasiones acelerando o ralentizando el efecto al gusto.
Toy d´acuerdo
Por: Teseo

Todos tus tips son de lujo, espero que sigan llegando

Tienes mucho talento.
Por: DanielSemper

img = BitmapData.loadBitmap("imagen");

img = new BitmapData(efectola._width, efectola._height);
img.draw(efectola);

Hola chikos me llamo raul sabe yo soy nuevo en esto no se nada del scrip nada de nada algunas cosas se un poko de visual basis y las creaciones de variables son parecidasa asi que casi to lo entiendo alguien tiene algun manuel basico de actionscript porfas pasemelo quiero aprender sobre estoy ayudenme mi correo es dark_166@hotmail.com siempre entro a la pagina a ver las animaciones pero cuando me las descargo no se puede abrir no se por que
Por: SoulGothic_blog

Otra cosa amigos, estarie muy bien si estos ejemplos se pudieran tener en flash,fla, asi poder intenderlos un poco mas que en el codigo, muchos de nosotros no entendemos, y lo novatos en la web de CristaLab saludos
Por: Pablo-blog

Matias-blog :

Agradezco a quienes se han tomado la molestia para escribir esto...

Si todos fueran como tú, Matias
Por: Freddie

Buenas Tardes... muy pasado muy volado estos efectos y sencillo al aplicarlo; pero tengo una inquietud:
- Si anexo mas Capas con animaciones, textos, graficos, etc.
Pork que no me las muestra estas Capas, si el efecto de lago esta debajo de estas capas; en el caso de Aplicar este efecto como una fondo o backgrond, para al alguna multimedia.
- O si es mejor o debido hacer load movies?
Agradesco antemano que meatuden enla duda!
Gracias
Por: BIODEMON