onComplete and for loops

[Nickbee]

When I use a for loop to tween a bunch of stuff and want to call a function on the complete of the least tween I’ve been using a conditional like so:

 

		private function initTweenIcons():void
	{
		for (var i:int=0 ; i<_numIcons ; i++)
		{
			var temp:MovieClip = iconName[tweenOrder[i]];
			if (i != _numIcons-1)
			{
				TweenMax.to(temp, tweenSpeed, {x:finalIconX[tweenOrder[i]], y:finalIconY[tweenOrder[i]], scaleX:.8, scaleY:.8, alpha:1, delay:i*.1, motionBlur:true, ease:Cubic.easeInOut});
			}
			else
			{
				TweenMax.to(temp, tweenSpeed, {x:finalIconX[tweenOrder[i]], y:finalIconY[tweenOrder[i]], scaleX:.8, scaleY:.8, alpha:1, delay:i*.1, motionBlur:true, ease:Cubic.easeInOut, onComplete:addListeners});
			}
		}
	}

 

This works perfect but I’m wondering if there is an easier, more efficient way to do this. I know a timer could be used, aka delayedCall, but I figured this is more reliable just in case things don’t sync up perfectly.

Thanks!

[Carl]

Yeah, if you put all your icons in an array you can use TweenMax.allFrom or TweenMax.allTo like so:

 

var icons:Array = new Array(icon1, icon2, icon3);

TweenMax.allTo(icons, 1, {y:"50"}, 0, done);

function done(){
trace("done");
}

//0: delay / stagger between tweens running
//done: name of function to call when all tweens are complete

[Nickbee]

That is awesome!!!!

 

But I don't think it will work in this case since each "icon" has it's own destination x and y value.

[Carl]

oh snap. I didn't think of that.

although by passing in the y property as a string "50", all icons will move 50pixels from where they are, so if you have a clever way of placing them initially 50 pixels away from where they are going too... ahhh probably won't get you away from the loop anyway. hmmm. (i'm just using 50 x pixels as an example).

 

Well since you have a loop already in place, you can append all your tweens into a TimelineLite/Max instance and then at least when the timeline is done you can fire an onComplete function.

 

as far as the amount of code needed it will probably be a touch more than your existing loop, but it may get you a few personal neatness points

[GreenSock]

Yep, exactly Carl. The code could probably be simplified to:

 

private function initTweenIcons():void {
var tl:TimelineLite = new TimelineLite({onComplete:addListeners});
for (var i:int=0 ; i		tl.insert( TweenMax.to(iconName[tweenOrder[i]], tweenSpeed, {x:finalIconX[tweenOrder[i]], y:finalIconY[tweenOrder[i]], scaleX:.8, scaleY:.8, alpha:1, delay:i*.1, motionBlur:true, ease:Cubic.easeInOut}) );
}
}

 

The other nice thing about that is you can control everything as a whole. You could reverse(), restart(), change the timeScale, etc. all by using the TimelineLite.

[Nickbee]

Thanks guys!!!

 

I will be giving TimelineLite a try soon!!!!