Flex easingFunction

<?xml version="1.0" encoding="utf-8"?> <Application xmlns="http://www.adobe.com/2006/mxml" backgroundGradientColors="[0x000000,0x000000]" themeColor="#222222" horizontalAlign="left" paddingLeft="10" paddingRight="10" creationComplete="genData();" viewSourceURL="srcview/index.html"> <Metadata> [SWF(backgroundColor="0x000000")] </Metadata> <Style> .panelStyle { color: #cccccc; } </Style> <Script> <!--[CDATA[ import mx.effects.easing.*; [Bindable] public var easingFunctions:Array = [ {label: "Bounce", easingClass: Bounce}, {label: "Back", easingClass: Back}, {label: "Circular", easingClass: Circular}, {label: "Cubic", easingClass: Cubic}, {label: "Elastic", easingClass: Elastic}, {label: "Exponential", easingClass: Exponential}, {label: "Linear", easingClass: Linear}, {label: "Quadratic", easingClass: Quadratic}, {label: "Quartic", easingClass: Quartic}, {label: "Quintic", easingClass: Quintic}, {label: "Sine", easingClass: Sine} ]; [Bindable] public var dataSet:Array; private function genData():void { var newData:Array = []; var A:Number = Math.random()*100 - 50; var B:Number = A - Math.random() * 10; var P:Number = Math.random()*100; for(var i:int = 0; i < 20; i++) { A = A + Math.random() * 10 - 5; B = A - Math.random() * 10; P = Math.random() * 100; newData.push( { A: A, B: B, P: P } ); } dataSet = newData; } ]]--> </Script> <ApplicationControlBar width="100%" dock="true" fillAlphas="[1,1]" fillColors="[0x000000,0x222222]"> <ToggleButtonBar id="easingFunction" dataProvider="{easingFunctions}" width="100%"/> <RadioButtonGroup id="easeType"/> <RadioButton groupName="easeType" label="Ease Out" value="easeOut" color="#bbbbbb" textRollOverColor="#eeeeee" textSelectedColor="#bbbbbb" selected="true"/> <RadioButton groupName="easeType" label="Ease In" value="easeIn" color="#bbbbbb" textRollOverColor="#eeeeee" textSelectedColor="#bbbbbb"/> </ApplicationControlBar> <Sequence id="moveEffect"> <Move duration="2000" xTo="{this.width - p.width - 10}" easingFunction="{easingFunctions[easingFunction.selectedIndex].easingClass[easeType.selectedValue]}"/> <Pause duration="750"/> <Move duration="2000" xTo="10" easingFunction="{easingFunctions[easingFunction.selectedIndex].easingClass[easeType.selectedValue]}"/> </Sequence> <Panel id="p" title="Easing Functions on a Move Effect" borderAlpha="0.2" backgroundAlpha="0.2" titleStyleName="panelStyle"> <ControlBar horizontalAlign="center"> <Button label="Move" click="moveEffect.play([p])"/> </ControlBar> </Panel> <Spacer height="10"/> <SeriesInterpolate id="seriesEffect" duration="2000" easingFunction="{easingFunctions[easingFunction.selectedIndex].easingClass[easeType.selectedValue]}"/> <Panel title="Easing Functions on Series Interpolation in a chart" width="100%" height="100%" borderAlpha="0.2" backgroundAlpha="0.2" titleStyleName="panelStyle"> <Accordion width="100%" height="100%" backgroundAlpha="0" openEasingFunction="{easingFunctions[easingFunction.selectedIndex].easingClass[easeType.selectedValue]}" openDuration="1500" creationPolicy="all"> <VBox width="100%" height="100%" label="Column"> <ColumnChart width="100%" height="100%" dataProvider="{dataSet}"> <series> <ColumnSeries showDataEffect="{seriesEffect}" yField="A"/> </series> </ColumnChart> </VBox> <VBox width="100%" height="100%" label="Pie"> <PieChart width="100%" height="100%" dataProvider="{dataSet}"> <series> <PieSeries showDataEffect="{seriesEffect}" field="P"/> </series> </PieChart> </VBox> <VBox width="100%" height="100%" label="Line"> <LineChart width="100%" height="100%" dataProvider="{dataSet}"> <series> <LineSeries showDataEffect="{seriesEffect}" yField="A"/> </series> </LineChart> </VBox> <VBox width="100%" height="100%" label="Bubble"> <BubbleChart width="100%" height="100%" dataProvider="{dataSet}"> <series> <BubbleSeries showDataEffect="{seriesEffect}" xField="A" yField="B" radiusField="P"/> </series> </BubbleChart> </VBox> </Accordion> <ControlBar horizontalAlign="center"> <Button label="Change Data Set" click="genData()"/> </ControlBar> </Panel> </Application>