Zoom 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="[#952020, #944D4D]" paddingTop="0" viewSourceURL="srcview/index.html" backgroundGradientAlphas="[1.0, 1.0]">

   

    <mx:Script>

        <![CDATA[       

            import flash.events.MouseEvent;

       

            public function doZoom(event:MouseEvent):void {

                if (zoomAll.isPlaying) {

                    zoomAll.reverse();

                }

                else {

                    // If this is a ROLL_OUT event, play the effect backwards.

                    // If this is a ROLL_OVER event, play the effect forwards.

                    zoomAll.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false);

                }

            }

            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:Zoom id="zoomAll" zoomWidthTo="1" zoomHeightTo="1" zoomWidthFrom=".5" zoomHeightFrom=".5"  />

      

    <mx:Panel title="Zoom Effect" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500" height="230"

         paddingTop="5" paddingRight="10" paddingBottom="5" paddingLeft="10" horizontalAlign="center" x="10" y="10">

        

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

            text="Move the mouse over the image to enlarge it. Move the mouse off of the image to shrink it."/>

        <mx:Image id="flex" source="@Embed('images/goggles.jpg')" scaleX=".5" scaleY=".5" rollOver="doZoom(event)" rollOut="doZoom(event)" creationComplete="smoothImage(event);" />

    </mx:Panel>

   

</mx:Application>