需要幫助使用Flex/ActionScript 3創建平滑翻轉或FishEye效果

Question

我是Flex/ActionScript的新手，我試圖爲我的導航圖標創建平滑和乾淨的魚眼效果，但是我的翻轉效果看起來很漂亮斷斷續續。我已經看到了一些更好的效果，它們似乎開始對前面的圖標產生影響，並以下一個圖標結束，所以我猜它同時影響所有3個，所以它看起來更平滑，但我不知道該怎麼做，或者如果我甚至應該這樣做？任何人都可以爲我提供一個更好的方式來做到這一點？

下面是我用我的當前翻滾效果代碼：

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

} 

我很抱歉，我不能表現出實際的頁面，因爲它是一個本地開發機器上。我感謝任何幫助。謝謝！

Answer 1

所以我發現了一個補間功能，大大改善了我的東西。猜猜我會用它，除非有更好的東西出現。

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