sábado, 22 de diciembre de 2012

Tutorial flash: Crear efecto agua

En el siguiente tutorial flash haremos un efecto agua en Action Script 3 utilizando BitmapData. Nos quedará algo parecido a esto:


 Lo primero que haré será buscar una imagen a la que quiera dar el efecto de agua. En mi caso, utilizaré esta de un pez payaso:
1.- Creamos un nuevo documento de ActionScript 3 e importamos nuestra imagen.
2.- La seleccionamos y pulsamos F8 para convertirla en clip de película con el nombre: fondo
3.- En nombre de instancia (dentro de propiedades de la imagen) también le daremos el nombre: fondo
4.- Seleccionamos el primer frame de nuestro documento y hacemos click en F9 para abrir el cuadro de código. En él, introduciremos el siguiente código:


var bm:BitmapData=new BitmapData(fondo.width, fondo.height);
var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),1,2,16,12);
var pt1:Point = new Point(0,0);
var pt2:Point = new Point(0,0);
var perlinOffset:Array = [pt1, pt2];

addEventListener(Event.ENTER_FRAME, onFrame);
function onFrame(evt:Event):void {
  perlinOffset[0].x +=1;
  perlinOffset[1].y +=0.1;
  bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset);
  fondo.filters=[disp];
}

Si queremos podemos modificar la línea:
var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),1,2,16,12);

Esta línea nos permitirá dar diferentes efectos al agua. Otro ejemplo:

1 comentario: