AS3 Greensock tweening advice

programming flash
1

Hi Guys,

I’ve created a funky little menu system… but! testing it in fullscreen mode & on certain slower machines the whole thing slows down & becomes very jerky.

If your mouse goes near the top of the screen the menu nudges down using an ENTER_FRAME with a hit test, then if your mouse goes over the menu (again a hit test) - I use a tweenlite to animate the height of a mask, revealing the background of the menu. As this is happening I tweenlite several menu items & line graphics into the X position & fade them on with a variable delay so the all slide on individually.

I don’t know if I’m writing bad tweens for greensock or if its my code in general.

I’m just looking for some general advice on improving my code:

your help is much appriciated!! :rabbit:


//////////////////////////////
////    Menu Functions     ////
//////////////////////////////
var menuOn:Boolean = false;


// ** Nudge them menu down when rolling over the top area
top.addEventListener(Event.ENTER_FRAME, topHitTest);
function topHitTest(e:Event):void {
    if(top.hitTestPoint(mouseX,mouseY,true)) {
//** just me being lazy here with 'isRollOve' quick fix to duplicate variable names!
        if (!this.isRollOve && welcomeState == false && menuOn == false) {
            this.isRollOve = true;
                TweenLite.to(menu, .7, {y:10});
        }
    } else {
        if (this.isRollOve && welcomeState == false && menuOn == false){
            this.isRollOve = false;
            TweenLite.to(menu, .7, {y:0});
        }
    }
}

// ** Showt the menu when mouse is over the red
menu.addEventListener(Event.ENTER_FRAME, menuHitTest);
function menuHitTest(e:Event):void {
    if(menu.hitTestPoint(mouseX,mouseY,true)) {
        if (!this.isRollOver) {
            this.isRollOver = true;
            menuOn = true;
            menuOver()
        }
    } else {
        if (this.isRollOver) {
            this.isRollOver = false;
            menuOn = false;
            menuOut()
        }
    }
}


function menuOver():void {
    menuOn = true;
    TweenLite.to(menu.arr, .5, {alpha:0});
    for (var i:int=0; i<xmlMenuLength; i++) {
        var delay:Number = i/15;
        TweenLite.to(menuItems*, .7, {x:0, alpha:1, delay:delay});
    }
    for (var j:int=0; j<xmlMenuLength-1; j++) {
        var delay2:Number = j/15;
        TweenLite.to(menuLines[j], .7, {x:0, delay:delay2});
    }
    TweenLite.to(menu.mask, 1, {height:menuHeight, ease:Cubic.easeOut});
    TweenLite.to(menu.red, .5, {alpha: 1, ease:Quart.easeIn});
}



function menuOut():void {
    TweenLite.to(menu.mask, .7, {height:40, ease:Cubic.easeInOut, onComplete: hideMenu});
    TweenLite.to(menu.red, .5, {alpha: .9, ease:Quart.easeIn});
}


function hideMenu():void {
    TweenLite.to(menu, 1, {y:0});
    TweenLite.to(menu.arr, .5, {alpha:1});
    for (var i:int=0; i<xmlMenuLength; i++) {
        menuItems*.alpha = 0;
        menuItems*.x = 300;
    }
    for (var j:int=0; j<xmlMenuLength-1; j++) {
        menuLines[j].x = -300;
    }
    
}

I’ve just been reading about ‘allTO’ tweens from greensock, but I need each item to have a varying delay. I’m not sure if allTo would allow me to do that and I understand you have to use tweenMax which is a it slower!?

Thanks again.

Mase.