Comunidad de diseño web y desarrollo en internet

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 :P.

¡Saludos!

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

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate