Welcome, Guest

Want to take part in these discussions? Sign in if you have an account, or apply for one below

• Forgot your password?
• Apply for membership

1. • CommentAuthorneonblue
   • CommentTimeApr 16th 2010

    
   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:
   
   <?xml version="1.0" encoding="utf-8"?>
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   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" >
   <fx:Declarations>
   <!-- Place non-visual elements (e.g., services, value objects) here -->
   </fx:Declarations>
   <fx:Script>
   <![CDATA[
   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 );
   }
   ]]>
   </fx:Script>
   <mx:Canvas id="myStage" width="100%" height="100%">
   <s:Label x="56" y="41" text="Brrrr..... " color="#FDFBFB"/>
   </mx:Canvas>
   
   </s:Application>
2. • CommentAuthorRichard
   • CommentTimeApr 16th 2010

    
   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
3. • CommentAuthorknowledge
   • CommentTimeApr 17th 2010 edited

    
   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?
4. • CommentAuthorneonblue
   • CommentTimeApr 17th 2010 edited

    
   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.
5. • CommentAuthorRichard
   • CommentTimeApr 17th 2010 edited

    
   If you want to define the emitter using AS3, I'd still be inclined to use the mxml renderer, like this
   
   <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
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" >
<fx:Script>
<![CDATA[
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 );
}
]]>
</fx:Script>
<s:Label x="56" y="41" text="Brrrr..... " color="#FDFBFB"/>
<f:DisplayObjectRenderer id="renderer"/>
</s:Application>
6. • CommentAuthorRichard
   • CommentTimeApr 17th 2010 edited

    
   Just to add, Flint's mxml works with Flex 4 (I just tested it). The above effect, in mxml, is
   
   <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
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" >
<fx:Script>
<![CDATA[
import org.flintparticles.common.displayObjects.RadialDot;
]]>
</fx:Script>
<s:Label x="56" y="41" text="Brrrr..... " color="#FDFBFB"/>
<f:DisplayObjectRenderer id="renderer">
<f:emitters>
<f:Emitter id="emitter" autoStart="true" runAheadTime="10">
<f:counter>
<f:Steady rate="100"/>
</f:counter>
<f:initializers>
<f:ImageClass imageClass="{RadialDot}" parameters="2"/>
<f:Position>
<f:LineZone startX="-5" startY="-5" endX="505" endY="-5"/>
</f:Position>
<f:Velocity>
<f:PointZone x="0" y="65"/>
</f:Velocity>
<f:ScaleImageInit minScale="0.75" maxScale="2"/>
</f:initializers>
<f:actions>
<f:Move/>
<f:DeathZone zoneIsSafe="true">
<f:RectangleZone left="-10" top="-10" right="510" bottom="410"/>
</f:DeathZone>
<f:RandomDrift driftX="15" driftY="15"/>
</f:actions>
</f:Emitter>
</f:emitters>
</f:DisplayObjectRenderer>
</s:Application>
7. • CommentAuthorneonblue
   • CommentTimeApr 18th 2010

    
   This is super info; thanks.