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/

這是我的首選閃光燈補間的方法，但因此，如果我說錯了話原諒我還沒有超過一年補間的:)希望有所幫助！