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 layoutlets CreateJS developers take advantage of coding in ActionScript (a cousin of JavaScript, with true classes and strong data typing). Further, CreateJS applications can use MXML for layout and definition.
Getting Started
...
The examples on this page require the installation of the Apache Flex SDK which can be found on the Getting Started With FlexJS page in order to run.
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 for your FlexJS project and in that directory create a file called, Demo.mxml
. Open the file and add the following Application
tag and content:
Code Block | ||||
---|---|---|---|---|
| ||||
<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 <cjscjs:
View> elementView
element, add the following MXML tags to create a CreateJS circle.
...
Save the file and compile it. Open bin/js-debug/index.html
in a browser. You should see a blue circle.
...
Continue with the previous example where you already have a circle to work with. You will add some MXML declarations for the tweens and a bit of ActionScript code to trigger them. Copy the following MXML declarations and Script block into the Demo.mxml
file, about above the <js js:
initialView> definitioninitialView
definition:
Code Block | ||||
---|---|---|---|---|
| ||||
<js:beads> <js:ApplicationDataBinding /> </js:beads> <fx:Declarations> <cjs:Sequence id="seq" target="circle" loop="true"> <cjs:Tween id="tween1" target="circle" xTo="400" duration="1000" easing="{Ease.getPowInOut(4)}" /> <cjs:Tween id="tween2" target="circle" alphaTo="0" yTo="175" duration="500" easing="{Ease.getPowInOut(2)}" /> <cjs:Tween id="tween3" target="circle" alphaTo="0" yTo="225" duration="100" /> <cjs:Tween id="tween4" target="circle" alphaTo="1" yTo="200" duration="500" easing="{Ease.getPowInOut(2)}" /> <cjs:Tween id="tween5" target="circle" xTo="100" duration="800" easing="{Ease.getPowInOut(2)}" /> </cjs:Sequence> </fx:Declarations> <fx:Script> <![CDATA[ // the import is required by the Ease functions in the data binding import org.apache.flex.createjs.tween.Ease; ]]> </fx:Script> |
The fx:Declarations
tag in MXML is where you put non-visual items that are referenced in the app. Here, a set of Tweens Tween
s is declared for the circle and surrounded by the Sequence
Tween tween which forces the individual Tweens to play in the order specified. Note that the easing function on some of the Tweens Tween
s is specified using binding to an expression.
In order for that the Sequence
to happen however, the function, runEffectSequence's play()
function, needs to be triggered by an event. Modify the <cjscjs:
Application> Application
tag with an "applicationComplete
" event handler to call the runEffect play
() function:
Code Block | ||||
---|---|---|---|---|
| ||||
applicationComplete="seq.play()"> |
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
option on the Sequence
will make it run continuously.
...