Proper way to handle killing TimelineLite

[Raconteur]

Hi all,

 

I have a set of TweenLites that are in a TimelineLite. There are two case I need to handle. One is where the TimelineLite finishes and then the next action happens sequentially. The other, and where I am having a problem, is that the TimelineLite may need to be interrupted by an outside process and stop.

 

When this happens, a new TimelineLite is created and TweenLites created around 3 of the 5 objects in the original TimelineLite.

 

My question is this. What is the proper way to dispose of the first TimelineLite? Do I just send kill() to it? Do I need to iterate and kill all tweens inside of it?

 

Right now I am killing the tweens of the 3 objects from the first Timeline, then sending kill to the Timeline. Then I build my new Timeline and play it, but there is a big pause between them.

 

Code looks like this:

private function handleStart(e:MouseEvent):void
	{
		var rampUpLen:int = 1;
		var rotLen:int = 5;
		var rotAngle:int = 360 * 2 * rotLen;

		mainTL = new TimelineLite();

		_disc = new Disc();
		_lightRing = new LightRing();
		_chase = new LightChase();

		addChild(_disc);
		addChild(_lightRing);
		addChild(_chase);

		_disc.x = stage.stageWidth / 2;
		_disc.y = stage.stageHeight / 2;
		_lightRing.x = stage.stageWidth / 2;
		_lightRing.y = stage.stageHeight / 2;
		_chase.x = stage.stageWidth / 2;
		_chase.y = stage.stageHeight / 2;

		_disc.alpha = 0;
		_disc.rotation = 0;
		_lightRing.alpha = 0;
		_chase.alpha = 0;
		_chase.rotation = 0;

		mainTL.insertMultiple([
							   new TweenLite(_insertDVDTxt, rampUpLen/2, {alpha:0, ease:Cubic.easeOut, onComplete:removeInitialText}),
							   new TweenLite(_logo, rampUpLen, {saturationValue:1, ease:Cubic.easeIn}),
							   new TweenLite(_lightRing, rampUpLen, {alpha:1, ease:Cubic.easeIn}),
							   new TweenLite(_disc, rampUpLen, {alpha:1, ease:Cubic.easeIn}),
							   new TweenLite(_disc, rotLen, {rotation:-rotAngle}),
							   new TweenLite(_chase, rampUpLen, {alpha:1, ease:Cubic.easeIn}),
							   new TweenLite(_chase, rotLen-0.25, {spinRotation:rotAngle, ease:Linear.easeNone})
							   ], 0, TweenAlign.START, 0);

		mainTL.play();
	}

	private function handleComplete(e:MouseEvent):void
	{
		spinDown();
	}

	private function spinDown():void
	{
		var rampDownLen:int = 1;

		mainTL.pause();
		mainTL.killTweensOf(_lightRing);
		mainTL.killTweensOf(_disc);
		mainTL.killTweensOf(_chase);
		mainTL.kill();

		spinDownTL = new TimelineLite();

		spinDownTL.insertMultiple([
								   new TweenLite(_lightRing, rampDownLen, {alpha:0, ease:Cubic.easeOut}),
								   new TweenLite(_disc, rampDownLen, {alpha:0, ease:Cubic.easeOut}),
								   new TweenLite(_chase, rampDownLen, {alpha:0, ease:Cubic.easeOut})
								   ], 0, TweenAlign.START, 0);

		spinDownTL.play();
	}

 

I have two buttons on the UI, one triggers handleStart, the second triggers handleComplete. What I am trying to get to happen is while the handleStart timeline is running, I click the handleComplete button. The handleStart timeline should stop immediately, and the handleComplete timeline should run immediately, with as little pause as possible... preferable simultaneously (or as close as can be a nano-second processing speeds).

 

Any input?

 

Thanks!!!

[GreenSock]

You do NOT need to worry so much about garbage collection in the GreenSock classes - I've put a lot of effort into making it relatively painless. So if you kill() the timeline, its tweens are taken care of automatically. You don't have to kill() each child tween. So in your case:

 

OLD (wasteful):

mainTL.pause();
mainTL.killTweensOf(_lightRing);
mainTL.killTweensOf(_disc);
mainTL.killTweensOf(_chase);
mainTL.kill();

 

NEW (clean):

mainTL.kill();

 

You also don't need to call play() on the TimelineLite right after creating it because by default, all tweens and timelines start playing immediately.

 

Hope that helps.

[Raconteur]

Well, sheee-oooot, in't you clever!

 

Thanks, for the guidance, and what is REALLY just a totally bitchin' piece of work. The GreenSock stuff really rocks, and it is a joy to use from an OO perspective.

 

Cheers,

 

Chris

[Raconteur]

I just thought of another issue... if I have an onComplete attached to a Timeline, does killing the timeline also kill the onComplete handler?

[GreenSock]

Yep, when you kill() a TimelineLite, it won't resurrect itself and call the onComplete It's dead. No need to worry about it anymore.