The Flint Particle System is a particle system library for ActionScript3.0. It contains over 40 particle ‘actions’ that you can combine to achieve almost every effect you would ever want in a Flash-based particle system. However, with so many built-in behaviors, delving into the Flint library can be a daunting task, even for an experienced programmer.
This visual reference guide will introduce 25 of the most commonly used Flint 2D actions with a brief description and an animated example. Hopefully, this will help you find the exact effect you are looking for, without having to actually code all of the particle behaviors on your own. This guide assumes that you already have a basic understanding of the Flint framework. A tutorial for basic usage can be found on the Flint Particles website.
Source code is included for each example. To compile the source code, right click on the link to the source code, select “Save Link As…”, save it into a directory with a new .fla, and set that .fla’s Document Class to the name of the ActionScript file. Then, add the path to your Flint library to the .fla’s classpath. You may also want to set your stage dimensions to 300×200. That’s it, enjoy!
Table of Contents
- Move
- Accelerate
- Friction
- Random Drift
- Bounding Box
- Collide
- Mutual Gravity
- Approach Neighbours
- Match Velocity
- Minimum Distance
- Flocking
- Age
- Fade
- Color Change
- Scale All
- Gravity Well
- Anti Gravity
- Jet
- Explosion
- Death Zone
- Tween to Zone
- ZonedAction
- Mouse Gravity
- Turn Towards Mouse
- Key Down Action
-
The Basics
-
Particle Interaction
-
Particle Energy
-
Environment
-
User Interaction
Move
|
Description: The ‘Move’ action updates the position of particles based on its velocity. This is essential for almost every particle system. If you want animated particles, you need the ‘Move’ class. Implementation: This file outputs particles with an initial velocity of (-35, 0). Since there is no acceleration or friction, the particles keep moving at a steady speed forever. Simple, but necessary. |
Accelerate
|
Description: The ‘Accelerate’ action adjusts the velocity of each particle by a constant acceleration. A common application of ‘Acceleration’ is the simulation of gravity. Implementation: This file outputs particles with an initial velocity of (-30, -50). An acceleration of (0, -25) is applied to each particle, causing it to drop in a parabolic arch. |
Friction
|
Description: The ‘Friction’ action applies friction to particles, causing them to slow down when they are moving. Implementation: This file outputs particles from two separate points with an initial velocity of (-65, 0). When a particle reaches the gray area, friction is applied to it. The bottom particles are a control stream with no friction applied to it. This makes the friction’s deceleration effect more apparent. |
Random Drift
|
Description: The ‘RandomDrift’ action moves particles by a random small amount every frame, causing them to drift around. This is great for smoke, fire, and snowfall. Implementation: This file outputs particles with an initial velocity of (0, -50). Instead of flying straight up, they drift around as they rise. |
Bounding Box
|
Description: The ‘BoundingBox’ action confines each particle to a rectangular region. Notice that the particles bounce off of the walls, but not off of each other. This is because the ‘Bounding Box’ action only controls collisions with regions, whereas The ‘Collide’ action controls collisions with other particles. Implementation: This file starts with 60 particles in random positions with random velocities. When a particle hits the edge of the bounding box, it bounces off in another direction. Be sure to use the ‘CollisionRadiusInit‘ Initializer when using this class. |
Collide
|
Description: The ‘Collide’ action detects collisions between particles and modifies their velocities in response to the collision. Implementation: This file starts with 60 particles in random positions with random velocities, as well as a ‘Bounding Box’ (seen in gray outline). Particles will bounce off of the bounding box, as well as each other. Be sure to use the ‘CollisionRadiusInit’ and ‘MassInit’ Initializers when using this class. |
Mutual Gravity
|
Description: The ‘MutualGravity’ action applies forces to attract each particle towards the other particles. Implementation: This file creates 16 particles randomly distributed on stage. The ‘MutualGravity’ action causes each particle to approach the other particles. A ‘MinimumDistance’ action is also applied to prevent the particles from sticking together. |
Approach Neighbours
|
Description: The ‘ApproachNeighbours’ action applies a static acceleration to each particle to draw it towards other nearby particles. This is different from ‘MutualGravity’, since the strength of the acceleration is independent of distance. Implementation: This file creates 15 particles randomly distributed on stage. The ‘ApproachNeighbours’ action causes each particle to approach the other particles. This causes them to cluster, but it doesn’t cause them to point in the same direction. You need to add a ‘Match Velocity’ action to achieve that effect. A ‘MinimumDistance’ action is also applied to prevent the particles from sticking together. |
Match Velocity
|
Description: The ‘MatchVelocity’ action applies an acceleration to each particle to match its velocity to that of its nearest neighbours. Implementation: This file generates 2 particles that will intersect. When they are close enough, ‘MatchVelocity’ forces them to point in the same direction, instead of colliding. |
Minimum Distance
|
Description: The ‘MinimumDistance’ action applies an acceleration to the particle to maintain a minimum distance between it and its neighbours. This is useful when you want to prevent particles from clustering. Implementation: This file creates 15 particles, distributed randomly. Whenever a particle comes within 75 pixels of another particle, an acceleration is applied to push it in the opposite direction of that particle. |
Flocking
|
Description: Flocking is not a built-in action, but the effect can be achieved by combining ‘ApproachNeigbours’, ‘MatchVelocity’, and ‘MinimumDistance’. Implementation: This file creates 35 particles, distributed randomly. ‘ApproachNeighbours’, ‘MatchVelocity’, and ‘MinimumDistance’ actions are applied to simulate the flocking behavior. A minimum speed limit of 100 is also applied to keep the flock moving around. |
Age
|
Description: The ‘Age’ action operates in conjunction with the ‘Lifetime’ Initializer. It causes the energy property of each particle to decline according to a specified easing function. When the particle energy level reaches 0, it ‘dies’ (it is removed from the particle system). Implementation: This file creates 30 particles with a ‘Lifetime’ ranging from 2 to 50. The ‘Age’ action uses a quadratic ease out function to change the energy level of the particles. A ‘Fade’ action was added so you can actually see the particles disappear as they age. |
Fade
|
Description: The Fade action uses particles’ energy levels to determine their alpha. The Flint documentation says that you should use this in conjunction with the ‘Age’ action, but that’s not the only way to use ‘Fade’. If you create your own method of changing the particles’ energy level, you can use ‘Fade’ without aging the particles. Implementation: This file demonstrates a method of using ‘Fade’ without the ‘Age’ action. Whenever particles collide, their energy level is reduced. The ‘Fade’ action reflects this reduction by lowering the particle’s alpha. |
Color Change
|
Description: The ‘ColorChange’ action alters the color of the particles according to their energy level. The Flint documentation says that you should use this in conjunction with the ‘Age’ action, but that’s not the only way to use ‘ColorChange’. If you create your own method of changing the particles’ energy level, you can use ‘ColorChange’ without aging the particles. Implementation: This file demonstrates a method of using ‘ColorChange’ without the ‘Age’ action. Whenever particles collide, their energy level is reduced. The ‘ColorChange’ action reflects this change by interpolating their color from yellow to red. |
Scale All
|
Description: The ‘ScaleAll’ action adjusts the size of each particle’s image, collision radius and mass according to its energy level. The Flint documentation says that you should use this in conjunction with the ‘Age’ action, but that’s not the only way to use ‘ScaleAll’. If you create your own method of changing the particles’ energy level, you can use ‘ScaleAll’ without aging the particles. Implementation: This file demonstrates a method of using ‘ScaleAll’ without the ‘Age’ action. Whenever particles collide, their energy level is reduced. The ‘ScaleAll’ action reflects this change by changing their size, collision radius and mass. |
Gravity Well
|
Description: The ‘GravityWell’ action applies a force on the particles to draw them towards a single point. This is very useful for simulating physics. Implementation: This file generates bursts of particles that orbit a ‘GravityWell’ located at the center of the stage. |
Anti Gravity
|
Description: The ‘AntiGravity’ action applies a force on the particles to push them away from a single point. Implementation: This file generates bursts of particles that orbit an ‘AntiGravity’ action located at the center of the stage. |
Jet
|
Description: The ‘Jet’ action applies an acceleration to particles only if they are in the specified zone. Implementation: This file generates bursts of particles that speed up as they cross a ‘Jet’ zone. |
Explosion
|
Description: The ‘Explosion’ action applies a force on the particles to push them away from a single point. Implementation: This file creates an explosion at the center of the screen, forcing all of the particles off screen. |
Death Zone
|
Description: The ‘DeathZone’ action marks particles as dead if they are inside a specific zone. You can also invert the effect and create a ’safe zone’ by marking all particles as dead if they are outside a specific zone. Implementation: This file generate bursts of particles that disappear when they hit the ‘DeathZone’ at the center of the stage. |
Tween to Zone
|
Description: The ‘TweenToZone’ action adjusts each particle’s position between two locations according to its energy level. This is typically use in conjunction with the ‘Age’ action. Implementation: This file creates a particle tween between two zones by drawing dynamic text fields onto a BitmapData object, then using this BitmapData to define Flint’s BitmapDataZone. |
Zoned Action
|
Description: The ‘ZonedAction’ action applies an action to the particles only if they are in the specified zone. This can be used in conjunction with any other action. Implementation: This file generates tightly-clustered bursts of particles that undergo a ‘RandomDrift’ effect at the center of the stage, causing them to scatter. |
Mouse Gravity
|
Description: The ‘MouseGravity’ action applies a force on each particle to draw it towards the mouse. Implementation: This file creates 35 particles that gravitate towards the mouse pointer. A ‘MinimumDistance’ action is also applied to keep the particles from clustering. |
Turn Towards Mouse
|
Description: The ‘TurnTowardsMouse’ action causes each particle to constantly adjust its direction so that it travels towards the mouse pointer. This action doesn’t apply any acceleration to the particles, it only changes the direction of the particles’ existing velocity. Implementation: This file creates 35 particles that always point towards the mouse. A ‘MinimumDistance’ action is also applied to keep the particles from clustering. |
Key Down Action
|
Description: The ‘KeyDownAction’ action applies another action only when the user presses a key. The key to press can be specified, which means that you can associate different actions with different keystrokes. Implementation: This file creates 35 particles that you can control with the arrow keys. First, click on the stage to give the Flash Player focus. Then, use the arrow keys to apply acceleration to the particles. |
Well, that’s all 25 of my animated examples for Flint. There are still almost 20 more actions that I haven’t covered, and I haven’t even touched on Flint’s built-in Initializers and Zones. That means there is still plenty left for you to explore. If you need help implementing any of my source code, or have any suggestions, please leave a comment below. I hope you’ve enjoyed my visual introduction to the Flint Particle System.
Special thanks to Richard Lord for developing this incredible library.


Amazing examples and explanations! Thanks!
John Lindquist
17 Dec 09 at 3:11 am
Indeed excellent info and examples! Thanks a lot for the effort!!
Jochen Szostek
17 Dec 09 at 5:03 am
Excellent write-up/tutorial. Very helpful. Cheers!
Evil D
17 Dec 09 at 10:07 am
Great stuff! These examples should be added to the official site if you ask me. Thanks for sharing
Snake
17 Dec 09 at 2:12 pm
Thanks for the support
Ryan
18 Dec 09 at 7:51 am
This is great! This is what I was looking for because, like you said, there are a lot of actions in the library and you’ve made their use more clear to me
lee_plenty
18 Dec 09 at 9:15 am
it’s perfect!
mwshang
7 Jan 10 at 3:34 am
Hey i just received a alert from my firewall when i opened your site do you know why this occured? Could it possibly from your ads or something? Thanks, really strange i hope it was harmless?
Leola Hase
7 Jan 10 at 12:13 pm
Comfortably, the article is actually the sweetest on this precious topic. I concur with your conclusions and will eagerly look forward to your forthcoming updates. Saying thanks will not just be adequate, for the extraordinary clarity in your writing. I will instantly grab your rss feed to stay privy of any updates. Fabulous work and much success in your business efforts!
Adam Brandies
7 Jan 10 at 2:05 pm
@ Leola
I’m not sure why you received a firewall alert. I’m not running any ads, and my Flash files aren’t doing anything out of the ordinary. My site is pretty harmless…do let me know if you figure out what the cause was.
Ryan
7 Jan 10 at 6:48 pm
Thank you for posting your article, I found your blog on yahoo. I enjoyed reading your article and found if exceptionally remarkable. My wife and I are looking forward in finding and reading more of these type of pieces.
Raccoon
9 Jan 10 at 8:33 am
Excellent tutorial, well done!! Much respect
Wobo
13 Jan 10 at 5:21 pm
OH!So cool,Thanks !
Tom
22 Jan 10 at 4:08 am
excellent tuto… merci
saint-cloud
le maggiori
9 Feb 10 at 5:22 pm
Thanks for a great tutorial. Why don’t you remove “import caurina.transitions.Tweener;” line from FlintTweenToZoneDemo.as?
grayger
21 Feb 10 at 10:23 pm
You can safely remove the “import caurina.transitions.Tweener” line from FlintTweenToZoneDemo.as. I used the same template to create all of the demos, and Tweener ended up being unnecessary in a few of them.
Ryan
19 Mar 10 at 5:41 pm
great cool tutorial!
seanghong
23 Mar 10 at 9:16 pm
very nice tutorial.
Amer Dababneh
28 Mar 10 at 1:21 pm
Nice Demontrations. Thanks for Sharing Demo SCRIPTS.
Jewelson
23 Apr 10 at 9:20 am
Thanks a lot for this amazing visual tutorial for flint. It helped me a lot.
Alexander
1 Jul 10 at 3:11 pm
very nice demos i like flint
greetings from de
Typo3 Agentur
20 Jul 10 at 4:11 pm