<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html" height="310" width="486">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.Bounce;
            import mx.effects.easing.Back;
        ]]>
    </mx:Script>

    <!--Change the Width -->
    <mx:AnimateProperty id="wider" target="{redSquare}" property="width" fromValue="{redSquare.width}" toValue="{redSquare.width+50}" easingFunction="Bounce.easeOut"/>
    <mx:AnimateProperty id="thinner" target="{redSquare}" property="width" fromValue="{redSquare.width}" toValue="{redSquare.width-50}" easingFunction="Bounce.easeOut"/>
    
    <!--Change Horizontal Position -->
    <mx:AnimateProperty id="left" target="{redSquare}" property="x" fromValue="{redSquare.x}" toValue="{redSquare.x-30}" easingFunction="Back.easeOut"/>
    <mx:AnimateProperty id="right" target="{redSquare}" property="x" fromValue="{redSquare.x}" toValue="{redSquare.x+30}" easingFunction="Back.easeOut"/>
    
    <!--Change Alpha -->
    <mx:AnimateProperty id="alphaUp" target="{redSquare}" property="alpha" fromValue="{redSquare.alpha}" toValue="{redSquare.alpha+.1}" easingFunction="Back.easeOut"/>
    <mx:AnimateProperty id="alphaDown" target="{redSquare}" property="alpha" fromValue="{redSquare.alpha}" toValue="{redSquare.alpha-.1}" easingFunction="Back.easeOut"/>
    
    <mx:VBox id="redSquare" y="10" width="200" height="200" backgroundColor="#FF0000" x="139"/>
    <mx:VBox x="170.5" y="218" horizontalAlign="center">
        <mx:HBox>
            <mx:Button label="Wider" click="wider.play()"/>
            <mx:Button label="Thinner" click="thinner.play()"/>
        </mx:HBox>
        <mx:HBox>
            <mx:Button y="248" label="Left" click="left.play()"/>
            <mx:Button y="248" label="Right" click="right.play()"/>
        </mx:HBox>
        <mx:HBox>
            <mx:Button y="248" label="Alpha +" click="alphaUp.play()"/>
            <mx:Button y="248" label="Alpha -" click="alphaDown.play()"/>
        </mx:HBox>
    </mx:VBox>
    
</mx:Application>