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!

How are "Images" different than "icons"? What have you tried and why didn't it work? — JeffryHouser, Jul 29 '13 at 20:58
The images in the example were static, just an array pulled from a directory. Mine need to be generated based on the user's permissions so it's a container as opposed to an array. I tried pointing the function to the container but got an error "Cannot add a child that is already parented." I should prob also add that I'm pretty new to this, so if it turns out to be something obvious or simple, please feel free to let me know. — Vegeta, Jul 29 '13 at 21:14
I haven't reviewed the component in question; but why can't you generate the 'array' based on the user's permissions? This is a very common thing in application development; to generate a dataProvider based on user permissions. I don't understand how a "Container" relates to user permissions. Can you share some more code, perhaps a simple sample that is enough to demonstrate your issue? — JeffryHouser, Jul 29 '13 at 21:22
I just updated the question and code to better explain what I'm looking for. I hope that clears it up a bit. — Vegeta, Aug 06 '13 at 15:32

score 0 · Accepted Answer · answered Aug 07 '13 at 19:45

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"});               
  }

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

1 Answers1