AS3：为什么这个Flash导航行为异常？

Question

我对AS3很陌生，我试图为我的网站构建图像导航。

基本上4个类别是由图像（或当时的彩色矩形）表示。每个区域有4个不可见的mcs。录音开始时模糊和小，并在鼠标上方的相应的REC会放大，然后在鼠标外的REC将收缩回到起始位置。

当鼠标慢慢地完成一切时，一切似乎都正常工作，但当您快速移动鼠标时，图像会随机放大并冻结 - 基本上表现意外。

Here is the fla和here is the swf。

我知道我可能写的代码很可笑，但它是我知道atm的唯一方法。所以请不要将它缩短太多，因为我以后不知道如何更新它，或者如果你这样做，如果你能请给我一个关于发生了什么的清晰解释，那将是非常好的。

代码：

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

更新：新增removeTween的BOX1，仍不能正常运行：

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

它看起来像你不取消补间。项目似乎在同一时间既变小又变大。

由于它看起来像您正在使用Tweener，请在将新补间应用于您的资产之前尝试使用removeTweens()。

Answer 2

我知道当我过去使用TweenMax时，它大概与Tweener非常相似，我记得解决此类问题的方式是创建TweenMax的实际实例，而不是每次都静态调用它。我不熟悉的中间人，但如果是像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/

这是我的首选闪光灯补间的方法，但因此，如果我说错了话原谅我还没有超过一年补间的:)希望有所帮助！