tweening multiple objects ????????? [SOLVED]

[raccoon]

Hello 'm making an accordion menu with tweenLite, i want to know if there is an easier way to do it?.

i don't have much experience with AS3

 

Thank you

 

var invisible_menu : Number = 0
var visible_menu : Number = 0

//Rollover btn1

menu_mc1.addEventListener(MouseEvent.ROLL_OVER,showMenu);
menu_mc1.addEventListener(MouseEvent.ROLL_OUT,hideMenu);

function showMenu(event:MouseEvent) :void{
visible_menu = 63
TweenLite.to(menu_mc2, .2, {y:visible_menu,ease:Linear.easeIn});
visible_menu = 92
TweenLite.to(menu_mc3, .2, {y:visible_menu,ease:Linear.easeIn});
visible_menu = 121
TweenLite.to(menu_mc4, .2, {y:visible_menu,ease:Linear.easeIn});
visible_menu = 150
TweenLite.to(menu_mc5, .2, {y:visible_menu,ease:Linear.easeIn});
visible_menu = 179
TweenLite.to(menu_mc6, .2, {y:visible_menu,ease:Linear.easeIn});
visible_menu = 208
TweenLite.to(menu_mc7, .2, {y:visible_menu,ease:Linear.easeIn});
visible_menu = 237
TweenLite.to(menu_mc8, .2, {y:visible_menu,ease:Linear.easeIn});
visible_menu = 266
TweenLite.to(menu_mc9, .2, {y:visible_menu,ease:Linear.easeIn});
}

function hideMenu(event:MouseEvent):void {
invisible_menu = 29
TweenLite.to(menu_mc2, .4, {y:invisible_menu,ease:Linear.easeOut});
invisible_menu = 58
TweenLite.to(menu_mc3, .4, {y:invisible_menu,ease:Linear.easeOut});
invisible_menu = 87
TweenLite.to(menu_mc4, .4, {y:invisible_menu,ease:Linear.easeOut});
invisible_menu = 116
TweenLite.to(menu_mc5, .4, {y:invisible_menu,ease:Linear.easeOut});
invisible_menu = 145
TweenLite.to(menu_mc6, .4, {y:invisible_menu,ease:Linear.easeOut});
invisible_menu = 174
TweenLite.to(menu_mc7, .4, {y:invisible_menu,ease:Linear.easeOut});
invisible_menu = 203
TweenLite.to(menu_mc8, .4, {y:invisible_menu,ease:Linear.easeOut});
invisible_menu = 232
TweenLite.to(menu_mc9, .4, {y:invisible_menu,ease:Linear.easeOut});
}

[Choochoo]

var invisible_menu : Number = 0

var visible_menu : Number = 0

 

//Rollover btn1

 

menu_mc1.addEventListener(MouseEvent.ROLL_OVER,showMenu);

menu_mc1.addEventListener(MouseEvent.ROLL_OUT,hideMenu);

var myTween:TweenLite;

function showMenu(event:MouseEvent) :void

{

myTween = TweenLite.allTo([menu_mc2,menu_mc3,menu_mc4,menu_mc5,menu_mc6,menu_mc7,menu_mc8,menu_mc9], .2, {y:"+29",ease:Linear.easeIn});

}

 

function hideMenu(event:MouseEvent):void

{

myTween.duration *= 2

myTween.reverse();

}

 

 

not tested, but its something like that.

[GreenSock]

TweenLite doesn't have an allTo(), but TweenMax does (as of v11). And it doesn't return a TweenLite - it returns an Array of tweens.

 

Do you mind me asking why you kept resetting a variable and then using that variable in your tween's vars object (for the y coordinate)? Seems overly complex. You could just do:

 

function showMenu(event:MouseEvent) :void{
  TweenLite.to(menu_mc2, .2, {y:63, ease:Linear.easeIn});
  TweenLite.to(menu_mc3, .2, {y:92, ease:Linear.easeIn});
  TweenLite.to(menu_mc4, .2, {y:121, ease:Linear.easeIn});
  TweenLite.to(menu_mc5, .2, {y:150, ease:Linear.easeIn});
  TweenLite.to(menu_mc6, .2, {y:179, ease:Linear.easeIn});
  TweenLite.to(menu_mc7, .2, {y:208, ease:Linear.easeIn});
  TweenLite.to(menu_mc8, .2, {y:237, ease:Linear.easeIn});
  TweenLite.to(menu_mc9, .2, {y:266, ease:Linear.easeIn});
}

function hideMenu(event:MouseEvent):void {
  TweenLite.to(menu_mc2, .4, {y:29, ease:Linear.easeOut});
  TweenLite.to(menu_mc3, .4, {y:58, ease:Linear.easeOut});
  TweenLite.to(menu_mc4, .4, {y:87, ease:Linear.easeOut});
  TweenLite.to(menu_mc5, .4, {y:116, ease:Linear.easeOut});
  TweenLite.to(menu_mc6, .4, {y:145, ease:Linear.easeOut});
  TweenLite.to(menu_mc7, .4, {y:174, ease:Linear.easeOut});
  TweenLite.to(menu_mc8, .4, {y:203, ease:Linear.easeOut});
  TweenLite.to(menu_mc9, .4, {y:232, ease:Linear.easeOut});
}

 

Or, assuming your menu items start in their "hidden" state, you could use TweenMax.allTo() with a TimelineLite and do this (which is what I think Choochoo was going for:

 

var menuItems:Array = [menu_mc2, menu_mc3, menu_mc4, menu_mc5, menu_mc6, menu_mc7, menu_mc8, menu_mc9];
var menuTimeline:TimelineLite = new TimelineLite({paused:true});
menuTimeline.appendMultiple( TweenMax.allTo(menuItems, 0.2, {y:"34", ease:Linear.easeNone}) );

function showMenu(event:MouseEvent) :void{
  menuTimeline.timeScale = 1;
  menuTimeline.play();
}

function hideMenu(event:MouseEvent):void {
  menuTimeline.timeScale = 0.5; //makes it go half as fast
  menuTimeline.reverse();
}

[raccoon]

Thank you very much, guys, works perfectly...