Need help creating a smooth rollover or FishEye effect using Flex/ActionScript 3

Question

I'm pretty new to Flex/ActionScript and I'm trying to create a smooth and clean fisheye effect for my navigation icons, but my rollover effect looks pretty choppy. I've seen some better ones that seem to start the effect on the preceding icon and end with the next icon, so I guess it's affecting all 3 at the same time so it looks smoother but I have no idea how to do that or if that's what I should even do? Can anyone suggest a better way for me to do this?

Here's the code I'm using for my current rollover effect:

public class CanvasDesktopModuleIcon extends Canvas
{

    [Bindable] private var _desktopModuleObj:DesktopModuleBean;
    private var zoomEffectObj:Zoom = new Zoom();
    public var moduleImage:Image = new Image();
    private var _textColor:uint = 0x000000;
    private var myLabel:Text = new Text();


    /**
     * Constructor 
     */
    public function CanvasDesktopModuleIcon( doRollover:Boolean=true):void
    {
        try
        {

            _desktopModuleObj = new DesktopModuleBean();

            this.percentHeight=100;
            this.verticalScrollPolicy = "off";
            this.horizontalScrollPolicy = "off";
            this.setStyle("verticalScrollPolicy","off");
            this.setStyle("horizontalScrollPolicy","off");
            this.setStyle("borderStyle","none");
            this.setStyle("backgroundAlpha",0.0);

            myLabel.percentWidth=100;
            myLabel.maxHeight=15;
            myLabel.truncateToFit = true;

            if(doRollover)
            {
                this.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
                this.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
            }

        }
        catch (error:Error)
        {
            FlexException.errorHandler(error,"CanvasDesktopModuleIcon:CanvasDesktopModuleIcon");
        }           
    }

    /**
     * rollOutHandler
     * function that handles the roll out event
     * 
     * @param   Event   event   the contents of the event
     * @return void
     */
    private function rollOutHandler(event:Event):void
    {
        try
        {

            playZoomEffect(moduleImage,1.0,1.0,moduleImage.scaleY, moduleImage.scaleX);
        }
        catch (error:Error)
        {
            FlexException.errorHandler(error,"CanvasDesktopModuleIcon:rollOutHandler");
        }
    }

    /**
     * playZoom
     * Getter function for the desktopModuleBean value
     * 
     * @param   void    
     * @return  DesktopModuleBean   The desktopModuleBean value.
     */
    private function playZoomEffect(    
        myTarget:Object, 
        myHeight:Number, 
        myWidth:Number, 
        myFromHeight:Number,
        myFromWidth:Number,
        myDuration:Number = 200):void {
        zoomEffectObj.end();
        zoomEffectObj.target = myTarget;
        zoomEffectObj.duration = myDuration;
        zoomEffectObj.zoomHeightTo = myHeight;
        zoomEffectObj.zoomHeightFrom = myFromHeight;
        zoomEffectObj.zoomWidthTo = myWidth;
        zoomEffectObj.zoomWidthFrom = myFromWidth;
        zoomEffectObj.play();
    }



    /**
     * rollOverHandler
     * function that handles the roll over event
     * 
     * @param   Event   event   the contents of the event
     * @return void
     */
    private function rollOverHandler(event:Event):void
    {
        try
        {
            playZoomEffect(moduleImage,1.8,1.8,moduleImage.scaleY, moduleImage.scaleX);

        }
        catch (error:Error)
        {
            FlexException.errorHandler(error,"CanvasDesktopModuleIcon:rollOverHandler");
        }
    }

private function setupCanvas( ):void
    {
        try
        {
            // Setup Image
            if(_desktopModuleObj.Module_Icon == "")
            {
                moduleImage.source = NavigationManager.defaultDashIcon;
            }
            else
            {
                moduleImage.source = NavigationManager[_desktopModuleObj.Module_Icon];
            }   

            moduleImage.height = 50;
            moduleImage.width = 50;
            moduleImage.setStyle("horizontalCenter","0");
            moduleImage.setStyle("bottom","15");
            this.toolTip = _desktopModuleObj.Module_Window_Title;

            // Setup Label
            if( _desktopModuleObj.Module_Display_Title == 1)
            {

                myLabel.text = _desktopModuleObj.Module_Window_Title;
                myLabel.setStyle("color",_textColor);
                myLabel.setStyle("horizontalCenter","0");
                myLabel.setStyle("bottom","0");
                this.addChild(myLabel);
            }
            /*else
            {
            moduleImage.height = 68;
            moduleImage.width = 68;
            moduleImage.setStyle("horizontalCenter","0");
            moduleImage.setStyle("bottom","0");
            }*/
            this.addChild(moduleImage);

        }
        catch (error:Error)
        {
            FlexException.errorHandler(error,"CanvasDesktopModuleIcon:setupCanvas");
        }
    }

    private var _speed:int=3;
    private var _blurX:int=15;
    private var _blurY:int=15;
    private function pulse(event:Event):void
    {  //no try catch

        _blurX+=_speed;
        _blurY+=_speed;
        if(_blurX>60)
        {
            _speed*=-1;
        }
        if(_blurX<15)
        {
            _speed*=-1;
        }
        event.currentTarget.filters=[new GlowFilter(0xFF0000,.75,_blurX,_blurY,2,1,false,false)];
    }

    public function glow(val:Boolean=true):void
    {  //no try catch
        if(val)
        {
            this.addEventListener(Event.ENTER_FRAME,pulse);
        }
        else
        {
            this.filters=[];
            this.removeEventListener(Event.ENTER_FRAME,pulse);
        }
    }

}

I'm sorry I can't show the actual page since it's on a local dev machine. I appreciate any help. Thanks!

Answer 1

So I found a tween function that vastly improved what I had. Guess I'm gonna use it unless something better turns up.

import caurina.transitions.*;

private function rollOutHandler(event:Event):void
  {
       var s = moduleImage;
       Tweener.addTween(s,{scaleX:1, scaleY:1, time:.9,transition:"easeOutQuad"});  
   }

private function rollOverHandler(event:Event):void
  {             
      var s = moduleImage;
      setChildIndex(s,numChildren-1);
      Tweener.addTween(s,{scaleX:2, scaleY:2, time:.4,transition:"easeOutQuad"});               
  }