Full particle animation using the AS

Date: 18.9.2009, 17:28    Total views: 10956

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create advanced and full particle animation using the Action Script code and some special flash tips and tricks. You can use this animation for any flash header, banner or for some other flash components. Using this lesson, you will also learn how to design particle shape, how to convert any object into a Movie Clip Symbol, how to apply action script code on it, how to animate it, duplicate it and much more! Let's start!

Example:



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 250 pixels. Select any color as background color. Set your Flash movie's frame rate to 33 and click ok.



Step 2

Call the current layer background. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 3

Save the image below!



Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import the image that you just saved into a flash stage. While the image is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

Click now on frame 30 and hit F5 key.

Step 6

Create a new layer above the layer background and name it particle.

Step 7

Select the Oval Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a circle shape about 20x20 px like it is shown on the picture below!



Step 8


While the circle shape is still selected, go to the Color Mixer Panel (Shift+F9) and make the adjustments as follows:



Step 9

While the particle shape is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol. See the picture below!



Step 10

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip.



Step 11

While the particle shape is still selected, hit again F8 key (Convert to Symbol) to convert it into a Graphic Symbol.



Step 12

Select now the first frame, go to the As panel (F9) and enter this code inside the actions panel:

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

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

Step 13

Click now on frame 3 and hit F6 key. After that, while you're still on frame 3, go again to the AS panel (F9) and enter this code inside the actions panel:

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);
}

Step 14

Go back now on the main stage (Scene 1). After that, select the particle and duplicate it few times!

That's it!

Test your movie and enjoy!

Download source file (.fla)