Using the Flint Particle System with Adobe Flex

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

Flint is particle system library that can be used to create 2D or 3D particle effects in Flex or Flash. The latest version of Flint now include the ability to define particle system with MXML code, which makes it even easier to use for Flex developers.

Flint can be used to create a number of interesting and eye catching effects. Follow the steps below to create a "gravity well" particle system with Flint and Flex.

Download and extract the Flint library source code from here.

Create a new Flex application, and add the Flint library to the Flex Build Path.

Add the following attributes to the Application element.

xmlns:filters="flash.filters.*"

xmlns:renderers="org.flintparticles.twoD.renderers.mxml.*"

xmlns:emitter="org.flintparticles.twoD.emitters.mxml.*"

xmlns:counters="org.flintparticles.common.counters.*"

xmlns:initializers="org.flintparticles.twoD.initializers.*"

xmlns:commoninitializers="org.flintparticles.common.initializers.*"

xmlns:actions="org.flintparticles.twoD.actions.*"

xmlns:zones="org.flintparticles.twoD.zones.*"

These attributes define the xml namespaces that will be used to reference the Flint classes. Be carefult not to mix up the twoD and threeD namespces: twoD is used for 2D applications (like this one), and the classes in the threeD packages are used in conjunction with a Flash 3D engine like Papervision or Away3D.

Add a PixelRenderer element to the Application element.

<renderers:PixelRenderer id="renderer" width="{Application.application.width}" height="{Application.application.height}">

...

</renderers:PixelRenderer>

The PixelRenderer is the object that will actually render the particles to the screen, in this case as individual pixels. The width and height attributes appear to require a number (as opposed to a percentage, like 100%), so here we use the width and height of the Flex Application as the dimensions.

The elements below add a standard Flash BlurFilter and ColorMatrixFilter to the PixelRenderer. This adds a trail effect to the particles that fades over time.

<renderers:preFilters>

<filters:BlurFilter blurX="2" blurY="2" quality="1"/>

<filters:ColorMatrixFilter matrix="{[ 1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.99,0 ]}"/>

</renderers:preFilters>

The emitters element defines a single Flint emitter. Emitters are responsible for creating, modifying and destroying individual particles.

<renderers:emitters>

...

</renderers:emitters>

Here we define that the emitter should create all of its child particles in one single burst.

<emitter:counter>

<counters:Blast startCount="4000"/>

</emitter:counter>

These elements here define the starting position to be within a circular disc, and set the initial colour to be within a predefined colour range.

<emitter:initializers>

<initializers:Position>

<zones:DiscZone

centerX="{Application.application.width/2}"

centerY="{Application.application.height/2}"

outerRadius="{Application.application.width/2}"/>

</initializers:Position>

<commoninitializers:ColorInit minColor="0xFFFF00FF" maxColor="0xFF00FFFF"/>

</emitter:initializers>

These elements define how the particles will be modified over time. Here we have set the particles to move based on their velocity, and to be pulled in towards 4 gravity wells.

<emitter:actions>

<actions:Move/>

<actions:GravityWell

power="25"

x="{Application.application.width/2}"

y="{Application.application.height/2}"/>

<actions:GravityWell

power="25"

x="{Application.application.width/3}"

y="{Application.application.height/3}"/>

<actions:GravityWell

power="25"

x="{Application.application.width/3 * 2}"

y="{Application.application.height/3 * 2}"/>

<actions:GravityWell

power="25"

x="{Application.application.width/3 * 2}"

y="{Application.application.height/3}"/>

<actions:GravityWell

power="25"

x="{Application.application.width/3}"

y="{Application.application.height/3 * 2}"/>

</emitter:actions>

This is a simple particle system; Flint offers dozens of classes to modify how the particle systems should be initialised and how they will move over time. With some experimentation it is possible to create some very cool particle effects.

Go back to the Tutorial Index

3D Particle Systems with Flint and Papervision

This free tutorial shows you how to use the Flint particle system with the Papervision Flash 3D engine.