Effect

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="top"

    horizontalAlign="center" backgroundGradientColors="[#721C1C, #702424]" paddingTop="0" backgroundGradientAlphas="[1.0, 1.0]">

   

    <mx:Script>

        <![CDATA[

           

            import mx.controls.Alert;

            // Event handler for the effectEnd event.           

            private function endEffectHandler():void {

                Alert.show("Effect Ended!");

                button1.enabled=false;

                button2.enabled=false;

                button3.enabled=false;

                button4.enabled=false;

                button5.enabled=false;

                button6.enabled=true;

            }

           

            // Event handler for the reset button.           

            private function resetHandler():void {

                expand.end();

                img.width=30;

                img.height=60;

                button1.enabled=true;

                button2.enabled=false;

                button3.enabled=false;

                button4.enabled=false;

                button5.enabled=false;

            }

           

            private function startHandler():void {

                expand.play();

                button1.enabled=false;

                button2.enabled=true;

                button3.enabled=false;

                button4.enabled=true;

                button5.enabled=true;

                button6.enabled=true;

            }

           

            // Event handler for the reset button.           

            private function pauseHandler():void {

                expand.pause();

                button2.enabled=false;

                button3.enabled=true;

            }

           

            private function resumeHandler():void {

                expand.resume();

                   button2.enabled=true;

                button3.enabled=false;

            }

           

            private function endHandler():void {

                expand.end();

                button1.enabled=false;

                button2.enabled=false;

                button3.enabled=false;

                button4.enabled=false;

                button5.enabled=false;

            }

           

            private function reverseHandler():void{

                expand.reverse();

            }

           

            private function smoothImage(ev:Event):void{

                //set image smoothing so image looks better when transformed.

                var bmp:Bitmap = ev.target.content as Bitmap;

                bmp.smoothing = true;

            }

        ]]>

    </mx:Script>

   

    <mx:Resize id="expand" target="{img}" widthTo="120" heightTo="120"

        duration="10000" effectEnd="endEffectHandler();"/>

       

    <mx:Panel title="Effect" layout="vertical" color="#FFFBFB" borderAlpha="0.15" width="500" height="240"

         paddingTop="5" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" top="20" left="10">

        

         <mx:Text width="100%" color="0x323232" textAlign="center" paddingBottom="5"

            text="Use the Button controls to control the Resize effect."/>

        <mx:Image id="img" width="23" height="24" source="@Embed('images/helmet.jpg')" creationComplete="smoothImage(event);" />

       

        <mx:ControlBar horizontalAlign="center" color="#191515">

            <mx:Button id="button1" label="Start" click="startHandler();"/>

            <mx:Button id="button2" label="Pause" click="pauseHandler();" enabled="false"/>

            <mx:Button id="button3" label="Resume" click="resumeHandler();" enabled="false"/>

            <mx:Button id="button4" label="Reverse" click="reverseHandler();" enabled="false"/>

            <mx:Button id="button5" label="End" click="endHandler();" enabled="false"/>

            <mx:Button id="button6" label="Reset" click="resetHandler();" enabled="false"/>

        </mx:ControlBar>

       

    </mx:Panel>

   

</mx:Application>