AS3:TweenLite new tween only when first tween completes

programming flash
1

I have several mc’s wrapped into one mc. On MOUSE_OVER they animate out, and on MOUSE_OUT they animate back in. This works fine. What I need to add now is a tween at the end (completion) of the MOUSE_OVER. Refer to my code…

I dont want the following code:

TweenLite.to(ants_mc, .8, {alpha:1, delay:.5, ease:Strong.easeOut});

to begin until the following tweens :

TweenLite.to(crosshair_mc.bottomLeft_mc, .5, {y:-41.6, x:41, ease:Back.easeIn});
      TweenLite.to(crosshair_mc.bottomRight_mc, .5, {y:-41.6, x:-41.6, ease:Back.easeIn});
      TweenLite.to(crosshair_mc.topLeft_mc, .5, {y:41.6, x:41.6, ease:Back.easeIn});
      TweenLite.to(crosshair_mc.topRight_mc, .5, {y:41.6, x:-41.6, ease:Back.easeIn});

have all completed…

I have added in an onComplete in several different fashions, but all are firing at the beginning of the tween, yet I need it to wait until the other tweens have completed. I have also tried adding in an onComplete add function but I am having the same problems…

The last 2 TweenLite tweens in each function need to fire only when the previous tweens have completed. Right now (and I realize thats how the code is written here) all tweens are firing at the beginning of the rollover instead of (what I need) onComplete of the first 4 tweens…

full code snippet:

crosshair_mc.buttonMode = true;
ants_mc.alpha = 0;
txtBox_mc.alpha = 0;
crosshair_mc.addEventListener(MouseEvent.MOUSE_OVER, RollOver);
function RollOver(event:MouseEvent):void {
    TweenLite.to(crosshair_mc.bottomLeft_mc, .5, {y:-41.6, x:41, ease:Back.easeIn});
    TweenLite.to(crosshair_mc.bottomRight_mc, .5, {y:-41.6, x:-41.6, ease:Back.easeIn});
    TweenLite.to(crosshair_mc.topLeft_mc, .5, {y:41.6, x:41.6, ease:Back.easeIn});
    TweenLite.to(crosshair_mc.topRight_mc, .5, {y:41.6, x:-41.6, ease:Back.easeIn});
    TweenLite.to(ants_mc, .8, {alpha:1, delay:.5, ease:Strong.easeOut});
    TweenLite.to(txtBox_mc, .5, {alpha:1, delay:.5, ease:Strong.easeOut});
}

crosshair_mc.addEventListener(MouseEvent.MOUSE_OUT, RollOut);
function RollOut(event:MouseEvent):void {

    TweenLite.to(crosshair_mc.bottomLeft_mc, .7, {y:0, x:0, ease:Back.easeInOut});
    TweenLite.to(crosshair_mc.bottomRight_mc, .7, {y:0, x:0, ease:Back.easeInOut});
    TweenLite.to(crosshair_mc.topLeft_mc, .7, {y:0, x:0, ease:Back.easeInOut});
    TweenLite.to(crosshair_mc.topRight_mc, .7, {y:0, x:0, ease:Back.easeInOut});
    TweenLite.to(ants_mc, .2, {alpha:0, ease:Strong.easeOut});
    TweenLite.to(txtBox_mc, .2, {alpha:0, ease:Strong.easeOut});
}

Please take a look and throw out any suggestions that come to mind…

Thanks for any help you can give…