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

Posted 2023-02-25

【中文标题】需要帮助使用 Flex/ActionScript 3 创建平滑的翻转或 FishEye 效果

【英文标题】：Need help creating a smooth rollover or FishEye effect using Flex/ActionScript 3

【发布时间】：2013-07-29 20:55:23

【问题描述】：

我是 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);
        
    

很抱歉，我无法显示实际页面，因为它位于本地开发机器上。我很感激任何帮助。谢谢！

【问题讨论】：

“图像”与“图标”有何不同？您尝试了哪些方法，为什么没有成功？

示例中的图像是静态的，只是从目录中提取的数组。我的需要根据用户的权限生成，所以它是一个容器而不是数组。我尝试将函数指向容器，但出现错误“无法添加已成为父项的子项”。我还应该补充一点，我对此很陌生，所以如果结果很明显或简单，请随时告诉我。

我没有审查过有问题的组件；但是为什么不能根据用户的权限生成“数组”呢？这在应用程序开发中是很常见的事情；根据用户权限生成 dataProvider。我不明白“容器”与用户权限的关系。您能否再分享一些代码，也许是一个足以证明您的问题的简单示例？

我刚刚更新了问题和代码，以更好地解释我在寻找什么。我希望这能澄清一点。

【参考方案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");