In this short tutorial I will show you how simple it is to create a simple rain animation using flash 8 and action script 2.0. 

After opening a new document (the size doesn't really matter), the first thing to do is to create a rain drop graphic.

Create a shape like this:

Figure 1: Rain Drop shape drawn in flash

Next make the rain drop into a movie clip, by clicking right clicking and choosing convert symbol. Then locate the new shape in the library and click Linkage, check the export to action script and click ok. This makes the movie clip available for use in our action script (coming up next).

Create a new layer and put the following script there:

var dropInit:Object = new Object();
var dropsCount = 50;
var alpha = 50;


// This function returns a random number
randomize = function (min:Number, max:Number):Number {
	var range = max - min;
	var resultRandom = Math.random()*range;
	resultRandom += min;
	return resultRandom;
};


dropInit.onEnterFrame = function() {
	this._x += this.speedX;
	this._y += this.speedY;
	if (this._x > Stage.width) {
		this._x = 0;
	}
	if (this._y > Stage.height) {
		this._y = 0;
	}
};


for (var i:Number = 1; i < dropsCount; i++) {
	var newName = "rainD" + String(i);
	var newDepth = this.getNextHighestDepth();
	newDrop = attachMovie("RainDrop", newName, newDepth, dropInit);
	newDrop._x = randomize(0, Stage.width);
	newDrop._y = randomize(0, Stage.height);
	newDrop.speedX = randomize(0, 4);
	newDrop.speedY = randomize(15, 30);
	newDrop._alpha = alpha;
}

The code creates 50 instances of our movie clip and attaches an event handler for moving the rain drop. Each drop gets its own speed through the use of randomization to make our rain animation feel more realistic. The onEnterFrame is fired everytime the movie clip is first drawn on that frame. Since we only have 1 frame, the animation play head will loop back to the first frame everytime, and each time increment the X and Y coordinates of our rain drops, creating the illusion of falling rain.

Note: if we add an additional frame to our animation, the play head will still loop back to the first frame, but will also cause all of our script to execute again. So we will keep adding 50 drops of rain every time, which is not what we want, where is if we only have 1 frame the code is only run once. The event handler code (dropInit.onEnterFrame) runs every time a drop enters the stage since we attached that handler to the movie clip already.

Here is our final product:

Try playing around with the settings to get a better understanding of how it works. Remember, you are only limited by your imagination, go a head and have fun with it.

---

Add this page to your favorite Social Bookmarking websites