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

需要帮助使用Flex / ActionScript 3创建平滑翻转或FishEye效果

1 个答案: