The Effect and Comments

We never seem to tire of playing with particle effects here at flashandmath, and this latest example is the result of some playful experimentation with code. The basic particle animation is built upon the code used for some of our other Sprite-based particle animations (listed at the end). Click the screen shot below or this link to open the effect in a new window:


  • Download all source files corresponding to this effect:

Basic Methods

The basic display method is similar to our earlier particle effects, where particles are drawn to a bitmap. On each frame, filters are applied to the bitmap to cause a fading effect before the particles are drawn into the bitmap. This method was discussed in our tutorial Fading Trail Effect for Flash AS3 Particle Animations - a Simple Example.

Our earlier examples made use of BlurFilters to fade out the particles. At the heart of this new effect is a DisplacementMapFilter which is applied to the displayed bitmap on a per-frame basis. The DisplacementMapFilter uses a Perlin noise bitmap as its source. This filter, combined with a ColorTransform, causes the particle trails to warp as they slowly fade away.

We have modified the code somewhat for this example: we have simplified the particle display code by taking out extraneous variables that were not needed for this example. We have also made the code easier to use for more general particle animations. Making the code easy to reuse was made possible by use of the Class class, which we explain below.

Using the Class class

The particle animation is created by means of two classes which work together. One class, called ParticleDisplayGeneral is a display object, which contains the full display of particles. This class includes methods for updating the particle positions based on velocity and acceleration, and also includes a method for drawing the updated display.

The particles themselves are instances of another class, which is an extension of the Sprite class. In this example we are using particles which are instances of the CircleParticle class. Each CircleParticle has variables which record its size, color, position, velocity, and acceleration, and the class includes a method for drawing the particle.

In order for these classes to work together, the ParticleDisplayGeneral class must know what type of particles will be used. But if we decide at some point that we would like the particles to look like, say, triangles instead of circles, we will need to alter the ParticleDisplayGeneral code so that the particles are typed as some new TriangleParticle class instead of the CircleParticle class. To avoid the need to change the ParticleDisplayGeneral code, we make the particle class a variable which can be updated from code external to the class. This is done by setting a ParticleClass class variable:

public var ParticleClass:Class;

Then, when it is time to create a new particle at a position (x0, y0), we use the following code:

particle = new ParticleClass(x0,y0);

When the particle display is created in our main timeline code, we follow this up by stating what particles we will be using:

display = new ParticleDisplayGeneral(600,400, true);
display.ParticleClass = CircleParticle;

(Here the particle display will be of size 600x400, with the Boolean "false" value meaning that we will not be using a transparent background.)

Modifying the appearance of the particles in this animation can now be done by creating a new particle class (with the right variables and methods: see the CircleParticle class for a model), and setting the display.ParticleClass variable accordingly in your timeline code.

Related Particle Examples at Flash and Math:

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.