In the last post, we discussed the basics of how particle effects work. To sum it all up, a particle effect basically involves creating a single movie clip and then using ActionScript to duplicate it, randomize it, and animate it on the stage.
Now that we understand the basics of particle effects, let's actually put these ideas to use in Flash CS3.
In this tutorial, we'll be creating an effect with random particles flying out from the center of the stage in random directions, with random sizes and opacities.
1. Create your particle. The first step in creating a particle effect is to draw the particle you wish to duplicate. Since we don't want the particle on the stage until we actually place it there with ActionScript, let's create a new Movie Clip Symbol by going to the "Insert" menu and clicking on "New Symbol." With the New Symbol dialog open, make sure the advanced options are showing and enter in the following settings:
After you type in the symbol name ("dot") and select the "Movie Clip" radio button, check the "Export for ActionScript" checkbox. This will allow you to enter in a class name. In this example, I entered in the name "Particle". Whatever you type into this field, you need to remember it. We will use this class name to place our movie clips on the stage with ActionScript.
When you click on "OK", you may get another dialog that pops up and tells you that it couldn't find the class definition and that Flash will automatically create one for you when you publish your file. This is exactly what we want Flash to do, so click "OK" again.
You should now be inside the movie clip's timeline. If this is the case, draw your particle on the stage. For this example, I drew a simple circle with a thick, semi-transparent stroke around it, like so:
The origin of the movie clip is denote by the little plus sign seen in the above picture. Notice that this plus sign is right in the center of the shape. This is CRUCIAL for what we want to do, because this origin determines where the object is placed on the stage when you specify an X and Y coordinate for the object.
Tip: When drawing your particle, draw it at the size you want the largest of your particles to be. Later, we'll be randomizing the size of the particles that we place on the stage, and the ACTUAL size of the movie clip needs to represent the largest of these particles.
Once you've finished drawing your particle, click on "Scene 1" in the edit bar (the bar underneath the timeline) to return to the main timeline.
2. Add a particle to the stage. Before we go nuts and start animating our particles all over the place, let's start small and see if we can just get one particle added to the stage with ActionScript.
This is the part where the class name we entered in for our movie clip is going to come in handy. If you remember, when we clicked on "Export for ActionScript" in the New Symbol dialog, we entered in a class name of "Particle". This is the class name we need to use now.
So make sure your stage is clear of all objects, then click on frame 1 in your timeline and hit F9 (or Option+F9 for Mac) to open up your Actions panel. In your Actions panel, enter the following code:
The first line of code here creates a new instance of the Particle class (which, as you remember, is tied to our movie clip) and stores it in a variable we called "dot." This particle isn't actually added to the stage until line 4, where we called on the "addChild" method.
Lines 2 and 3 simply calculated the location of the center of the stage by dividing the stage width and stage height by 2, and then assigned those values to the X and Y coordinates of the movie clip.
If you test your movie now by hitting Ctrl+Enter (or Cmd+Return on the Mac), you'll get something like this:
Nothing fancy, but at least we know now that we can add a movie clip to the stage with ActionScript. With this foundation, we can move forward and actually make something happen.
On the next page, we'll add some motion to our particle in ActionScript.
Pages: 1 2 3 4 Tags: actionscript 3, Flash CS3, particle effect, tutorial
Thank you. Very nice tutoring style – clean, coherent, well worded.
IB
[...] Flash CS3 Particle Effect Tutorial [...]
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?
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
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.
This a great effect that has tons of potential.
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!
This was great. Please make more tutorials as this was the only one I could follow on the web!!
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!
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.
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
Does anyone know how this could be altered to allow 4 different colours?
Cheers.
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?
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?
Very clean and simple effect, I like it
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
[...] Read more [...]
[...] Creating Particle Effect This concept can be used to create randomized raindrops, snowfall, fire, smoke, bouncing balls, and even some more abstract effects. [...]
Hi Craig,
Excellent tutorial there, but can you please make one for Actionscript 2?
Much apprectiated
guillotine605
Very helpful tutorial. Thanks
Great Work . Very Very helpful .. Continue helping us by your Good Works
.
Very Good Work. Very very helpful .. Thanks .. Plz continue posting
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
Is there a way to stop it?
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.
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
Hi! Craig,
This is a great one. The way you describe anyone can understand easily. Thanks buddy !!
Waiting for your next tutorial.
Hi Craig,
What a fantastic, erudite and clear tutorial you’ve created.
Please consider this a textual bouquet for your efforts.
Many Thanks,
Alexis.
hello,
wonderful job here !
exactly what i was looking for, thanks a lot
Any chance that make it compatible with Actionscript 2 ?
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);
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
Great tut! Can you tell me how to make this effect in a small area on the stage?
Thanks a lot!
Is this AS3 or AS2?
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.
Here’s another variation of this:
http://www.computerarts.co.uk/tutorials/new_media/cool_particle_effects_in_flash
Great! thank youuu! can I hug you ?
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.
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.
very interesting and well explained tutorial, followed it till the end and enjoyed every bit
…well done sir!..i’ll stay around =]
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
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
How do I get to page 2 of this tutorial? When I click on ‘next page’ it loads page 1 again. Tried this on firefox and chrome…
[...] Flash CS3 Particle Effect Tutorial [...]
The highlighted “page 2″ just refreshes the page. Please, can you try and fix this issue?
[...] Flash CS3 Particle Effect Tutorial [...]