AS3:为什么这个flash导航会有奇怪的行为？

Question

我是AS3的新手，我正在尝试为我的网站建立一个图像导航。

基本上，这4个类别由图像(或暂时的彩色矩形)表示。每个区域有4个不可见的mcs。rec开始模糊且较小，当鼠标悬停在invis mc上时，相应的rec将放大，然后在鼠标移出时，rec将缩小到起始位置。

当鼠标缓慢移动时，一切似乎都很正常，但当你快速移动鼠标时，图像会随机放大和冻结-基本上表现得出乎意料。

Here is the fla和here is the swf。

我知道我可能写的代码太长了，但这是我知道如何自动取款机的唯一方法。所以请不要缩短太多，因为我不知道如何在未来更新它，或者如果你知道，如果你能给我一个清楚的解释，那就太好了。

代码：

import flash.net.navigateToURL;    
import flash.net.URLRequest;
import flash.filters.*;
import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();  // Initialize shortcuts for tween


/**** the 4 boxes' starting position ****/

var box1X:int = 135;    
var box1Y:int = 205;
var box1W:int = 96;     
var box1H:int = 85;
Tweener.addTween (box1_mc,  {_Blur_blurX:10, _Blur_blurY:10, _Blur_quality:2, width:box1W, height:box1H, x:box1X, y:box1Y});
var box1LabelX:int = 137;   
var box1LabelY:int = 123;
var box1LabelW:int = 124.5;     
var box1LabelH:int = 21;
Tweener.addTween (box1_label, {_Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box1LabelW, height:box1LabelH, x:box1LabelX, y:box1LabelY});

var box2X:int = 384;    
var box2Y:int = 196;
var box2W:int = 158;    
var box2H:int = 152;
Tweener.addTween (box2_mc,  {_Blur_blurX:10, _Blur_blurY:10, _Blur_quality:2, width:box2W, height:box2H, x:box2X, y:box2Y});
var box2LabelX:int = 382;   
var box2LabelY:int = 88;
var box2LabelW:int = 124.5;     
var box2LabelH:int = 21;
Tweener.addTween (box2_label, {_Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box2LabelW, height:box2LabelH, x:box2LabelX, y:box2LabelY});

var box3X:int = 640;    
var box3Y:int = 206;
var box3W:int = 90;     
var box3H:int = 89;
Tweener.addTween (box3_mc,  {_Blur_blurX:10, _Blur_blurY:10, _Blur_quality:2, width:box3W, height:box3H, x:box3X, y:box3Y});
var box3LabelX:int = 639;   
var box3LabelY:int = 136;
var box3LabelW:int = 124.5;     
var box3LabelH:int = 21;
Tweener.addTween (box3_label, {_Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box3LabelW, height:box3LabelH, x:box3LabelX, y:box3LabelY});


var box4X:int = 851;    
var box4Y:int = 203;
var box4W:int = 42;     
var box4H:int = 105;
Tweener.addTween (box4_mc,  {_Blur_blurX:10, _Blur_blurY:10, _Blur_quality:2, width:box4W, height:box4H, x:box4X, y:box4Y});
var box4LabelX:int = 854;   
var box4LabelY:int = 123;
var box4LabelW:int = 124.5;     
var box4LabelH:int = 21;
Tweener.addTween (box4_label, {_Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box4LabelW, height:box4LabelH, x:box4LabelX, y:box4LabelY});




/**** Starting to tween ****/

invis1_btn.addEventListener(MouseEvent.MOUSE_OVER, box1Handler);
invis1_btn.addEventListener(MouseEvent.MOUSE_OUT, box1Handler);
invis1_btn.addEventListener(MouseEvent.CLICK, box1Handler);
function box1Handler(e=null){
    if(e.type == "mouseOver"){
        Tweener.addTween (box1_mc,  {time:0.5, _Blur_blurX:0, _Blur_blurY:0, scaleX:0.95, scaleY:0.95, x:box1X+10, y:box1Y+30, transition:"linear"});
        Tweener.addTween (box1_label, {time:0.2, alpha:0, transition:"linear"});
        Tweener.addTween (box1_label, {time:0.2, delay:0.2, alpha:0, scaleX:1, scaleY:1,   x:box1LabelX+10, y:box1LabelY-40, transition:"linear"});
        Tweener.addTween (box1_label, {time:0.5, delay:0.6, alpha:1, scaleX:1.5, scaleY:1.5, x:box1LabelX+10, y:box1LabelY-40, _Blur_blurX:0, _Blur_blurY:0, transition:"easeOutElastic"});
        trace(0.5);
    } else if(e.type == "mouseOut"){
        Tweener.addTween (box1_mc,  {time:0.4, _Blur_blurX:10, _Blur_blurY:10, _Blur_quality:2, width:box1W, height:box1H, x:box1X, y:box1Y, transition:"linear"});
        Tweener.addTween (box1_label, {time:0.2, alpha:0, transition:"linear"});
        Tweener.addTween (box1_label, {time:0.2, delay:0.2, _Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box1LabelW, height:box1LabelH, x:box1LabelX, y:box1LabelY, alpha:0});
        Tweener.addTween (box1_label, {time:0.2, delay:0.4, _Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box1LabelW, height:box1LabelH, x:box1LabelX, y:box1LabelY, alpha:1,transition:"linear"});
        trace("box1 shrink");
    } else if(e.type == "click"){
        navigateToURL(new URLRequest("index.html"), '_self');
    } else if(mouseX<0 || mouseX>960) {
        trace("gone");
    }
}


invis2_btn.addEventListener(MouseEvent.MOUSE_OVER, box2Handler);
invis2_btn.addEventListener(MouseEvent.MOUSE_OUT, box2Handler);
invis2_btn.addEventListener(MouseEvent.CLICK, box2Handler);
function box2Handler(e=null){
    if(e.type == "mouseOver"){
        Tweener.addTween (box2_mc,  {time:0.5, _Blur_blurX:0, _Blur_blurY:0, scaleX:0.95, scaleY:0.95, x:box2X+0, y:box2Y+30, transition:"linear"});
        Tweener.addTween (box2_label, {time:0.2, alpha:0, transition:"linear"});
        Tweener.addTween (box2_label, {time:0.2, delay:0.2, alpha:0, scaleX:1, scaleY:1,   x:box2LabelX, y:box2LabelY-10, transition:"linear"});
        Tweener.addTween (box2_label, {time:0.5, delay:0.6, alpha:1, scaleX:1.5, scaleY:1.5, x:box2LabelX, y:box2LabelY-10, _Blur_blurX:0, _Blur_blurY:0, transition:"easeOutElastic"});
        trace("box2 enlarge");
    } else if(e.type == "mouseOut"){
        Tweener.addTween (box2_mc,  {time:0.4, _Blur_blurX:10, _Blur_blurY:10, _Blur_quality:2, width:box2W, height:box2H, x:box2X, y:box2Y, transition:"linear"});
        Tweener.addTween (box2_label, {time:0.2, alpha:0, transition:"linear"});
        Tweener.addTween (box2_label, {time:0.2, delay:0.2, _Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box2LabelW, height:box2LabelH, x:box2LabelX, y:box2LabelY, alpha:0});
        Tweener.addTween (box2_label, {time:0.2, delay:0.4, _Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box2LabelW, height:box2LabelH, x:box2LabelX, y:box2LabelY, alpha:1,transition:"linear"});
        trace("box2 shrink");
    } else if(e.type == "click"){
        navigateToURL(new URLRequest("box2.html"), '_self');
    }
}


invis3_btn.addEventListener(MouseEvent.MOUSE_OVER, box3Handler);
invis3_btn.addEventListener(MouseEvent.MOUSE_OUT, box3Handler);
invis3_btn.addEventListener(MouseEvent.CLICK, box3Handler);
function box3Handler(e=null){
    if(e.type == "mouseOver"){
        Tweener.addTween (box3_mc,  {time:0.5, _Blur_blurX:0, _Blur_blurY:0, scaleX:0.95, scaleY:0.95, x:box3X, y:box3Y+30, transition:"linear"});
        Tweener.addTween (box3_label, {time:0.2, alpha:0, transition:"linear"});
        Tweener.addTween (box3_label, {time:0.2, delay:0.2, alpha:0, scaleX:1, scaleY:1,   x:box3LabelX, y:box3LabelY-50, transition:"linear"});
        Tweener.addTween (box3_label, {time:0.5, delay:0.6, alpha:1, scaleX:1.5, scaleY:1.5, x:box3LabelX, y:box3LabelY-50, _Blur_blurX:0, _Blur_blurY:0, transition:"easeOutElastic"});
        trace("box3 enlarge");
    } else if(e.type == "mouseOut"){
        Tweener.addTween (box3_mc,  {time:0.4, _Blur_blurX:10, _Blur_blurY:10, _Blur_quality:2, width:box3W, height:box3H, x:box3X, y:box3Y, transition:"linear"});
        Tweener.addTween (box3_label, {time:0.2, alpha:0, transition:"linear"});
        Tweener.addTween (box3_label, {time:0.2, delay:0.2, _Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box3LabelW, height:box3LabelH, x:box3LabelX, y:box3LabelY, alpha:0});
        Tweener.addTween (box3_label, {time:0.2, delay:0.4, _Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box3LabelW, height:box3LabelH, x:box3LabelX, y:box3LabelY, alpha:1,transition:"linear"});
        trace("box3 shrink");
    } else if(e.type == "click"){
        navigateToURL(new URLRequest("box3s.html"), '_self');
    }
}

invis4_btn.addEventListener(MouseEvent.MOUSE_OVER, box4Handler);
invis4_btn.addEventListener(MouseEvent.MOUSE_OUT, box4Handler);
invis4_btn.addEventListener(MouseEvent.CLICK, box4Handler);
function box4Handler(e=null){
    if(e.type == "mouseOver"){
        Tweener.addTween (box4_mc,  {time:0.5, _Blur_blurX:0, _Blur_blurY:0, scaleX:1, scaleY:1, y:box4Y+30, transition:"linear"});
        Tweener.addTween (box4_label, {time:0.2, alpha:0, transition:"linear"});
        Tweener.addTween (box4_label, {time:0.2, delay:0.2, alpha:0, scaleX:1, scaleY:1,   y:box4LabelY-50, transition:"linear"});
        Tweener.addTween (box4_label, {time:0.5, delay:0.6, alpha:1, scaleX:1.5, scaleY:1.5, y:box4LabelY-50, _Blur_blurX:0, _Blur_blurY:0, transition:"easeOutElastic"});
        trace("box4 enlarge");
    } else if(e.type == "mouseOut"){
        Tweener.addTween (box4_mc,  {time:0.4, _Blur_blurX:10, _Blur_blurY:10, _Blur_quality:2, width:box4W, height:box4H, x:box4X, y:box4Y, transition:"linear"});
        Tweener.addTween (box4_label, {time:0.2, alpha:0, transition:"linear"});
        Tweener.addTween (box4_label, {time:0.2, delay:0.2, _Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box4LabelW, height:box4LabelH, x:box4LabelX, y:box4LabelY, alpha:0});
        Tweener.addTween (box4_label, {time:0.2, delay:0.4, _Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box4LabelW, height:box4LabelH, x:box4LabelX, y:box4LabelY, alpha:1,transition:"linear"});
        trace("box4 shrink");
    } else if(e.type == "click"){
        navigateToURL(new URLRequest("box4.html"), '_self');
    }
}

更新:添加了box1的removeTween，但仍无法正常运行：

invis1_btn.addEventListener(MouseEvent.MOUSE_OVER, box1Handler);
invis1_btn.addEventListener(MouseEvent.MOUSE_OUT, box1Handler);
invis1_btn.addEventListener(MouseEvent.CLICK, box1Handler);
function box1Handler(e=null){
    if(e.type == "mouseOver"){
        Tweener.addTween (box1_mc,  {time:0.5, _Blur_blurX:0, _Blur_blurY:0, scaleX:0.95, scaleY:0.95, x:box1X+10, y:box1Y+30, transition:"linear"});
        Tweener.addTween (box1_label, {time:0.2, alpha:0, transition:"linear"});
        Tweener.addTween (box1_label, {time:0.2, delay:0.2, alpha:0, scaleX:1, scaleY:1,   x:box1LabelX+10, y:box1LabelY-40, transition:"linear"});
        Tweener.addTween (box1_label, {time:0.5, delay:0.6, alpha:1, scaleX:1.5, scaleY:1.5, x:box1LabelX+10, y:box1LabelY-40, _Blur_blurX:0, _Blur_blurY:0, transition:"easeOutElastic"});
        trace(0.5);
    } else if(e.type == "mouseOut"){
        //** Added here:
        Tweener.addTween (box1_mc,  {time:0.4, _Blur_blurX:10, _Blur_blurY:10, _Blur_quality:2, width:box1W, height:box1H, x:box1X, y:box1Y, transition:"linear", onComplete:removeTween}); 
        Tweener.addTween (box1_label, {time:0.2, alpha:0, transition:"linear"});
        Tweener.addTween (box1_label, {time:0.2, delay:0.2, _Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box1LabelW, height:box1LabelH, x:box1LabelX, y:box1LabelY, alpha:0});
        //** Added here:
        Tweener.addTween (box1_label, {time:0.2, delay:0.4, _Blur_blurX:1.2, _Blur_blurY:1.2, _Blur_quality:2, width:box1LabelW, height:box1LabelH, x:box1LabelX, y:box1LabelY, alpha:1,transition:"linear", onComplete:removeTween}); 
        trace("box1 shrink");
    } else if(e.type == "click"){
        navigateToURL(new URLRequest("index.html"), '_self');
    } else if(mouseX<0 || mouseX>960) {
        trace("gone");
    }
}

function removeTween():void {
    Tweener.removeTweens(box1_mc, "x", "y", "alpha", "_Blur_blurX", "_Blur_blurY", "width", "height");
    Tweener.removeTweens(box1_label, "x", "y", "alpha", "_Blur_blurX", "_Blur_blurY", "width", "height");
}

Answer 1

看起来你不会取消补间的。项目似乎同时被补齐了更小和更大。

由于看起来您正在使用补间，因此在将新补间应用于资源之前，请尝试使用removeTweens()。

Answer 2

我知道当我在过去使用TweenMax时，我记得解决这类问题的方法是创建一个实际的TweenMax实例，而不是每次静态地调用它。我不熟悉tweener，但如果它像TweenMax，而不是这样做(未经测试的代码，更像是伪代码)：

Tweener.addTween(...);
Tweener.addTween(...);
Tweener.addTween(...);

我建议这样做：

    var myTweener:Tweener = new Tweener(); //Decalare this where it will be accessable to multiple functions.
    myTweener.addTween(...);
...

然后，每当您想要中断当前补间时，您只需使用一个新的调用myTweener.addTween(...);的“补间”方法引用相同的对象。使用TweenMax，新的补间将从已经在进行的补间停止的地方拾取，假设它来自相同的补间对象实例，而不是来自静态调用。

如果你想了解更多关于TweenMax的信息，请访问这里：http://www.greensock.com/tweenmax/

这是我在Flash中首选的补间方法，但我已经一年多没有补间了，所以如果我说错了什么，请原谅我：)希望这会有帮助！