Written by: Brooklyn Sky Design,
Difficulty Level: Intermediate to advanced Actionscript.
Requirements: Flash MX 2004
Topics Covered: 1) The basic idea behind "Particle Systems" as the basis for complex animations, and 2) an object-oriented design approach to building this type of animation.
Assumed Knowledge: Actionscript 2.0 and introductory knowledge of class-based algorithms.
Download FLA


A 'particle system' is a method for modeling fuzzy objects, such as fire & smoke. They have been used, both as a method for modeling complex phenomena and a technique for building complex animations, since the early 80's (See Reeves, Particle Systems--A technique for modeling a class of fuzzy objects , AMC Transactions on Graphics, April 1983, vol. 2, no. 2, 359-376).

The now classic example of a 'particle system' is the transformation of the planet from the film "Star Trek II: The Wrath of Khan," i.e., the "Genesis Effect." Essentially, that special effect is just a collection of many minute particles that together represent a "fuzzy" object. Over time, the system generates particles that move, change, and die within the system.

Such a system is naturally implemented with an object-oriented language such as Java or C++. With the advent of Macromedia's Actionscript 2.0, good object oriented software design principles and techniques can now be the basis of sophisticated Flash MX-based animations. Welcome to the 21st century!


In this tutorial, I will be showing you how to build an example of simple 'particle system', a system of dynamically evolving rings (see below), using an object oriented design principle called ' composition .' Designing by composition is one of the main organizing design principles in object-based algorithms. Composition is a mechanism by which one object delegates its responsibilities to other objects. While the class design in this tutorial is simple, my hope is that it will serve as the basis for building more complex 'particle system' based animations. Working through this tutorial should also help you get a grip on the concepts of "classes," instances of those "classes," movie clips in the library, and "instances" of movie clips on the stage.

While the implementation of the 'particle system' is relatively simple, the 'life' of the system, the animation itself, is rather complex:

What you see above is a system of "ring" objects that grow (or shink) and fade and die over time. I have based the above animation on two movie clips:

1. A "Ring clip" that holds graphic of a yellow ring, and
2. A "Container clip" that will hold instances of the "Ring clip."

The above animation is just a collection of "Ring clip" instances: each instance is dynamic in that it is created, it grows (or shrinks), and finally, fades and dies. Each instance is independent of all the other instances.

Only two classes are essential for creating and controlling the animation: a "Ring" class that extends the functionality of the "Ring clip" movie clip, and a "Container" class that extends the functionality of the "Container clip" movie clip. The Container class is responsible for creating, initializing and launching new instances of the "Ring clip." A third class, MathToolKit, helps support some of the tasks of both the Ring & Container class. The "Container" & "Ring" classes contain (or are composed of) this third class, "MathToolKit".

At this point, you should download all supporting Flash files from here and refer to those files as you work through this tutorial.