Multiple Tweens w/stored values - Timeline vs TweenMax

[robertnyc]

Let's say I want to tween a number of objects, stagger them, and tween them to a specific variable which I've stored within the object. That last means simply that if I'm tweening a MovieClip to a particular y, I've stored that y in a variable on the MovieClip (i.e. myMovie.specialY = 1234).

 

What's the best way to do this? The main issue I'm having is accessing that stored variable in an efficient way. How would I do this in TweenMax.allTo?

 

I was looking at TimelineLite/Max -- it looked like a nice scheme. Same question, what's the best way to set something like this up?

 

I think if there were an easy way within the GS function calls to access the object being tweened that might do it -- I'm sure there's a really obvious point I'm missing, but when I simply to something like TweenMax(mc,1, {mc.myProperty}), it says it doesn't understand "myProperty". Do I need to make mc a custom class and include import the class file?

 

 

My solution in the end was to do something like this:

 

// _allBars:Array;   previously set up array of movieclips
// t, INC, SPEED: Number;  previously set up rate determiners -- t determines stagger

for (var i:int = 0; i < _allBars.length; i++) {
			t  = i * INC;
			var mc:MovieClip =  _allBars[i] as MovieClip;
			TweenMax.to(mc, SPEED, {delay:t, y:mc.initY } );
		}

 

Extra bonus question: is there a way to use Timeline to tween a set of multiple TweenMax.allTo's? I have the basic thought to construct Timeline instances using insertMultiple and the results of calls to TweenMax.allTo() -- and then insert those timelines into another Timeline using insertMultiple again, but my head spins -- and I still can't figure out a way to access custom properties on my tweened objects.

[GreenSock]

Your solution is perfectly fine. TweenMax doesn't have some built-in way to introspect your objects for custom variable names and loop through them, building a sequence to all the different values (nor should it - features like that typically lead to bloated, slow classes). allTo() is intended to tween objects to common destination values, but it sounds like you want the objects to go to different values. If you want to modularize it, you could just build a function of your own, like (untested):

 

function buildTweens(targets:Array, duration:Number, propName:String, varName:String, stagger:Number):Array {
   var tweens:Array = [];
   var cnt:uint = 0;
   var vars:Object = {};
   var l:uint = targets.length;
   for (var i:int = 0; i         vars = {delay:stagger * i};
       vars[propName] = targets[i][varName];
       tweens[cnt++] = new TweenMax(targets[i], duration, vars);
   }
   return tweens;
}
buildTweens(myObjects, 1, "y", "specialY", 0.2);

 

You can get more fancy with accommodating easing and other special properties, but hopefully you get the general idea.

 

Extra bonus question: is there a way to use Timeline to tween a set of multiple TweenMax.allTo's? I have the basic thought to construct Timeline instances using insertMultiple and the results of calls to TweenMax.allTo() -- and then insert those timelines into another Timeline using insertMultiple again, but my head spins -- and I still can't figure out a way to access custom properties on my tweened objects.

 

Sure. You can nest timelines within timelines if you want, but you don't need to. You can insert as many TweenMax.allTo() call results as you want, like:

 

var t:TimelineLite = new TimelineLite();
t.appendMultiple( TweenMax.allTo(myObjects, 1, {y:"100"}, 0.1) );
t.appendMultiple( TweenMax.allTo(myObjects, 1, {x:"100"}, 0.1) );
...

And/or use insertMultiple() if you want to place them precisely instead of appending them one-after-the-other. If you haven't watched the video at http://www.greensock.com/timeline-basics/ yet, I'd highly recommend it. I think it'll clear some things up for you.