Craig Campbell’s School of Flash

5. Add multiple particles to the stage. At this point, we want to duplicate our particle movie clip over and over, but we don’t want to add them all to the stage at once. Rather, we want it to happen over time. So in order to do this–you guessed it–we’re going to create another Timer. We’ll create a function that adds a particle to the stage, and then we’ll use the Timer to run this function over and over. Here’s what your code will look like:

You’ll notice that aside from the new code, we’ve also made several changes to the code we already had in place. The code for adding a new particle to the stage is now contained within a function called “addParticle.” Within this function, you’ll also notice that we’ve changed the way we create the xMovement and yMovement variables. Instead of creating generic variables containing our random numbers, we actually add them as properties of our movie clips.

Also, on line 11, you’ll see that we added an ENTER_FRAME event. We’re using this event now, instead of the Timer we set up earlier, in order to create our animation. You’ll notice that this event is calling on the “moveParticle” function. By using the ENTER_FRAME event, we’re able to tell the moveParticle function WHICH particle needs to be moved, since we’re working with multiple particles now. On lines 15 and 16, we’re pointing to “e.currentTarget”. The “e” is the event variable that’s passed into the moveParticle function when the ENTER_FRAME event triggers the function, and the “currentTarget” is the object that the ENTER_FRAME event was attached to (which would be the particle movie clip).

Lines 19-21 contain the functionality for the Timer that is going to tell the addParticle function to attach a new particle to the center of the stage every 50 milliseconds.

6. Remove old particles. If you test your movie now, you’ll get the beginnings of what we’re looking for. However, we’ve provided no means of getting rid of particles. If you keep creating new particles without getting rid of old ones, then you’ll notice your computer starting to get a little sluggish. So, in order to keep from crashing our systems, we need to remove movie clips when there are too many on the stage.

We’re going to do this using an Array. Every time we create a new Movie Clip, we’re going to store it in this array. And then, once our Array reaches a certain limit, we’ll start deleting the oldest elements. Here is what your updated code will look like:

In line 1, we created our Array, and inside the addParticle function, on line 11, every time we create a new instance of our particle, we’re using the “push()” method of the Array class to add that movie clip instance to the array. This way, we can keep track of which particles have been on the stage the longest. The “zero element” (which is the first element in the Array) will always be the oldest particle on the stage.

Also, inside the addParticle function, we’ve added an “if” statement that checks to see if the number of elements in the Array has reached our maximum limit for the number of particles we’re allowing on the stage at once. This limit was stored in a variable called “maxParticles” on line 2. If we discover that we HAVE reached our limit, then we remove the oldest particle from the stage.

In order to remove the oldest particle (line 16), we’re using the “shift” method of the Array class. The “shift” method removes the first element of an array and then shifts all the other elements over so that element 1 is now element 0, element 2 is now element 1, etc. This method, when called, not only removes this element from the array, but it also returns the contents of that element. Since it returns the contents, we can place the “shift” method inside the parentheses for the “removeChild” function so that we can not only remove it from the array but also from the stage.

With all of this code in place, you should get something that looks like this:

Still not quite what we’re going for, but we’re almost there. On the next page, we’ll add our finishing touches.

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.