Rain effect in flash

This Flash tutorial will teach you how to create a simple rain effect. This creates the effect of rain drops falling vertically from the top of the stage area. I used an actionscript 2.0 file for this tutorial.


Rain effect part 1

Step 1

Open a new Flash document.
Select an appropriate stage size. I used 550 x 200 pixels. The size of the stage does not affect the final result.


Step 2

Select Insert > New symbol. Give your symbol an appropriate name e.g. rain. And check the type movie clip the click ok.

Now select the Oval tool (O) and drag a thin oval shape onto the stage. I used #00CCFF colour, but you whatever colour you want. Your shape should look something like below:



Return to the main timeline by clicking the back arrow or on the scene 1 button on the timeline.

**Make sure your shape is as close to the registration point as possible. This creates a nicer rain drop effect. If your shape is too far away from the registration point it makes your rain effect look odd, as it creates large gaps between rain drops. You can test this out later, if you wish.


Step 3

On the library panel right click on your movie clip and select linkage. If you can’t see the library panel select Window > Library or Ctrl + L. Give the identifier the name “rain_id” and check export for actionscript and export in first frame, like below:




Step 4

On the timeline right click on the 1st frame of layer 1 and select Actions. And enter the following code:

1. var rain_speed:Number = 10;
2. var rain_density:Number = 50;


3. for (i= 0; i<= rain_density; i++) {
4. _root.attachMovie("rain_id", "rain"+i, _root.getNextHighestDepth(), {_x:Math.random()*Stage.width, _y:Math.random()*Stage.height});
5. }
6. makeRain = function () {
7. for (i=0; i<=rain_density; i++) { _root["rain"+i]._y += rain_speed;
if (_root["rain"+i]._y>Stage.height) {
_root["rain"+i]._y = 0;
}
8. }
9. };
10. setInterval(makeRain, 20);

**Lines 1-2, sets the speed and density of the rain. So if you want the rain to fall faster you can increase the number. The same with density, if you want more rain drops to fall on the stage then you can increase the number.

Lines 3-5, attaches the rain drop you created dynamically on the stage by using the attachMovie function. This function also randomly places your rain drop within your current stage boundaries. The For loop sets the number of rain drops you want on the stage.

Lines 6-8, the makeRain function repeatedly performs a specific task. This task is for each rain drop to be set to speed of the rain drop of the variable rain_speed. The rain drop is limited to the height of the stage, so if a rain drop goes over the bottom of the stage it will return back to the top.

Line 10, the setInterval function called the function makeRain every 10 miliseconds. This function makes the rain drops become more randomise as the object is call at periodic intervals, but you could also use the following code:

_root.onEnterFrame =function(){
makeRain()
}


Step 5

Test your movie clip Ctrl + enter.





You should now have a rain effect. Feel free to contact me for any questions or comments.