This is simple tutorial on how to create more real life rain effect (or snow or whatever falls down in your neighborhood). You will need just few minutes to complete full tutorial, just follows explanations.

1. Create new flash document. I have used dimensions 500px and 400px with #699 background color and 30 frame per second. Higher value of fps will make animation smoother.

2. Create new movie clip that will represent single raindrop. My dimensions of movie clip is 10px by 10px. Drag mc from library to stage to position approximately y=0, x=-20, just left from top-left Stage corner but outside of view. Name your instance 'raindrop'. Now, the code.

3. First, we will create raindrops counter like this:
var counter:Number = 0;

4. Next, we write onEnterFrame for 'raindrop' instance. This function will act as timer. Every time 'raindrop' passes Stage height it returns to the top and fires clone function which creates new raindrop. Actually, it's kinda unusual to create new instances this way, but I was in a hurry...

 raindrop.onEnterFrame = function() {  
   
   if (this._y < Stage.height) {  
     this._y += 30;  
   }else{  
     clone();  
   }  
   
 }

5. Now let's see that clone function and I'll try to explain it.

 function clone() {  
   if(counter < 50) {  
     var dx:Number = random(500);  
     var dy:Number = random(800);  
     var myObject = new Object();  
     myObject._x = dx;  
     myObject._y = dy-800;  
     myObject._alpha = random(100);  
     myObject._xscale = 50 + myObject._alpha;  
     myObject._yscale = myObject._xscale;  
       
     myObject.onEnterFrame = function() {  
       if (this._y < Stage.height) {  
         this._y += this._alpha / 10;  
       } else {  
         this._y -= 400 + Math.floor(Math.random()*400);  
         this._x = Math.floor(Math.random()*500);  
       }  
     }  
   
     raindrop.duplicateMovieClip("nr" + counter, this.getNextHighestDepth(), myObject);  
     counter += 1;  
   }  
 }


Counter is there to stop producing new raindrops when their number is greater then 49. New raindrops are created using duplicateMovieClip method. It uses 3 parameters. First one is unique instance name, second one is depth and third one myObject is most important. Object is obviously the type of myObject and everything needed is congregated here.

Start position is defined using random function to dx and dy variables. Raindrops alpha is also defined using random function. Based on alpha we create scale values and with this we have effect that closer raindrops have less transparency. We also use alpha value to define raindrops speed inside onEnterFrame function. This way we create effect that closer raindrops move faster than those behind. That's all actually. SWF is 597 bytes total.

I hope you enjoyed this tutorial. You are free to use it in any way you like, mentioning this blog highly appreciated. Thanks.


similar post :: Pure CSS Rain Effect
.