<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    width="550" height="555"
    creationComplete="init();" viewSourceURL="srcview/index.html">
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:Animate id="keyframeAnimation" duration="2500" target="{ btn }">
            <s:MotionPath id="xKeys" property="x" />
            <s:MotionPath id="yKeys" property="y" />

        import mx.collections.ArrayList;
        import spark.effects.animation.Keyframe;
        [ Bindable ] private var _xKeyframeList:ArrayList = new ArrayList();
        [ Bindable ] private var _ykeyframeList:ArrayList = new ArrayList();
        private function init():void {
            // The xKeys and yKeys MotionPaths are empty so they need to be instantiated. 
            xKeys.keyframes = new Vector.<Keyframe>();
            yKeys.keyframes = new Vector.<Keyframe>();
            // create a few default keyframes to get things started
            addNewKeyframe( 0, 0, 0 );
            addNewKeyframe( 250, 25, 100 );
            addNewKeyframe( 50, 125, 200 );
        private function addNewKeyframe( xValue:int, yValue:int, time:int ):void {
            var xKeyframe:Keyframe = new Keyframe( time, xValue );
            xKeys.keyframes.push( xKeyframe );
            _xKeyframeList.addItem( xKeyframe );
            var yKeyframe:Keyframe = new Keyframe( time, yValue );
            yKeys.keyframes.push( yKeyframe );
            _ykeyframeList.addItem( yKeyframe );            
        label="start keyframe animation"
        horizontalCenter="0" top="5"
        width="330" height="75" click="{ keyframeAnimation.play(); }" />
    <s:Group top="5" left="5" right="5" bottom="5">
        <mx:DataGrid dataProvider="{ _xKeyframeList }" width="100" height="100%">
                <mx:DataGridColumn headerText="time" dataField="time" />            
                <mx:DataGridColumn headerText="x" dataField="value" />
        <mx:DataGrid right="2" dataProvider="{ _xKeyframeList }" width="100" height="100%">
                <mx:DataGridColumn headerText="time" dataField="time" />            
                <mx:DataGridColumn headerText="y" dataField="value" />
    <s:VGroup left="110" right="110" top="85">
        <s:Group height="400" width="100%" >
            <s:Rect width="330" height="400">
                    <s:SolidColor color="#CCCCCC" />
            <s:Button id="btn" 
                label="drag me" buttonMode="true"
                width="70" height="50"
                mouseDown="{ btn.startDrag(); }"
                mouseUp="{ btn.stopDrag(); }"
                mouseOut="{ btn.stopDrag(); }"/>
            text="Reposition the 'drag me' button and select a new 'time' then hit the insert button. Rinse/repeat."
        <s:HGroup verticalAlign="middle">
            <s:Label text="time:" />
                minimum="0" maximum="20000" stepSize="25" />
            <s:Button label="insert new keyframe"
                click="addNewKeyframe( btn.x, btn.y, timeStepper.value );"/>