Flint Particle System Forum - Using flint with Flash Builder 4 and Actionscript

Using flint with Flash Builder 4 and Actionscript

2010-04-16T15:33:32+01:00

For anyone that is looking in using Flashbuilder 4, Flint, and Actionscript 3 and having a hard time. I just realized how to do it and am documenting it here.

UIComponent doesn't exist by default in flash builder. If you want to use AS3 code in FB4 you'll need to add the UIComponent then add the renderer to it.

This is the snow example in FB4 using Actionscript:

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
xmlns:filters="flash.filters.*"
creationComplete="init()" backgroundColor="#010101" >

import flash.geom.Point;

import mx.core.UIComponent;

import org.flintparticles.common.counters.*;
import org.flintparticles.common.displayObjects.RadialDot;
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.renderers.*;
import org.flintparticles.twoD.zones.*;

private var emitter:Emitter2D = new Emitter2D();

private function init():void
{
var cnvs:UIComponent = new UIComponent();
emitter.counter = new Steady( 100 );

emitter.addInitializer( new ImageClass( RadialDot, 2 ) );
emitter.addInitializer( new Position( new LineZone( new Point( -5, -5 ), new Point( 505, -5 ) ) ) );
emitter.addInitializer( new Velocity( new PointZone( new Point( 0, 65 ) ) ) );
emitter.addInitializer( new ScaleImageInit( 0.75, 2 ) );

emitter.addAction( new Move() );
emitter.addAction( new DeathZone( new RectangleZone( -10, -10, 520, 420 ), true ) );
emitter.addAction( new RandomDrift( 15, 15 ) );

var renderer:DisplayObjectRenderer = new DisplayObjectRenderer();
this.addElement( cnvs );
cnvs.addChild( renderer );
renderer.addEmitter( emitter );

emitter.start();
emitter.runAhead( 10 );
}
]]>

Using flint with Flash Builder 4 and Actionscript

2010-04-16T18:14:09+01:00

There are two versions of each renderer, in the packages

org.flintparticles.twoD.renderers.*
org.flintparticles.twoD.renderers.mxml.*

The former are based on Sprite, and are intended for projects that don't use the Flex framework. You can, of course, use them with the Flex framework as described above if you wish.

The latter are based on UIComponent and can be used with the Flex framework. You don't need to manually add them to a display object, they are valid Flex components so you just drop them in, using MXML or Actionscript. They were designed for and work with Flex 3, I haven't tested them with Flex 4 but they should work fine given Flex 4 is intended to be backward compatible.

You can even design complete particle systems in MXML, as in this example. Most of the examples in the downloads and SVN have an MXML version along with the Flash and PureAS3 versions.

Richard

Using flint with Flash Builder 4 and Actionscript

2010-04-17T07:44:36+01:00

Thanks, Richard, this is awesome! I've been using a MX Panel with the addRawChild method to do the same thing as your Canvas technique. But what about using the new Flex 4 Spark components? Have you had any success loading Flint into a SkinnableContainer, or any other Spark components?

Using flint with Flash Builder 4 and Actionscript

2010-04-17T12:48:26+01:00

I first started playing with MXML with Flint but quickly discovered that a lot of the exotic examples/help are in AS3. Since I do both AS3 and MXML programming I thought that it might be better to use AS3 code for help since I'll hit more programmers using this with AS3 vs. Flex(flash) builder.

Using flint with Flash Builder 4 and Actionscript

2010-04-17T14:18:21+01:00

If you want to define the emitter using AS3, I'd still be inclined to use the mxml renderer, like this


  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx"
  xmlns:f="http://flintparticles.org/2009/flint2d"
  minWidth="955" minHeight="600" 
  creationComplete="init()" backgroundColor="#010101" >
  
      import flash.geom.Point;
    
    import org.flintparticles.common.counters.*;
    import org.flintparticles.common.displayObjects.RadialDot;
    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.*;
    
    private var emitter:Emitter2D = new Emitter2D();
    
    private function init():void
    {
      emitter.counter = new Steady( 100 );
      
      emitter.addInitializer( new ImageClass( RadialDot, 2 ) );
      emitter.addInitializer( new Position( new LineZone( new Point( -5, -5 ), new Point( 505, -5 ) ) ) );
      emitter.addInitializer( new Velocity( new PointZone( new Point( 0, 65 ) ) ) );
      emitter.addInitializer( new ScaleImageInit( 0.75, 2 ) );
      
      emitter.addAction( new Move() );
      emitter.addAction( new DeathZone( new RectangleZone( -10, -10, 520, 420 ), true ) );
      emitter.addAction( new RandomDrift( 15, 15 ) );
      
      renderer.addEmitter( emitter );
      
      emitter.start();
      emitter.runAhead( 10 ); 
    }
  ]]>

Using flint with Flash Builder 4 and Actionscript

2010-04-17T14:36:11+01:00

Just to add, Flint's mxml works with Flex 4 (I just tested it). The above effect, in mxml, is


  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx"
  xmlns:f="http://flintparticles.org/2009/flint2d"
  minWidth="955" minHeight="600" 
  backgroundColor="#010101" >
  
          import org.flintparticles.common.displayObjects.RadialDot;
    ]]>

Using flint with Flash Builder 4 and Actionscript

2010-04-18T13:59:49+01:00

This is super info; thanks.