Subscribe to RSS
get email updates
polyGeek.com
polyGeek.com polyGeek.com

Particles

January 19th, 2008 . by polyGeek

Particles is a class that manages simple MovieClip motion. Obviously by it’s name it can be used to create particles such as falling snow, leaves or anything else. And the MovieClips don’t have to fall. They can also float up. ( Download class files ) ( API documentation )

At it’s heart the Particles class is based on the physics from Kieth Peter’s book Making Things Move.

Here’s the essentials of how it works:

  • You create MovieClip(s) that are linked in the Flash Library – I’ll refer to them as dust.
  • Then you create other MovieClip(s) on the Stage that act as the source of where the linked MovieClips will be emmited from – I’ll refer to them as sources.
  • Lastly you create a MovieClip where the dust can be created dynamically – I’ll refer to that MovieClip as the holder.
  • And if you want you can specify an array of obstacles for the dust to bounce off of.

It’s important to know that there can be any number of dust and source MovieClips but only one holder is needed.

The way the Particles class works is that it attaches dust MovieClips at random intervals depending on the rate you can set.

The dust is always created within the area occupied by one of the source MovieClips that you specify. So if you have a very small source MovieClip then the dust will appear to come out of a point. Or if you have a horizontal line that spans across the Stage as a source then the dust will appear to fall out of that line. That’s something you might do if you wanted to create a snowing effect.

The holder is the MovieClip where the dust is attached at runtime. Each dust particle is always monitoring to see if it still fits within the area that the holder occupies. If it goes outside of that area then it removes itself from the holder so that it doesn’t waste CPU cycles. Therefore you can’t have an emptyMovieClip as the holder because the dust would be removed as soon as it was created. In most cases you would want the holder to be the size of your Stage. But depending on your design it could be smaller or larger as needed.

Lets make some Particles

Here is how you would create an instance of Particles that would look like what you see above. ( download source )

1
var simpleDust:Particles = new Particles( holder, [sourceMC], ["mote"] );
1
simpleDust.setDustPerSec( 33 );

The first line creates an instance of the Particles class and the second line sets the rate of dust production at, roughly, 33 per second. I say roughly because it’s all random. You can slow down the rate or speed it up but it will always fluctuate randomly around the value you set.

What’z with the brackets? [ ]

You’ll notice something a little different in the signature. There are brackets around the sourceMC and “mote”. The reason for that is that those are actually arrays that are created inline. That’s because you can have multiple sources and multiple dusts linked in the library. When you have multiples of either then one is randomly selected each time a dust is created.

Here’s an examle.

Here’s the code for that: ( download source )

1
2
3
4
5
6
7
8
9
10
// balls is an array of strings that is the collection
// of Linkage IDs that you want to use as dust
var balls:Array = ["ball_yellow", "ball_red", "ball_green", "ball_blue"];
// sources is an array of MovieClips - no quotes - that
// are being used as the origins for the dust particles
var sources:Array = [sourceYellow, sourceGreen, sourceRed];
// create an instance of Particles
var multiples:Particles = new Particles( holder, sources, balls );
// set the dust rate so that it will start
multiples.setDustPerSec( 33 );

You’ll notice that these animations don’t slow down no matter how long they run. That’s because once a piece of dust has an _alpha of less than 10 it will automatically delete itself so as to not waste resources. And remember if a dust passes outside the boundaries of the holder it will also delete itself.

There is a lot more that Particles can do that will be covered in later tutorials. And in the near future I’d like to rewrite it in AS3, if I have the time.

Post to Twitter Post to Delicious Post to Facebook Post to Reddit Post to StumbleUpon


similar posts

8 Responses to “Particles”



[...] Read the introduction to the Particles class here. [...]

comment number 2 by: Marc Hughes

Nice stuff. I started writing a general purpose AS3 particle system a couple weeks ago and just ran across yours. Thought I’d drop a note for a fellow particle-maker.

http://rogue-development.com/pulseParticles.html

Not sure about you, but I find this stuff really fun to play with.

Cheers,
-Marc

comment number 3 by: polyGeek

@Marc, thanks for the link. That Pulse particle-maker looks really cool. I’ll go ahead and re-write mine in AS3 just because it would be pretty easy to do and good practice but Pulse is going to be hard to beat.


[...]  http://polygeek.com/452_adobeflash/actionscript_particles  [...]

comment number 5 by: Sus

Hi…
Great work, and thank you for sharing.

Im not that hardcore in cs2 and I don’t know what to do with the 2 files particle.as and particles.as. How do they become a part of my fla file???

comment number 6 by: Sus

Hi
I think I got it; just download the codes of the links below the examples. oops. Ok, now I placed the 3 files in same directory. But I get this error:

The class or interface ‘FairyDust’ could not be loaded.
in
var multiples:FairyDust = new FairyDust( holder, sources, balls );
and
var simpleDust:FairyDust = new FairyDust( holder, [sourceMC], ["mote"] );

hmm…I didn’t change anything

comment number 7 by: polygeek

@Sus, dude, I’m really sorry. I don’t know how I got the files so crossed up. You can download the new zip-package and everything works. Lots of added examples of how to use Particles.

Basically this started out as a specific project to help a friend at SmileBox make FairyDust, as he called it. I wrote this code to be a general sort of solution to making something like FairyDust, snow, rain, falling leaves, whatever.

But then in my examples I forget to switch the class paths around after they were updated. But all is better now.

Have fun.

comment number 8 by: Sus

Thanks a lot for the work I made you do. Cant wait to try it out

   Welcome back (Change)

Leave a Reply

comment feed RSS   subscribe to this comment thread

Recent Posts

   



polyGeek.com

© Copyright 2008 polyGeek.com / Dan Florio, All Rights Reserved Except Where Explicitly Stated
Web Developement Blogs - Blog Catalog Blog Directory
M2 Websites
Local Directory for Los Angeles, CA

Better Tag Cloud