Forcing TimelineLite to completion

[Raconteur]

Hi there,

 

I have a case where a TimelineLite containing 10 TweenLites needs to be forced to completion (meaning I want it to jump to the end and display the same appearance as it would if it had run normally).

 

I have tried:

_mainTL.complete();

_mainTL.currentProgress = 1;

_mainTL.goto(_mainTL.totalDuration);

but none seem to work.

 

They all stop the animation right at the point it was when the call was made. I am wanting the behavior to jump to the end and display that state.

 

Am I doing something wrong??

 

Cheers,

 

Chris

[GreenSock]

Those should all work, although I did just notice a slight bug in the AS3 version that would prevent complete() from working if you called it immediately after creating the TimelineLite/Max instance. I posted an update a few minutes ago that fixes that issue. But setting currentProgress to 1 or gotoAndStop() to the duration should both work (and did when I tested them just now). Could you post an example FLA that demonstrates the odd behavior? It can be super simple. It's just very difficult to troubleshoot when I can't recreate the issue. I wonder if there's something else going on in your FLA that's causing the problem.

[Raconteur]

Hey there,

 

Thanks for the response. I will try to put a sample together, but here is some more detail from my research:

 

There are two timelines, mainTL and spinDownTL. mainTL can be truncated (which is where the problem is happening). So, functionally, the mainTL is running (over 5 seconds, let's say). 2 seconds in I get the event to run the spinDownTL, so I want mainTL to complete (not run the animation through to finish, but rather jump to the end and display). I then kill mainTL, and launch spinDownTL.

 

The actual code looks like this:

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

		_animationCompleted = true;
		_mainTL.complete();

		//_mainTL.kill();

		removeElementNamed("LogoBase");

		_spinDownTL = new TimelineLite({tweens:[
								   new TweenLite(_lightRing, rampDownLen, {alpha:0.7, ease:Linear.easeNone}),
								   new TweenLite(_detents, rampDownLen, {alpha:0.2, ease:Linear.easeNone}),
								   new TweenLite(_disc, rampDownLen, {alpha:0, ease:Linear.easeNone}),
								   new TweenLite(_chase, rampDownLen, {alpha:0, ease:Linear.easeNone})],
								align:TweenAlign.START, stagger:0, delay:0.33, onComplete:displayResults});
	}

 

If I comment out the kill on the mainTL, the mainTL continues running (actually, it appears that only one TweenLite continues to run).

 

The mainTL looks like this:

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

		_disc = new Disc();
		_disc.name = "Disc";
		_lightRing = new LightRing();
		_lightRing.name = "LightRing";
		_chase = new LightChase();
		_chase.name = "Chase";

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

		if (_configData["UseDetents"] == "1")
		{
			var detentClassName:String = _configData["DetentColor"] + "Detents";
			_detents = new(getDefinitionByName(detentClassName));
			_detentsMask = new DetentMask(_detents, stage.stageWidth, stage.stageHeight);
			addChild(_detents);
			_detents.x = stage.stageWidth / 2;
			_detents.y = stage.stageHeight / 2;
			addChild(_detentsMask);
			_detentsMask.x = stage.stageWidth / 2;
			_detentsMask.y = stage.stageHeight / 2;
		}

		_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 = new TimelineLite({tweens:[
							   new TweenLite(_logoBase, 0.33, {alpha:0, ease:Linear.easeNone}),
							   new TweenLite(_logo, 0.33, {alpha:0.75}),
							   new TweenLite(_insertDVDTxt, rampUpLen / 3, {alpha:0, ease:Cubic.easeOut, onComplete:removeInitialText}),
							   new TweenLite(_logo, rampUpLen / 2, {saturationValue:1, ease:Cubic.easeIn}),
							   new TweenLite(_lightRing, rampUpLen / 2, {alpha:1, ease:Cubic.easeIn}),
							   new TweenLite(_disc, rampUpLen / 2, {alpha:1, ease:Cubic.easeIn}),
							   new TweenLite(_disc, rotLen, {rotation:-rotAngle}),
							   new TweenLite(_chase, rampUpLen / 2, {alpha:1, ease:Cubic.easeIn}),
							   new TweenLite(_chase, rotLen - 0.12, {spinRotation:rotAngle, ease:Linear.easeNone}),
							   new TweenLite(_detentsMask, rotLen, {segmentsRevealed:9, ease:Linear.easeNone})],
							align:TweenAlign.START, stagger:0, onComplete:spinDown});
	}

 

The last tween (for _detentsMask) is the one that still runs.

 

If this helps, great. If not, I will try to isolate and give you something that will demo the problem. I am just under the gun right now to deliver this project.

 

Thanks!

[Raconteur]

Just to be clear... spinUp is called first, then spinDown. When spinDown is called one of two conditions exist - either the spinUp animation has completed or it hasn't. If it has not completed, I need to display the state of the end of that animation before invoking spinDown.

 

Does that make sense?

[Raconteur]

Hey there,

 

Ok... perhaps this should go into a separate thread, but since it is related to all of the previous discussion I thought I'd throw it into here.

 

I had to work around the previous problem, basically by adding:

//  This is a bit of a hack, but since the call to #complete() on _mainTL
//  is not behaving, let's remove the mask by hand and throw away the child
_detents.mask = null;
removeElementNamed("DetentsMask");

 

right after the call to

_mainTL.kill();

 

This is working just fine... not as elegant as I'd like, but hey, I need to deliver.

 

Now, I am having a problem with, what appears to be, TimelineLite not respecting the delay property of a TweenLite.

 

I have this timeline set up:

_mainTL = new TimelineLite({tweens:[
							   new TweenLite(_logoBase, 0.33, {alpha:0, ease:Linear.easeNone}),
							   new TweenLite(_logo, 0.33, {alpha:0.75}),
							   new TweenLite(_insertDVDTxt, rampUpLen / 3, {alpha:0, ease:Cubic.easeOut, onComplete:removeInitialText}),
							   new TweenLite(_logo, rampUpLen / 2, {saturationValue:1, ease:Cubic.easeIn}),
							   new TweenLite(_lightRing, rampUpLen / 2, {alpha:1, ease:Cubic.easeIn}),
							   new TweenLite(_disc, rampUpLen / 2, {alpha:1, ease:Cubic.easeIn}),
							   new TweenLite(_disc, rotLen, {rotation:-rotAngle}),
							   new TweenLite(_chase, rampUpLen / 2, {alpha:1, ease:Cubic.easeIn}),
							   new TweenLite(_chase, rotLen - 0.12, {spinRotation:rotAngle, ease:Linear.easeNone}),
							   new TweenLite(_detentsMask, rotLen, {segmentsRevealed:9, ease:Linear.easeNone, delay:50})],
							align:TweenAlign.START, stagger:0, onComplete:spinDown});

 

The last tween, on the _detentsMask, has a huge delay (I have tried everything from 0.5 to 50), and it starts as soon as everything else in the timeline - no delay.

 

Am I doing something wrong here or is this a bug? I suppose I could pull that tween out of the TimelineLite and do it separately...

 

Thanks!

 

Chris

[GreenSock]

Nope, that's not a bug - notice that you said align:TweenAlign.START? That tells it to align all the start times. I think you probably meant to use the default value, TweenAlign.NORMAL which will respect delays, etc.

 

As far as the complete() not working, I'd absolutely love to see a simple example (I know, you're working on it and you're under the gun - no rush). I cannot reproduce the problem. You are using the latest version too, right?

 

I noticed one other thing in your code that could cause trouble - you have an onComplete set to call spinDown() when mainTL completes, but inside spinDown(), you call mainTL.complete() which will obviously end up triggering its onComplete (unless you set the suppressEvents parameter of complete() to true). See what I mean? spinDown() would get called twice in that case (unless mainTL is already finished).

[Raconteur]

Great catches!

 

First, yes, I probably did mean to use NORMAL rather than START. Wasn't aware of that one...

 

Also good one on the call to complete() calling spinDown twice. I need to be able to kill the mainTL, right AFTER displaying its final frame though. How would you recommend doing that?

 

I will try to get an example together for you as soon as I can. This thing should be delivered today, which will give me some time to research.

 

Cheers,

 

Chris

[GreenSock]

Also good one on the call to complete() calling spinDown twice. I need to be able to kill the mainTL, right AFTER displaying its final frame though. How would you recommend doing that?

 

You can leave it as an onComplete and just prevent the onComplete from firing when you call complete() by suppressing events. And even better, you could skip the complete() call altogether if it's already complete:

if (mainTL.currentProgress != 1) {
   mainTL.complete(false, true);
}

[Raconteur]

Thanks. That helps.

 

I am beginning to suspect that the TimelineLite is functioning properly, and I am observing an effect of a rather odd tween.

 

The _detentsMask is a series of 8 triangular wedges radiating outward to reveal bits of the underlying image. I am tween a property "segmentsRevealed" from 0 to 8 (as there are 8 bits I want to show). The each wedge of the mask is drawn every time the setter for segmentsRevealed is called.

 

The problem I am seeing may lie in there somewhere. I will either post an example of it breaking for me, or a reply saying it was my issue and not TimelineLite's, which is probably the case.

 

Thanks for the great support!

 

Chris

[Raconteur]

Ok... it IS my problem. The way the tween is being handled is skipping the intermediate slices, which looks like it just isn't running.

 

My apologies.

 

Cheers,

 

Chris

[GreenSock]

Phew! Glad to hear you figured it out and it wasn't a problem with any GreenSock stuff. Thanks for posting your findings.

 

Happy tweening.