28 February 2011

Flint Particles v3.0 actions cheatsheet

Single PDF page of Flint Particles v3.0 actions. Black color for both 2D and 3D actions, blue color for only 2D actions and parameters and green color for only 3D actions and parameters.

(click on image to download)


19 February 2011

Quick update on select tool

Just a quick update on 'select tool'. You can now use some keyboard keys to perform additional actions. After selection is made use arrow keys to move selected objects around, 10 px per click. Also backspace and delete keys can be used to remove objects from stage.

Plans. Some kind of generalization will be done, so assets can be loaded via XML. Application will have 3 panels: main panel for displaying purposes, items panel for choosing display objects with drag and drop ability and command panel where actions are defined like save as jpg, export as something, update view and similar.

Purpose. Unknown.


09 February 2011

Dissecting Flint 2D Grass Example

Flint particles system is pretty awesome, but for beginners it's very hard to understand entire library and use it easily. This is why I decided to dissect one of the examples, 2D Grass example. Take a look at Flash version of the code. There is only 25 lines of code and 9 of them are import statements. Make sure you have downloaded and extracted Flint source code, I'll make reference to it later during this tutorial.

First, we place 2D emitter on stage with position x = 250 and y = 400. You can first move this emitter slightly up with:

emitter.y = 200;

Instead of 100 particles, we will add 200 with:

emitter.counter = new Blast( 200 );

Instead of Blast counter, you can try another one like KeyDownCounter, Pulse, SineCounter or TimePeriod which uses easing equations for emitting particles in predefined period of time. Check docs for full list at org\flintparticles\common\counters.

Next we have four Initializers. First one is 2D Position Initializer with DiskZone in point (0,0) and radius 40. DiskZone is circular shape which can have third parameter inner radius, so DiskZone can place particles in doughnut shape also, but if third parameter is omitted, particles are placed inside circle like in this example.

Second used Initializer is Velocity. This one defines velocity for all particles. As its parameter it uses one of Flint zones. There are several zone definitions you can use like DiscZone, LineZone, Zone2D. Check entire list in docs: org\flintparticles\twoD\zones.

Grass example uses DiscSectorZone with definition:

DiscSectorZone( center:Point = null, outerRadius:Number = 0, innerRadius:Number = 0, minAngle:Number = 0, maxAngle:Number = 0 )

Parameter are pretty straightforward. Change those parameters to:

new DiscSectorZone( new Point( 0, 50 ), 80, 75, -9 * Math.PI / 16, -7 * Math.PI / 16 )

Next image shows result:

Third Initializer is color. I wanted to change current situation and start with different colors. Changed line is:

emitter.addInitializer( new ColorInit( 0x66666600, 0x99999900 ) );

Fourth Initializer is easy to understand, it is particles Lifetime. If you increase it to 8, you'll get:

Flint power and diversity is in its actions. Library has almost 40 different actions in 2D space. Some of them are: Accelerate, CollisionZone, MouseGravity, RandomDrift and ones used in Grass example Move, Age and ScaleImage. Check entire list at org\flintparticles\twoD\actions. We will change two actions.

emitter.addAction( new ScaleImage( 3, 1 ) );
emitter.addAction( new Accelerate( 0, 6 ) );

Next image shows result:

By now you have good insight into how Flint works. You should probably use some other examples both 2D and 3D and change few parameters to get used to library before you are brave enough to try to write your own particles code using Flint.

Flint library is released under MIT license by Richard Lord.


04 February 2011

Getting Started With Flint AS3 Particle System

Flint is very mature particle system written in AS3. Project has started back in 2008 by Richard Lord. Few days ago on 20th January, version 3.0.0 is released. Big change is that new version targets only Flash Player 10 and beyond.

You can start by downloading source code from project website. There are few options: source code for Flash or Flex, swc for Flash or Flex, documentation and excellent examples files.

In order to include library code to your project you have two options. First one is to modify classpath of specific document you are working on or global classpath.

I'm using second approach. Create working folder somewhere on your hard drive and name it MyFlintExamles. Unzip Flint_3_0_0_src.zip file you've already downloaded from project website and extract 'org' folder inside MyFlintExamles folder.

I'll show you how to change existing example to suit your needs and just get started with Flint. Open Flint_3_0_0_examples.zip file and browse to examples2D\LogoTween\Flash where you will find two files you will need to extract in MyFlintExamples Frame1.as and LogoTween.fla.

Now open LogoTween file and check Library (CTRL+L) and you will find two png files flint.png and particles.png. These two files you will have to create with your favorite graphics editing software. Make sure you save your files in png format 320x80.

Here are my two files.

Inside LogoTween file, open Library and right-click on flint.png first and choose Properties to open Bitmap Properties. Click on Import... and select your first image. Leave everything else as it is.

Do the same thing for other Library item particles.png and import your second (tween destination) file.

You can modify number of particles used for tweening effect by opening Frame1.as and change number 5000 to something else on line 48:

startEmitter.counter = new Blast( 5000 );

Flash Player 10 is required to see this example.

View on ShareSWF



template by blogger templates