THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
| 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[
import org.apache.flex.createjs.tween.Ease;
private function runEffect():void {
// run the sequence of tweens
seq.play();
}
]]>
</fx:Script> |
The Declarations tag in MXML is where you put non-visual items that are referenced in the app. Here, a set of Tweens is declared for the circle and surrounded by the Sequence Tween which forces the individual Tweens to play in the order specified. Note that the easing function on some of the Tweens is specified using binding to an expression.
The Script block contains the function that gets the Sequence to play. In order for that to happen however, the function, runEffect(), needs to be triggered by an event. Modify the <cjs:Application> tag with an "applicationComplete" event handler to call the runEffect() function:
| Code Block | ||||
|---|---|---|---|---|
| ||||
applicationComplete="runEffectseq.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 on the Sequence will make it run continuously.
...