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

} 

나는 그것이 로컬 dev에 컴퓨터에 이후 나는 실제 페이지를 표시 할 수 없습니다 죄송합니다 :

여기에 내 현재 롤오버 효과를 위해 사용하고 코드입니다. 어떤 도움을 주셔서 감사합니다. 감사!

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