AS3: Почему эта флэш-навигация ведет себя странно? - PullRequest
Новая
       1

AS3: Почему эта флэш-навигация ведет себя странно?

0 голосов
/ 28 ноября 2011

Я новичок в AS3 и пытаюсь создать навигацию по изображениям для своего сайта.

В основном 4 категории представлены изображениями (или цветными прямоугольниками на данный момент). В каждой области есть 4 невидимых МС. Рек начинаются размытыми и маленькими, и при наведении курсора мыши на invis mc соответствующая запись увеличивается, затем, когда мышь выходит, запись сжимается обратно в исходное положение.

Кажется, что все работает нормально, когда мышь медленно перемещается по всему, но когда вы быстро перемещаете мышь, изображения увеличиваются и случайным образом зависают - в основном, они ведут себя неожиданно.

Вот фла , а вот 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');
    }
}

Обновление: добавлен 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");
}

Ответы [ 2 ]

0 голосов
/ 28 ноября 2011

Я знаю, что когда я использовал TweenMax в прошлом, что, по-видимому, очень похоже на Tweener, я вспомнил, что, решая этот тип проблемы, я создавал реальный экземпляр 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, но я не занимался анимацией более года, поэтому, если я сказал что-то не так, прости меня :) Надеюсь, это поможет!

0 голосов
/ 28 ноября 2011

похоже, вы не отменяете подростков. предметы кажутся одновременно и меньшими, и большими.

, поскольку похоже, что вы используете Tweener, попробуйте использовать removeTweens(), прежде чем применять новые анимации к своим активам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...