Craig Campbell’s School of Flash

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.

Tags: Flash Tutorial, particle effect

Pages: 1 2 3 4

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.