Hi!

Today’s lesson will be about creating a starfield with the Flint Particle System. It’s quiet easy, thanks to the simplicity of the system itself. Let’s jump in! Follow me!

1. First of all, download the latest version of the Flint Particle System, you can download it here or by SVN. Decompress the archive and copy the files (under the org folder) in your lib directory. Don’t you know how to do this?
2. We begin making an empty AS3 empty file in the flash IDE. We will prefer to set the Stage background in black, and our frame rate at 40 fps. I will choose to develop the starfield in a class, so i will click on an empty point of the stage, call the Property panel and set Starfield as the document class. I save the document as Starfield.fla.
3. We create a new actionscript file, named Starfield.as. We will add here all the code to make the class work. We will make the class extend MovieClip because this is a Document Class. Every document class extends MovieClip.
   

   package {
   public class StarField extends MovieClip {
   public function StarField() {
   }
   }
   }

4. Add the needed imports.

// all we need to import from flash libraries
import flash.display.MovieClip;
import flash.geom.Point;
import flash.events.Event;
import flash.filters.BlurFilter;

// all we need to import from Flint library
import org.flintparticles.displayObjects.Dot;
import org.flintparticles.actions.*;
import org.flintparticles.counters.*;
import org.flintparticles.emitters.*;
import org.flintparticles.initializers.*;
import org.flintparticles.zones.*;

5. We start by creating the constructor. I usually don’t put code in here, but i wait for the object to be added to the stage, before creating all of it.

public function StarField() {
this.addEventListener(Event.ADDED_TO_STAGE, added);
}

6. So we have to create a added function, that will manage all of the rest.

private function added(e:Event) {
// your code here…
}

7. Now we got to add the control code in the added function, so please delete the “your code here” line and add the newly created code. We start by creating the emitter.

var emitter:BitmapEmitter = new BitmapEmitter();

8. We will use a Steady counter, that will keep on creating particles continuosly.

emitter.setCounter( new Steady(20) );

9. I will add a blur effect to have some sort of trail.

emitter.addFilter( new BlurFilter( 2, 2, 1 ) );

10. We add the initializers. I will use dots for stars, make them change their birth color from 0xFFFFFFFF and 0xFF000FFF, position the stars on a line before they start moving, and give them a left handed direction.

emitter.addInitializer( new SharedImage( new Dot( 1 ) ) );
emitter.addInitializer( new ColorInit( 0xFFFFFFFF, 0xFF000FFF ) );
emitter.addInitializer( new Position( new LineZone(new Point(250, 0), new Point(250, 250))) );
emitter.addInitializer( new Velocity( new PointZone( new Point (-100, 0) ) ) );

11. Now that all is set, i add actions, that will drive my particles. I tell the particles to move, and i limit their speed to 200, because i do not want them to move too quickly. Then i add a DeathZone, a zone in which the particles contained are set dead or safe (which is the case, and the second parameter determines if the zone if safe). If the particle run outside of the stage, are deleted.

emitter.addAction( new Move() );
emitter.addAction( new SpeedLimit(200) );
emitter.addAction( new DeathZone( new RectangleZone(0, 0, stage.stageWidth, stage.stageHeight), true) );

12. So i will add the emitter to the stage, and make it start.

addChild( emitter );
emitter.start( );
emitter.runAhead(2);

13. The class is done! Enjoy your particle starfield! This should be the result.

[download=4]

See you soon with other Flint related stuff!

Comments (3)

I promised yesterday that i would have written a tutorial on the reference for the as3 libs Flint Particle System.

Well.. there it is. You can read it here. It is in italian, for now, but i will translate it as soon as possible.

Comments and critics are welcome.

See you guys!

Comments