Create a Rain Effect in Flash

Using ActionScript 3.0

Effects Flash
In this tutorial we'll create a dynamic rain effect using ActionScript 3.0. The effect
can be customized in many ways by just changing a few lines of code. Let's get
started!

Step 1 - Brief Overview

We'll draw a simple rain drop, then using our ActionScript skills we'll duplicate,
move and position the MovieClip to get a nice rainy effect.

Step 2 - The .fla Document

Create a new ActionScript 3 document (File > New...). Set the Stage size to your
desired dimensions, I've used 600 x 300 px.
Step 3 - Choose an Image
Add or draw an image to use as the background, I used a modified image by
JinThai, licensed under Creative Commons.
Step 4 - Layers
Rename the first layer to "Background" then create another one and name it
"Code" (we'll use this one to place our ActionScript on). You can lock the "Code"
layer to avoid placement of unwanted drawings in there.

Step 5 - Creating the Drop

Create a graphic to use as the rain drop. Set its color to white and use a linear
gradient for the alpha, mine is 40 to 15. Convert it to a MovieClip and name it
"Drop", remember to check the "Export for ActionScript" checkbox.
Step 6 - Importing Required Classes
Let's start off some code in a separate ActionScript file:
1 package Classes
2 {
3 /* Import required classes */
4  
5 import flash.display.MovieClip;
import flash.events.Event;
6
Here we import the Classes that we'll use. Remember that the word next to
"package" is the name of the folder where our Class is located.

Step 7 - Extending the Class

1 //We need to extend the class so we can use the addChild() method.
2 public class Rain extends MovieClip
3 {
 Extending the MovieClip class will allow our class to inherit all of the methods,
properties and functions that the MovieClip has. In this case we use it to get
access to the addChild() method.

Step 8 - The Variables

Here we'll use an exclusive Flash Player 10 Class "Vector". Put simply, the Vector
Class works like an Array, but is considerably faster.
1 private var offset:int = 50; //This is the offset area in pixels that the effect will take. Without this, the corners of the effect area will be rain-free
2 private var dropsNumber:int; //The number of rain drops; its value is set in the parameters
3 private var dropsVector:Vector.<MovieClip> = new Vector.<MovieClip>(); //The Vector that will store each rain drop

Step 9 - Main Function

1 public function init(drops:int, fallSpeed:int, windSpeed:int, hArea:int, vArea:int, dir:String):void
2 {
3  
4   dropsNumber = drops;

The main function, with some parameters making the effect easy to adapt to your
needs. You can change the number of drops, the speed at which the drops fall,
the speed at which the drops will move horizontally, the size of the effect area
and the direction of the rain (left or right).

We set the dropsNumber value here.

Step 10 - Left or Right?

By default, the offset var is set to work with the left side, so we need to check
where the rain will go and change the offset if the direction is right.
1 if (dir == "right")
2 {
offset *= -1;
3
}
4

Step 11 - Using the Drop MovieClip

In order to show various instances of the Drop MovieClip we have to create a new
Drop Object inside a "For" statement:
01
for (var i:int = 0; i < drops; i++)
02
 
03 {
04  
05 var drop:Drop = new Drop();
06  
07 drop.fallSpeed=fallSpeed;
08 drop.windSpeed=windSpeed;
09 drop.dir=dir;
drop.hArea=hArea;
10 drop.vArea=vArea;
11
We use the "drops" variable to get the user defined number of drops and set the
variables inside the MovieClip for later use.

Step 12 - Position
Set an initial random position for the Drops.
1 drop.x = Math.random() * (hArea + offset);
2  
3 drop.y=Math.random()*vArea;

Step 13 - Scale
1 drop.scaleX = Math.round(((Math.random() * 0.8) + 0.3) * 10) / 10;
2 drop.scaleY=drop.scaleX;
This sets the scale of the Drops between 0.3 and the original size.

Step 14 - Adding the Drops to the Stage

1 dropsVector.push(drop);
2  
3 addChild(drop);
4  
5 } //End of For
6  
7 inTheDirection(); 
8  
} //End of init function
9
This code adds the Drop MovieClip to the Vector and then to the stage. It also calls
the "direction" function.

Step 15 - Direction
01 private function inTheDirection():void
02 {
03 for (var i:int = 0; i < dropsNumber; i++)
04 {
05 switch (dropsVector[i].dir)
06 {
07 case "left" :
08  
09    dropsVector[i].addEventListener(Event.ENTER_FRAME, moveLeft);
10  
11    break;
12  
13    case "right" :
14  
15    dropsVector[i].scaleX*=-1; //Our Drop was created going to the left, so we flip it to make it look like it's going to the right
16    dropsVector[i].addEventListener(Event.ENTER_FRAME, moveRight);
17  
18    break;
19  
20    default :
21  
22    trace("Error");
23     }
24     }
25     }
In this function we use another "For" to get access to the MovieClips inside the
Vector. Then we check the direction parameter and add a Listener to the
corresponding function. This will all take care of the movement and the position.

Step 16 - Move Functions

01
02
03 private function moveLeft(e:Event):void
{
04 e.target.x-=e.target.windSpeed;
05 e.target.y+=Math.random()*e.target.fallSpeed;
06  
07    if (e.target.y>e.target.vArea+e.target.height)
08     {
09     e.target.x = Math.random() * (e.target.hArea + (offset * 2));
    e.target.y=- e.target.height;
10     }
11     }
12  
13    private function moveRight(e:Event):void
14     {
15     e.target.x+=e.target.windSpeed;
    e.target.y+=Math.random()*e.target.fallSpeed;
16
 
17    if (e.target.y>e.target.vArea+e.target.height)
18     {
19     e.target.x = Math.random() * (e.target.hArea - offset * 2) + offset * 2;
20     e.target.y=- e.target.height;
21     }
    }
22     }
23     }
24
25
This moves the Drops based on the parameters of the main function. It then
resets the position when drops move outside the effect area.

Advertisement

Step 17 - Using the Class

That's the class finished, to make use of it we go back to the Flash IDE, open the
Actions Panel and write:
1 import Classes.Rain;
2  
3 var rain:Rain = new Rain();
4  
5 rain.init(200, 50, 5, 600, 300, "left");
6  
7 addChild(rain);

This will create a new Rain Object, then call the main function to start the effect.
Finally we add the effect to the stage.

Conclusion
Remember that you can play with the parameters to get various effects and that
you can also change the drops by drawing whatever you like. Keep trying different
combinations to get the exact effect that you want.

I hope you enjoyed reading the tut as much as I did writing it. Thanks for reading!