[Tutorial] Efectos de nieve, ceniza, fuego, agua en Flash. AS3

[AlanChavez]

Objetivo
Al finalizar el tutorial, tendras el conocimiento necesario para programar un comportamiento de particulas en flash, ideal para implementar efectos de fluidos comunes en la animacion, tales como: humo, agua, nieve, fuego, ceniza, sangre, entre otros.

Requisitos:

• Adobe Flash CS3 o superior.
  
• Conocimientos minimos de programacion orientada a objetos.

Preparando el ambiente de trabajo
Crear un archivo Flash ActionScript 3.0 Nuevo

Guarda el archivo creado con cualquier nombre. Yo lo llamare cenizas.fla.
Crear un archivo ActionScript:

Guardar el archivo ActionScript con la misma ubicación que el archivo anterior. Yo lo llamare efecto.as

Regresar al archivo ceniza.fla, y en el panel de propiedades, en el campo Clase del documento, escribir el nombre (sin la extension) del archivo .as que acabamos de crear. Si estás siguiendo el Tutorial, deberás escribir efecto.

Tu ambiente de trabajo debe lucir de la siguiente manera:



Creacion de la particula
Regresar al entorno de diseño de flash (la pestaña que dice ceniza.fla)
Presionar Ctrl+F8
Nombrar el MovieClip
Hacer click en el botón "Avanzado"
Activar la casilla Exportar para ActionScript
Cambiar el campo de texto "Clase" por "ceniza" (sin comillas).


ADVERTENCIA: Al hacer click en Aceptar, Flash arrojara un cuadro de dialogo advirtiendo que no se ha encontrado una clase para el elemento. Hagan click en Aceptar en el cuadro de dialogo e ignorenlo, es normal que suceda esto.

La particula es un clip de pelicula convencional. La imagen que yo utilice, no es mas que un circulo con un relleno radial, y el color externo de dicho gradiente, tiene un canal alfa 0%


Sin embargo la particula puede tener la forma que sea, e incluso puede estar animada, lo cual alza el realismo del generador de particulas. La particula que yo utilice en este tutorial es esta:


Guardar los cambios en el archivo .fla. Si todo se encuentra en su lugar, al hacer click en el icono al lado de la clase del documento

Manos a la obra!
Finalmente ya estamos listos para programar.
Copia y pega el siguiente codigo en el entorno de programacion y si seguiste el tutorial al pie de la letra, el codigo compilara sin mayor problema y veras el generador de particulas en accion.

El Codigo:

Código AS3:

package{
    import flash.display.*;
    import flash.events.*;
    import flash.media.*;
    import flash.display.*;
    public class efecto extends flash.display.MovieClip{
 
        var ancho:Number = 550;
        var alto:Number = 400;
        var tamanoMaximo:Number = 5;
        var cenizas:Array;
        
        public function efecto():void
        {
            addEventListener(Event.ENTER_FRAME, crearEfecto);
            cenizas = new Array();
        }
 
        public function crearEfecto(e:Event)
        {
            crearCeniza();
            elevarCeniza();
        }
 
        public function crearCeniza()
        {
            var miCeniza:MovieClip;
            miCeniza = new ceniza();
            miCeniza.alpha = Math.random();
            miCeniza.x = ancho/2
            miCeniza.y = alto/2
            miCeniza.scaleX = miCeniza.scaleY = Math.ceil(Math.random()*(tamanoMaximo));
            miCeniza.k = 1+Math.random()*2;
            miCeniza.viento = 1.5 + Math.random()*(1.4*3);
            addChild(miCeniza);
            miCeniza.play();
            cenizas.push(miCeniza);
        }
        public function elevarCeniza()
        {
            var miCeniza = new ceniza();
            for(var i:int = cenizas.length-1;i>=0;i--)
            {
            miCeniza = cenizas[i];
            miCeniza.y -= 5+miCeniza.k
            miCeniza.x += miCeniza.viento;
            if((miCeniza.y < 0) || (miCeniza.x > ancho))
                {
                    cenizas.splice(i,1);
                    removeChild(miCeniza);
                }
            }
        }
    }
}
 

Pueden ver el Generador de particulas en ejecucion, en la siguiente direccion:
Generador de Particulas.
El codigo explicado

Variables globales

• Ancho - Ancho del escenario.
  
• Alto - Alto del escenario.
  
• tamanoMaximo - tamanoMaximo de la particula.
  
• cenizas - Array que almacenara las diferentes instancias de la particula.

Funciones

• 
  efecto():
  
  Es el constructor de la clase. El punto de entrada para el compilador. En esta funcion agregamos un Inspector de eventos que monitorea cada vez que el escenario visita el primer fotograma de la animacion. En otras palabras, al momento en el que se entre al primer fotograma del escenario se ejecutara la funcion crearEfecto().
  
  Como no tenemos ningun stop, El primer fotograma se ejecutara indefinidamente. Finalmente, instanciamos el array previamente declarado.
  
  
• crearEfecto()
  Esta funcion define el orden de ejecucion, primero creamos la ceniza y luego la movemos.
  
  
  
• crearCeniza()
  Para darle un efecto real ceniza, vamos a hacer que el canal alfa de cada ceniza sea un numero aleatorio entre 0 y 1.
  
  Posteriormente, definimos las coordenadas (X,Y) de la ceniza. En este caso la estamos posicionando al centro de la pantalla.
  
  Nuevamente para aumentar el realismo del efecto vamos a aleatorizar las propiedades scaleX y scaleY del MovieClip, que son las que definen el ancho y el alto respectivamente de la particula.
  
  Creamos "variables" internas del clip de pelicula, que podemos modificar a placer. La propiedad K, que es la que se encargara de cambiar la direccion en el eje de las Y. La propiedad viento, es la que tendra que simular el viento, que en realidad movera las particulas en el eje de las X.
  
  Cada ceniza que estamos creando, la vamos a almacenar en un array, del cual en la funcion elevarCeniza() obtendremos la ceniza y la moveremos.
  
  
  
• elevarCeniza()
  Aqui creamos otra ceniza temporal, que es la que va a recibir la ceniza que en la funcion anterior habiamos almacenado en el array.
  
  El unico proposito de esta funcion es el de mover en los ejes X-Y la particula de ceniza en la posicion i del array.
  
  Cuando se sale de los limites de la pantalla, reducimos el tamano del array y eliminamos la ceniza de la memoria para evitar el consumo innecesario de memoria y procesamiento.
  

Notas Finales
Mediante el codigo podemos cambiar la direccion y orientacion de las particulas.

Si quieren que la particula vaya hacia arriba, la posicion en Y debe ir acercandose a 0.

Si la particula tiene que ir hacia abajo, la posicion en Y debe ir aumentando hasta llegar a una posicion maxima definida por el programador.

Cambiar el diseno de la particula, podemos simular diferentes fluidos. Si la hacemos roja, podemos simular un chorro sanguineo, un azul cielo, puede simular un chorro o un flujo de agua, una particula gris o roja, puede simular la ceniza de un volcan.


Cualquier duda, comentario o sugerencia favor de postearlos como respuesta a este thread, o comentarios en mi pagina personal.

Archivos
Tutorial Particulas.zip

Mirame en Ejecucion!!

Estare subiendo mas tutoriales de programacion en general, en mi pagina web personal
Tutoriales de Programacion