Thursday, 11 December 2008

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.

14 comments:

asifa 15 March 2009 at 09:30  

thank u 4 posting such tutorials

ranjith kervashe 11 June 2009 at 03:59  

THANK U

uday kervashe 18 June 2009 at 11:41  

good thank u

colossal37 27 June 2009 at 14:56  

How do you end the rain?

iliketo 28 June 2009 at 05:54  

@colossal37

You can remove the setInterval method.

Anonymous 20 October 2009 at 19:34  

How do I stop the rain?

iliketo 21 October 2009 at 06:59  

@Anonymous

You can remove the setInterval method.

Butterfly 28 October 2009 at 08:17  

Hey thanks for the tutorial

Is there anyway to put the rain inside a square? instead of being in all the stage?

iliketo 28 October 2009 at 09:09  

@Butterfly

Instead of attaching the movie clip to the root you can change this for a square movie clip, but remember to change all the instances of the stage for the square movie clip size.

Anonymous 7 January 2010 at 19:03  

I'v creat a button on the same stage to stop the rain with no luck. I can remove the interval and then use
unloadMovie(this)

but u end up with rain drop static on the screen any help on what to add to button to stop the rain?
thanks

iliketo 8 January 2010 at 03:43  

@Anonymouse

Use the removeMovieclip() method.

James Butterly 8 June 2011 at 16:43  

Have You got this in AS3?

Dare Invaders 13 September 2012 at 18:56  

Hello can you please tell me how to make the rain effect be in the background so that it rains behind my previous images?

iliketo 15 September 2012 at 00:32  

@Dare

Add the code into a movie clip and move the movie clip to the layer below.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP