THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
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 ../ (follow the instructions for "Creating js-debug Output Only"). 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 (follow the instructions for "Creating js-debug Output Only"). 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.
...
| 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[
// 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> |
...