Create a Rain Effect in Flash Using ActionScript 3.0

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!

Final Result Preview

Let's take a look at the final effect we'll be working towards:

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:

package Classes
{
/* Import required classes */

import flash.display.MovieClip;
import flash.events.Event;

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.

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

private var dropsNumber:int; //The number of rain drops; its value is set in the parameters

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	{
3	offset *= -1;
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:

for (var i:int = 0; i < drops; i++)

{

var drop:Drop = new Drop();

drop.fallSpeed=fallSpeed;
drop.windSpeed=windSpeed;
drop.dir=dir;
drop.hArea=hArea;
drop.vArea=vArea;

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

dropsVector.push(drop);

addChild(drop);

} //End of For

inTheDirection();  

} //End of init function

This code adds the Drop MovieClip to the Vector and then to the stage. It also calls the "direction" function.

Step 15 - Direction

private function inTheDirection():void
{
for (var i:int = 0; i < dropsNumber; i++)
{
switch (dropsVector[i].dir)
{
case "left" :

   dropsVector[i].addEventListener(Event.ENTER_FRAME, moveLeft);

   break;

   case "right" :

   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
   dropsVector[i].addEventListener(Event.ENTER_FRAME, moveRight);

   break;

   default :

   trace("Error");
    }
    }
    }

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

private function moveLeft(e:Event):void
{
e.target.x-=e.target.windSpeed;
e.target.y+=Math.random()*e.target.fallSpeed;

   if (e.target.y>e.target.vArea+e.target.height)
    {
    e.target.x = Math.random() * (e.target.hArea + (offset * 2));
    e.target.y=- e.target.height;
    }
    }

   private function moveRight(e:Event):void
    {
    e.target.x+=e.target.windSpeed;
    e.target.y+=Math.random()*e.target.fallSpeed;

   if (e.target.y>e.target.vArea+e.target.height)
    {
    e.target.x = Math.random() * (e.target.hArea - offset * 2) + offset * 2;
    e.target.y=- e.target.height;
    }
    }
    }
    }

This moves the Drops based on the parameters of the main function. It then resets the position when drops move outside the effect area.

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:

import Classes.Rain;

var rain:Rain = new Rain();

rain.init(200, 50, 5, 600, 300, "left");

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!