ActionScript 3.0 Particle Systems #1: Random Motion

I’ve been working on getting my ActionScript 3 up to speed by going through a stack of videos purchased from learnflash.com, and fair play, I’m really quite enjoying it all.

Expect a couple of these kinds of things over the coming days and weeks :D

That Craig chap off learnflash really knows his stuff – top bloke.

Also, source code and flash files after the jump if you’re that way inclined…

Update I’ve updated all the code to make it start paused, and the animation can be toggled on and off with the space bar. Also, all Particle objects are now instantiated to a vector instead of just called by the same instance name over and over in a loop (which was just horrid code) so now we can access each particle individually through it’s unique element number should we so wish. I guess I was just really tired yesterday after doing like 13 hours of flash and I wanted to post something before I went to bed. Kinda rushed it – oh wells!

Flash File (ActionScript 3.0) Code:

ActionScript 3.0 Particle Class Code:

Adobe Flash CS4 files for the above can be found: here.

20 thoughts on “ActionScript 3.0 Particle Systems #1: Random Motion”

  1. hello,

    i just discovered your site and find it really great. i am learning flash/actionscript now and want to program some interesting animations but i think to accomplish this i have to gain more knowledge about particle moving math and stuff. so I’m hoping this particle series of yours help me on this a little bit.
    if you’re interested how my particles look like you can check it here:
    http://kelemen.webs.com/myparticles/particles.html

    i have a question to ask: in performance’s point of view which is better: instantiating a circle movie clip or generating circles at runtime?

    1. Hey oxid – glad you found some of the ActionScript posts of use!

      As for your question – I had no idea, so I coded something up to find out…

      As I’m trying to do a post-per-day I’ve written it all up and scheduled it to post tomorrow (Saturday the 13th of Feb, 00:01 GMT GMT+11) – and I think it’ll answer your question quite comprehensively! :D

      P.S. Like your particle stuff – keep up the good work!

  2. hi… I am working as a flash trainee programmer in Chennai, and actioscript volunteer too. Your animations are simply great…….. thanks..

  3. hello

    this is great! i just love it but it’s giving me a error :( ERROR 1084: Syntax error: expecting identifier before lessthan.

    SOURCE:

    how do i make it work right?

    thanks in advance

    edit: Modified source line to show the Particle part within angle brackets -r3dux

    1. Hi akira_lee,

      The problem sounds like Flash doesn’t know about the Particle class somehow.. If you’ve copied and pasted the code, did you paste the second lot of code (Particle.as) into a file called Particle.as? If not, try that. Also, both files (the Particle.as -and- the RandomMotion.fla file) have to be in the same directory for it to work.

      Another option is to just grab the provided source code from the link at the bottom of the article (this one) and have a play with the code from that.

      Hope you get it sorted!

      r3dux

    1. Thanks for sending me a link to what you’ve done with the source – looks great!

      The only thing I might add is that the flash CPU usage is a little high because of the large stage size, so to try to deal with that a little it might be worth adding the following to your .fla file near the top, either:

      or

      This will trade-off visual fidelity for lower CPU/GPU usage, and you might be surprised to see that the results aren’t really that noticeable! It’s certainly worth a shot! Another possibility is to lower the frame rate and compensate for any jerkyness of the particles by lowering the movement speed.

      Oh, and when you’re embedding your flash into the page, if you haven’t already – have a bit of an experiment with the the wmode=”gpu” and wmode=”direct” attributes of the embedding code! This can strongly affect CPU usage, too!

      Best wishes & again, great work on the site – it looks superb!

      r3dux

  4. Ok so this works great but I want to remove the keystroke and have the particles start automatically. I’ve tried adjusting the code but have had no luck. What do I remove to make this happen?

    1. Hi Lindsay,

      Instead of me trying to outline all the changes you need to make I’ve done two alternate versions of the .fla code for you:
      No Key To Start – which will start the animation on execution, but still allows you to toggle the particles on/off via a keypress, and
      Non-Interactive – which just kicks off the animation and never stops or allows the user to stop it.

      Just replace the code in your .fla file with the code from your link of choice above, and you should be hot to trot =D

    1. Either draw the objects you want on top last, or place the objects on top on a layer which is above the layer with the particles in the timeline.

  5. i’m using the non-interactive script and it works great.

    is there any way to control when it starts and stops either in the timeline or in action script??

    thanks! beautiful animation!

    Mike

  6. nevermind! figured it out. just copied and pasted the removeParticles function and that worked perfectly.

    ok, what about tweening the alpha of the animation so that it fades in?

    thanks! :)

    1. Hi Michael,

      To tween the alpha of the entire animation, the easiest way I can think of to do it is to add the particles to a MovieClip (instead of adding them directly to the stage) and fade the MovieClip in/out as you please.

      So instead of having this in the addParticles function:

      You might have:

      You can then twiddle the particleMC.alpha property to fade it in/out as you like, which should in turn fade in/out all the particles drawn in it!

      Actually, I wanted to make sure that it worked before commenting, and it does – here’s what I used:

      Hope this helps!

  7. Hello!

    I think I did it right, but I get an error, something like 1172: The definition __AS3__.vec:Vector not found. on Particle.as, Line 1.

    Do you know what the problem may be?

    Thanks!

  8. Oh, I found it. For somewhat reason I was using an older version of Flash Player when compiling. Sorry!

    But thanks anyway for sharing this! :D

Leave a Reply

Your email address will not be published.