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?

Por Rafeo el 24 de Enero de 2007
Por MTVL el 24 de Enero de 2007
**Error** Scene=Scene 1, layer=Layer 15, frame=1:Line 2: The class or interface 'flash.display.BitmapData' could not be loaded.
import flash.display.BitmapData;
**Error** Scene=Scene 1, layer=Layer 15, frame=1:Line 4: The class or interface 'flash.filters.DisplacementMapFilter' could not be loaded.
import flash.filters.DisplacementMapFilter;
Total ActionScript Errors: 2 Reported Errors: 2
Por mario el 24 de Enero de 2007
neto507z@yaho.com.mx ó neto507_1@hotmail.com
Por muy bueno eh el 28 de Enero de 2007
Por HernanRivas el 29 de Enero de 2007
MTVL_blog :
**Error** Scene=Scene 1, layer=Layer 15, frame=1:Line 2: The class or interface 'flash.display.BitmapData' could not be loaded.
import flash.display.BitmapData;
**Error** Scene=Scene 1, layer=Layer 15, frame=1:Line 4: The class or interface 'flash.filters.DisplacementMapFilter' could not be loaded.
import flash.filters.DisplacementMapFilter;
Total ActionScript Errors: 2 Reported Errors: 2
Necesitás el Flash 8
Por HernanRivas el 29 de Enero de 2007
mario_blog :
neto507z@yaho.com.mx ó neto507_1@hotmail.com
Ésta clase de preguntas, deben ir en los foros técnicos (Flash y Action Script).
Éste es el foro de Flash
Y éste el de AS
Tu pregunta debe ir en Flash o en el foro de diseño, eso es a tu criterio.
Por hilharris el 29 de Enero de 2007
le agradeceria favor enviarmelo a mi correo landero_juan@hotmail.con ya que no permanesco mucho tiempo en internet
Por Adrian el 02 de Febrero de 2007
Experimenta con los valores del desplazamiento, si el objeto a ondear tiende a cuadrado habrá que igualarlos un poco.
Por DavilaCS el 06 de Febrero de 2007
Por Ana el 06 de Febrero de 2007
Por Ana el 06 de Febrero de 2007
Ana_blog :
NO hay forma de hacerlo en versiones anteriores.
Por José Soto Villarroel el 15 de Febrero de 2007
Gracias por la respuesta
jjsotovilla@hotmail.com
Por Ivan de Santiago el 16 de Febrero de 2007
Ivan de Santiago_blog :
Por Peter el 18 de Febrero de 2007
Venga un saludo. Peter
Por kurtco el 20 de Febrero de 2007
Especificamente creo que no has vinculado correctamente la imagen. Instanciar no es vincular.
Repito, busca en ese post como vincular correctamente una imagen desde la biblioteca.
Por santiago88 el 24 de Febrero de 2007
santiago88_blog :
Por santiago_88 el 02 de Marzo de 2007
y quedo muy bien,
ahora quisiera saber q tengo q hacer para q el movieclip desaparezca en un frame especifico.
gracias de antemano
Por KenJiBT el 05 de Marzo de 2007
danielricardomendez@hotmail.com
Graciasss chauuus
Por el 06 de Marzo de 2007
Por Gustavo Nazer el 13 de Marzo de 2007
www.flacomania.com.ar
flacomania_2007@yahoo.com.ar
gsnazer@hotmail.com
Misiones Argentina
Por Fx el 20 de Marzo de 2007
por cierto que si solo copian y pegan tal vez no les funcione revisen los saltos de lineas (si no sabe que es eso estudiese la ayuda del block de notas)
Teseo, esta bueno el codigo, te enviaré una vercion que no hace nada nuevo pero mejora un poco el rendimiento
santiago88_blog, sí existe una posibilidad, pero es un churro, haz la nimacion en flash 8 y exportala, luego la importas hacia MX, te repito que esto es un churro
Siempre es bienvenida cualquier modificación o mejora.
Y por cierto, desde que puse el post.....
.....A nadie se le ocurrió pinchar en la bandera!?
Por ramiro_o el 21 de Marzo de 2007
Por Alejoo_ooooo el 22 de Marzo de 2007
muchas gracias.
Por hil harris el 29 de Marzo de 2007
Por Jesualdo el 11 de Abril de 2007
Por aledu el 13 de Abril de 2007
Por jesualdo el 23 de Abril de 2007
le agradeceria favor enviarmelo a mi correo jmorantes_27hotmail.com
Por joel_sumath el 27 de Abril de 2007
Si tienen una explicación por favor envienla joel_fox001@hotmail.com
Por jhodian el 07 de Mayo de 2007
Si es eso, sigue estas instrucciones:
1) En la biblioteca pones una imagen llamada digamos "jhodian".
2) Pinchas con ratón derecho sobre su icono en la biblioteca.
3) Pinchas en vinculación en el menú que aparece.
4) En la ventana que sigue: Propiedades de vinculación marcas Exportar para ActionScript , marcará también Exportar en primer fotograma, déjalo marcado. En identificador pon imagen (ese es el nombre que buscará el script para cargarlo en attach). Deja la entrada de Clase AS2 en blanco. pulsa Aceptar. Si todo ha ido bien, en las columnas de la biblioteca verás: nombre, tipo, nº de usos, y en vinculación la palabra imagen.
Por Francisco el 24 de Mayo de 2007
Por Daniel el 31 de Mayo de 2007
Si el amigo que dijo que iba a mandar una versión con mejor rendimiento del script ha solucionado este problema y el problema del brillo sería genial.
Lo que quiero hacer en verdad es algo así como esto (observen los lienzos de los costados) :
http://www.taolasvegas.com/tao.html
La idea es hacer algo muy similar a esos lienzos, y para mi el tema del brillo es importante porque es una imagen más o menos detallada y que si pierde algunas propiedades con las que la saqué del Photoshop no tiene mucha gracia.
Si alguien me puede ayudar sería genial, de antemano gracias.
Daniel.
En el código del ejemplo se deslizó un error que produce lo que tu dices:
la linea:
Código :
debe ser:
Código :
Sorry.
De todos modos te pongo otro código que contiene algunas variaciones para dar efecto metálico, profundidad, etc. Se basa en el blendmode del draw.
Ahora no ajustamos el brillo, pues no usamos el merge. Lo obtendremos del ( o de los) blendmode.
Permite otro tipo de efectos y "curiosidades" al trabajar el threshold y el draw.
El resto es semejante:
Código :
/*Importar cualquier imagen (jpg,png,bmp,gif) y vincular en la biblioteca con nombre: imagen. Ajustar los parámetros de 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; velo = 12;//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,"color",0,0); onEnterFrame = function () { off.x -= velo*w/50; off.y -= velo*w/100; ola.perlinNoise(w, h*2, 1, 0, true, true, 8, true, [off]); ola2= ola.clone(); ola2.threshold(marco, marco.rectangle, null, "<",0xff000000 , 0); marco.draw(marco2); marco.draw(ola2, new Matrix(), null, 8); // es posible añadir uno o mas "draw" con un blendmode distinto para //reforzar el brillo, oscurecer u otro tipo de efectos. Ejemplo: // marco.draw(ola2,new Matrix(), null, 6); bandera.filters = [desMap]; }Tambien recomiendo usar setInterval en lugar de onEnterFrame.
Este es un ejemplo con ese código y sobre fondo oscuro para que veas el brillo.
Por Faraon-System el 08 de Julio de 2007
Por nashita el 09 de Julio de 2007
me explicaría alguien como hacerlo
Por Maxi el 04 de Agosto de 2007
Por natal.mx el 20 de Agosto de 2007
Por ricardo el 30 de Agosto de 2007
Por Ale el 11 de Septiembre de 2007
Por Flash el 28 de Septiembre de 2007
El problema que kiero solucionar es que a pesar que tiene efecto bandera la foto propiamente tal no flamea (es decir que se ven las ondas dentro de la imagen, pero esta no varia sus proporciones a medida que avanza la animacion), no se me ve como el ejemplo de arriba, habiendo cambiado muchos valores del codigo.
felicitaciones por la pagina esta muy buena
Por castell el 03 de Octubre de 2007
tengo problemas me dice que no de ha podido cargar la clase flash.display.BitmapData;
por favor ayudenme
Por Uriel Garcia el 24 de Octubre de 2007
Saludos.
Por Oscar Villar el 26 de Diciembre de 2007
Lo estoy haciendo en flash 8
Me gustaría que me permitieran tener acceso a los archivos en flash del tutorial.
Ojala me respondan pronto.
dejo mi correo
zaxxon30@hotmail.com
Por daniel el 06 de Enero de 2008
am
solo kiero pedirles un favor amke side fvor me pueden enviar unas imagenes con movimiento para poder crear un mensaje sera ocupado pra iuna causa noble por su comprencion gracias mi msn es: danieluraga07@hotmail.com
Por german el 07 de Enero de 2008
gmancito@hotmail.com
Por Leo-Ko el 29 de Enero de 2008
Por andy el 01 de Febrero de 2008
Por REBEL el 02 de Febrero de 2008
Por ElChAcAl el 08 de Febrero de 2008
si pueden subir un ejemplo con el cs3 me alegraria mucho
mi sitio web es este
http://puydi.com/
Por spasmos el 20 de Febrero de 2008
spasmos
Por spasmos el 25 de Febrero de 2008
- marco.draw(img, new Matrix(1, 0, 0, 1, 0, h/7));
Que indican la X y la Y del bitmap.
spasmos
Por Manuel el 27 de Febrero de 2008
de put* madre, pero esk pa investigar
y saber lo k hace cada uno me he tirao
dias, lo k te pido esk los explikes mucho mas, diciendo que hace cada cosa,
por qué, que pasa si no hacemos esto...
etc etc, asi la gente sabra como hacerlo y modificarlo y no dedicarse al borreguismo
Por frida de paraguay el 27 de Marzo de 2008
gracias
Por Para los que no se l el 23 de Abril de 2008
ola.perlinNoise(w, 2*h, 1, 0, true, true, 8, true, [offset]);
por:
ola.perlinNoise(w, 2*h, 1, 0, true, true, 8, true, [off]);
Muchas gracias por este script
Por juliancho el 25 de Abril de 2008
dejo mi mail por si alguien se anima a ayyudarme juliarteaga2@yahoo.es
Por Xavier el 10 de Mayo de 2008
Por Xavier Q el 10 de Mayo de 2008
Por ivangonzzalez el 09 de Junio de 2008
Por ivangonzzalez el 09 de Junio de 2008
Por Bl el 11 de Junio de 2008
Gracias
Por Primus el 28 de Junio de 2008
- marco.draw(img, new Matrix(1, 0, 0, 1, 0, h/7)); modificando como aqui dice el h/7 si modifica el height vi una variable q da vaor a w y h enel script pero no se si no anda o no esta especificada en la variable pues el height si funciona
Por Jul´s el 02 de Julio de 2008
Muchas gracias !!!
Por shariyo el 07 de Agosto de 2008
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 24: Operator '=' must be followed by an operand
off.x -= velo*w/50; off.y -= velo*w/100;
Total ActionScript Errors: 1 Reported Errors: 1
no se que hacer por favor ayuddaaaaaaaaaaaa!!!!!!!!!!!!!!!!!!!
sharon_dagah@hotmail.com
Por Missael el 11 de Agosto de 2008
necesito hacer una galeria
de photos
pero necesito hacer un efecto
aire
ke mueva los objetos ke estan colgando
de una galeria
me podrian ayudar
o darme una URL
dond buscar
se los agradeceria
mucho
gracias
Por cecilia villarruel el 18 de Agosto de 2008
Por Manolo el 31 de Agosto de 2008
Tengo F8 Profesional. He repasado muchas veces todas tus instrucciones y .... Nada.
He leido todos los comentarios del foro .... y nada.
Soy novato.. ¡Ayuda!
Por Manolo el 31 de Agosto de 2008
Tengo escerario de 750 x 550 px
Mi imágen ..... 700 x 500 px
He probado otros tamaños .. y nada.
Gracias por tu atención. Manolo
Por Manolo el 03 de Septiembre de 2008
Finalmente he conseguido que funcione correctamente. Además
he modificado todo el programa
para conseguir una animación mas real. Si alguien tiene algún problema, puedo enviarle el nuevo "fla" que he elaborado y que contiene muchas explicaciones.
galangordillo@ya.com
Por Meyi el 04 de Septiembre de 2008
Por Jairo Mejia el 18 de Septiembre de 2008
Por stevendx el 25 de Septiembre de 2008
Por E.adrian el 23 de Octubre de 2008
sigan asi
cuidense
Por demolition23 el 27 de Octubre de 2008
Os envio esta versión para poder fijar cualquier lado de las banderas. Tiene las explicaciones en el FLA.
La bandera de España es un JPG y la otra es un MovieClip cualquiera creado en el Flash.
Bajar el FLA
En cuanto a paso a dreamweaver: mantener el tamaño y funcionará.
Las ondas se cambian en el desplazamiento de mapa y en el perlin.
Por patiti el 29 de Octubre de 2008
Por demolition23 el 29 de Octubre de 2008
Por Adriana el 05 de Diciembre de 2008
Por furrisima el 09 de Diciembre de 2008
Por franco el 10 de Diciembre de 2008
Por angy el 28 de Enero de 2009
Por arturog el 18 de Febrero de 2009
muchas gracias y espero alguna ayuda ya que me es algo urgente.
buen dia a todos !
Por ANTONIO CORDOVA el 09 de Marzo de 2009
Por Misael el 09 de Abril de 2009
Para los que no les funciona:
http://www.cristalab.com/tips/efecto-cristal-en-imagenes-con-bitmapdata-en-flash-8-c33976l
Chicos, Google no muerde, si no saben vincular una imagen busquen primero ahi, no esperen recibir todo en bandeja de plata.
Por marisol el 28 de Mayo de 2009
Por jhos el 20 de Junio de 2009
Por witchwill el 15 de Julio de 2009
Por Alejandro_Amateur el 30 de Julio de 2009
Por jaime - blog el 18 de Agosto de 2009
Por noxivodrums el 19 de Agosto de 2009
Por noxivodrums el 19 de Agosto de 2009
Por noxivodrums el 19 de Agosto de 2009
marco.draw(img, new Matrix(1, 0, 0, 1, 80, h/10)); pero ahora la imagen que esta dentro se me a corrio y no encuentro donde arreglarlo......me pueden ayudar?
Por fiki el 08 de Septiembre de 2009
me podrian ayudar? cuando subo el swf a mi web solo se ve el efecto del brillo
no ondea... me urge
Por jesica1234 el 20 de Octubre de 2009
Por paul el 28 de Octubre de 2009
// Action script...
// [Action in Frame 1]
a = 1;
carga = 1;
br = 155;
s = 5;
createEmptyMovieClip("efecto", this.getNextHighestDepth());
offset = new flash.geom.Point();
onEnterFrame = function ()
{
if (carga == -1)
{
img = flash.display.BitmapData.loadBitmap("imagenp");
marco.draw(img, new flash.geom.Matrix(1, 0, 0, 1, 0, h / 7));
marco2 = marco.clone();
} // end if
if (carga == 1)
{
img = flash.display.BitmapData.loadBitmap("imagenc");
w = img.width;
h = 4 * img.height / 3;
marco = new flash.display.BitmapData(w, h, true, 0);
ola = marco.clone();
marco.draw(img, new flash.geom.Matrix(1, 0, 0, 1, 0, h / 7));
marco2 = marco.clone();
efecto.attachBitmap(marco, 0);
desMap = new flash.filters.DisplacementMapFilter(ola, new flash.geom.Point(), 8, 8, 24, 20, "clamp");
} // end if
carga = 0;
if (br == 0)
{
carga = a;
s = 5;
} // end if
br = br + s * (br != 160);
offset.x = offset.x - 5.600000E+000 * w / 100;
offset.y = offset.y - 2.600000E+000 * w / 100;
ola.perlinNoise(w, 2 * h, 1, 0, true, true, 8, true, [offset]);
marco.perlinNoise(w / 1.500000E+000, h / 3, 1, 0, true, true, 7, true, [offset]);
marco.merge(marco2, new flash.geom.Rectangle(0, 0, w, h), new flash.geom.Point(), br, br, br, 256);
efecto.filters = [desMap];
};
this.onMouseDown = function ()
{
a = -a;
s = -5;
br = 155;
};
Por paul el 28 de Octubre de 2009
Por francisco el 03 de Noviembre de 2009
Por Fernando Quiroz Ahum el 30 de Noviembre de 2009
Por katty el 11 de Enero de 2010
Por Pablo el 11 de Febrero de 2010
Quisiera saber si me pueden ayudar en lo siguiente. Puedo realizar el efecto y modificarlo a gusto, pero el efecto de ondulación sólo se ve en el programa flash. Cuando veo la película swf en cualquier otro reproductor, el efecto ondulatorio no aparece.
¿Cuál puede ser la causa?
Por Rafael-blog el 28 de Febrero de 2010
Por samuel mora el 09 de Marzo de 2010
Por cata el 12 de Junio de 2010
Por Carlos Carpio el 08 de Octubre de 2010
Gracias por todo
Por AMAIRANNY el 27 de Octubre de 2010
Por MARIANA el 02 de Noviembre de 2010
Por nelson el 18 de Marzo de 2011
ojala puedas ayudarme lo necesito mucho, por favor
Por romerriera el 01 de Mayo de 2011
Por Walter el 17 de Mayo de 2011
¿Hay alguna versión actualizada del código que pueda ser utilizada en Flash CS5?
Por carlos el 03 de Julio de 2011
Por carlos el 03 de Julio de 2011
Por alejandro el 22 de Marzo de 2012
1 /*Importar cualquier imagen (jpg,png,bmp,gif) y vincular en la biblioteca
2 con nombre: imagen. Ajustar los parámetros de brillo, velocidad y
3 nº de ondas según gusto. El MC resultante es: bandera. LISTO */
4 import flash.display.BitmapData;
5 import flash.geom.*;
6 import flash.filters.DisplacementMapFilter;
7 br = 180;// brillo de 0 a 256;
8 velo = 10;//velocidad viento (alabeo);
9 ond = 10;//nº de ondas que se crean (sombra);
10 img = BitmapData.loadBitmap("imagen");
11 w = img.width;
12 h = 4*img.height/3;
13 marco = new BitmapData(w, h, true, 0);
14 ola = marco.clone();
15 marco.draw(img, new Matrix(1, 0, 0, 1, 0, h/7));
16 marco2 = marco.clone();
17 createEmptyMovieClip("bandera", this.getNextHighestDepth());
18 bandera.attachBitmap(marco, 0);
19 off = new Point();
20 ond = ond*.16;
21 velo = velo*.26;
22 desMap = new DisplacementMapFilter(ola, null, 8, 8, 24, 20, "clamp");
23 onEnterFrame = function () {
24 off.x -= velo*w/50;
25 off.y -= velo*w/100;
26 ola.perlinNoise(w, 2*h, 1, 0, true, true, 8, true, [offset]);
27 marco.perlinNoise(w/ond, h/(ond*2), 1, 0, true, true, 7, true, [off]);
28 marco.merge(marco2, marco.rectangle, null, br, br, br, 256);
29 bandera.filters = [desMap];
30 };
los erros son los siguientes!
1:Línea 21: La declaración debe aparecer dentro del controlador on/onClipEvent
velo = velo*.26;
**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 22: La declaración debe aparecer dentro del controlador on/onClipEvent
desMap = new DisplacementMapFilter(ola, null, 8, 8, 24, 20, "clamp");
**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 23: La declaración debe aparecer dentro del controlador on/onClipEvent
onEnterFrame = function () {
Total de errores de ActionScript: 20 Errores comunicados: 20