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
_________________ Si quieres herir… Dispara, dispara Camino a través del No-Tiempo Si quieres matar… Dilo, dilo
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
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.
Ultima edición por Teseo el Vie Dic 01, 2006 10:02 am, editado 1 vez
_________________ Absolutamente todo tiene su riesgo, pero arriesgarnos a vivir es el mas grande de ellos... así que... ¿porque no asumir los mas pequeños?...
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
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(); }
Ultima edición por Teseo el Sab Ene 06, 2007 5:29 pm, editado 3 veces
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"
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
_________________ Absolutamente todo tiene su riesgo, pero arriesgarnos a vivir es el mas grande de ellos... así que... ¿porque no asumir los mas pequeños?...
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:
_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.
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.
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?
_________________ Absolutamente todo tiene su riesgo, pero arriesgarnos a vivir es el mas grande de ellos... así que... ¿porque no asumir los mas pequeños?...
bueeee... se hizo lo que se pudo jeje, de todas maneras gracias
_________________ Absolutamente todo tiene su riesgo, pero arriesgarnos a vivir es el mas grande de ellos... así que... ¿porque no asumir los mas pequeños?...
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)
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.
Ultima edición por Teseo el Mar Ene 02, 2007 8:00 pm, editado 2 veces
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 y V y a mi colección privada. 
woww!! Cheapeau!!
estoy desperdiciando mi vida!!!!
( ahora en la linea siguiente) cambia esa linea por estas: 
