18 November 2008

Flash Tutorial : Rain Effect

This is simple tutorial on how to create more real life rain effect (or snow or whatever falls down in your neighborhood). You will need just few minutes to complete full tutorial, just follows explanations.

1. Create new flash document. I have used dimensions 500px and 400px with #699 background color and 30 frame per second. Higher value of fps will make animation smoother.

2. Create new movie clip that will represent single raindrop. My dimensions of movie clip is 10px by 10px. Drag mc from library to stage to position approximately y=0, x=-20, just left from top-left Stage corner but outside of view. Name your instance 'raindrop'. Now, the code.

3. First, we will create raindrops counter like this:
var counter:Number = 0;

4. Next, we write onEnterFrame for 'raindrop' instance. This function will act as timer. Every time 'raindrop' passes Stage height it returns to the top and fires clone function which creates new raindrop. Actually, it's kinda unusual to create new instances this way, but I was in a hurry...


raindrop.onEnterFrame = function() {
if (this._y < Stage.height) {
this._y += 30;
}else{
clone();
}
}

5. Now let's see that clone function and I'll try to explain it.


function clone() {
if(counter < 50) {
var dx:Number = random(500);
var dy:Number = random(800);
var myObject = new Object();
myObject._x = dx;
myObject._y = dy-800;
myObject._alpha = random(100);
myObject._xscale = 50 + myObject._alpha;
myObject._yscale = myObject._xscale;
myObject.onEnterFrame = function() {
if (this._y < Stage.height) {
this._y += this._alpha / 10;
}else{
this._y -= 400 + Math.floor(Math.random()*400);
this._x = Math.floor(Math.random()*500);
}
}
raindrop.duplicateMovieClip("nr" + counter, this.getNextHighestDepth(), myObject);
counter += 1;
}
}


Counter is there to stop producing new raindrops when their number is greater then 49. New raindrops are created using duplicateMovieClip method. It uses 3 parameters. First one is unique instance name, second one is depth and third one myObject is most important. Object is obviously the type of myObject and everything needed is congregated here.

Start position is defined using random function to dx and dy variables. Raindrops alpha is also defined using random function. Based on alpha we create scale values and with this we have effect that closer raindrops have less transparency. We also use alpha value to define raindrops speed inside onEnterFrame function. This way we create effect that closer raindrops move faster than those behind. That's all actually. SWF is 597 bytes total.

I hope you enjoyed this tutorial. You are free to use it in any way you like, mentioning this blog highly appreciated. Thanks.



.

21 comments:

polyGeek said...

Good work with the simulated depth. Question, can you make the drops make a splash at the bottom? :)

flanture said...

thanks

splash would be just animation addition, feel free to create one :)

Anonymous said...

How would you go about stopping the function raining?

dave

Liz said...

Yes, I too am wondering about how to make it stop after a certain frame/time?

Also, is there a way to have the raindrops BEHIND an image? (like if I were to have clouds - and wanted the raindrops to fall from behind the cloud image?)

Your help is appreciated!

Thanks a bunch!
Liz :)

flanture said...

How to stop the rain? Well, you have several options available, like counter variable which will increase inside onEnterFrame function and can be used for stopping producing new raindrops after certain value is reached.

Another option can be custom made Timer class.

If you have any specific problem about this effect, please send me your FLA with detailed explanation so I can take a look.

Liz said...

I have figured out that if you apply the action script inside the movie clip then you can just stretch the movie clip through the main time line until you need it to stop :)

javier said...

Hi, pretty cool. and i wonder how to change the direction...?

flanture said...

Hello Javier,

to change direction, first of all you have to set alpha property for raindrop instance like this:

raindrop._alpha = 0;

then in onEnterFrame function for myObject just after (or just below) this line:

this._y += this._alpha / 10;

add this line:

this._x -= 1;
(change direction here [-3, .. ,3 ] approx.)

this is just one option

Draason said...

When I try to paste the clone code into my flash project, the script contains an error. Maybe I am putting the code in the wrong place? help?

flanture said...

draason, can you give me some more details? remember, this is as2 code

Draason said...

Ok, so first im not too skilled with flash or coding. but this is the error i recieve when i check the syntax:

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Syntax error.
function clone() {if(counter < 50) { var dx:Number = random(500); var dy:Number = random(800); var myObject = new Object(); myObject._x = dx; myObject._y = dy-800; myObject._alpha = random(100); myObject._xscale = 50 + myObject._alpha; myObject._yscale = myObject._xscale; myObject.onEnterFrame = function() { if (this._y < Stage.height) { this._y += this._alpha / 10; }else{ this._y -= 400 + Math.floor(Math.random()*400); this._x = Math.floor(Math.random()*500); } } raindrop.duplicateMovieClip("nr" + counter, this.getNextHighestDepth(), myObject); counter += 1;}}

Total ActionScript Errors: 1 Reported Errors: 1

: I'm not sure if that will help you figure out my problem. It might be the fact that its AS2.

Sirius said...

hi, nice tutorial ...
but mine not work i can juz have 1 drop of rain...
can u help me or can u upload ur working file to show ...
thxz ...

flanture said...

@sirius shoot me an email flanture [at] gmail [dot] com with details

Shakespeare87 said...

Interesting way of alpha and scale... never thought of that... smart and neat ^ ^... and the speed makes a great illusion of depth... great great... thanks ^ ^....

Magnus said...

i got a couple of errors. did exactly what stood there but i got these errors: 1120: Access of undefined property dx (same with dy).

1119: Access of possibly undefined property height through a reference with static type Class.

im terrible at actionscript by the way, so theres probably super easy way to fix it that i cant see.

Magnus said...

oh great.. i didnt notice this was as2.. im using as3 so that's probably why im getting these errors. blah.. in class im suppose to use as3 and its freakin impossible to get a proper tutorial on as3! i'd have to buy a book cause our schoolbook is useless

flanture said...

Hi Magnus, remember, this is AS2 code, not AS3. I suppose that's why errors appear ... If not, send me your FLA so I can take a look.

flanture said...

I should probably post AS3 version then :)

Magnus, check my reviews on AS3 books and more.

Magnus said...

yes i remembered after that it was as2! haha but yeah i'd like to check out your reviews, though i only have programming in as3 as a subject in school, but i find it very interesting so i'd like to learn more about it :) thanks!

Anonymous said...

I was wondering how you could make the rain disappear after reaching a certain point on the stage (so I can add a ripple effect).

The Game said...

Great Tutorial, thanks for share.

 

template by blogger templates