Flash CS3 Particle Effect Tutorial
Flash Tutorial March 9th, 20087. Randomize the size and opacity. Randomizing the size and opacity of our particles involves just a couple simple lines of code that we're going to add to our addParticle function. Here is the code:

As you can see, the only new code here is on lines 9 and 10. In line 9, we're randomizing the opacity so that it results in a number between 0.2 and 1.0. This will result in an opacity level anywhere from 20% to 100%.
On line 10, we're randomizing the scaleX and scaleY properties in order to change the size of the particle.
Oh, and one more thing! If you want your particle effects to run smoothly, it's a good idea to tell Flash to cache your movie clips as bitmaps. This will significantly improve the performance of your effect. To do this, simply insert the following line of code somewhere around line 15:
dot.cacheAsBitmap = true ;
The final result should look something like this:
So, as you can see, by making just 2 small changes (randomizing the size and opacity), we were able to transform this from a bland, monotonous effect into something beautiful and organic.
Anyways, I hope you enjoyed this tutorial. And I hope you'll take the time to play around with these setting a little bit to try to achieve different results. Part of the fun of creating particle effects is experimenting with them and trying out different settings. So play around a little bit, and if you come up with something interesting, please email the results in a zip file to craig {at} schoolofflash.com.
Here is the FLA file used in this tutorial: particles.zip


March 12th, 2008 at 8:23 am
Thank you. Very nice tutoring style – clean, coherent, well worded.
IB
March 13th, 2008 at 10:14 pm
[...] Flash CS3 Particle Effect Tutorial [...]
March 16th, 2008 at 8:37 am
good day!
first of all, thnx for this wonderful tutorial…
i wonder how to make this particle effect as mask of my pictures…coz i wanted this effect as the transitions of my photo gallery…could someone help me with this?
March 18th, 2008 at 6:27 pm
I’ve been working on an open source particle engine aimed at designers. It lets you create effects like this (and even more complex behaviors) through an interactive particle explorer without writing any Actionscript.
http://www.rogue-development.com/pulseParticles.html
March 20th, 2008 at 11:03 pm
G’Day Craig,
Mate, I’ve been playing with Flash for about 9 months, and only got enough courage to start playing with actionscript about 6 months ago. I struggled for about 3 months and then went off it.
Then about 1 month ago I stumbled over your video tutorials and they just make it all so clear and simple. I have only two days ago upgrade from V8 to CS3 (i.e. actionscript 2 to actionscript 3). I have only had a small taste of whats to come, have been watching your tutorials on AS3 now. Loving every minute of it.
Anyways, just thought you deserve a rap for your efforts.
Thanks.
April 2nd, 2008 at 2:21 pm
This a great effect that has tons of potential.
April 8th, 2008 at 2:42 pm
Let me just say that this is the most thorough Flash tutorial that I’ve ever attempted. Thanks a bunch for the post…this site is going into favorites list immeditealy!
April 17th, 2008 at 2:23 am
This was great. Please make more tutorials as this was the only one I could follow on the web!!
April 28th, 2008 at 8:22 am
Hi Craig,
I finished your tutorial (great btw) but I was wondering if you could tell me how to control the positioning with your cursor? Thanks!
May 7th, 2008 at 12:25 pm
Great tutorial
and if I can help a bit to answer Cynthia Schmutz question.
To control it with mouse you just need to modify 2 lines in the addParticle function:
dot.x = mouseX;
dot.y = mouseY;
Im No an expert since I only have 5 days of experience but it works.
May 24th, 2008 at 7:31 am
Its a very good tutorial But I would like to know, if it is possible to stream .asx radiostations in flash cs3.
Thanks a lot
June 7th, 2008 at 5:37 am
Does anyone know how this could be altered to allow 4 different colours?
Cheers.
June 12th, 2008 at 1:46 pm
I used your particle effect tutorial its great thanks. I tweaked mine and added this:
dot.x = mouseX;
dot.y = mouseY;
How can I make this so that when you mouse over a link the particles don’t interfere with clicking the link?
July 2nd, 2008 at 1:39 am
Can this thing be done in Action Script 2.0? Me and many of my friends want to know this. While dooing it in Action Script 3.0 many of my friends getting error like “playerglobal.swc is missing”. How can this be solved?
July 26th, 2008 at 11:26 am
Very clean and simple effect, I like it
August 6th, 2008 at 3:37 am
I got the following error when i run it in my application:
TypeError: Error #1009: Der Zugriff auf eine Eigenschaft oder eine Methode eines null-Objektverweises ist nicht möglich.
at bg_partikel_fla::disco_4/addParticle()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
disco is the movieclip in which i placed the as.
Thanks for help
August 17th, 2008 at 11:26 am
[...] Read more [...]
September 4th, 2008 at 11:37 am
[...] Creating Particle Effect This concept can be used to create randomized raindrops, snowfall, fire, smoke, bouncing balls, and even some more abstract effects. [...]
September 5th, 2008 at 9:18 pm
Hi Craig,
Excellent tutorial there, but can you please make one for Actionscript 2?
Much apprectiated
guillotine605
September 18th, 2008 at 7:19 pm
Very helpful tutorial. Thanks
September 28th, 2008 at 3:08 am
Great Work . Very Very helpful .. Continue helping us by your Good Works
.
September 28th, 2008 at 3:10 am
Very Good Work. Very very helpful .. Thanks .. Plz continue posting
October 7th, 2008 at 4:34 pm
this did not work for me at all it did it all i even tried AS 1-3.0 not a single thing worked out for me
October 10th, 2008 at 5:20 am
Is there a way to stop it?
October 18th, 2008 at 3:35 pm
Hi Craig, simple one of the most trough out tutos I’ve ever seen. Tnxs for the great job. I found out a problem, how I could stop this effect from happening cause when I go to another frame in my movie the effect still there.
Tnxs for any help.
October 22nd, 2008 at 11:32 am
Brilliant tutorial, very clear and easy to follow, havn’t played with Flash since Studio 8 and now need to be using it again, thankyou very much for taking the time to write and post this, it’s been very helpfull
October 24th, 2008 at 12:07 am
Hi! Craig,
This is a great one. The way you describe anyone can understand easily. Thanks buddy !!
Waiting for your next tutorial.
November 3rd, 2008 at 2:09 pm
Hi Craig,
What a fantastic, erudite and clear tutorial you’ve created.
Please consider this a textual bouquet for your efforts.
Many Thanks,
Alexis.
December 17th, 2008 at 3:08 am
hello,
wonderful job here !
exactly what i was looking for, thanks a lot
Any chance that make it compatible with Actionscript 2 ?
February 15th, 2009 at 9:02 pm
Great tutorial! Question, is there anyway for an object to come into contact with a particle, then get removed from the stage? IE fun. testCollision ( event : Event ) : void {
if ( ship.hitTestObject (dot)) {
this.removeEventListener ( Event.ENTER_FRAME, testCollision );
removeChild (ship);
February 16th, 2009 at 5:49 am
Great tutorial!
I’ve added it to the tutorial directory at http://www.TutorialMagazine.com. Contact me at jorgen [at] tutorialmagazine.com if you want your new tutorials to show up there automatically
Jørgen
- editor of http://www.TutorialMagazine.com
February 24th, 2009 at 7:17 am
Great tut! Can you tell me how to make this effect in a small area on the stage?
Thanks a lot!
February 28th, 2009 at 9:42 am
Is this AS3 or AS2?
April 28th, 2009 at 4:59 pm
Great tutorial! Question do you know of another other things that could be done to even further optimize this (like getting rid of particles after they are out of the scene?) Thanks allot.
May 15th, 2009 at 11:46 am
Here’s another variation of this:
http://www.computerarts.co.uk/tutorials/new_media/cool_particle_effects_in_flash
July 13th, 2009 at 4:24 am
Great! thank youuu! can I hug you ?
August 25th, 2009 at 8:23 am
Awesome tutorial. I do have one question though. How would I get the animation to play for a certain amount of time? For example: Just a few seconds. Once again – very helpful tutorial.
October 22nd, 2009 at 11:52 pm
Awesome tutorial, very in depth. As for Joe23, you would create a counter variable, and each code itteration increase or decrease that variable. When it reaches 0, or the number you want it to stop at (depending on how you set it up) the code will stop running. You simply wrap all the code running the particles in an if(counter>0) or if(counter<endValue), something of that nature.
Thanks again for sharing, excellent stuff.
February 2nd, 2010 at 1:28 pm
very interesting and well explained tutorial, followed it till the end and enjoyed every bit
…well done sir!..i’ll stay around =]
February 9th, 2010 at 5:05 am
great tuto, but it seems to have some issues :
– if you try to make the poarticles follow another clip, after a while, alls the particles are stucked to the emmiter.
- you never remove listeners, it causes some slowdown.
anyway, thx for sharing
February 27th, 2010 at 11:29 pm
Dear Craig,
This is the best site, i have ever seen in which clear insruction has been given methodically for flash. Thank you very much,
Kanishka
From Srilanka