¿Como puedo lograr hacer un efecto de agua?

Teseo, por favor en los efectos futuros que vayas a postear (y de verdad espero que sean muchos ), haz que en los swf de ejemplo se accionen con un botón, ya que casi matan mi ordenador cuando se reproducen todos a la vez en las dos primeras páginas de este tema, que por cierto si puedes modificar esos ejemplos, aún mejor.

Gracias.

Este efecto simula una llama de vela. No necesita ninguna imagen. Simplemente copiar y pegar. Crea un gradiente y se le aplican los filtros y métodos. Como siempre variando los parámetros conseguimos cambios de color, forma, velocidad..etc.
Posteriormente añadiremos el efecto de humo y de halos de luz asi como el viento aleatorio para completar una composición.

CODIGO 7: LLama

Código :

createEmptyMovieClip("llama",0);
colores=[0xffffffff,0xfff2f215,0xffff9900,0xff00000f];
alphas=[40,90,85,40]; ratios=[20,90,175,235];
Pt=new flash.geom.Point();Mx= new flash.geom.Matrix(); 
Mx.createGradientBox(30,90,Math.PI/2,0,10);
with (llama){
 beginGradientFill("radial",colores,alphas,ratios,Mx,"pad","RGB",.98);
 moveTo(0,0); lineTo(0,100); lineTo(40,100); lineTo(40,0); lineTo(0,0);
 endFill();
}
ola = new flash.display.BitmapData(llama._width,llama._height+30);
dM=new flash.filters.DisplacementMapFilter(ola,null,1,1,3,3,"ignore");
onEnterFrame=function(){
 Pt.y +=3.3;Pt.x -=.3; a = random(7)*(random(10)<1);
 llama._yscale = 120 + a; llama._y = -a;
 ola.perlinNoise(24,32,1,0,true,true,1,false,[Pt]);
 llama.filters=[dM]
}

0,5 Kb

Excelente.... La verdad me impresionas Teseo...


Pobrecita la computadora de Zah

Con este código del efecto de humo termino la serie de "efectos de ondas". Este efecto es muy similar al anterior y tampoco necesita ninguna imagen. He escogido para el ejemplo el humo de cigarrillo ya que el humo "grueso" lo podemos fabricar de forma parecida a las nubes pero con movimiento vertical. Ya lo ensancharemos y moveremos mezclando efectos y usando la clase Matriz.

CODIGO 8 Humo

Código :

createEmptyMovieClip("llama",0);
colores=[0xffcccccc,0xffaaaadd,0xff222222];
alphas=[50,45,0];ratios=[20,25,125];
Pt=new flash.geom.Point();Mx= new flash.geom.Matrix(); 
Mx.createGradientBox(30,190,0,40,-30);
with (llama){
 beginGradientFill("radial",colores,alphas,ratios,Mx,"pad","RGB",0);
 moveTo(30,-50);lineTo(30,100);lineTo(100,100);lineTo(100,-50);
lineTo(0,0); endFill(); _yscale = 300; _y= -60;
}
ola = new flash.display.BitmapData(llama._width,llama._height+10);
dM=new flash.filters.DisplacementMapFilter(ola,null,1,1,20,40,"ignore");
onEnterFrame=function(){
  Pt.y +=2;Pt.x -=.05;
  ola.perlinNoise(11,21,1,0,true,true,1,false,[Pt]); llama.filters=[dM];
}

Saludos, los efectos estas excelente, pero no me funcionan los de fuego, lago ni rio.

hola teseo,

como hago para poner la llama o el humo donde yo quiera?

perdon fue una pregunta un poco boba, lo he realizado con un clip de pelicula

Estos son los FLA de cada ejemplo:

gloria y honra al Gran Dios del ActionScript "El Poderoso Teseo"

esto es increible las marivillas y beneficios que nos brinda este excelente programa; gracias
[/flash]

ami me pasa lo mismo que hackaos

quisiera que me ayudaran un poco con este còdigo

gracias

__

PD.

quisiera saber como subo mi clab level
les agradedcería una Respuesta gracias

Yo propongo que, al menos, evites que lo bajen poniendo un avatar tan grande (no es capricho mío, está en las reglas del foro)

HernanRivas escribió:

Es una propuesta razonable
hardvin, el tamaño máximo del avatar es de 100x100 pixels.

pos gracias pero esperaba una rta mas amplia se los agradeceria

A hardvin:
Y yo respondería a una pregunta más concreta

Códigos para movimientos de Bitmaps. Efectos líquidos.
Este código es un ejemplo de "animación" de una imagen.
No usa máscaras sino movimiento directamente sobre el mapa de bits. Evidentemente es muy afinable, pero es un ejemplo, no un trabajo. Funciona creando un ovalo que actua como máscara deslizable ( MC sal). Si lo hacemos más pequeño ( variable ov) o variamos su escala, obtendremos muy diversos efectos.
El código es muy adaptable para otra tipo de trabajos. Aunque también lo he montado como clase aquí en este ejemplo no la usa, mueve directamente la "imagen" con ese vínculo desde la biblioteca.
Tiene añadido un efecto easing aunque puede ser cualquier otro dinamismo.
CODIGO 10: BitMap Liquido.

Código :

import flash.geom.*
import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
import flash.filters.BlurFilter;
rdn = Math.PI/180; cl = 0x808080; w =300; h =400; ov = 400 ;
P0 = new Point(); R0 = new Rectangle(0,0,w,h); 
bmp1 = new BitmapData(w,h,true,0);
bmp1.draw(BitmapData.loadBitmap("imagen"));
bmp2 = new BitmapData(w,h,false,cl); bmp3 = bmp2.clone();
mc0 = _root.createEmptyMovieClip("mc0",1);
mc0.attachBitmap(bmp1,mc0.getNextHighestDepth());
bF = new BlurFilter(8,8,2);
dMap = new DisplacementMapFilter(bmp3,P0,2,4,100,100,"clamp");
sal = createEmptyMovieClip("sal", 2);
sal.beginGradientFill("radial",[0x00ff00,0xffffff],[100,0],[110,255],
   {matrixType:"box", x:-280, y:-280, w:560, h:560, r:0});
sal.moveTo(ov,0);
for (var z = 1; z<=360; z++) {
   sal.lineTo(Math.cos(z*rdn)*ov, Math.sin(z*rdn)*ov);
}
sal.endFill(); sal._yscale= 90; sal._visible = false;
gx=32; gy=12 ; flag=true; temp = {x:sal._x,y: sal._y};
sal.onMouseDown = function (){flag = true; sal.startDrag(true);};
sal.onMouseUp = function (){flag = false; stopDrag();}
sal.onEnterFrame = function (){
   if (!flag){
      gx =(gx+(200-sal._x))*.93; gy =(gy +(160-sal._y))*.88;
      sal._x += gx;  sal._y += gy;
   }
   g = 128+Math.min(121, Math.max(-128,-(sal._x-temp.x)*2));
   b = 128+Math.min(121, Math.max(-128,-(sal._y-temp.y)*2));
   var cT0:ColorTransform = new ColorTransform(0,0,0,1,128,g,b,0);
   temp = {x:sal._x,y: sal._y};
   bmp2.draw(sal, sal.transform.matrix,cT0,"hardlight");
   bmp3.applyFilter(bmp2,R0,P0,bF); mc0.filters = [dMap];
}

Pinchar y arrastrar
o pinchar y soltar
o pinchar y soltar en varios sitios rápidamente.(efectos sumados)
10Kb.

Teseo: Me parece que te salteaste el código 9

Exelentes Ejemplos , muy faciles de entender , y ademas generan una gran expectativa de lo que se puede hacer nada mas jugando con el codigo, te felicito en hora buena amigo te sacaste un 10

Hola teseo, muy bueno eso!!!!!

me pase al Flash 8 solo para ver los efectos y quedan barbaros!!!
-------- Una preguntita, estoy tratando de aplicar el efecto agua a una imagen y activarlo sin el uso del raton, o sea on load, pero no me sale... , alguna sugerencia?

Saludos y muchas gracias por compartir esto, y desde ya que si tienes otros de este tipo, ... jaja, somos insaciables..................

un poco más adelante de donde se encuentre el código, está también el código para hacerlo sin ratón, como si lloviera. Si lo que quieres es "deslizar" sobre el agua, cambia el random del if por una función matemática apropiada.

Excelentes algoritmos,
Felicidades Teseo ,

hola Teseo, me parece una maravilla tu labor y tus conocimientos, pero tengo una duda, en el ejemplo del agua se puede usar con tranparencias, por ejemplo una estrella de cinco puntas y que el fondo sea transparente, no se si me explico... de todas formas eres un fenomeno, gracias

**Error** C:\Documents and Settings\Administrador\Configuración local\Datos de programa\Macromedia\Flash 8\es\Configuration\Classes\FP8\TextField\StyleSheet.as: Línea 7: Existe un conflicto entre el nombre de esta clase, 'TextField.StyleSheet', y el nombre de otra clase que se ha cargado, 'TextField.StyleSheet'.
{
cada uno de los actionscript que pego ya sea agua o el de la bandara aparece este error me pregunto a que se debera.

A arri:
Si lo que quieres es usarlo con transparencias, mira en este mismo tema algo más atrás donde lo explico y pongo un ejemplo. Si es algo como deslizar un objeto con forma, dímelo y explicaré como.
A author_W_one:
Evidentemente es seguro que no es por el código de agua. Es por algo más que tienes en el script que manda duplicar o redundar una clase. No te puedo decir la causa sin mas datos, pero tiene que ver con la/las hojas de estilos que importas.

Esto pertenece a la serie de códigos de fenómenos atmosféricos. Es un "trazador de rayos" o quebrador. Básicamnete en mucho random a un dibujador de lineas.
CODIGO 11 : Rayos

Código :

cr=0xffffff; al=[0,.5,.6]; rt=[0,125,255]; i=0;cl=[0,0x220066,cr];
gf = new flash.filters.GradientGlowFilter
                          (0,180,cl,al,rt,30,30,4,2,"outer",false);
createEmptyMovieClip("rayo",0);
onEnterFrame= function(){
  if (rd(100)>(6+88*(i==0))){traza(10+rd(12),5+rd(5));}
}
function traza(l,t){
 i? Po=Pt[rd(i)].clone(): Po = new flash.geom.Point(50+rd(300),rd(60));
 rayo.moveTo(Po.x,Po.y)
 for( b=l;b>0;b--){
   Po.offset(rd(3*t)-rd(3*t),5+rd(l)); gr = 1300/(Po.y+180);
   rayo.lineStyle(gr,cr,100,true,"normal","round","miter",16);
   rayo.lineTo(Po.x,Po.y); rayo.filters = [gf];
   i++; Pt[i]=Po.clone();  
 }
 rd(100)>50? rayo._xscale>100? rayo._xscale-=1 : rayo._xscale+=1:null;
 if (i>90){rayo.clear();Pt=[];i=0;}
}
function rd(n){return Math.round(n*Math.random())}

Es facil ver que cambiando parámetros salen más rayos, más verticales, etc.
Como lleva mucho random pongo una función específica para ello.
Y un ejemplillo de aplicación.
Atención: el sonido esta encendido desde el principio (lo siento)

Este código es muy efectista, simplemente una imagen para vincular en la biblioteca con nombre "imagen" para vinculación y listo.
Utiliza varias transformaciones de la imagen para hacerlo. Como siempre variando los parámetros se cambia el foco, el color, la textura del fondo, etc...
CODIGO 12: Relieve

Código :

import flash.display.*; import flash.geom.*; import flash.filters.*
_quality = "low"; pt = new Point(); Mouse.hide();
img = BitmapData.loadBitmap("imagen"); rc= img.rectangle;
img.width > img.height? h=img.width: h=img.height; h=Math.round(h); 
img2 =img.clone();temp = img.clone();
img.colorTransform(rc, new ColorTransform(1,1,1,0,127,127,127,255));
img2.colorTransform(rc, new ColorTransform(1,1,1,1,0,0,0,255));
temp.perlinNoise(20,20,2,0,true,true,15,false,null);
img.merge(temp,rc,pt,80,80,80,255); temp.dispose();
img.applyFilter(img, rc, pt, new BlurFilter(4, 4, 1));
mc1 = this.createEmptyMovieClip("mc1",1); mc1.attachBitmap(img2,2);
marco = this.createEmptyMovieClip("marco",2); marco.blendMode = 14;
mc2 = marco.createEmptyMovieClip("mc2",1);
cl = [0xffffff,0xe7cf07,0]; al = [40,60,100]; rt = [0,37,255];
matrix = new Matrix();  matrix.createGradientBox(h,h,0,h/2,h/2);
mc2.beginGradientFill("radial",cl,al,rt, matrix); 
mc2.moveTo(0,0); mc2.lineTo(0,2*h); mc2.lineTo(2*h,2*h);
mc2.lineTo(2*h,0); mc2.lineTo(0,0); mc2.endFill();
sal = temp = img.clone();
mx1 = [0,0,0,-1,0,1,0,0,0]; mx2 = [0,-1,0,0,0,0,0,1,0];
temp.applyFilter(img,rc,pt,new ConvolutionFilter(3,3,mx1,1,127));
sal.copyPixels(temp,rc,pt); temp = img.clone(); 
temp.applyFilter(img,rc,pt,new ConvolutionFilter(3,3,mx2,1,127));
sal.copyChannel(temp,rc,pt,1,2); temp.dispose();
dMap = new DisplacementMapFilter(sal,pt,1,2,-300,-300);
onMouseMove = function(){   
   x = h-_xmouse ; y = h-_ymouse; dMap.mapPoint = new Point(x,y);
   mc2.filters = [dMap]; mc2._x =-x; mc2._y =-y;
   updateAfterEvent();
}
onMouseMove();

Explico un poco los parámetros más importantes y los que se pueden tocar:
temp.perlinNoise(20,20,2,0,true,true,15,false,null);
Cambian la textura de fondo. Valores pequeños, más rugosa. Valores descompensados 10,300 tipo cortina.
img.applyFilter(img, rc, pt, new BlurFilter(4, 4, 1)); El blur es el que crea la profundidad, si lo aumentamos mucho el relieve será más inclinado el valor que ahora está a 1 si se incrementa suaviza los contornos. Para texturas tipo plástico a tipo acero.
cl = [0xffffff,0xe7cf07,0]; al = [40,60,100]; rt = [0,37,255]; Son el color, fuerza y forma del foco de luz. Los que más hacen variar el efecto.
dMap = new DisplacementMapFilter(sal,pt,1,2,-300,-300);
Afectan a la profundidad del relieve, valores invertidos (positivos) hacen hueco en lugar de resalte.
Otros parámetros evidentemente también afectan , pero esos son los importantes.
Si se desea usar un MC instanciado en lugar de una imagen cambiar esta linea:

Código :

img = BitmapData.loadBitmap("imagen"); rc= img.rectangle;

por estas dos lineas:

Código :

img = new BitmapData(400,400,true,0); rc=img.rectangle; 
img.draw(logo); logo._visible=false;

Considerando que se instancío con el nombre logo

Esta es la imagen:

y este el resultado:
1.3Kb

¡¡OH POR!!

Teseo escribió:

pero Señor!, ¿usted cuando no esta inspirado? .

Gracias Teseo, eres tan grande de artista como de corazon... no tengo dudas. A lo que me refiero es: a la flor amarilla de tu ejemplo del agua pues imaginate que el agua solo se vea en la flor, recorto la flor en Photoshop y le pongo el fondo transparente entonces la exporto en .png para que flash me respete el fondo trans. pero al aplicarle el codigo el fondo me lo pone en negro. No se si me explico creo que si, un saludo Teseo...

arri:
El problema no está en el código, pues este respeta las transparencias. Te pongo un ejemplo de un PNG (logo de cristalab ampliado) donde he dejado el texto editable para que lo observes.
El oleaje no se limita a la región original si lo necesita para el efecto, pero su fondo se mantiene transparente y solo se inicia(click) si se aplica sobre regiones no totalmente transparentes.
La causa puede estar en la forma de guardado del archivo PNG desde el PhotoShop. Comprueba que realmente la forma de guardar el archivo y la tranparencia sea correcta en las opciones de guardado (capa o color a transparente) . Pero el código, te lo aseguro, respeta la transparencia de un PNG.
CLICKAR Y MOVER

ok Teseo, el finde ha sido duro, un fallo en la exportacion, gracias