 Home
 Tutorials
 Flash
 Intermediate
 Simple Particle Effect
Simple Particle Effect
Page 1 of 1
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 LentzWritten 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 freefloating. 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;
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._xrandomX, 2)+Math.pow(this._yrandomY, 2));
if (Math.abs(this._widthmaxSize)>1) {
this._width += (randomSizethis._width)/2;
this._height += (randomSizethis._height)/2;
}
if (distance>1) {
this._x += (randomXthis._x)/easeFactor;
this._y += (randomYthis._y)/easeFactor;
gotoAndPlay(2);
} else {
gotoAndPlay(1);
}
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 (randomXthis._x) and (randomYthis._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 symbolediting 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:
Spread The Word
Related Articles
10 Responses to "Simple Particle Effect"
said this on 26 Jun 2007 11:59:11 AM EST
I think this is great. Ke

said this on 29 Aug 2008 6:59:05 PM EST
Fantastic. I really enjoy

said this on 15 Nov 2008 11:42:27 PM EST
Awesome script i used a s

said this on 19 May 2009 2:32:23 PM EST
hey, i used this to get s
i have a qu 
said this on 08 Jun 2009 12:12:25 PM EST
Say Web did a video tutor

said this on 16 Mar 2010 12:19:26 AM EST
There's lots of good engi

said this on 22 May 2010 3:42:12 AM EST
Cool!Perefct for screensa

said this on 10 Sep 2010 5:17:25 PM EST
This is great! I've learn

said this on 14 Dec 2011 7:11:25 PM EST
could u please give an at
