Comunidad de diseño web y desarrollo en internet online

¿Como puedo lograr hacer un efecto de agua?

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

Foros de discusión > Flash

Citar            
MensajeEscrito el 10 Dic 2006 10:11 pm
Teseo, por favor en los efectos futuros que vayas a postear (y de verdad espero que sean muchos XD ), 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.

Por Zah

BOFH

4290 de clabLevel

27 tutoriales
5 articulos

  Bastard Operators From Hell Editores

Zaragoza, España

firefox
Citar            
MensajeEscrito el 11 Dic 2006 10:27 pm
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

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 12 Dic 2006 02:13 pm
Excelente.... La verdad me impresionas Teseo... :alabado: :alabado: :alabado:


Pobrecita la computadora de Zah

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 13 Dic 2006 07:25 pm
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];
}

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 16 Dic 2006 03:54 pm
Saludos, los efectos estas excelente, pero no me funcionan los de fuego, lago ni rio.

Por majestic

35 de clabLevel



Genero:Masculino  

msie7
Citar            
MensajeEscrito el 16 Dic 2006 03:57 pm
hola teseo,

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

Por majestic

35 de clabLevel



Genero:Masculino  

msie7
Citar            
MensajeEscrito el 16 Dic 2006 03:58 pm
perdon fue una pregunta un poco boba, lo he realizado con un clip de pelicula

Por majestic

35 de clabLevel



Genero:Masculino  

msie7
Citar            
MensajeEscrito el 17 Dic 2006 06:40 pm
Estos son los FLA de cada ejemplo:

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 27 Dic 2006 11:43 pm
gloria y honra al Gran Dios del ActionScript "El Poderoso Teseo"

Por nkd

11 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 29 Dic 2006 08:29 pm
esto es increible las marivillas y beneficios que nos brinda este excelente programa; gracias XD
:lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: [/flash]

Por hardvin

11 de clabLevel



 

msie
Citar            
MensajeEscrito el 29 Dic 2006 08:48 pm
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 XD
les agradedcería una Respuesta XD gracias

Por hardvin

11 de clabLevel



 

msie
Citar            
MensajeEscrito el 29 Dic 2006 11:11 pm
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)

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 30 Dic 2006 04:22 pm

HernanRivas escribió:

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)

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

Por Zah

BOFH

4290 de clabLevel

27 tutoriales
5 articulos

  Bastard Operators From Hell Editores

Zaragoza, España

firefox
Citar            
MensajeEscrito el 31 Dic 2006 10:20 pm
pos gracias XD pero esperaba una rta mas amplia XD se los agradeceria XD

Por hardvin

11 de clabLevel



 

msie
Citar            
MensajeEscrito el 01 Ene 2007 02:00 pm
A hardvin:
Y yo respondería a una pregunta más concreta :crap:

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 04 Ene 2007 04:33 pm
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.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 04 Ene 2007 04:37 pm
Teseo: Me parece que te salteaste el código 9 :wtf:

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 04 Ene 2007 04:51 pm
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 :)

Por flashreloco

Claber

1310 de clabLevel

1 tutorial
1 articulo

Genero:Masculino  

Webdesigner & Mandilon 2.0

firefox
Citar            
MensajeEscrito el 07 Ene 2007 02:50 pm
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..................

Por logonza

1 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 07 Ene 2007 08:02 pm
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.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 07 Ene 2007 11:11 pm
Excelentes algoritmos,
Felicidades Teseo ,

Por eveevans

Claber

450 de clabLevel

3 tutoriales

 

Nicaragua

firefox
Citar            
MensajeEscrito el 11 Ene 2007 11:25 pm
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

Por arri

30 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 12 Ene 2007 01:54 pm
**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.

Por author_W_one

2 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ene 2007 06:59 pm
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.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 13 Ene 2007 07:10 pm
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) :)

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 13 Ene 2007 07:46 pm
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

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 14 Ene 2007 04:05 am
¡¡OH POR!! :alabado: :fsm: :alabado:

Teseo escribió:

y con 20 lineas de código ^^. Toy inspirao XD
pero Señor!, ¿usted cuando no esta inspirado? :wink: (y).

:alabado::alabado::alabado::alabado::alabado::alabado::alabado::alabado::alabado::alabado:

Por open_eye

46 de clabLevel



Genero:Masculino  

Humano hostil

firefox
Citar            
MensajeEscrito el 14 Ene 2007 07:51 pm
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...

Por arri

30 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 14 Ene 2007 09:06 pm
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

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

msie
Citar            
MensajeEscrito el 14 Ene 2007 09:24 pm
ok Teseo, el finde ha sido duro, un fallo en la exportacion, gracias

Por arri

30 de clabLevel



Genero:Masculino  

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

 

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