...
Create a new directory for your FlexJS project and in that directory the directory make a sub-directory called src
. Change to the src
directory and create a file called, Demo.mxml
. Open the file and add the following Application
tag and content:
...
Code Block | ||||
---|---|---|---|---|
| ||||
<cjs:Circle id="circle" x="100" y="100" widthradius="100" height="10050"> <js:fill> <js:SolidColor color="#26C9FF" /> </js:fill> </cjs:Circle> |
Save the file and compile it:
${FLEXJS_INSTALLDIR}/js/bin/mxmlc Demo.mxml
Once the compilation is complete, you will find a bin
directory parallel to the src directory. Open ../bin/js-debug/index.html
in a browser. You should see a blue circle.
...
Save the file and compile it:
${FLEXJS_INSTALLDIR}/js/bin/mxmlc Demo.mxml
Open the bin../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.
...
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:Circle id="circle" x="100" y="100" widthradius="100" height="10050"> <js:fill> <js:SolidColor color="#26C9FF" /> </js:fill> </cjs:Circle> </cjs:View> </js:initialView> </cjs:Application> |
...
Code Block | ||||
---|---|---|---|---|
| ||||
<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="runEffectseq.play()" > <js:valuesImpl> <js:SimpleCSSValuesImpl /> </js:valuesImpl> <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[ import org.apache.flex.createjs.tween.Ease; // privatethe function runEffect():void { // run the sequence of tweensimport is required by the Ease functions in the data binding seq.play(); }import org.apache.flex.createjs.tween.Ease; ]]> </fx:Script> <js:initialView> <cjs:View> <cjs:Circle id="circle" x="100" y="100" widthradius="100" height="100">50"> <js:fill> <js:SolidColor color="#26C9FF" /> </js:fill> </cjs:Circle> </cjs:View> </js:initialView> </cjs:Application> |
The Tweens are declared in an fx:Declarations
block and correspond to the CreateJS "tween.to()
" functions functions written in JavaScript. You specify exactly the same things: target, duration, x position, y position, alpha value, and even easing functions. An event handler triggers the sequence of Tweens to run. Once again, you can quickly declare your Tween
s and given them parameters, any of which can be specified using data binding.
FlexJS is a "pay as you go" system. The use of binding for the easing functions on the Tweens, Tween
s necessitates the including of the js:ApplicationDataBinding
bead. With Without the bead the data binding will not happen and should only be included in applications that use data binding to reduce their final footprint and runtime overhead.
...
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 many 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.
Keep in mind however, that when you specify an API (public functions or properties) these items should not be limited to
COMPILE::JS
blocks but be universally visible. This is so the properties and functions are available in MXML tags.
Once Finally, once components are added, if they can be used from MXML, they must appear in the creates createjs-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.