How to have a Flint emitter follow your mouse in Flash

The Flint Particle System is an open source flash project with the goal of creating a base framework that is easily extensible by developers to create their own particle behaviors and effects. One of the many features it has is the ability to have your particle emitters move with your mouse. Below you can see a demonstration of this behavior as well as a quick code break down of how to do this in your own projects.

How To

The main steps to utilizing the Flint Particle system are:

  1. Create your emitters
  2. Create your renderer and attach your emitters
  3. Attach your renderer to your Stage or Display Object
  4. Add activites to the emitter
  5. Start your emitters

Step 1: Create your emitters

Of course these can get a little more complicated but for starters lets look at the creation of an emitter. To do that I tend to extend the Basic 2D Emitter with my own class setting its properties.

package com.mdbitz
{

	import flash.geom.Point;
	import org.flintparticles.common.actions.*;
	import org.flintparticles.common.counters.*;
	import org.flintparticles.common.displayObjects.Dot;
	import org.flintparticles.common.initializers.*;
	import org.flintparticles.twoD.actions.*;
	import org.flintparticles.twoD.emitters.Emitter2D;
	import org.flintparticles.twoD.initializers.*;
	import org.flintparticles.twoD.zones.*;

	public class BlueSparkler extends Emitter2D
	{

		public function BlueSparkler()
		{
			// init counter
			this.counter = new Pulse( 1.5, 10 );

			// set up initializers
			this.addInitializer( new ImageClass( Dot, 1, 0x91C3FC ) );
			this.addInitializer( new ScaleImageInit( 0.75, 1.5 ) );
			this.addInitializer( new Lifetime( 1.2, 3.6 ) );
			this.addInitializer( new Velocity( new DiscSectorZone( new Point( 0, 0 ), 75, 15, -10 * Math.PI/9 , 6 * Math.PI/9 ) ) );

			// set up actions
			this.addAction( new Age() );
			this.addAction( new Move() );
			this.addAction( new Fade() );
			this.addAction( new Accelerate( 0, 18 ) );
			this.addAction( new RandomDrift( 22, 22 ) );

		}

	}
}

In the above Emitter class you will note that i initialize my emitter with a counter for when it should emit particles then set initializers on how the particles behave such as lifetime, velocity, and scale. The last thing i do is set some basic actions to have the particles age, move, fade, and etc. All Emitters can be created in a similar fashion with full details on the different flint base classes being found in the AS Docs

We use this emitter class by creating a new instance of it in our main flash document class. Which at this point will simply define the imports, constructor and a setUpEmitter function that we will be adding to.

package com.mdbitz{

	import flash.display.MovieClip;

	import flash.geom.Rectangle;
	import flash.geom.Point;

	import org.flintparticles.common.counters.*;
	import org.flintparticles.twoD.renderers.*;
	import org.flintparticles.twoD.initializers.*;
	import org.flintparticles.twoD.activities.*;
	import org.flintparticles.twoD.zones.*;

	public class Main extends MovieClip
	{

		public function Main()
		{
			this.setUpEmitter();
		}//main

		public function setUpEmitter():void
		{
			// initilize emitters
			var whiteEmitter:WhiteSparkler = new WhiteSparkler();
			var blueEmitter:BlueSparkler = new BlueSparkler();
		}

	}//class

}//package

Step 2: Create your Renderer

The renderer is the object that is responsible for displaying the particles emitted by the various emitters added to it. For this example we are going to utilize a basic BitMapRenderer and attach our blue and white emitters.

// create renderer
var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 500, 500 ) );

// add emitters to renderer
renderer.addEmitter( whiteEmitter );
renderer.addEmitter( blueEmitter );

Step 3: Add your renderer to your Stage or Display Object

Not to much to this step simply add your renderer as a child to where it should be displayed and if needed change its x y positions.

// add renderer to screen
this.addChild( renderer );

Step 4: Add Activities to the Emitter

Now that our renderer is all set to go we want to add activities to our Emitters. Activities are behaviors that the Emitters follow, in our case we want are Emitters to follow the Mouse that is done by the FollowMouse Class as shown below:

// set up emitters to follow mouse
whiteEmitter.addActivity( new FollowMouse( renderer ) );
blueEmitter.addActivity( new FollowMouse( renderer ) );

Step 5: Start your Emitters

Last but not least is to start your emitters so that they generate particles.

// start emitters
whiteEmitter.start();
blueEmitter.start();

That is all there is to it., you know have a particle generator that follows your mouse around. The full setUpEmitters function is displayed below and the source code for this example including the swf can be found in the Downloads section.

public function setUpEmitter():void {

// initilize emitters
var whiteEmitter:WhiteSparkler = new WhiteSparkler();
var blueEmitter:BlueSparkler = new BlueSparkler();

// create renderer
var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 500, 500 ) );

// add emitters to renderer
renderer.addEmitter( whiteEmitter );
renderer.addEmitter( blueEmitter );

// add renderer to screen
this.addChild( renderer );

// set up emitters to follow mouse
whiteEmitter.addActivity( new FollowMouse( renderer ) );
blueEmitter.addActivity( new FollowMouse( renderer ) );

// start emitters
whiteEmitter.start();
blueEmitter.start();
}

Downloads

// Flash //

Comments & Questions

Add Your Comment