Particles, those things where you create a firework like effect with actionscript. They can be scary to some who are new to flash, but are fun for both new and ex[perienced flash users, they are also very simple to make. This tutorial will go over the basics of creating particles and then also cover a few ways to make them more interesting. Lets get Started.


First off open up flash and create a new flash file. stage size and background are not important so just pick something you feel like, or leave as your default settings, However the values used for certain variables in this tutorial are based of a 24fps file. so play around with and adjust frame rate and or variable values as you see fit to best suit your needs.

Ok now to take care of the only art that you really need, a circle. Just grab your circle tool and draw yourself a small ball. (note: you can actualy draw whatever shape you want. but for this tutorial we will just keep it simple and generic so a cirlce will do)

Convert this circle into a movie clip(MC) using the hotKey F8 or using modify>convert to symbol. TGive it the name particle_art (or similar). Now with the movie clip selected on stage convert to a MC again creating a  MC within another MC, call this movie clip particle_whole (or similar) with this clip select export to actionscript and if you want you can give it a shorter identifier name as long as you remember it.

(Note: i used p as the identifier for this tutorial)



Now for the actions. Double click on the particle_whole MC and then select the particle_art clip within it. Open your actions window with the F9 key and type in the following code.

onClipEvent (load) {

    gravity = 1;

    friction = 0.98;

    yvel = (Math.random()*20)-15;

    xvel = (Math.random()*20)-10;

}

onClipEvent (enterFrame) {

    _parent._x += xvel;

    _parent._y += yvel;

    yvel += gravity;

    xvel *= friction;

} 

On the next page I will break down this code and explain what it does.



Now to break down this code.

onClipEvent (load) {

    gravity = 1;

    friction = 0.98;

    yvel = (Math.random()*20)-10;

    xvel = (Math.random()*20)-10;

}

This code will run once when the movie clip instance is loaded. The code creates 4 variables, xvel, yvel, friction and gravity. the x and v velocities are generated using a Math.random() function. This generates a random number between 1 and 0 we then multiply this by 20 and then - 10 from the whole thing. This means the x and y velocities will be a random number in the range of -10 to +10.

onClipEvent (enterFrame) {

    _parent._x += xvel;

    _parent._y += yvel;

    yvel += gravity;

    xvel *= friction;

} 

Now this code is what makes our particles move. It loops every frame and does the following.

It adds the current xvel to the _parent._x This means that the parent (the particle_whole clip) will have its x position added to. It also does the same for the y position using the yvel variable. Next are 2 lines of code that cause the particles to slow down in terms of x velocity, and fall in terms of y velocity.

By adding gravity to the yvel variable the ball will slow to the point where it stops any acent, and then begin to fall. By multiplying our xvel by friction we slow the x velocity down and since the friction value is below 1 it will never cause the particle to move in the other direction, in fact the xvel will never hit 0 it will just get so small you dont notice it.

At this point you can go back to the main timeline and copy and paste a few of these particles around and then test the movie to see them act, at this point you can also start changing calues of variables or even remove certain varibles to acheive a desired effect.



Ok so now you have made yourself a working particle that can be used over and over again, and you will only have to edit the code in one place to effect all the particles of that type (you can later create numerous particle types that act differently to give variety)

Now return to the main timeline and click on the frame in the timeline, Open the actions pannel and type the following code.

particleLimit = 150;

k = 0;

onMouseDown = function () {

    for (i=1; i<20; i++) {

        attachMovie("p", "p"+(k+i), (k+i));

        this["p"+(k+i)]._x = _xmouse;

        this["p"+(k+i)]._y = _ymouse;

k++

    }

    if (k>particleLimit) {

        k = 0;

    }

};

what does this do? lets see.

The first 2 lines define the variables particleLimit (self explanitory) and k which will help to create new particles without removing old ones.

now the next few lines are a bit more complicated but dont worry ill explain each line in as much detail as I can.

The onMouseDown=function(){ means that the code following will run every time the mouse is clicked within the flash window.

for (i=1; i<20; i++) {

This line begins a loop. the code works like this (initial value ; condition ; next) So the code creates variable i and sets it to 1. The loop will then run while i is less than 20 and after each loop it will increase i by 1 (so for those math heads out there you can tell the code will run 19 times).

attachMovie("p", "p"+(k+i), (k+i));

The first line of the code within the loop attaches a particle to the stage. the first value parsed is the identifeir that you gave to the particle_whole clip (in this case 'p'). the next value is the new instance name of the clip here we use the current k value added to the i value. this will creat instance names of p1, p2, p3, ... and so on. The final value is the depth of the new clip which we set to the number that comes at the end of the particles instance name (1,2,3...etc)

this["p"+(k+i)]._x = _xmouse;

this["p"+(k+i)]._y = _ymouse;

k++

Now since the instance name in question will change each time we use the same method used to create the new instance name, since the instance name is a form of equation we place it within [] so that flash knows which bit is the instance name. We give the particle the same x and y coordinates as the mouse to begin with. Once this is done we increase the k variable so that we know how many particles are on stage in total and so that the next particle gets a new name. that wont interfere with previous particles.

Finaly after all that is done we check the value of k if it is greater than our particle limit it resets it to 0. this means any new particles will replace old particles (this acts to reduce lag).


remove any particles from the main stage and then test your movie. Click around and you should have particles flying around when you click. well done you made a basic particle engine. on the next page i will cover just one way of making the particles a bit more interesting.




Ok the particles are nice and they work. but they are all a bit....similar and boring. what if we want to create a multicoloured effect, well we can.

Drag and instance of the particle_whole movie onto the main stage and double click it. then select and open the actions of the particle_art clip. Now in the same place that we defined the gravity, friction, x and y velocties. place the following code.

col = new Color(_parent);

col.setRGB(Math.round(Math.random()*0xFFFFFF));

What does this do? First it creates a new colour object called col and makes the _parent (particle_whole) the target. the next line then uses the Math.random function to create a random colour within the hexidecimal range by multiplying the random value by the hex value 0xFFFFFF (pure white) we place this within a Math.round function so because any decimal points would ruin this code for colours we need exact values.

and thats it with that simple 2 line code each and every particle when loaded will randomly pick a colour. Test your movie again to see it in action. heres an exmaple of what you should see.




I hope this tutorial has been helpfull to you and If you have any questions about this tutorial or any other flash questions feel free to email me. [email protected]