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.
_________________ Si miro tan alto es porque ando a hombros de gigantes- Isaac Newton
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] }
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]; }
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.
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
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.
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
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:
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
), 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.
. Toy inspirao 
.