feedburner
Enter your email address:

Delivered by FeedBurner

feedburner count

How To: Create Rain Effect

Labels: , , ,



In this simple but detailed tutorial, you will learn how to create rain effect using actionscript which can be used in your animation.
Step1) Create a new file (Note: It has to be Actionscript 2.0 or else you will get errors), then using the properties panel change the background to BLACK.
Step2) Now go to Insert>New Symbol


Step3) Name it circleclip and the type is Movieclip and click on Advanced and tick Export for Actionscrip and hit OK.


Step4) Now you should be inside the circleclip symbol. Now select the rectangle tool and for the stroke colour select none (the box with a diagonal line through it).

Step5) For the fill colour, open up a colour panel by Windows>Color or Shift+F9 then click on type and select Radical.




Step6) Using the rectangle tool draw a rectangle of any size because we can adjust it later.

Step7) Now select your rectangle and click on Gradient Transform (F), drag the gradient tranform tool until it looks like the image below.


After that your rectangle should look like this:


Step8) Now you may think your rectangle is abit big for a raindrop and it is..so click on your raindrop image you just made and in the properties panel, input the following measurements:

Step9) Ok nearly finished! Now we go back to scene 1 by clicking



Step10) Click on the first frame and Right Click> Actionscript or press F9 to get the actionscript panel up. Click the following link and copy and paste the code into your actions box:





Step11) This step is optional but you can change the speed and amount of rain drops you want by simply changing the values




23 comments:
gravatar
The Propagation said...
August 3, 2008 at 9:54 PM  

too bad the code you put to copy doesn't work

gravatar
Maggie Zhang said...
August 4, 2008 at 12:55 AM  

-Edit-

There had been some problems with blogger erasing my code as they think it has a broken tag but now i have uploaded the code as a txt file which can be opened via the link.

-Learn2Flash-

gravatar
Anonymous said...
August 6, 2008 at 12:16 PM  

Well its certainly not in your RainDropCode button you have above. I just tried this tutorial and it doesn't work at all. I get 42 errors when I try to test the movie.

gravatar
Maggie Zhang said...
August 7, 2008 at 12:39 AM  

To Adam:

I am sure the code works and I have solved your problem. Actually it was my mistake for not mentioning that this could only be used for Actionscript 2.0 You can choose New File> Actionscript 2.0 and follow this tutorial and it would work. If you have any problems please do not hesitate to ask and I am very glad that you have pointed out the problem for me.

-Learn2Flash-

gravatar
Anonymous said...
August 7, 2008 at 1:58 AM  

thankyou very much for your effor of making this tutorial! I was able to put this on my animation and saved me alot of time =D

gravatar
Maggie Zhang said...
August 8, 2008 at 2:25 AM  

To James:

You're very welcome and i am happy that this tutorial has helped you.

gravatar
Anonymous said...
September 8, 2008 at 10:15 PM  

there is a problem in testing the movie
we donot get any animation on playing it
the first frame in scene1 become blank as we make movieclip inside it
it is not working
please help it out

gravatar
taylor1940 said...
September 12, 2008 at 11:21 PM  

It's a nice article that teaches us how to create rain effects.
---------------------
taylor

Ah Info Source

gravatar
Unknown said...
September 20, 2008 at 4:36 AM  

very nice job sir

gravatar
Anonymous said...
September 30, 2008 at 6:25 AM  

hey good

gravatar
Anonymous said...
October 2, 2008 at 8:37 AM  

you have to delete the line with the "cacheAsBitmap" stuff, then it will work

gravatar
Anonymous said...
November 4, 2008 at 9:27 AM  

Any idea/help on how to do this on ActionScript 3

gravatar
Anonymous said...
February 20, 2009 at 6:06 AM  

Hey, any ideas why I get only one single raindrop?

gravatar
Anonymous said...
February 20, 2009 at 10:26 AM  

Hey, does anyone know how to make it upside down? so that it rains from the bottom up?

gravatar
Anonymous said...
April 24, 2009 at 4:02 AM  

this is great i got it working with my own symbol. But I also have a button on this page which takes me to a new movie clip and the rain is still showing on the new movie clip. How do I get it to disappear?

gravatar
Maggie Zhang said...
April 24, 2009 at 7:45 PM  

Hi:
Glad you've got it working. Have you tried making your new movie clip in a entirely new flash file and then link the button to the file?
I have used this technique to create a DVD like beginning where the audience can click on different buttons, and for each button I link them to separate Flash files.
Tell me how it goes and I shall help you with it if you have anymore problems.

Cheers,
-Learn2Flash-

gravatar
Alex said...
May 23, 2009 at 11:49 AM  

hey im using flash mx 2004 educational version could you help me out with a simple action code for rain (im not to familiar with actionscripts to begin with)

gravatar
Anonymous said...
August 17, 2009 at 1:16 PM  

Thank you for the great tutorial!!

Curious if you could explain how to increase the speed of the raindrops from falling slowly to fast?

gravatar
Anonymous said...
September 30, 2009 at 2:47 AM  

thanks ya...
its very useful to me... some one animation am used it... it very nice by shanmugam

gravatar
Anonymous said...
March 4, 2010 at 12:51 AM  

My framerate seems to drop radically after only 30 seconds or so...
This seems to be a problem that occured after i added rain to my animation. Anyone know anything about this?

gravatar
FabiotheTurtle said...
March 9, 2011 at 3:34 AM  

Wow man, this is freaking awesome! I was thinking of DRAWING in the rain drops, and wow. This is just, so, SO much better. THE HEAVENS HAVE SENT THE RAIN ANGEL!!

gravatar
Anonymous said...
August 25, 2011 at 5:04 AM  

This Saved Me A lot Of Time,, Thank you

gravatar
Anonymous said...
October 3, 2011 at 3:26 AM  

Hi, I am having a problem. I am trying to make it so it rains on top of various other things I have going on in my FLA file. For some reason when I test the rain (I made a separate layer for it) it doesn't animate anything? There is no animation. I have followed all the steps above accurately. What is my problem? Thanks!

Post a Comment

Post a Comment