Sunday, 21 February 2010

Rain effect in Actionscript 3

I previously created a rain effect in Actionscript 2 where rain drops fell vertically from the top of the stage area. In this tutorial I will provide code for the Actionscript 3 version. The steps in the AS3 version are very similar to the AS2 one.

Rain effect in Actionscript 3

Step 1

Open a new Flash AS3 file with any stage size.

Step 2

Select the Oval tool (O) and create your rain drop on the stage. I have used #00CCFF colour for my rain, but you can use whatever colour you wish.

Step 3

Convert your rain drop in a movie clip (F8). Give you movie clip an appropriate name, choose the top left registration point then check the export for Actionscript box. Then give the name 'rain' for the class.

Step 4

Select your rain drop movie clip and hit the delete key to remove it from the stage area. The rain drop will be added dynamically onto the stage using Actionscript, so will not be needed on the stage.

Step 5

On the timeline select the first layer then open up the Actions panel (F9) and enter the following code.

//Declares the number of rain drops and the speed of the rain. If you want more or
//faster rain drops you can increase the following numbers accordingly.
var rain_density:uint=20;
var rain_speed:uint = 20;

//An Array to hold the Rain drops.
var rainArray:Array = new Array();

//This creates 20 rain drops on the stage.
for (var i = 0; i<= rain_density; i++) {           

    //This creates a new instance of the rain drop and adds it onto the stage.
    var myRain:rain = new rain();         

    //Set a random x & y location on the stage.   

    //Set a random alpha value between 0.5 - 1.         
    myRain.alpha = Math.random() * 0.5  + 0.5;     
    //Puts the Rain drop into the rainArray.         


//Adds the enter frame event to make the rain effect move.  
stage.addEventListener(Event.ENTER_FRAME, makeRain);   

function makeRain(event:Event):void {          

   //This loops through the array to create the rain drop effect.          
  for (var i = 0; i < rainArray.length; i++) {                    

      //This sets the direction and speed of rain drop.                  
     rainArray[i].y += rain_speed;                  

     //If the rain drop goes pass the stage height then it get returned back to 
     //the top of the stage.                 
     if(rainArray[i].y > stage.stageHeight){
           rainArray[i].y =0;

Step 6

Test your movie clip Ctrl + Enter.

You should now have a rain drop effect in Actionscript 3.


TIMEPASS 29 November 2010 at 04:17  

Thanks dude !!!!!!!
I'm beginner of flash . This helped a lott .
This is the optimal Code for creating rain drops among the examples I've searched .

Thanks a bunch :)

Tilly 8 August 2012 at 17:20  

Hi I'm having problem with the line

for(var i = 0; i< = rain_density; i++){

I get the description error 1084:Syntax error: expecting identifier before assign.

Any tips on how to sort this problem out? All the other sript has been double checked and matches the one given.

iliketo 9 August 2012 at 11:32  


Make sure the 'less than and equals' has no space.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP