Page History

...

Note: this section mimics the tutorial found on the Getting Started Guide on the CreateJS site. The example below uses a command line approach and can easily be adapted to a FlexJS-compatible IDE. 

Using EaselJS

Create a new directory your FlexJS project and alter the application MXML file so that it includes the CreateJS libraries via the CreateJS Application root tagin that directory create a file called, Demo.mxml. Open the file and add the following Application tag and content:

<cjs:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:js="library://ns.apache.org/flexjs/basic" 
                   xmlns:cjs="library://ns.apache.org/flexjs/createjs"
flexjs/createjs"
                   >    
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    <js:initialView>
        <cjs:View>
        </cjs:View>
    ></js:initialView>
</cjs:Application>

Notice that the namespace for the Application tag was changed to is "cjs" and the "cjs" namespace is defined to bring in all of the FlexJS CreateJS component framework. You will identify FlexJS CreateJS elements using the "cjs" namespace. The FlexJS CreateJS Application tag creates the HTML5 Canvas automatically.

...

<cjs:View>
	    <cjs:Circle id="circle" x="100" y="100" width="100" height="100">
		<js:fill>
			<js:SolidColor color="#26C9FF" />
		</js:fill>
	</cjs:Circle>   		    

	</cjs:View>Circle>

Compile and run your application following the instructions to cross-compile it and load the js-debug result into a browserSave the file and compile it. Open bin/js-debug/index.html in a browser. You should see a blue circle.

Using TweenJS

Continue with the previous example where you already have a circle to work with. You will add some ActionScript code to create several Tweens that will move and/or fade the circle. Copy the <fx:Script> block, below, into the Demo.mxml file just after the <cjs:Application> tag. 

<fx:Script>
    	<![CDATA[
    		import org.apache.flex.createjs.tween.Tween;
    		import org.apache.flex.createjs.tween.Sequence;
    		
    		private function runEffect():void {
    			var move1:Tween = new Tween(circle);
    			move1.xTo = 400;
    			move1.duration = 1000;
    			
    			var move2:Tween = new Tween(circle);
    			move2.alphaTo = 0;
    			move2.yTo = 175;
    			move2.duration = 500;
    			
    			var move3:Tween = new Tween(circle);
    			move3.alphaTo = 0;
    			move3.yTo = 225;
    			move3.duration = 100;
    			
    			var move4:Tween = new Tween(circle);
    			move4.alphaTo = 1;
    			move4.yTo = 200;
    			move4.duration = 500;
    			
    			var move5:Tween = new Tween(circle);
    			move5.xTo = 100;
    			move5.duration = 800;
 
				// add Sequence (below) here
    		}
    	]]>
</fx:Script>

This code has created creates five Tweens which operate on the circle. To have them work sequentially, create a final Tween, a Sequence, and add the movement Tweens to it (do this after the Tweens have been defined, within the runEffect() function):

...