Efecto de lluvia en Actionscript 3

Tan sólo quiero actualizar los dos ejemplos que ya hay en Clab de lluvia a AS3. No se necesitan muchos conocimientos sobre AS3, tan sólo algunas nociones básicas.

Pasos a seguir :

• Para empezar, creamos un documento nuevo de Flash con AS3 del tamaño que sea, con fondo negro preferiblemente, y a 30 fotogramas por segundo.
  
  
• Después dibuja en un tamaño razonable lo que quieras que sea la gota (esto puede dar mucho juego, si en vez de que llueva agua quieres que lluevan ranas o tejones).
  
  
• Dale el nombre que te parezca y activa la exportación a ActionScript, escribiendo como nombre de la clase Gota, para este ejemplo.
  
  
• Como aún no existe, vamos a escribirla:
  
  

  Código :

  // Gota.as
  
  package 
  {
     import flash.display.Sprite;
     import flash.display.Stage;
     import flash.events.Event;
  
     public class Gota extends Sprite
     {
        private var scale:Number = 1;
        private var speed:Number = 40; // La velocidad de las gotas
        private var angle:Number = Math.PI / 2 + .3; // El ángulo inicial en radianes
  
        public function Gota():void
        {
           // Función constructora
        }
        public function init():void
        {
           angle -= Math.random() / 5; // Añade un pelín de aleatoriedad al ángulo, línea opcional
           x = Math.random() * (stage.stageWidth + Math.atan(angle - Math.PI / 2) * stage.stageHeight);
           // Posición x aleatoria
           // Lo de + Math.atan(angle - Math.PI / 2) * stage.stageHeight es para que, si el
           // ángulo es distinto de 90º, no haya una parte de la pantalla que esté siempre
           // vacía. No haré las explicaciones trigonométricas. 
           y = Math.random() * (stage.stageHeight / 2) - 100;
           // Posición y aleatoria
           // Lo de -100 es para que las gotas no empiecen tan abajo
           scale = Math.random() * 1.5;
           // Escala aleatoria, diversifica el tamaño de las gotas
           scaleX = scale;
           scaleY = scale;
           alpha = scale;
           rotation = (angle * 180 / Math.PI) - 90;
           // Rotación, en grados. Se resta 90º porque la inicial ya es 90º, las gotas hacia
           // abajo
  
           addEventListener(Event.ENTER_FRAME, movement);
           // Para que se muevan en cada fotograma
        }
        private function movement(evento:Event):void
        {
           y += speed * Math.sin(angle);
           x += speed * Math.cos(angle);
           // Si el ángulo es 90º (PI / 2), no se mueven en el eje x
           if (y > stage.stageHeight + height)
           {
              removeEventListener(Event.ENTER_FRAME, movement);
              stage.removeChild(this);
              // Si se salen, se eliminan
           }
        }
     }
  }
  

  
  
  
• Creo que con los comentarios se entiende muy bien. Ahora, en el único fotograma de nuestra película:
  
  

  Código :

  // Archivo.fla
  
  import flash.display.Stage;
  import flash.events.Event;
  
  var densidad:Number = 60;
  var gota:Gota;
  
  function lluvia(evento:Event):void
  {
     for (i = 0; i < densidad; i++)
     {
        gota = new Gota();
        stage.addChild(gota);
        gota.init();
     }
  }
  
  stage.addEventListener(Event.ENTER_FRAME, lluvia);
  

  
  
  La densidad es una constante numérica para que llueva más o menos, valores más allá de 60 son innecesarios y ralentizan el procesador.
  

Y ya tenemos nuestra lluvia. Aqui un bonito ejemplo:



Que aproveche .

¡Saludos!

Quizás también te interesen otros tutoriales como :

• Efecto de estatica de televisión en AS3
  
• Efecto de agua con la clase bitmapdata
  
• efecto de nubes con la clase bitmapdata
  

 

Tweet