Rain Effect

This is another version of the Rain Effect presented in Flash Water Effects so be sure you have read that one. The old version was made by placing different instances of the same drop falling in different time and space point. This new version creates a real random effect, just like the real rain. The advantages are: the small size of the final Movie and easy manipulation (by changing a few parameters).

From Flash Water Effects you will learn how to create a single drop. Copy one drop and place it in a new Flash file. Name the Clip "drop". Place it like you see in the image:

Now place another Clip that will serve as the loop that duplicates the drop of rain. Click it (in our case the text Object "engine' is that Clip) and place the next Action Script code:

onClipEvent(load) {
	//initializing variables befre playing
	i = 1; // initializing counter
	max = 200; // setting the number of drops
}

onClipEvent(enterFrame) {
	if( i <= max ) {
		//checks to see if we haven't completed the task
		_parent.drop.duplicateMovieClip("drop"+i, i); // duplicates "drop"
		i++;
	}
}

In the first part we declared the variables: the counter "i" and the number of drops "max". Each time the Clip enters a new frame, we check to see if we created 200 drops, and if not, we create one drop. Then we tell the counter to move forward. This creates one drop per frame in the first 200 frames, but because the drop Clip lasts for 13 frames, (after finishing the multiplication) 15-16 drops will fall simultaneous in each frame.

But all the drops are identical so if you compile right now, you will see a white line, because all the drops are in the same place. Here is where the random part comes into place. Open the drop Clip, and on the first frame place the next Action Script lines:

xx = random(200);
// generates an integer number between 0 and 199
setProperty(_target, _x, xx);
// sets the horizontal position to a value between 0 and 199
yy = -31-random(30);
// generates an integer number between -60 and -31
setProperty(_target, _y, yy);
//sets the horizontal position to a value between -60 and -31

Depending on where you want the drop to land, you have to generate the position between some strict limits. How can you find these limits? See what the drop's coordinates are in the main stage and think at an area near that. Here is how we did our arrangement.

You may also add:

scale = 70 + random(30); 
setProperty(_target, _xscale, scale);
setProperty(_target, _yscale, scale); 

These 3 lines scale the drop to a value between 0.7 and the original size. So the result is the one you see at the top of the page.

In the next tutorial you will see what a button and random generated numbers have in common.