<?xml version="1.0" encoding="utf-8"?>
<!---
Effect Sample (Animate)
-->
<s:Application
    xmlns:fx      = "http://ns.adobe.com/mxml/2009"
    xmlns:s       = "library://ns.adobe.com/flex/spark"
    xmlns:mx      = "library://ns.adobe.com/flex/halo"
    minWidth      = "1024"
    minHeight     = "768"
    viewSourceURL = "srcview/index.html"
>

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s  "library://ns.adobe.com/flex/spark";
        s|Button {
            font-size : 40;
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import spark.effects.WipeDirection;
            protected override function createChildren() : void {
                super.createChildren();
                currentState = "aState";
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <fx:Array id="keyFrameList">
            <s:MotionPath property="alpha">
                <s:KeyFrame time="250"  value="0.5" />
                <s:KeyFrame time="500"  value="1.0" />
                <s:KeyFrame time="750"  value="0.5" />
                <s:KeyFrame time="1000" value="1.0" />
                <s:KeyFrame time="1250" value="0.5" />
                <s:KeyFrame time="1500" value="1.0" />
            </s:MotionPath>
            <s:MotionPath property="scaleY">
                <s:KeyFrame time="250"  value="0.5" />
                <s:KeyFrame time="500"  value="1.0" />
                <s:KeyFrame time="750"  value="0.5" />
                <s:KeyFrame time="1000" value="1.0" />
                <s:KeyFrame time="1250" value="0.5" />
                <s:KeyFrame time="1500" value="1.0" />
            </s:MotionPath>
        </fx:Array>
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" />
    </s:layout>

    <s:states>
        <mx:State name="aState" />
        <mx:State name="bState" />
    </s:states>

    <s:transitions>
        <s:Transition>
            <s:Parallel duration="1000">
                <s:Animate id="shrinkEffect"
                    motionPaths = "{keyFrameList}"
                    target      = "{button}"
                 />
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    <s:Button
        id           = "button"
        width        = "400"
        height       = "100"
        label.aState = "animate"
        label.bState = "ANIMATE"
        click        = "currentState = (currentState=='aState') ? 'bState' : 'aState'"
     />

</s:Application>