THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
| 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="runEffect()"
>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<fx<js:Script>beads>
<![CDATA[
import org.apache.flex.createjs.tween.Tween;
import org.apache.flex.createjs.tween.Sequence;<js:ApplicationDataBinding />
</js:beads>
<fx:Declarations>
private function runEffect():void {
var move1:Tween = new Tween(circle);
move1.xTo = 400;
move1.duration = 1000;
move1.easing = <cjs:Sequence id="seq" target="circle" loop="true">
<cjs:Tween id="tween1" target="circle" xTo="400" duration="1000" easing="{Ease.getPowInOut(4);
}" />
var move2<cjs:Tween id= new Tween(circle);
move2.alphaTo = 0;
move2.yTo = 175;
move2.duration = 500;
move2.easing = "tween2" target="circle" alphaTo="0" yTo="175" duration="500" easing="{Ease.getPowInOut(2);
}" />
var move3<cjs:Tween id= 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);
"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[
var move5:Tween = new Tween(circle)import org.apache.flex.createjs.tween.Ease;
move5.xTo = 100;
private function runEffect():void { move5.duration = 800;
move5.easing = Ease.getPowInOut(2);
// run the sequence of tweens
var seq:Sequence = new Sequence(circleseq.play();
seq.loop = true;}
seq.addEffect(move1);]]>
seq.addEffect(move2);</fx:Script>
seq.addEffect(move3);
seq.addEffect(move4);
<js:initialView>
seq.addEffect(move5);
<cjs:View>
seq.play();
}
]]>
</fx:Script>
<js:initialView><cjs:Circle id="circle" x="100" y="100" width="100" height="100">
<js:fill>
<js:SolidColor color="#26C9FF" />
</js:fill>
</cjs:Circle>
<cjs</cjs:View>
<cjs:Circle id="circle" x="100" y="100" width="100" height="100">
<js:fill>
<js:SolidColor color="#26C9FF" />
</js:fill>initialView>
</cjs:Circle>
</cjs:View>
</js:initialView>
</cjs:Application>Application> |
The Tweens are declared in an fx:Declarations block and correspond to the CreateJS "tween.to()" functions. 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.
FlexJS is a "pay as you go" system. The use of binding for the easing functions on the Tweens, necessitates the including of the ApplicationDataBinding bead. With 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.
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 itOnce 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
...
.
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.
...