Automating TimelineMax

[manor]

I got this working and I just wanted to share and ask the board if there is a way to improve the code. I am looping through an array to build a timeline. This particular animation takes a series of buttons and moves them to one point and then spreads them out along a line. I now can change one variable and get the spacing just right without having to manually change 17 values by hand while doing the math in my head. Yet another reason to love timelineMax...

 

var animatedButtonList:Array = new Array("b1","b2","b3","b4","b5","b6","b7","b8","b9","b10","b11","b12","b13","b14","b15","b16","b17");

var buttons_tl:TimelineMax = new TimelineMax({paused:true,onComplete:grid_button_clicked_done}); 
var moveX:int = 30;

for (var i:int=0; imoveX = moveX+50;
buttons_tl.insert(TweenLite.to(this.getChildByName(animatedButtonList[i]), 1,{x:398, y:570, scaleX:0.33, scaleY:0.33, ease:Expo.easeInOut}));
buttons_tl.insert(TweenLite.to(this.getChildByName(animatedButtonList[i]), .5,{x:moveX, y:570, scaleX:0.33, scaleY:0.33, ease:Expo.easeInOut, delay:1}));
}

[GreenSock]

Cool. Any reason why you're tweening the y, scaleX, and scaleY in your 2nd tween? You're tweening them to those values with the first tween, so you shouldn't need to tween them to the same position again in your 2nd tween (the x changes obviously, but the others are the same). It doesn't hurt anything, but eliminating them may slightly improve performance and make it more readable.

[manor]

Thanks for the tip. I built the animation in stages and did realize I was scaling it twice.

 

Now I think I might have gone too far in trying to automate timlineMax. I am trying to loop through the same array but this time I need to make three timeslines per entry. This is causing a problem because I can't figure out how to use a variable in the name of a new variable, and maybe it is not possible? The code below is wrong because the variable names are declared twice, which is not allowed.

 

Any suggestions on how I might pull this off? Is there some syntax trick I am missing?

 

 

var animatedButtonList:Array = new Array("b1","b2","b3","b4","b5","b6","b7","b8","b9","b10","b11","b12","b13","b14","b15","b16","b17");


for (var j:int=0; j	var my_names:Array = new Array();
var mylabel = animatedButtonList[j]+"label";
var myrowlabel = animatedButtonList[j]+"label_row";
var my_otla = animatedButtonList[j]+"_otla";
var my_otlb = animatedButtonList[j]+"_otlb";
var my_otlrow = animatedButtonList[j]+"_otl_row";


var my_otla:TimelineMax = new TimelineMax({paused:true});
my_otla.insert(TweenMax.from(this.getChildByName(mylabel), .2, {rotation:-15, alpha:0}));
var my_otlb:TimelineMax = new TimelineMax({paused:true});
my_otlb.insert(TweenMax.from(this.getChildByName(animatedButtonList[j]), .2, {dropShadowFilter:{color:666666, alpha:1, blurX:12, blurY:12, distance:3}}));
var my_otlrow:TimelineMax = new TimelineMax({paused:true});
my_otlrow.insert(TweenMax.from(this.getChildByName(myrowlabel), .1, {alpha:0}));
}

[GreenSock]

I'm not sure I quite understand the problem, but couldn't your code be simplified to this?:

 

var animatedButtonList:Array = new Array("b1","b2","b3","b4","b5","b6","b7","b8","b9","b10","b11","b12","b13","b14","b15","b16","b17");

var tl:TimelineMax = new TimelineMax({paused:true});
var currentName:String;
for (var j:int = 0; j    currentName = animatedButtonList[j];
  tl.insert( TweenMax.from(this.getChildByName(currentName + "label"), 0.2, {rotation:-15, alpha:0}) );
  tl.insert( TweenMax.from(this.getChildByName(currentName), 0.2, {dropShadowFilter:{color:666666, alpha:1, blurX:12, blurY:12, distance:3}}) );
  tl.insert( TweenMax.from(this.getChildByName(currentName + "label_row"), 0.1, {alpha:0}) );
}

[manor]

I am trying to create three timelines with each pass of the loop. I need to be able to call each timeline at different times. I have it written out the "long" way and it works just fine, I attached a sample of how I am doing it below. I am grouping them together like this because each "button" needs own version of each timeline. I was just trying to shorten the amount of code by looping through it.

 

 

//button 1
var b1_otl_a:TimelineMax = new TimelineMax({paused:true});
b1_otl_a.insert(TweenMax.from(b1label, .2, {rotation:-15, alpha:0}));
var b1_otl_b:TimelineMax = new TimelineMax({paused:true});
b1_otl_b.insert(TweenMax.from(b1, .2, {dropShadowFilter:{color:666666, alpha:1, blurX:12, blurY:12, distance:3}}));
var b1_otl_row:TimelineMax = new TimelineMax({paused:true});
b1_otl_row.insert(TweenMax.from(b1label_row, .1, {alpha:0}));

//button 2
var b2_otl_a:TimelineMax = new TimelineMax({paused:true});
b2_otl_a.insert(TweenMax.from(b2label, .2, {rotation:-15, alpha:0}));
var b2_otl_b:TimelineMax = new TimelineMax({paused:true});
b2_otl_b.insert(TweenMax.from(b2, .2, {dropShadowFilter:{color:666666, alpha:1, blurX:12, blurY:12, distance:3}}));
var b2_otl_row:TimelineMax = new TimelineMax({paused:true});
b2_otl_row.insert(TweenMax.from(b2label_row, .1, {alpha:0}));

// and 15 more "buttons" after this... 

[GreenSock]

Yeah, I'd structure things differently if I were you. A few pointers:

 

1) If you're only doing one tween for each button, you don't need to put them into a TimelineMax. Just use a TweenMax instance instead. Like:

 

var b1_otl_a:TweenMax = TweenMax.from(b1label, .2, {rotation:-15, alpha:0, paused:true});

 

2) You may want to use autoAlpha instead of alpha to automatically toggle visibility off when alpha is 0.

 

3) Maybe you should create a custom Button class (name it whatever you want, like CustomButton) so that you can associate its TweenMax or TimelineMax instance with a property like "tween". Then you could store instances in an Array and control things very easily with myButtonInstance.tween.play() or you could create animateIn() and animateOut() methods - whatever. Your code right now seems very procedural instead of Object-Oriented. I think you'll find that OO code is easier to work with once you get the hang of it.

 

Good luck.

[manor]

Thanks for your help. Yes I know I need to take the plunge and commit to OOP. Have any book recommendations?