Flash tutorials
Home 3D (2) Actionscripting (65) Animation (100) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (52) Text Effects (38)

Particle effect

5.9.2006, 14:43    Total views: 78081
In this thoroughly explained, detailed, action script  lesson, I will show you how to create a really advanced and trendy particle effect. Using this lesson, you will also learn how to design particle shape, how to convert it into a Movie Clip Symbol, how to use Color Mixer Panel and much more!

Example:



Step 1

Create a new flash document, press Ctrl+J on the keyboard (Document Properties) and set Width to 300 and Height to 200px. Frame rate set to 65fps.



Step 2


Take the Oval Tool (O), Stroke Color must be switched off, under Fill Color choose any color and draw a "circle" like it is shown on the picture below.



Step 3

Open the Color Mixer Panel (Shift+F9), and set the options from the picture below.





Step 4

Select the "Particle" and Press F8 on the keyboard to convert it into a Movie Clip.



Step 5

Double click on a new made Movie Clip ("Particle) to go in its inside.

Step 6

While your "Particle" is still selected press again F8 on the keyboard to convert it into a Graphic.



Step 7

Click on the first frame, open the Action Script Panel (F9), and paste this script:

xMin = 0;
xMax = 300;
yMin = 0;
yMax = 200;
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 8

Click on the second frame and press F5.

Step 9

Click on the third frame and press F6. After that open the Action Script Panel (F9), and paste this script:

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

We're done!

Test your Movie (Ctrl+Enter).

If you want, you can duplicate your movie ("Particle") as many time you like.

Cheers!

Download source file (.fla)
Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 221536

2. Water effect
Total views: 166040

3. Photo slide show
Total views: 153641

4. High-tech city animation
Total views: 151459

5. Special Picture Effect
Total views: 146246

Related links