AS3：为什么这个闪存导航表现得很奇怪？

时间：2011-11-28 00:32:41

标签： flash actionscript-3

我对AS3很新，我正在尝试为我的网站构建图像导航。

基本上，4个类别由图像（或暂时的彩色矩形）表示。每个区域有4个看不见的mcs。 recs开始模糊和小，并且鼠标悬停在invis mc上，相应的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');
    }
}

更新：为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");
}

2 个答案:

答案 0 :(得分：0)

看起来你没有取消补间。这些项目似乎在同一时间内变得越来越小。

因为看起来您使用的是Tweener，所以在将新的补间应用到资源之前，请尝试使用removeTweens()。

答案 1 :(得分：0)

我知道当我过去使用TweenMax时，可能与Tweener非常相似，我记得解决这类问题的方法是创建一个TweenMax的实际实例，而不是每次都静态调用它。我不熟悉tweener，但如果它像TweenMax，而不是做这样的事情（ UNTESTED CODE，更像伪代码）：

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中补间的首选方法，但是我在一年多的时间内没有补课，所以如果我说错了请原谅我:)希望有所帮助！

相关问题
最新问题