...
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="100"50"> <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="100"50"> <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[ // the import is required by the Ease functions in the data binding import org.apache.flex.createjs.tween.Ease; ]]> </fx:Script> <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> |
...