miércoles, 16 de enero de 2013

Tutorial flash: Efecto cascada con lago

En este tutorial flash juntaremos los dos que hicimos anteriormente de una cascada y un lago. El resultado final será algo parecido a esto:


¿Vienes de youtube?

Ir directamente al código


Tutorial en video:

Con esta imagen haré los efectos de agua:

1.- Creamos un nuevo documento ActionScript 3.0
2.- En la primera capa importamos la imagen de nuestra cascada. La seleccionamos y pulsamod F8 para convertirla en Clip de Película con el nombre "fondo":

3.- En las propiedades de la imagen, en nombre de instancia, también pondremos "fondo":

4.- Creamos una nueva capa, y en ella insertamos la imagen donde queremos que se produzca el efecto de cascada. Yo importaré esta imagen:


5.- La hacemos coincidir con la imagen de la primera capa, la seleccionamos y pulsamos F8 para convertirla en Clip de Película con el nombre "cascada". En nombre de instancia también pondremos "cascada"


En cuanto al efecto cascada no haremos nada más por el momento (hasta que metamos el código). Vamos con el agua de parte inferior de la imagen.

5.- Creamos una tercera capa y en ella insertamos la imagen donde queremos aplicar el efecto de agua. Yo utilicé esta:


 6.- La hacemos coincidir con las imágenes anteriores, la seleccionamos y pulsamos F8 para convertirla en Clip de película con el nombre "aguas". En nombre de instancia también pondremos "aguas":

7.- Creamos una última capa llamada acciones, seleccionamos el primer frame y pulsamos F9 para abrir el cuadro de código. Introducimos 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,20,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];
}

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

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



Podremos modificar las líneas
var disp2:DisplacementMapFilter = new DisplacementMapFilter(bm2,new Point(0,0),1,2,20,60);
y
var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),2,1,16,20);
cambíandole los valores para dar diferentes efectos de agua a la cascada (primera línea) y al agua (segunda línea).

Tambien te puede interesar:
- Añadir sonido a la cascada
- Añadir enlace a la cascada

6 comentarios:

  1. Me alegra que lo hayas podido hacer. Se ve muy bonito :o)

    ResponderEliminar
  2. Ahora quizá tu siguiente reto, sería el agua de una fuente, es decir, de abajo hacia arriba y no de arriba hacia abajo como en una cascada... :o)

    ResponderEliminar
  3. Bueno, una pregunta más, espero que no te moleste. ¿Existe la manera de ponerle un sonido de fondo? Digamos un sonido de cascada o rio a manera de [b]loop infinito?[/b] (Supongamos que el sonido [u]YA[/u] lo tienes en tu pc, lo que importa es meterlo a tu swf de esta cascada y lago.
    Gracias :o)

    ResponderEliminar
    Respuestas
    1. Claro que se puede, tratare de ponerlo hoy mismo y lo subo explicándolo, saludos!

      Eliminar
  4. Que bien! Una última cosa más, si no es mucha molestia, Podrías explicar como poner el texto de tu URL con todo y el enlace?
    De nuevo...
    Gracias! :D

    ResponderEliminar
    Respuestas
    1. Ya los añadí, espero que se entiendan bien :)

      Eliminar