¿Como puedo lograr hacer un efecto de agua?

hola a todos un saludo,

Si alguien sabe como realizar un efecto de agua, algo asi de al pasar el mouse sobre un boton o sobre el fondo que se note el cambio, me lo podria proporcionar la forma, muchas gracias

Te recomiendo usar el buscador, el es tu amigo y te podra aclarar muchas cosas

hola quieres mira no se si sea algo asi lo que quieras no se si hayas trabajado ya en flash?
primero elige un rectangulo primero ve a color mixer o mezcla de colores y elige la opcion efecto lineal y dale efecto de relleno lineal abajo hay una pestaña has otras hay una al principio dale este color #000000 y luego has otra enseguida con este color #6F6F6F y luego otra en la ultima con este color #222222 y atras una ultima pestaña con este color #7B7B7B primero has esto no se si me explique y luego si supiste hacer esto luego te mando el efecto de agua dime si no entendiste para explicarlo mejor

Otro "comecomas". C y V y a mi colección privada.

yo si entendi!! me podrias mandar lo del efecto?

luego convierto a simbolo el rectangulo (convert simbol) en boton editamos el simbolo con doble clik le damos f6 hay viene el efecto en la primera pestaña la cambiamos en el color #050514 la segunda este color #E3EAF9 la siguiente #FFFFFF y la ultima #050A2E y y luego copea el frame 1 al frame 3 y ya espero que asi era el efecto que quisieran

ayukawa escribió:

Pues uno sencillo.
Solo este código y una imagen (BMP, JPG...etc..) en la biblioteca con vinculación "imagen" y listo

Código :

import flash.display.BitmapData; 
import flash.geom.*; 
import flash.filters.ConvolutionFilter;
import flash.filters.DisplacementMapFilter;
fondo = BitmapData.loadBitmap("imagen");
anc= fondo.width; alt =fondo.height;
sal = new BitmapData(anc/2,alt/2, false, 128);
sal1 = sal2 = new BitmapData(anc,alt, false,0);
ori = acum = new BitmapData(anc/2,alt/2, false,128);
Mx = new Matrix(); Mx.scale(2,2);
ola = new ConvolutionFilter(3,3,[1,1,1,1,1,1,1,1,1],9,0);
ade = new ColorTransform(0,0,0.996,1,0,0,2,0);
agua = new DisplacementMapFilter(sal2,new Point(),4,4,48,48,"ignore");
attachBitmap(sal2,0);
onMouseDown  = onMouseUp  = function (){pul = !pul};
onEnterFrame = function (){
   if (pul){
        XM = _xmouse / 2; YM = _ymouse / 2;
        ori.setPixel(XM+1,YM,0); ori.setPixel(XM-1,YM,0);
        ori.setPixel(XM,YM+1,0); ori.setPixel(XM,YM-1,0);
    } 
   sal.applyFilter(ori,new Rectangle(0, 0, anc/2,alt/2),new Point(),ola);
   sal.draw(sal,new Matrix(),null,"add");
   sal.draw(acum,new Matrix(),null,"difference");
    sal.draw(sal, new Matrix(),ade);
    sal1.draw(sal,Mx,null,null,null,true);
    sal2.applyFilter(fondo,new Rectangle(0,0,anc,alt), new Point(),agua);
    acum = ori; ori = sal.clone();
}

Ejemplo: CLICK Y MOVER



El mismo código afinado un poco más:

Código :

import flash.display.BitmapData;
import flash.geom.*;
fondo = BitmapData.loadBitmap("imagen");
w= fondo.width; h =fondo.height; Pt= new Point();
sal = new BitmapData(w/2,h/2); sal1 = sal2 = new BitmapData(w,h);
ori = acum = new BitmapData(w/2,h/2, false,128); attachBitmap(sal2,0);
Mx = new Matrix(); Mx.scale(2,2); Nx = new Matrix();
ola = new flash.filters.ConvolutionFilter(3,3,[0,1,0,1,0,1,0,1,0],4,0);
ade = new ColorTransform(0,0,0.996,1,0,0,2,0);
agua = new flash.filters.DisplacementMapFilter(sal2,Pt,4,4,48,48);
onMouseDown = onMouseUp = function (){pul = !pul};
onEnterFrame = function (){
  if (pul){ori.setPixel(_xmouse/2,_ymouse/2,0)} 
  sal.applyFilter(ori,new Rectangle(0,0,w/2,h/2),Pt,ola);
  sal.draw(sal,Nx,null,"add"); sal.draw(acum,Nx,null,"difference");
  sal.draw(sal,Nx,ade); sal1.draw(sal,Mx,null,null,null,true);
  sal2.applyFilter(fondo,new Rectangle(0,0,w,h),Pt,agua);
  acum = ori; ori = sal.clone();
}

Jiuu.. azul-gay... muy bueno... yo andaba buscando algo parecido... bueno no lo busque... gracias.

woww!! Cheapeau!!
Joer lo que se puede conseguir con el código!!
impresionante azul-gay-ilusion!

Unas explicaciones para el código :

Si se quiere inclinar las olas, modificar los parámetros de la matriz Mx b y c :
añadiendo Mx.b= .5 : Mx.c= .5; ( o la inclinación y desplazamiento (tx,ty) necesaria para " charcos")
Nota: postearé aquí un añadido con la detección de formas para que las olas "mueran o reboten" en una forma-borde cualquiera . Es el Principio de Huygens en actionscript.

La densidad(licuosidad) viene definida en el DisplacementMapFilter, 48 es normal, mas bajo es licuado y mas alto -sobre 256- se convierte en aceitoso (líquidos densos)

El "generador" de pixels se puede cambiar por una linea ( efectos de olas en la orilla del mar)
ori.setPixel(XM+1,YM,0); ori.setPixel(XM-1,YM,0);
ori.setPixel(XM,YM+1,0); ori.setPixel(XM,YM-1,0);

cambiar a:
for (var n=-20; n<20; n++{
ori.setPixel(XM+n,YM,0);
}
o usar una entrada random para el valor de n.

El valor .996 en ColorTransform es bastante crítico, una milesima más y las olas no pararán nunca ( util a veces) aunque también depende de la licuosidad (es un ajuste tangencial) Si se varia la licuosidad a más denso , bajar ese valor a .994

El control de mouse es "gemelo" y se me olvidó resumirlo en una sola linea así:
onMouseDown = onMouseUp = function (){pul = !pul};

Y , para avispados: un efecto de nubes............es lo mismo pero con un generados de pixel aleatorio y variando la "ola"

....por el estoy desperdiciando mi vida!!!!

no me importan tus inclinaciones cromaticas,

Teseo, es exelente tu solución, no te parece que podrías juntar los dos post y hacer un pequeño tutorial.

Es muy explicativo, yo ni me imaginaba que se podía controlar así el bitMap con los nuevos objetos de Flash 8.

Estuve probando el codigo y pues me salen estos errorcillos, si pudieran ayudarme. Si no pues tranquis, que no es de urgencia tampoco.

Símbolo=1, Capa=Capa 1, Fotograma=1: Línea 3: Se espera ';'
import flash.filters.ConvolutionFilter;
Símbolo=1, Capa=Capa 1, Fotograma=1: Línea 4: Se espera ';'
import flash.filters.DisplacementMapFilter;

De todas maneras se ve del carajo ese efecto, gracias Teseo por compartirlo

OraLe desde Hace tiempo buskava este Efecto
y solo konseguia kosas No muy buenas

pero Otra kosa No le entiendo Ni Maiz aL Coodigo
Ceria Mucho pedir ke Pusieran el FLA Amigos :

Bueno un sAludin

Ayukawa :
Es para Flash 8
Aunque es posible que no reconozca el comodín " * ", me gustaría saber en qué versión de Flash trabajas.
Prueba una de estas 2 cosas:
Pon la línea de código

import flash.geom.*;

como la última linea de los import y si te sigue dando fallo ( ahora en la linea siguiente) cambia esa linea por estas:

import flash.geom.Rectangle;
import flash.geom.Point;
import flash.geom.Transform;
import flash.geom.ColorTransform;

_drAke_:
Qué FLA? Es simplemente ese código en acciones primer frame y en la biblioteca una imagen con vinculación: (exportar para actionscript y en primer frame) con nombre: imagen. Nada más.

Pués no le veo ningún problema, ya lo hice y funciona a la perfección

Dale click!





[ descargar ]

El efecto es genial esta estupendo pero a mi lo que me gustaria es que actuara en vez de cuando pincho y arastro simplemente cuando paso por encima con el rato es decir sin tener que pinchar.
He cambiado en mouse up y down pero no he dao con la tecla,podriais decirme como hacerlo.

Gracias

este trozo:

Código :

onMouseDown  =  onMouseUp = function (){pul = !pul};
onEnterFrame = function (){
   if (pul){
        XM = _xmouse / 2; YM = _ymouse / 2;
        ori.setPixel(XM+1,YM,0); ori.setPixel(XM-1,YM,0);
        ori.setPixel(XM,YM+1,0); ori.setPixel(XM,YM-1,0);
    } 

pasaria a ser solamente esto:

Código :

onEnterFrame = function (){
  XM = _xmouse / 2; YM = _ymouse / 2;
 ori.setPixel(XM+1,YM,0); ori.setPixel(XM-1,YM,0);
 ori.setPixel(XM,YM+1,0); ori.setPixel(XM,YM-1,0);

y si quieres que "llueva" sería cambiarlo por:

Código :

onEnterFrame = function (){
 if (random(100)<20){
      XM = random(anc)/2 ; YM = random(alt)/2;
        ori.setPixel(XM+1,YM,0); ori.setPixel(XM-1,YM,0);
        ori.setPixel(XM,YM+1,0); ori.setPixel(XM,YM-1,0);
}

el valor 20 se puede cambiar desde 1 "comienza a llover" a 100 para "chaparrones"

Teseo, estoy trabajando en flash mx, no se si 2004 o 2005 (tengo entendido que estan estas dos versiones pero no se cual es cual), hice lo que escribiste, siguiò el fallo, he aqui como quedo el codigo:

Código :

import flash.display.BitmapData;
import flash.filters.ConvolutionFilter;
import flash.filters.DisplacementMapFilter;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.geom.Transform;
import flash.geom.ColorTransform;
fondo = BitmapData.loadBitmap("imagen");
anc= fondo.width; alt =fondo.height;
sal = new BitmapData(anc/2,alt/2, false, 128);
sal1 = sal2 = new BitmapData(anc,alt, false,0);
ori = acum = new BitmapData(anc/2,alt/2, false,128);
Mx = new Matrix(); Mx.scale(2,2);
ola = new ConvolutionFilter(3,3,[1,1,1,1,1,1,1,1,1],9,0);
ade = new ColorTransform(0,0,0.996,1,0,0,2,0);
agua = new DisplacementMapFilter(sal2,new Point(),4,4,48,48,"ignore");
attachBitmap(sal2,0);
onMouseDown  = function (){pul = !pul};
onMouseUp    = function (){pul = !pul};
onEnterFrame = function (){
   if (pul){
      XM = _xmouse / 2; YM = _ymouse / 2;
      ori.setPixel(XM+1,YM,0); ori.setPixel(XM-1,YM,0);
      ori.setPixel(XM,YM+1,0); ori.setPixel(XM,YM-1,0);
   }
sal.applyFilter(ori,new Rectangle(0, 0, anc/2,alt/2),new Point(),ola);
sal.draw(sal,new Matrix(),null,"add");
sal.draw(acum,new Matrix(),null,"difference");
sal.draw(sal, new Matrix(),ade);
sal1.draw(sal,Mx,null,null,null,true);
sal2.applyFilter(fondo,new Rectangle(0,0,anc,alt), new Point(),agua);
acum = ori; ori = sal.clone();
}

y he aqui los errores que me salen



Sera que en este flash el efecto no funciona?

Ya lo puse antes.........solo funciona en Flash 8. Sorry.

bueeee... se hizo lo que se pudo jeje, de todas maneras gracias

Increible, quien rayos es teseo.
fantastico el efecto.

Donde puedo conseguir un tutorial para el manejo de bitmapData.?

tengo una pregunta, este efecto es muy bueno, pero alguien sabe como hacer un efecto de reflejo, osea que se vea la imagen y bajo ella se vea su reflejo pero como en agua???

Supongo que hacés exactamente lo que hizo Teseo con una imagen, pero usás 2 imágnes, una que sea el reflejo (el código de Teseo se usaría en esta) y la otra, que sería la imagen sin distorsión.

Espero me entiendas (reconozco que no fui muy claro)

pues, si entiendo, pero el efecto en el que estoy pensando es algo asi como un "oleaje" en el reflejo de la imagen...

muy buen ejemplo teseo, la verdad esta buenisimo el codigo es magnifico, gracias por tu aporte.

Está genial el efecto, gracias por compartirlo maese teseo.

Con respecto a los efectos de agua como lago y ondas, ( el famoso lake effect) que solicitais en el post os añado este código que es el "simple-base" para comenzar con ese tipo de efectos en flash 8
Usa lo mínimo para esos efectos y como vereís en los ejemplos, las variaciones de sus parámetros producen diversidad de ellos.
Se basan en el desplazamiento de mapa de bits y en el PerlinNoise de la clase Bitmap en flash 8.
A este "experimento base" se le pueden añadir funciones repetitivas y/o acumulativas del metodo PerlinNoise para crear profundidad, giro, etc...
Solo hay que vincular una imagen con "imagen" desde la biblioteca y listo:

CODIGO 1: Lago

Código :

import flash.display.BitmapData;
import flash.geom.*;
import flash.filters.*;
img= BitmapData.loadBitmap("imagen");
attachBitmap(img,1); createEmptyMovieClip("efecto",0);
efecto.attachBitmap(img,0); 
efecto._y=2*efecto._height+58;efecto._yscale=-130; 
olas = ola = new BitmapData(efecto._width,efecto._height);
offset = new Point(4,6);
desMap=new DisplacementMapFilter
                   (olas,new Point(1,10),null,1,0,-140,"ignore");
onEnterFrame=function(){
   offset.y -= .6;
   ola.perlinNoise(0,6,1,0,true,true,1,true,[offset]);
   efecto.filters=[desMap];
}

Ahora con unos pequeños cambios ese código base puede hacer otras cosas:

CODIGO 2: Fuego

Código :

import flash.display.BitmapData;
import flash.geom.*;
import flash.filters.*;
img= BitmapData.loadBitmap("imagen");
createEmptyMovieClip("efecto",0);
efecto.attachBitmap(img,0); 
efecto._yscale=190; efecto._xscale=160; 
olas = ola = new BitmapData(efecto._width,efecto._height);
offset = new Point(0,0);
desMap=new DisplacementMapFilter
                     (olas,new Point(50,40),1,1,100,-100,"warp");
onEnterFrame=function(){
   offset.y += 10; //offset.x -= 9.8;
   ola.perlinNoise(6,18,2,0,true,true,1,true,[offset]);
   efecto.filters=[desMap];
}

Seguimos jugando con los parámetros:
CODIGO 3 : rio

Código :

import flash.display.BitmapData;
import flash.geom.*;
import flash.filters.*;
img= BitmapData.loadBitmap("imagenV");
attachBitmap(img,1); createEmptyMovieClip("efecto",0);
efecto.attachBitmap(img,0);
efecto._y=2*efecto._height; efecto._yscale=-100;  
olas = ola = new BitmapData(efecto._width,efecto._height);
offset = new Point();
desMap=new DisplacementMapFilter(olas,new Point(0,10),1,1,50,50,"clamp");
onEnterFrame=function(){
   offset.y -= .3; offset.x -= .9;
   ola.perlinNoise(11,5,1,0,true,true,1,true,[offset]);
   efecto.filters=[desMap];
}

Asimismo se pueden crear efectos de cascada de agua, ondeado de banderas, nubes, humo,agua de lluvia, nieve etc...

Tener en cuenta que este código es el arranque simple para este tipo de efectos, perfeccionarlo o variarlo a vuestro gusto.

OMG!!! esto deberia ir en web tips

bienvenido de vuelta Teseo

Con respecto a las banderas al viento en flash 8, respondo aquí a un mensaje privado, pues es algo general. A vustra disposición para cualquier duda o consulta.
En este código modifico un poco sobre los anteriores añadiendo el método merge a un clon de la imagen para dar "autobrillo" a la bandera( también se puede incluir en los ejemplos anteriores). Asimismo suprimo lo que ya no es necesario quedando unas instruciones base mínimas. Elegir los mejores valores del perlinNoise y de la mezcla de colores en el merge y vincular la imagen.
El SWF de ejemplo resultante tiene solamente 3K de peso.
CODIGO 4 : Viento

Código :

import flash.display.BitmapData;
import flash.geom.*;
import flash.filters.*;
img = BitmapData.loadBitmap("imagen");img2=img.clone();
createEmptyMovieClip("efecto",0);
efecto.attachBitmap(img,0);
offset = new Point();
desMap = new DisplacementMapFilter(img2,new Point(),1,1,24,20,"clamp");
onEnterFrame=function(){
   offset.x -= 7; offset.y -= 4;
   img2.perlinNoise(200,400,1,0,true,true,1,true,[offset]);
   img.merge(img2,new Rectangle(0, 0, 100, 120), new Point(),256,0,0,0);
   efecto.filters=[desMap];
}