sábado, 22 de diciembre de 2012

Tutorial flash efecto cascada

En el siguiente tutorial flash vamos a crear un efecto cascada con el agua cayendo. Nos quedará algo parecido a esto:

Tutorial en video:

¿Vienes de youtube?

Ir directamente al código

1.- Creamos un nuevo documento ActionScript 3 y en nuestra primera capa ponemos la imagen de la cascada que queramos. Yo pondré esta:
2.- Seleccionamos la imagen y pulsamos F8 para convertirla en Clip de película con el nombre de: fondo
3.- En nombre de instancia (en propiedades de la imagen) también le pondremos de nombre: fondo
4.- Crearemos una segunda capa, la seleccionamos y en ella añadimos la imagen únicamente con el agua donde queramos darle el efecto cascada. En mi caso, utilizaré esta imagen:
5.- La haremos coincidir con la imagen anterior, la de "fondo".
6.- Seleccionamos la imagen y pulsamos F8 para convertir en Clip de película con el nombre: cascada
7.- En nombre de instancia también pondremos cascada.
8.- Creamos una nueva capa donde pondremos las acciones. Pulsamos F9 sobre el primer fotograma para que se nos abra el cuadro de código y en él introduciremos el siguiente código:

Codigo:

var bm2:BitmapData=new BitmapData(cascada.width, cascada.height);
var disp2:DisplacementMapFilter = new DisplacementMapFilter(bm2,new Point(0,0),1,2,10,60);

var pt3:Point = new Point(0,0);
var pt4:Point = new Point(0,0);
var perlinOffsetFall:Array = [pt3, pt3];

addEventListener(Event.ENTER_FRAME, onFrame);

function onFrame(evt:Event):void {

perlinOffsetFall[0].y -=1;
perlinOffsetFall[1].x -=0.1;

bm2.perlinNoise(20,10,1,99,true,false, 7,false,perlinOffsetFall);
cascada.filters=[disp2];
}


Aquí tienes otro ejemplo más de cascada:

5 comentarios:

  1. Hola.
    Crees que en el primer ejemplo, se le podría agregar efecto agua al lago de abajo? O sólo se puede un efecto por imagen?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hice este tutorial del efecto de agua: http://www.desarrollaraplicaciones.com/2012/12/tutotiral-flash-crear-efecto-agua.html pero todavía no probé solo para una parte concreta de la imagen. Lo intentaré en los próximos días

      Eliminar
    2. Sí... Gracias por contestar. También vi tu efecto agua, por eso se me ocurrió preguntar si se pueden los 2 efectos en la misma imagen. Arriba la cascada y abajo el lago con sus ondas. Se vería muy bonito.
      Gracias. :o)

      Eliminar
    3. Ya hice un nuevo tutorial combinando ambos: http://www.desarrollaraplicaciones.com/2013/01/tutorial-flash-efecto-cascada-con-lago.html

      saludos!

      Eliminar
  2. como puedo aumentarle el tiempo de duracion

    ResponderEliminar