Flash particle effects tutorial

Then test the movie, the end result should look like this:

In this toturial We will learn how to create flash particle effects..

What we will do:

• we will have a bunch of little particles free-floating.
• random point, size,  inside the movie frame

Step 1

Let`s  start by making our particle object. Open the Library window, and click on the + sign to create a new symbol, as shown in Fig 1.

Fig 1

Step 2

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 like Fig 2 .

Fig 2

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, as shown in Fig 3.

Fig 3

Step 3

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 550 and 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 randomY and 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);

}

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 550 and 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 randomY and 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.

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.

Download  source particles.zip