Friday, August 1, 2008

How To: Create Rain Effect



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:

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

    ReplyDelete
  2. -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-

    ReplyDelete
  3. 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.

    ReplyDelete
  4. 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-

    ReplyDelete
  5. 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

    ReplyDelete
  6. To James:

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

    ReplyDelete
  7. 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

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

    Ah Info Source

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

    ReplyDelete
  10. Any idea/help on how to do this on ActionScript 3

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

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

    ReplyDelete
  13. 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?

    ReplyDelete
  14. 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-

    ReplyDelete
  15. 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)

    ReplyDelete
  16. Thank you for the great tutorial!!

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

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

    ReplyDelete
  18. 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?

    ReplyDelete
  19. 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!!

    ReplyDelete
  20. This Saved Me A lot Of Time,, Thank you

    ReplyDelete
  21. 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!

    ReplyDelete