<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:utils="utils.*"
viewSourceURL="srcview/index.html"
width="300" height="300">
<fx:Script>
<![CDATA[
import utils.AnimationEvent;
private function updateHandler(event:AnimationEvent):void
{
ball.y = event.animation.currentValue["y"];
}
private function easingChangeHandler():void
{
currentState = easingList.selectedItem;
switch (easingList.selectedItem) {
case "None":
anim.easer = null;
break;
case "Sine":
anim.easer = sine;
break;
case "Power":
anim.easer = power;
break;
case "Linear":
anim.easer = linear;
break;
case "Bounce":
anim.easer = bounce;
break;
case "Elastic":
anim.easer = elastic;
break;
}
}
]]>
</fx:Script>
<s:states>
<s:State name="None"/>
<s:State name="Sine"/>
<s:State name="Power"/>
<s:State name="Linear"/>
<s:State name="Bounce"/>
<s:State name="Elastic"/>
</s:states>
<fx:Declarations>
<s:Sine id="sine" easeInFraction="{Number(easeInInput.text)}"/>
<s:Power id="power" easeInFraction="{Number(easeInInput.text)}"
exponent="{Number(exponentInput.text)}"/>
<s:Linear id="linear" easeInFraction="{Number(easeInInput.text)}"
easeOutFraction="{Number(easeOutInput.text)}"/>
<s:Bounce id="bounce"/>
<s:Elastic id="elastic"/>
<utils:AnimationTargetDispatcher id="animTarget"
update="updateHandler(event)"/>
<s:Animation id="anim" duration="{Number(durationInput.text)}"
animationTarget="{animTarget}">
<s:SimpleMotionPath property="y" valueFrom="0"
valueTo="{height - ball.height}"/>
</s:Animation>
</fx:Declarations>
<s:Group id="ball" click="anim.play()">
<s:Ellipse width="80" height="80">
<s:fill>
<s:RadialGradient rotation="-45" focalPointRatio=".5">
<s:GradientEntry color="0xf0f0f0"/>
<s:GradientEntry color="0x040404"/>
</s:RadialGradient>
</s:fill>
</s:Ellipse>
</s:Group>
<s:Group x="150" y="5">
<s:Label text="Easing" baseline="15"/>
<s:DropDownList id="easingList" baseline="15" x="50" selectedItem="None"
width="90" change="easingChangeHandler()">
<s:ArrayCollection>
<fx:String>None</fx:String>
<fx:String>Sine</fx:String>
<fx:String>Power</fx:String>
<fx:String>Linear</fx:String>
<fx:String>Bounce</fx:String>
<fx:String>Elastic</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<s:Label baseline="40" text="duration"/>
<s:TextInput id="durationInput" baseline="40" x="100" width="40" text="1500"/>
</s:Group>
<s:Group x="150" y="55" includeIn="Sine,Power,Linear">
<s:Label baseline="15" text="easeInFraction"/>
<s:TextInput id="easeInInput" baseline="15" x="100" width="40" text=".5"/>
</s:Group>
<s:Group x="150" y="80" includeIn="Linear">
<s:Label baseline="15" text="easeOutFraction"/>
<s:TextInput id="easeOutInput" baseline="15" x="100" width="40" text=".5"/>
</s:Group>
<s:Group x="150" y="80" includeIn="Power">
<s:Label baseline="15" text="exponent"/>
<s:TextInput id="exponentInput" baseline="15" x="100" width="40" text="3"/>
</s:Group>
</s:Application>