THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
CreateJS is a JavaScript framework that makes use of the HTML5 Canvas, rather than the HTML DOM, to make graphic-based objects, such as shapes, buttons, and text. The integration of CreateJS with FlexJS makes it possible to not only code a CreateJS application in ActionScript, but to use MXML for the application layout.
Getting Started
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 in that directory create a file called, Demo.mxml. Open the file and add the following Application tag and content:
Modify Application Tag
<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"
>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<cjs:View>
</cjs:View>
</js:initialView>
</cjs:Application>
Notice that the namespace for the Application tag 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.
Within the <cjs:View> element, add the following MXML tags to create a CreateJS circle.
Create the Circle
<cjs:Circle id="circle" x="100" y="100" width="100" height="100"> <js:fill> <js:SolidColor color="#26C9FF" /> </js:fill> </cjs:Circle>
Save 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.
Setup Tweens
<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;
move1.easing = Ease.getPowInOut(4);
var move2:Tween = new Tween(circle);
move2.alphaTo = 0;
move2.yTo = 175;
move2.duration = 500;
move2.easing = Ease.getPowInOut(2);
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;
move4.easing = Ease.getPowInOut(2);
var move5:Tween = new Tween(circle);
move5.xTo = 100;
move5.duration = 800;
move5.easing = Ease.getPowInOut(2);
// add Sequence (below) here
}
]]>
</fx:Script>
This code 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):
Sequence Tween
var seq:Sequence = new Sequence(circle);
seq.loop = true;
seq.addEffect(move1);
seq.addEffect(move2);
seq.addEffect(move3);
seq.addEffect(move4);
seq.addEffect(move5);
seq.play();
Now you need a trigger to run the "runEffect()" function. You can use the Application's "applicationComplete" event to do that. Just add the following line to the Application tag:
Trigger Effects
applicationComplete="runEffect()">
Save the file and compile it. Open the bin/js-debug/index.html file in a browser. You will see the circle move and fade across the screen. The loop on the Sequence will make it run continuously.
You can see the complete code below.
Comparison
This section examines the demonstration code (above) in more detail and compares it with the original CreateJS demo code. To see this, there is a CreateJS example (see Getting Started Guide) that demonstrates how to use EaselJS to display a circle. The example looks like this:
EaselJS Demo
<html>
<head>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="200"></canvas>
</body>
</html>
The corresponding FlexJS MXML file looks like this:
FlexJS, EaselJS Demo
<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"
>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<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>
</js:initialView>
</cjs:Application>
Beneath the covers, the FlexJS application creates an HTML5 Canvas and sets up the drawing Stage; FlexJS has wrapper classes for the CreateJS and EaselJS constructs (note that today only a few exist but the pattern to add more has been established). Using either ActionScript or MXML, the CreateJS components can be added to the stage and displayed. In the example above, a CreateJS Circle is created using an MXML tag and specifying a fill color (a stroke can also be used to give the circle an outline).
In addition to EaselJS, the FlexJS CreateJS framework also includes a bit of TweenJS, the animation package. There is a small TweenJS example on the CreateJS page which looks like this:
TweenJS Demo
<html>
<head>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
createjs.Tween.get(circle, {loop: true})
.to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
.to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
.to({alpha: 0, y: 125}, 100)
.to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
.to({x: 100}, 800, createjs.Ease.getPowInOut(2));
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="200"></canvas>
</body>
</html>
The corresponding FlexJS MXML file looks like this:
FlexJS, TweenJS Demo
<cjs:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:local="*"
xmlns:js="library://ns.apache.org/flexjs/basic"
xmlns:cjs="library://ns.apache.org/flexjs/createjs"
applicationComplete="runEffect()"
>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<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;
move1.easing = Ease.getPowInOut(4);
var move2:Tween = new Tween(circle);
move2.alphaTo = 0;
move2.yTo = 175;
move2.duration = 500;
move2.easing = Ease.getPowInOut(2);
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;
move4.easing = Ease.getPowInOut(2);
var move5:Tween = new Tween(circle);
move5.xTo = 100;
move5.duration = 800;
move5.easing = Ease.getPowInOut(2);
var seq:Sequence = new Sequence(circle);
seq.loop = true;
seq.addEffect(move1);
seq.addEffect(move2);
seq.addEffect(move3);
seq.addEffect(move4);
seq.addEffect(move5);
seq.play();
}
]]>
</fx:Script>
<js:initialView>
<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>
</js:initialView>
</cjs:Application>
Once the object has been described with MXML tags, the ActionScript block is used to form a number of Tween animations on it. Each Tween matches one from the original TweenJS demo: its movement, alpha changes, and easing functions. A final Sequence animation is created to join them all together and then played.
Components from the FlexJS Basic framework cannot be used with components from the FlexJS CreateJS framework. This is due to the fact that CreateJS uses the HTML5 Canvas as its drawing space and maintains its own DOM; the FlexJS Basic framework uses the HTML DOM.
Extending FlexJS CreateJS
At this time the FlexJS CreateJS framework is far from complete. CreateJS has a lot to offer and this foray into it via FlexJS just touches upon it and lays the foundation to extend it.
If you look at the flex-asjs repository, specifically the frameworks/projects/CreateJS directory, you'll see how the FlexJS wrapper classes are composed. There is an Application class which provides the injection of the necessary CreateJS JavaScript downloads as well as creating the Canvas and the CreateJS Stage object.
From there, components use org.apache.flex.createjs.core.CreateJSBase as their foundation class. Other "higher level" components such as Circle, Rect, Label, and TextButton build from there. The key part is the createElement function. You can see how the CheckBox, for example, is composed from several different EaselJS elements. You would add any new components following this pattern.
Since CreateJS is an JavaScript-only framework, you can see that much of the classes use the COMPILE::JS compiler tag to identify the code that only belongs on the JavaScript side (code that gets cross-compiled to JavaScript and does not have any relevance to the SWF). Any additional CreateJS structures or code should be wrapped in the COMPILE::JS tag.
Further, there must be an SWF-side presence in order for the components to be usable in ActionScript within a client application or even as MXML tags. In some cases you will see COMPILE::AS3 code blocks that are just empty or return NULL or use an existing equivalent. Extending the FlexJS CreateJS requires you to think on both sides.
Finally, once components are added, if they can be used from MXML, they must appear in the creates-manifest.xml file. Classes should also appear in the CreateJSClasses.as file if they are not MXML components and can be used from ActionScript and need to be in the SWF.