trace( "maybe this will work…" );

A Visual Introduction to the Flint Particle System

flint particles
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

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.

December 11th, 2009 at 11:57 pm

Posted in Flash, Particle Systems

21 Responses to 'A Visual Introduction to the Flint Particle System'

Subscribe to comments with RSS

  1. Amazing examples and explanations! Thanks!

    John Lindquist

    17 Dec 09 at 3:11 am

  2. Indeed excellent info and examples! Thanks a lot for the effort!!

    Jochen Szostek

    17 Dec 09 at 5:03 am

  3. Excellent write-up/tutorial. Very helpful. Cheers!

    Evil D

    17 Dec 09 at 10:07 am

  4. 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

  5. Thanks for the support :-)

    Ryan

    18 Dec 09 at 7:51 am

  6. 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 :D

    lee_plenty

    18 Dec 09 at 9:15 am

  7. it’s perfect!

    mwshang

    7 Jan 10 at 3:34 am

  8. 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

  9. 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

  10. @ 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

  11. 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

  12. Excellent tutorial, well done!! Much respect

    Wobo

    13 Jan 10 at 5:21 pm

  13. OH!So cool,Thanks !

    Tom

    22 Jan 10 at 4:08 am

  14. excellent tuto… merci
    saint-cloud

    le maggiori

    9 Feb 10 at 5:22 pm

  15. 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

  16. 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

  17. great cool tutorial!

    seanghong

    23 Mar 10 at 9:16 pm

  18. very nice tutorial.

    Amer Dababneh

    28 Mar 10 at 1:21 pm

  19. Nice Demontrations. Thanks for Sharing Demo SCRIPTS.

    Jewelson

    23 Apr 10 at 9:20 am

  20. Thanks a lot for this amazing visual tutorial for flint. It helped me a lot.

    Alexander

    1 Jul 10 at 3:11 pm

  21. very nice demos i like flint ;-)

    greetings from de

    Typo3 Agentur

    20 Jul 10 at 4:11 pm

Leave a Reply