¿Como puedo lograr hacer un efecto de agua? + Cristalab

Ayuda del foro + Buscar + Grupos de Usuarios + Registrarse

¿Como puedo lograr hacer un efecto de agua?

Ir a página 1, 2, 3, 4, 5, 6, 7, 8, 9 Siguiente

Citar

Publicado: Mie Abr 26, 2006 5:52 am

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

LacrimasObscuras

clabLevel: 1 Genero:Masculino

Citar

Publicado: Mie Abr 26, 2006 3:27 pm

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

Finvara

clabLevel: 768 Genero:Masculino
EL reino de los duendes...

Citar

Publicado: Jue Abr 27, 2006 1:34 am

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

ivan guillen

clabLevel: 60

MP Email Web

Citar

Publicado: Vie Abr 28, 2006 7:36 am

Otro "comecomas". Aw Crap

C y V y a mi colección privada. miau

Editado posterior ( 1/12/2006 ) :

Como el post se ha ido extendiendo con muchos añadidos me referiré ahora a ellos.
Aquí hay, y poco a poco pondré muchos más, ejemplos simples que he desarrollado sobre efectos de "fenomenos atmosféricos o físicos" asi como transiciones entre bitMaps Y filtros.
ONDAS, OLAS, VIENTO, NUBES, NIEVE, LLUVIA, BANDERAS, LUPAS, FLUIDOS, FUEGO, HUMO, AGUA, ELASTICOS etc..
Solamemente serán para Flash 8 y Flash 9 y basados en el tratamiento de Bitmaps.
Atenderé las dudas que pueda (o sepa) aunque hay por aquí gente fenomenal, que sabe más y que seguro nos echaran un cable.
Espero que os sean útiles.

Teseo
SWAT Team

Héroes SWAT
clabLevel: 1449 Genero:Masculino
Oviedo

1 Tutorial
13 Tips

Ultima edición por Teseo el Vie Dic 01, 2006 10:02 am, editado 1 vez

Citar

Publicado: Vie Abr 28, 2006 4:46 pm

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

ayukawa

clabLevel: 96 Genero:Femenino
El cielo verde de un infierno multicolor

Citar

Publicado: Sab Abr 29, 2006 3:08 am

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

ivan guillen

clabLevel: 60

MP Email Web

Citar

Publicado: Mar May 02, 2006 5:29 pm

ayukawa escribió:

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

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();
}

Teseo
SWAT Team

Héroes SWAT
clabLevel: 1449 Genero:Masculino
Oviedo

1 Tutorial
13 Tips

Ultima edición por Teseo el Sab Ene 06, 2007 5:29 pm, editado 3 veces

Citar

Publicado: Mie May 03, 2006 7:39 am

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

J O S

Héroes
clabLevel: 720 Genero:Masculino
Lima, Perú

1 Tip

MP Email Web

Citar

Publicado: Jue May 04, 2006 4:34 pm

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

rocenn

clabLevel: 152 Genero:Masculino
Zaragoza - España

1 Tip

Citar

Publicado: Jue May 04, 2006 5:26 pm

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" Guiño

Teseo
SWAT Team

Héroes SWAT
clabLevel: 1449 Genero:Masculino
Oviedo

1 Tutorial
13 Tips

Citar

Publicado: Jue May 04, 2006 5:58 pm

....por el Dios

estoy desperdiciando mi vida!!!!

no me importan tus inclinaciones cromaticas, Alabanza

Finvara

clabLevel: 768 Genero:Masculino
EL reino de los duendes...

Citar

Publicado: Jue May 04, 2006 6:02 pm

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.

el_itur

clabLevel: 143 Genero:Masculino
Argentina

MP Web

Citar

Publicado: Vie May 05, 2006 5:30 pm

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

ayukawa

clabLevel: 96 Genero:Femenino
El cielo verde de un infierno multicolor

Citar

Publicado: Sab May 06, 2006 3:44 am

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

pero Otra kosa No le entiendo Ni Maiz aL Coodigo Aw Crap

Ceria Mucho pedir ke Pusieran el FLA Amigos :

Bueno un sAludin miau

_drAke_

clabLevel: 7

Citar

Publicado: Sab May 06, 2006 8:15 am

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 Confundido

( 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.

Teseo
SWAT Team

Héroes SWAT
clabLevel: 1449 Genero:Masculino
Oviedo

1 Tutorial
13 Tips

Citar

Publicado: Sab May 06, 2006 10:21 am

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

Dale click!

[ descargar ]

La100rra
BOFH

Bastard Operators From Hell REC
clabLevel: 5560 Genero:Masculino
Cd. Juárez, Chihuahua, México.

11 Tips

MP Web

Citar

Publicado: Lun May 08, 2006 11:34 am

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

nuevotrazado

clabLevel: 10 Genero:Masculino

Citar

Publicado: Lun May 08, 2006 3:48 pm

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" miau

Teseo
SWAT Team

Héroes SWAT
clabLevel: 1449 Genero:Masculino
Oviedo

1 Tutorial
13 Tips

Citar

Publicado: Mar May 09, 2006 4:49 pm

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

Escena=Escena 1, Capa=Capa 1, Fotograma=1: Línea 6: Se espera ';'
import flash.geom.Transform;
Escena=Escena 1, Capa=Capa 1, Fotograma=1: Línea 7: Se espera ';'
import flash.geom.ColorTransform;

Sera que en este flash el efecto no funciona? Triste

ayukawa

clabLevel: 96 Genero:Femenino
El cielo verde de un infierno multicolor

Citar

Publicado: Mar May 09, 2006 6:32 pm

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

Teseo
SWAT Team

Héroes SWAT
clabLevel: 1449 Genero:Masculino
Oviedo

1 Tutorial
13 Tips

Citar

Publicado: Mar May 09, 2006 7:51 pm

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

ayukawa

clabLevel: 96 Genero:Femenino
El cielo verde de un infierno multicolor

Citar

Publicado: Dom Oct 29, 2006 4:06 am

Increible, quien rayos es teseo.
fantastico el efecto.

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

eveevans

Héroes
clabLevel: 461 Genero:Masculino
Nicaragua

1 Tutorial
2 Tips

MP Email

Citar

Publicado: Dom Nov 12, 2006 6:00 pm

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???

aprendiz_82

clabLevel: 58 Genero:Masculino
El Salvador

MP Email Web

Citar

Publicado: Dom Nov 12, 2006 11:48 pm

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)

HernanRivas

clabLevel: 2581 Genero:Masculino

1 Tutorial
23 Tips

MP Email

Citar

Publicado: Lun Nov 13, 2006 2:19 am

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

aprendiz_82

clabLevel: 58 Genero:Masculino
El Salvador

MP Email Web

Citar

Publicado: Jue Nov 16, 2006 9:42 pm

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

biagnei240698

clabLevel: 0 Genero:Masculino

Citar

Publicado: Jue Nov 23, 2006 7:14 am

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

escribanto

clabLevel: 30 Genero:Masculino

Citar

Publicado: Jue Nov 23, 2006 4:23 pm

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.

Teseo
SWAT Team

Héroes SWAT
clabLevel: 1449 Genero:Masculino
Oviedo

1 Tutorial
13 Tips

Ultima edición por Teseo el Mar Ene 02, 2007 8:00 pm, editado 2 veces

Citar

Publicado: Jue Nov 23, 2006 4:42 pm

OMG!!! esto deberia ir en web tips miau

bienvenido de vuelta Teseo Thumbs up

Finvara

clabLevel: 768 Genero:Masculino
EL reino de los duendes...

Citar

Publicado: Dom Nov 26, 2006 5:10 pm

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];
}

Teseo
SWAT Team

Héroes SWAT
clabLevel: 1449 Genero:Masculino
Oviedo

1 Tutorial
13 Tips

Ultima edición por Teseo el Mar Ene 02, 2007 8:05 pm, editado 1 vez

Ir a página 1, 2, 3, 4, 5, 6, 7, 8, 9 Siguiente

Foros de discusión > Flash

Página 1 de 9