Flint scrolling in time.

2008-07-09T13:28:57+01:00

Hello,

I have question i made some firework effects for an app I am making with flint. The meening of the app is to let the user add the fireworks on a timeline so you can scroll to specific times and view the effect on the chosen time. You can look at the timeline I am making here http://www.flashingback.be/zenacity. Examples of the fireworks are here http://www.flashingback.be/fireworks.

this is some code from a firework i made:

package nl.zenacity.effects {

import flash.display.BitmapData;
import flash.display.LineScaleMode;
import flash.display.Sprite;
import flash.filters.BlurFilter;
import flash.filters.ColorMatrixFilter;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.text.TextFieldAutoSize;

import org.flintparticles.actions.*;
import org.flintparticles.counters.*;
import org.flintparticles.emitters.Emitter;
import org.flintparticles.energyEasing.*;
import org.flintparticles.events.FlintEvent;
import org.flintparticles.initializers.*;
import org.flintparticles.renderers.*;
import org.flintparticles.zones.*;
import org.flintparticles.displayObjects.*;

public class Crossette extends Firework{
private var emitter:Emitter
private var emitter_ex:Emitter
private var count:Number;

public var explodePosition:Object;
public var lifeTime_nr:Number

public function Crossette() {
super();
lifeTime_nr = 10;
explodePosition = {x:600,y:200};

}

public function fire(){
count=0
emitter = new Emitter();

var renderer:BitmapRenderer = new BitmapRenderer ( new Rectangle( 0, 0, 1280, 800 ) );
renderer.addFilter( new BlurFilter( 2, 2, 1 ) );
renderer.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.96,0 ] ) );
emitter.renderer = renderer;
addChild( renderer );

emitter.counter = new Blast( 3);

emitter.addInitializer( new ImageClass( Star, 1 ) );
emitter.addInitializer( new Position( new PointZone( new Point( explodePosition.x , 800) ) ) );

emitter.addInitializer( new Lifetime( 4) );

emitter.addAction( new Age( Quadratic.easeIn ) );
emitter.addAction( new Scale(0.2,1) );
emitter.addAction( new Move() );
emitter.addAction( new TweenPosition(explodePosition.x+((Math.random()*20)-10) ,800,explodePosition.x ,explodePosition.y ) );

emitter.addEventListener( FlintEvent.EMITTER_EMPTY, explode );
emitter.start();

}
private function explode(ev:FlintEvent):void{

trace("Crossette::fire");
if(count==0){
emitter_ex = new Emitter();

emitter_ex.counter = new Blast( 150 );

emitter_ex.addInitializer( new ImageClass( Line, 3 ) );
emitter_ex.addInitializer( new ColorInit( 0xCCFF99, 0xFFFFFF00 ) );
emitter_ex.addInitializer( new Lifetime( lifeTime_nr ) );
emitter_ex.addInitializer( new Position( new DiscZone( new Point( explodePosition.x , explodePosition.y ), 1 ) ) );

emitter_ex.addInitializer( new Velocity( new DiscZone( new Point( -10, 0), 100 ) ) );

emitter_ex.addAction( new Age( Quadratic.easeIn ) );
emitter_ex.addAction( new RotateToDirection() );
emitter_ex.addAction( new Scale(1,0.2) );
emitter_ex.addAction( new Fade( 0.8, 0 ) );
emitter_ex.addAction( new Move() );
emitter_ex.addAction( new LinearDrag( 0.6 ) );
emitter_ex.addAction( new Accelerate( 2, 0) );

var renderer:BitmapRenderer = new BitmapRenderer ( new Rectangle( 0, 0, 1280, 800 ) );
renderer.addFilter( new BlurFilter( 2, 2, 1 ) );
renderer.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.96,0 ] ) );
emitter_ex.renderer = renderer;
addChild( renderer );

emitter_ex.x = 0;
emitter_ex.y = 0;
emitter_ex.gotoStop(5)
}

count++
}
}
}
you can see i added a gotoStop function at the emmiter class but that didn't work out verry wel this is how te function looks like this:

public function gotoStop(time:Number){
this.pause();
this.start()
this.pause();
for (var i:Number=0; i<=time ; i++){
this.resume ()
this.frameUpdate(i);
this.pause()
}

}

With this function it does get to the specific place in time but it doesn't show it verrywel the effect is smaller and the blur isn't good to.

I hope there is a solution for this.

Flint scrolling in time.

2008-07-09T14:01:25+01:00

Hi

One of the likely causes is the frame rate of your gotoStop method. Your method is drawing one frame for each second of the goto, so you'll get much less blur than if you were drawing thirty frames for each second of the goto. If you want the image you jump to to look like the image you'll see if you watch from the beginning, you need your goto to use the same frame rate as the movie.

Fortunately, the emitter already has a method, called runAhead, that does the same as your gotoStop but which lets you set the frame rate. Try this instead of your gotoStop -

emitter_ex.start();
emitter_ex.runAhead( 5, stage.frameRate );

It will take longer to calculate the intermediate frames but will produce a better result. To speed it up you could try something like this

emitter_ex.start();
emitter_ex.runAhead( 4, 1 );
emitter_ex.runAhead( 1, stage.frameRate );

Just doing accurate drawing for the last second before displaying the image.

I expect this to solve some of the problems. Whether it solves everything is another matter. Let us know how it goes.

Flint scrolling in time.

2008-07-09T15:07:31+01:00

Thanks, I think this wil be a good solution. Thanks for your fast reply

Flint Particle System Forum - Flint scrolling in time.

Flint scrolling in time.

Flint scrolling in time.

Flint scrolling in time.