ActionScript 3.0 Particle Systems #3: Rain Effect

Even more ActionScript, this time we’re taking particle depth into account and adding a blur to the stage (apparently it’s quicker to blur everything than the individual objects).

Source code and flash files after the jump if you’re into that kind of thing…

I know. The code is hideously over-commented. Don’t worry about it.

Flash File (ActionScript 3.0) Code:

ActionScript 3.0 Raindrop Class Code:

No, really. I know it’s over-commented by a factor of 20 or something – it’s okay. I’m learning. Strip ’em out if they offend thine eyes ;)

Adobe Flash CS4 files can be found: here

9 thoughts on “ActionScript 3.0 Particle Systems #3: Rain Effect”

    1. Well, depending on what you mean:

      – If you mean stop at a certain time (i.e. run for X amount of seconds and then stop)? – then you could create a timer which starts when the animation does and toggles the stop flag (via calling the toggleAnimation function) when the timer flres X seconds later

      – If you mean stop after a certain number of frames, then you could create a framecount variable at startup and increment it each time a frame is drawn, then call the toggleAnimation function when the framecount reaches a given value (i.e. 2000 frames drawn or such).

      Have a go at it yourself (it’s good practice!), and if you’re having problems drop another comment in here and I’ll do the modification and post it here, k?

      Cheers! =D

  1. Hi,

    In my case, I try to implement as raining from the cloud and it would stop after a certain number of frames(TIMELINE).
    I tried so many times to implement it but I just couldn’t get it right as I never learn AS3.0 before(I just learn myself few weeks ago and I am just the beginner).
    Can you please kindly help or teach me how to implement it ?

    Thank you !

    1. Ahh… Okay, I see what you mean now.

      The problem is that the code only runs on a single frame in the timeline (the first frame), and when you move off the frame it stops running the code that was on that frame, and starts running any code on the (now) current frame.

      Have you tried adding the following code to the frame you want to stop the rain on?:

      Or, just copy and paste the contents of the removeRaindrops() function into code for the frame where you want to stop the raindrops from falling.

      Or, and this one’s a bit cheeky, just count the number of raindrops with a variable, and when X amount of raindrops have fallen (i.e. 2000 or however long you want it to last), make it so that each new raindrop has an opacity/alpha of zero (i.e. it’s completely transparent) after the set amount of raindrops have been spawned! In this way, the rain will still be there, but will be invisible. It’s not a great solution, but it’d do the job!

      I haven’t done that much with AS3 code running on timelines, so give some of the above a try, and if it’s still not working for you let me know and I’ll have a look into it.

      Don’t worry – we’ll get there :)

  2. Hmm.. I tried it but it cannot be done based on your example.

    I was trying to modify your example so that it will start raining and stop raining automatically from cloud.
    So, I try to implement but I just couldn’t get it right.

    Actually it doesn’t matter on which timeframe(timeline) or time to be used, as long as it can be used to trigger the raindrops start and stop at certain of time/timeframe.
    Of course I would be prefer timeframe(timeline) since I was trying to implement an animation based on timeframe(timeline).

    Thank you.

    1. Hey King,

      I put together a quick example of calling functions from different locations on the timeline which you can see here:

      The important part to remember is that you can only put AS3 code on keyframes – not just any normal frame. But once you’re on a keyframe, you can access any variables or functions you’ve previously defined (i.e. defined back on frame 1 or whatever).

      The rain stops really abruptly in the example code provided – I just call a toggleTheAnimation() function on each frame where I want to turn the rain on or off, and the function adds raindrops to the raindropVect vector or removes them as appropriate.

      Also, remember that you can add an event listener and attach it to Event.ENTER_FRAME (example) if you wanted to run a function each frame (such as to fade things in, or move them around etc.). In the class, this is exactly what I’m doing to make sure the updateRaindrop function is called to move the position of each raindrop each time a frame is drawn, but you can add other functions to do whatever you want each frame :)

      I really hope this has been of use to you as it’s taken me an hour or two to sort out – if not, then there’s not much else I can do as I’m really short on time with my teaching, studying and family life at the moment, and they have to take priority.

      Best of luck & have fun learning AS3 – it’s a nice little language and I hope you get to make some cool stuff =D


Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.