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!