Introduction to Particle Systems in Flash 9 and Actionscript 3

I’ve always been fascinated by the magical and organic effects that particle systems can help create. In video games, whenever you see smoke, flames, or steam, they’ve probably been made using particles. Systems can range anywhere from couple dozen to hundreds of particles, and span a wide range of effects. Simple changes to size, color, or transparency can cause surprisingly different results. Now, thanks to Flash 9′s performance increases, particle systems can provide a new level of realism within websites or Flash movies.

Let me warn you that I am just starting to experiment with particle systems. The code for this project doesn’t necessarily reflect the most optimized way of handling them. I plan to come back to this subject again soon using bitmaps instead of vectors to demonstrate the differences. Both systems will have pros and cons, I’m sure. For today, the vector-based particles perform pretty well. Mainly it depends on your parameters. The more particles on the screen, the slower the swf will run. Likewise, blurring and transparency can slow things down too. It’s important to keep things simple. Many cool effects can be made without needing a lot complexity.

Let’s dive right in!

//Instantiate a SteamParticleSystem
//Note: There are constructor parameters, but the defaults are good for most situations
var steam:SteamParticleSystem = new SteamParticleSystem();

//Optional parameters
steam.lifetime = 500; //how long a particle will be visible
steam.size = 10; //the size of an individual particle
steam.color = 0xffffdd; //the color of a particle
steam.transparency = 0.5; //particle transparency
steam.baseBlur = 20; //the starting blur
steam.blurRange = 10; //additional blur added to the base over time
steam.jitter = 10; //horizontal velocity (randomly changes between 0 and jitter)
steam.baseVelocity = new Point(0, -2); //vertical velocity

//Standard Sprite stuff
steam.y = this.stage.stageHeight;
steam.x = this.stage.stageWidth / 2;
this.addChild(steam);

//Start up the system!
steam.start();

Several parameters allow you to tweak the system and give you different effects. Larger steam particles could mean that a valve on a steam pipe is open wider. Flames with a higher jitter might make them look like they’re burning wildly in the wind. These systems are flexible, and experimentation will help you achieve the look you want. All three of the effects I built actually run from very similar code. The particles are circles with low alpha that have been blurred. The smoke is the most basic effect that only features movement. Steam adds size changing to the mix, and the flames take it a step further to change the color too.

Working on this project was a lot of fun. I spent a good deal of time tweaking things here and there, so it takes some patience, but seeing so many different effects with such basic changes feels very rewarding. I encourage you to download the source code, and build your own cool effects based on my examples.