1. Code
  2. Effects

Create a Rain Effect in Flash Using ActionScript 3.0

Read Time:5 minsLanguages:

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:

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

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.

Step 9 - Main Function

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.

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:

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.

Step 13 - Scale

This sets the scale of the Drops between 0.3 and the original size.

Step 14 - Adding the Drops to the Stage

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

Step 15 - Direction

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

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:

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


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!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.