En este tip explicare como crear un efecto burbujas con efecto gaseoso para líquidos y la consecuente espuma que se produce luego de servirlo en un vaso.
Este efecto surgió como una necesidad de trabajo ya que me pidieron que realizara un pequeño banner para publicitar una marca de cerveza local artesanal (muy rica por cierto).
Luego de pelear con las burbujitas, dibujando una por una, me tome un descanso y comencé a mirar códigos de efectos que tenia archivados y entre todos ellos encontré uno que expuso Nuestro querido Teseo hace un tiempo, el cual dibujaba una especie de humo de cigarrillo. Bien, ahí es donde comienza el experimento, lei atentamente el código y con ayuda del f1 comencé a analizarlo hasta que descubrí que este seria la solución a mis burbujosos problemas…
Bien comenzamos
1_Necesitaremos la fotografía de un vaso con algún liquido gaseoso dentro de el.
2_ el código burbujeante:
Código ActionScript :
createEmptyMovieClip("llama",0); //alphas=[0,valores alfa,0]
colores=[0xffcccccc,0xffaaaadd,0xff222222];alphas=[0,35,0];ratios=[20,5,125];
Pt=new flash.geom.Point();Mx= new flash.geom.Matrix();
Mx.createGradientBox(30,190,0,50,1);
//Mx.createGradientBox(30,190,0,ancho general, altura); a mas alto el numero mas fino el hilo de gas
with (llama){
beginGradientFill("radial",colores,alphas,ratios,Mx,"pad","RGB",0);
moveTo(30,-50); lineTo(10,100); lineTo(100,100); lineTo(100,-50); lineTo(0,0);
endFill(); _yscale = 300; _y= -20;
}
ola = new flash.display.BitmapData(llama._width,llama._height+10);
dM=new flash.filters.DisplacementMapFilter(ola,null,1,1,100,40,"ignore");//null,x,x,ancho de burbujas,x,"ignore")
onEnterFrame=function(){
Pt.y +=1;Pt.x -=.05; //Pt.y +=velocidad de puntos;Pt.x -=.05;
ola.perlinNoise(5,5,5,0,true,true,1,false,[Pt]); llama.filters=[dM];
//ola.perlinNoise(tamaño del gas,5,5,0,true,true,1,false,[Pt]); llama.filters=[dM];
}
3_ Creamos un MC al cual llamaremos “burbujas” y en el primer fotograma de este pegamos el código de las burbujas.
Traemos nuestro MC “burbujas” al escenario y lo ubicamos junto a la foto de nuestro vaso en una posición que quede centrado el efecto al medio del vaso, deberas hacer control enter para ver la posición justa y acomodarlo…
4_ Creamos un segundo MC al que llamaremos “espuma” y al primer frame de este le pegamos el siguiente código:
Código ActionScript :
createEmptyMovieClip("llama",0);
colores=[0xffcccccc,0xffaaaadd,0xff222222];alphas=[50,30,0];ratios=[20,25,125];
Pt=new flash.geom.Point();Mx= new flash.geom.Matrix();
Mx.createGradientBox(20,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;//y- indica hacia abajo si fuese positivo y x negativo iria hacia arriba
ola.perlinNoise(2,21,1,0,true,true,1,false,[Pt]); llama.filters=[dM];
}5_ hacemos lo mismo que en el paso 3 para ubicarlo donde queremos.
6_ Bien, lo único que quedaría por hacer es darle los toques personales, como por ejemplo:
*duplicar los MC y situarlos donde nos parezca para llenar mas el efecto
*Jugar con el código para darle mas fuerza a los efectos etc., etc.
Para entender el código y saber que es lo que estamos haciendo al configurarlo les recomiendo leer la ayuda de flash presionando f1 en las palabras (códigos) que se encuentran en azul.
Aquí les dejo algunos detalles en los cuales me base para modificar el código.
Point (flash.geom.Point)
Object
|
+-flash.geom.Point
La clase del Punto representa una situación en un sistema de la coordenada bidimensional dónde x representa el eje horizontal y representa el eje vertical.
Matrix (flash.geom.Matrix)
Object
|
+-flash.geom.Matrix
La clase de flash.geom.Matrix representa una matriz de la transformación que determina cómo trazar los puntos de un espacio de la coordenada a otro. Poniendo las propiedades de un objeto de la Matriz y aplicándolo a un MovieClip o BitmapData .podes realizar varias transformaciones gráficas en el objeto. Éstos las funciones de la transformación incluyen la traducción (x y y que recalibran), rotación, descascarando, y sesgando.
createGradientBox (el método de Matrix.createGradientBox)
Los parámetros
el width:Number - La anchura de la caja de pendiente.
el height:Number - La altura de la caja de pendiente.
el rotation:Number [optativo] - La cantidad para girar, en los radianes. El valor predefinido es 0.
el tx:Number [optativo] - La distancia en los píxeles para traducir al derecho a lo largo del eje de x. Este valor se compensará por la mitad del parámetro de anchura. El valor predefinido es 0.
BitmapData (flash.display.BitmapData)
El objeto
|
+-flash.display.BitmapData
La clase de BitmapData le permite crear las imágenes del bitmap transparentes u opacas arbitrariamente clasificadas según tamaño y las manipula
Un objeto de BitmapData contiene una serie de datos del píxel. Este datos o pueden representar un bitmap totalmente opacos o un bitmap transparente que contienen los datos de cauce de alfa…
Explicarlos todos seria demasiado extenso y no viene al caso, simplemente son unos detalles para ubicarnos dentro del código, les sugiero utilizar la ayuda (f1) la cual siempre tendrá ejemplos para guiarnos y aprender…
Ahh..Casi lo olvido, dejo el fla
