Patrick Lentz

This user is yet to take control of their account and provide a biography. If you are the author of this article, please contact us via support AT actionscript DOT org.

View all articles by Patrick Lentz
Tutorial Details: Generate a group of particles that will randomly pick a spot on the screen to shoot to, go there, change size, and repeat the process.
Written By: Patrick Lentz ( http://www.firefieldnc.com )
Difficulty Level: Intermediate
Requirements: None Topics Covered: Particle motion, simple math expressions
Assumed Knowledge: Algebra I
Download FLA This tutorial will cover a very barebones particle system. The goal is to have a bunch of little particles free-floating. They will pick a random point inside the movie frame, then easy over to it, and repeat the process. Alongside random navigation, the particles will pick a random size and adjust themselves accordingly as well. The math is of a somewhat intermediate level, but the most complicated it gets is the distance formula (which hopefully you know by now). We'll start by making our particle object. Open the Library window, and click on the + sign to create a new symbol:

Draw a circle in the middle of the new symbol. It doesn't really matter what the size of the circle is, so it's up to you. This is how mine ended up looking:

With this kind of stuff, I've found that it's more aesthetically pleasing to have a radial gradient in the middle. Have it fade out to an alpha value of 0. The next step is to make the movie file that will contain the actions of the particle. So in the library window, click the + sign again and create a new symbol:

In this new movie, place the Particle symbol in the middle of the first keyframe. Pull up the Actions panel and click on the first keyframe. Now it's time to define some variables. Type the following into the Actions panel: 

xMin = 0;
xMax = 550;
yMin = 0;
yMax = 400;
minSize = 10;
maxSize = 50;
easeFactor = 10;

randomX = Math.random () * ( xMax - xMin ) + xMin;
randomY = Math.random () * ( yMax - yMin ) + yMin;
randomSize = Math.random () * ( maxSize - minSize ) + minSize;

xMin, xMax, yMin, and yMax all define the bounds of the randomly selected area. No matter which random numbers the particles choose to jump to, they will stay within these limits. I picked the values 550and 400 because that's the default size for a Flash movie (and I was too lazy to change it). The minSize and maxSize variable determine the bounds for both the width and height of the particle. Since it's a circle, and the width and height will always be the same, we only need to worry about one number. The easeFactor variable will determine how long each particle will take getting to its' destination. I'll explain this better later. I declared two variables, randomX and randomYand gave them the range of the Min's and Max's declared above, then generated a random size and stored it in the randomSize variable.

The Random() function picks a random value between 0 and 1. You multiply that value by the maximum value that you want it to have (so in this case, the range would be between 0 and 550 - 0), then add the minimum value (which is 0 in this case). Let's look at another example: You want to generate a random value between 50 and 75 (so xMin = 50 and xMax = 75). Since the Random() function only generates a value between 0 and 1, we want to multiply this by the maximum minus the minimum, then add the minimum to it. So Random()*25+50 will do the job. (Since 50 + 25 = 75). Wow I really suck at explaining things ... go check out another Math tutorial if you are still confused. But I'm moving on.

Next, insert a keyframe into frame 3, and open the actions panel. Give the frame the following actions: 

distance = Math.sqrt(Math.pow(this._x-randomX, 2)+Math.pow(this._y-randomY, 2));

if (Math.abs(this._width-maxSize)>1) {
        this._width += (randomSize-this._width)/2;
        this._height += (randomSize-this._height)/2;
}

if (distance>1) {
        this._x += (randomX-this._x)/easeFactor;
        this._y += (randomY-this._y)/easeFactor;
        gotoAndPlay(2);
} else {
        gotoAndPlay(1);
}

First I checked to see if the difference between the current size of the particle and the desired size was greater than 1. If this was true, then the difference in size would be cut in half, yielding a size closer to the desirable.

Then, using the distance formula I found the distance between the current (x, y) position of the particle and the (x, y) position of the destination. If there were still some distance to move, then we'd want to move closer to the destination. So if the distance is greater than 1 pixel, the goal has not been met. The (randomX-this._x) and (randomY-this._y)statements will give us the distance needed to move (it could be positive or negative, depending on position). Now, the easeFactor variable will affect this highly. With a low value, the particle will move over to its' destination extremely fast (the distance between the two points will be cut in half every time, if the easeFactor were 2). With a larger easeFactor, the distance the particle will travel will be cut down even more. I chose 10 because I like the way it looks, but it's all a matter of opinion.

At the end of the move sequence, the movie will "recycle" itself, so to speak, and go back to frame 2. It will repeat this process until the distance is less than one, in which case it will return back to frame 1 and pick a new point to go to.

For the sake of simplicity, I made particle duplication rather easy. All I did was place a bunch of instances of the movie in the main frame of the flash file. So exit out of symbol-editing mode, back to the main screen, then drag and drop a bunch of particles everywhere. Make sure you are placing instances of the particle movie, and not just the graphic. Then test the movie, the end result should look like this: