90 Technique

Creative skills Simulating physics

Flash CS3
Cool
particle
effects in
Flash
Creating a particle
system in Flash may
sound difficult, but as
Seb Lee-Delisle shows
you, it’s not rocket science
You may think that simulating physics in code is
complicated and hugely demanding in terms of computer
resources. Sure, if you want to model real-life physics for
engineering projects or NASA missions, then you have to be pretty
damn accurate. But to just produce some cool effects, there are
techniques for approximating physical phenomena such as gravity
and drag that are so simple that the code will run at lightning speed.
You can produce a wide range of different effects with
only minor adjustments. I’ve used Flash particle systems to produce
electrical sparks, swarms of bats, fireworks, dripping goo, fire and
sweat! With a little imagination you can have a lot of fun. This
tutorial is a great way of getting into programming simple physics
and movement. More importantly, it shows that you can produce
some beautiful particle effects with straightforward ActionScript.

Designer On the disc Time needed

Seb Lee-Delisle is Folders containing 2 hours
technical director at the code for the Skills
Brighton-based steps in this tutorial ActionScript
Plug-in Media. He are in Disc Contents\ animation
specialises in Resources\particles. Basic physics
programming Flash simulation
games, physics and Introduction to
3D and speaks at object-oriented
Flash conferences programming
worldwide. He’s also
a member of the
Papervision3D
development team.
For more information
see www.plugin
media.net and www.
sebleedelisle.com.

Computer Arts March 2008

ART146.tut_4 90 25/1/08 14:33:08

 91

01 Launch Flash CS3 and create 02 Select the Oval tool and draw
an ActionScript 3.0 document. The a small circle. It should only be about 10
default size of 550x400 pixels should be pixels wide and be filled in white with no
fine. Now go into the Properties window outline. This will be the graphic for your
and change the background colour to particle. Select the circle then choose
black and the frame rate to 25fps. Modify>ConvertToSymbol.

04 You’re done with this file for

the moment so save it as Particles.fla,
03 Name the symbol ‘Spark’ and but keep it open. Now you’re going to
make sure it’s registered in the centre. make a class file for your particle object,
Select ‘Export for ActionScript’. If you so select New>File and choose
can’t see this box, click the Advanced ActionScript File in the dialog.
button to get all the options. Click OK. If
you’re warned that Flash will generate
the class definition, just click OK.
Finally, delete the instance of your spark
from the stage, since you’ll be making
sparks in code from now on.

06 The class has its own

variables (or properties). Clip refers to
the MovieClip (a type of DisplayObject)
that is the graphic for the particle. You
can also see a function called Particle;
as it has the same name as our class, it
05 You can see the code above will be called when each particle is
for your basic particle object. If you’re created. This type of function is known
unfamiliar with object-oriented as the constructor, and to make your
programming, all you need to know for particle it needs to know which library
now is that this class will hold all the symbol to use as a graphic and where to
properties and methods for each put it. So it has four parameters:
particle. When you see this in action, all symbolclass is the reference to your
should become clear. symbol in the library, target is where the
particles go (in this case the stage), and
xpos and ypos are the x and y positions.
Save the Particle class as Particle.as. It
must have exactly the same name as
the class definition and be in the same
folder as the FLA file.

Computer Arts March 2008

ART146.tut_4 91 25/1/08 14:33:15

 92

07 Go back to Particles.fla. Click 08 The particle just sits there 09 Now make a function in your
on the first frame in the timeline and not doing anything, so you need to tell it class called update, which you’ll put
open the ActionScript Editor, then type where to go and how fast. To do this add underneath the constructor. This will be
the above line of code. This creates a two more properties to the Particle called once per frame every time you
particle object from the symbol in the class: xVel and yVel. Now, every frame, want to update the position of your
library called Spark and attaches it to the particle will move along the x-axis particle. You can see that it’s very simple
the stage (this) at x=275 and y=200 (the by the amount stored in xVel and along – it merely adds the x velocity (xVel) to
middle of the stage). Preview your SWF the y-axis by yVel. Also give these the x position (clip.x) and the y velocity
file with Control>TestMovie. properties a default value of 0. (yVel) to the y position (clip.y) of the clip.

10 Return to Particles.fla and add the code above so the particle moves 2 11 To randomise the particles’ velocities use Math.
pixels to the right and 2 pixels down every frame. Update its position by calling its random()*10-5; This multiplies the result from Math.random()
update method. You need to do this every frame, so set up an event listener using – a value between 0 and 1 – by 10, then subtracts 5 to get a
addEventListener(Event.ENTER_FRAME, frameLoop); This will call the frameLoop figure between -5 and +5. Wrap it in a function called
function every frame, which calls the update method on your particle. Test the movie. randRange. You can now set xVel and yVel to randRange(-5, 5).

12 Define a new array called 13 All good so far, but you can 14 Back in your FLA, you can see
particles, as shown in the above code. see that after you’ve made 100 particles, that the frameLoop has changed, so
Where there are fewer than 100 they stop. In fact, they don’t stop, they that while you have more than 100
particles in a frame, a new one is made just keep animating off the screen. To particles, you’ll take away the first
and added to the end of the array using get rid of them go back to your Particle. particle from the array (using the pop
the push method. Use a loop to iterate as file and add a method called destroy, method). Now when you test the movie,
through and update every particle. which removes the clip from the stage. you get a constant stream of particles.

Computer Arts March 2008 www.computerarts.co.uk

ART146.tut_4 92 25/1/08 14:33:20

 Technique 93
Creative skills Simulating physics

15 Have a look at your Particle 16 Back in your FLA, try the new 17 Now set your particle’s gravity
class now – properties for drag, gravity, property ‘drag’. Set it to 0.98. Every to 0.4, which means that this value will
size and fade have been added. These frame, each particle’s x and y velocities be added to the y velocity of the particle
properties have then been applied in will be multiplied by 0.98, making it slow every frame. This gives the effect of a
the update function. Type in these extra down a little. Notice that the maximum downward force acting on the particles.
lines of code, then you’ll go back to the x and y velocities have also increased. The drag and initial velocities of your
FLA and implement each one in turn to Test the movie again. The effect is subtle particle have also been adjusted to
see the effect. but the movement is now more natural. create a fountain effect.

19 Now set your particle’s fade 20 Now to make smoke. First get
property, which is subtracted from each rid of the flashy graphics and return to
particle clip’s alpha setting every frame. the white circle. Then change the
This makes the particles become more particle settings. Your y velocity is set to
18 Two lines of code have been added to your FLA – the and more transparent. Also adjust the 0 and your particles only have a little left
first randomises the size of the particle and the second sets its initial speed, gravity and size, and give and right movement. And look at the
shrink property. The particle’s x and y scale is multiplied by the the shrink property a value greater than gravity setting – it’s a negative number,
shrink value every frame. The value is less than 1, so the particle 1. This makes the particles grow rather so gravity is now working upwards. You
shrinks. The graphic has also changed to concentric circles. than shrink. have the beginnings of a smoke effect.

21 Now add a Blur filter to your 22 To make your smoke even

stage to soften the smoke. You can see more realistic give it some movement.
how to do that in line 5. Now look at line An easy way to do this is to add timeline
23. Instead of giving your particle a fixed animation to the particle symbol. I’ve 23 Here’s the final smoke. Check the final settings in the
starting position, you’re sending it to made the smoke circle slowly, turn into FLA for your particle; notice that I’ve made the particle clip
your x and y cursor position, so the a crescent and keep spinning using a transparent to start with. I’ve also fiddled with the other
smoke follows your mouse movements. shape tween and then a motion tween settings to make them a little better for the animation. But your
(60 frames should be enough, but add a animation will be different, so you’ll need to experiment. I’ve
stop command to make sure). shown you the basics, now it’s up to you to play and discover.

www.computerarts.co.uk Computer Arts March 2008

ART146.tut_4 93 25/1/08 14:33:26