Comunidad de diseño web y desarrollo en internet online

¿Como puedo lograr hacer un efecto de agua?

Ir a página 1, 2, 3 ... 9, 10, 11  Siguiente

Foros de discusión > Flash

Citar            
MensajeEscrito el 26 Abr 2006 05: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

Por LacrimasObscuras

1 de clabLevel



Genero:Masculino  

opera
Citar            
MensajeEscrito el 26 Abr 2006 03:27 pm
Te recomiendo usar el buscador, el es tu amigo y te podra aclarar muchas cosas ;)

Por Finvara

807 de clabLevel



 

EL reino de los duendes...

firefox
Citar            
MensajeEscrito el 27 Abr 2006 01: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

Por ivan guillen

63 de clabLevel



 

msie
Citar            
MensajeEscrito el 28 Abr 2006 07:36 am
Otro "comecomas". :crap: C y V y a mi colección privada. ^^


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.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT



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

firefox
Citar            
MensajeEscrito el 28 Abr 2006 04:46 pm
yo si entendi!! me podrias mandar lo del efecto? :)

Por ayukawa

Claber

109 de clabLevel



Genero:Femenino  

El cielo verde de un infierno multicolor

msie
Citar            
MensajeEscrito el 29 Abr 2006 03: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

Por ivan guillen

63 de clabLevel



 

msie
Citar            
MensajeEscrito el 02 May 2006 05:29 pm

ayukawa escribió:

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


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

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT



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

firefox
Citar            
MensajeEscrito el 03 May 2006 07:39 am
Jiuu.. azul-gay... muy bueno... yo andaba buscando algo parecido... bueno no lo busque... gracias. XD

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

firefox
Citar            
MensajeEscrito el 04 May 2006 04:34 pm
:o woww!! Cheapeau!!
Joer lo que se puede conseguir con el código!!
impresionante azul-gay-ilusion!

Por rocenn

182 de clabLevel

1 tutorial

Genero:Masculino  

Zaragoza - España

firefox
Citar            
MensajeEscrito el 04 May 2006 05: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" :wink:

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

firefox
Citar            
MensajeEscrito el 04 May 2006 05:58 pm
:shock: :shock: :shock: ....por el :fsm: estoy desperdiciando mi vida!!!!

no me importan tus inclinaciones cromaticas, :alabado: :alabado:

Por Finvara

807 de clabLevel



 

EL reino de los duendes...

firefox
Citar            
MensajeEscrito el 04 May 2006 06: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.

Por el_itur

142 de clabLevel



Genero:Masculino  

Argentina

firefox
Citar            
MensajeEscrito el 05 May 2006 05: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

Por ayukawa

Claber

109 de clabLevel



Genero:Femenino  

El cielo verde de un infierno multicolor

unknown
Citar            
MensajeEscrito el 06 May 2006 03:44 am
OraLe desde Hace tiempo buskava este Efecto
y solo konseguia kosas No muy buenas :oops:

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

Bueno un sAludin ^^

Por _drAke_

13 de clabLevel



 

unknown
Citar            
MensajeEscrito el 06 May 2006 08: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 :? ( 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.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

unknown
Citar            
MensajeEscrito el 06 May 2006 10:21 am
Pués no le veo ningún problema, ya lo hice y funciona a la perfección

Dale click!



:S

[ descargar ]

Por La100rra

Claber

5776 de clabLevel

11 tutoriales
4 articulos

Genero:Masculino  

Cd. Juárez, Chihuahua, México.

unknown
Citar            
MensajeEscrito el 08 May 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

Por nuevotrazado

11 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 08 May 2006 03: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" ^^

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

firefox
Citar            
MensajeEscrito el 09 May 2006 04: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? :(

Por ayukawa

Claber

109 de clabLevel



Genero:Femenino  

El cielo verde de un infierno multicolor

msie
Citar            
MensajeEscrito el 09 May 2006 06:32 pm
Ya lo puse antes.........solo funciona en Flash 8. Sorry.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

firefox
Citar            
MensajeEscrito el 09 May 2006 07:51 pm
bueeee... se hizo lo que se pudo jeje, de todas maneras gracias ;)

Por ayukawa

Claber

109 de clabLevel



Genero:Femenino  

El cielo verde de un infierno multicolor

msie
Citar            
MensajeEscrito el 29 Oct 2006 04:06 am
Increible, quien rayos es teseo.
fantastico el efecto.

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

Por eveevans

Claber

450 de clabLevel

3 tutoriales

 

Nicaragua

firefox
Citar            
MensajeEscrito el 12 Nov 2006 06: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???

Por aprendiz_82

66 de clabLevel



Genero:Masculino  

El Salvador

msie
Citar            
MensajeEscrito el 12 Nov 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)

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 13 Nov 2006 02: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...

Por aprendiz_82

66 de clabLevel



Genero:Masculino  

El Salvador

msie
Citar            
MensajeEscrito el 16 Nov 2006 09:42 pm
muy buen ejemplo teseo, la verdad esta buenisimo el codigo es magnifico, gracias por tu aporte. :D

Por biagnei240698

0 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 23 Nov 2006 07:14 am
Está genial el efecto, gracias por compartirlo maese teseo.

Por escribanto

33 de clabLevel



 

msie
Citar            
MensajeEscrito el 23 Nov 2006 04: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.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT



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

msie
Citar            
MensajeEscrito el 23 Nov 2006 04:42 pm
OMG!!! esto deberia ir en web tips ^^

bienvenido de vuelta Teseo (y)

Por Finvara

807 de clabLevel



 

EL reino de los duendes...

firefox
Citar            
MensajeEscrito el 26 Nov 2006 05: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];
}

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT



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

msie
Ir a página 1, 2, 3 ... 9, 10, 11  Siguiente
Foros de discusión > Flash

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.