TimelineLite problems

[midimid]

I'm trying to move my application to TimelineLite. Really need some better animation management and I think it'll work out great.

 

My problem is the following:

_timeline = new TimelineLite();
_timeline.insert(new TweenLite(this,0.5,{onComplete:initComplete}));

function initComplete():void {
   trace("init");
}

 

In the above, initComplete() never occurs. When I change the duration from 0.5 to 1, it works fine. I found that if I put it to anything lower than 0.8, it never takes. Also tried standard delayedCall() but get the exact same results.

 

However, the following works fine:

TweenLite.to(this,0.5,{onComplete:initComplete});

function initComplete():void {
   trace("init");
}

 

And finally - just for kicks - if I do the following, initComplete runs, but the Timeline inserts within it don't occur:

_timeline = new TimelineLite();
TweenLite.to(this,0.5,{onComplete:initComplete});

function initComplete():void {
   trace("init");
   _timeline.insertMultiple([
       TweenLite.delayedCall(1,obj1.fadeIn),
       TweenLite.delayedCall(1,obj2.fadeIn,[false])
   ]);
}

 

And one last thing - TimelinLite.timeScale seems to work in the opposite direction. When changing to 1.2 the tween is faster than when its at 0.8.

 

Any thoughts on all of this? Is this a bug?

[GreenSock]

I would REALLY like to see this issue reproduced - I tried your code and it worked perfectly. Can you please post a simple FLA that demonstrates the issue? What you're doing is pretty basic, so if there's a bug that prevents even that from working, I'm very anxious to see it (and fix it of course).

 

It's almost acting like you're creating your TimelineLite instance well before you insert() the tween, and that by the time you insert() the tween, the virtual playhead has already passed where the tween would play. For example, let's say you create a TimelineLite and then 1 second later, you insert() a 0.5-second long tween at the BEGINNING of that TimelineLite. Remember, the virtual playhead is now at the 1-second spot, so your tween is being inserted in the past (before the currentTime). Make sense?

 

As for the timeScale, the behavior you described is perfectly normal. If you scale the time greater than 1, that would mean time is moving at a faster rate. A timeScale of 2 would make things run twice as fast. A timeScale of 0.5 would make them run half the normal speed.

[midimid]

Can you please post a simple FLA that demonstrates the issue?

Considering the complexity of the project, no, but I'll definitely try to put something together for you. Being my first time using it, I'm sure I'm just doing something wrong here.

 

Are you saying that when I do _timeline = new TimelineLite() that the playhead immediately begins to move, even when I haven't added anything to it? What I'd prefer is where I setup a sequence of tweens, do some other stuff, maybe add some more tweens later and then play that whole sequence when I'm done.

 

I'm also trying to keep a single instance of Timeline by passing it along to other classes. This way any of them can add to the current timeline. Also allows other classes to see if something else is already tweening. i.e. not allowing interactivity until the animation is complete.

 

Question - does Overwrite.init() affect anything with Timeline?

 

As for the timeScale, the behavior you described is perfectly normal.

OK - perhaps my stupidity, but in the docs, when I read "0.5 is half-speed, 2 is double speed" - I read "half" as the timeline taking "half as long" as the original timeline, and "double-speed" as the timeline taking "double" the length of the original timeline. I read it as being similar to a Tweenlite's duration - 0.5 is a tween twice as fast as a tween at 1. No biggie, it makes sense either way.

[GreenSock]

Are you saying that when I do _timeline = new TimelineLite() that the playhead immediately begins to move, even when I haven't added anything to it? What I'd prefer is where I setup a sequence of tweens, do some other stuff, maybe add some more tweens later and then play that whole sequence when I'm done.

Yep, timelines work just like tweens - they play by default. Trust me: that's a good thing. I'll spare you the lengthy explanation, but if it worked the opposite way (paused by default), you'd run into some other [more frustrating] problems that might not seem apparent at first.

 

In any case, it's easy to have a timeline pause initially. You can either pass "paused:true" into the vars object, or just pause() the instance right after you create it. Keep in mind that it only starts rendering on the next ENTER_FRAME event, so it's not like you need to worry about the milliseconds between the execution of code blocks. Then, when you're ready, play() the timeline.

 

Question - does Overwrite.init() affect anything with Timeline?

Nope. TimelineLite actually does that by default anyway so that the AUTO mode is used (it's more intuitive when you're working with sequences). So you don't need to worry about that either.

[midimid]

OK - so check out the attached. When you run this, timeline is null in ClassChild's fadeIn method.

 

I was trying to "stop and clear" in the timelineComplete function (currently commented out), but I'm not sure if that's doing what I want it to do ("reset" the timeline). I also tried "new TimelineLite" there, but I thought that might be what was causing ClassChild to get a nulled timeline - like it was in the middle of recreating it or something.

 

Try swapping lines 51 and 52. Using the latter, ClassChild's fadeIn function is never called. I suppose it might be because the playhead is not at zero?

 

Again - this is a complicated way of asking how I do what I really need - a single reusable timeline between multiple classes. Interactions with the timeline generally are not as "fast" as this example in my particular project (i.e. delayedCall(0,fadeIn)), but I feel like my purpose is sound: setup a timeline sequence, play it - when its done, "reset" the timeline, setup another timeline sequence, play it, "reset" etc etc.

[Carl]

OK - so check out the attached. When you run this, timeline is null in ClassChild's fadeIn method.

 

that is because you never instantiated a new TimlineLite() before calling _classChild = new ClassChild(_timeline);

 

A trace in main.as would reveal that.

 

public function addChildren():void {

                       trace(_timeline); // output null

		_classChild = new ClassChild(_timeline);
		_classChild.addEventListener(Event.ADDED_TO_STAGE,childrenAdded);
		addChild(_classChild);
	}

 

to get rid of the null reference do this:

 

 

public function addChildren():void {

                       _timeline = new TimelineLite();
                       trace(_timeline); // output [object TimelineLite]


		_classChild = new ClassChild(_timeline);
		_classChild.addEventListener(Event.ADDED_TO_STAGE,childrenAdded);
		addChild(_classChild);
	}

 

I would suggest trying to implement all the TimelineLite initialization, adding of tweens, playing, clearing... etc in a single class. Get the functionality bulletproof and then worry about how multiple classes are going to interact with it. just my 2 cents.

[midimid]

Really appreciate everyone's feedback on this. I've managed to figure out everything that's going on and have things working the way I want them to. I think the biggest thing holding me up was doing "other stuff" while setting up a timeline sequence. For instance, I'll commonly want to do some tweens, then run some functions unrelated to animating (sometimes while animating is still going, sometimes pause animating for processing), then do some more tweens. And while those things should definitely be separate, its a lot easier to put it all into a single sequence where I can break down what comes after what. The solution was to append delayedCalls with a delay of zero or use mixed onCompeltes, but IMHO, both of those feel messy, especially when the timeline is being reused across multiple classes. Would be nice to see maybe an appendFunctionCall() or something.

 

My biggest benefit here is the onComplete at the end of an entire timeline, where I can clean up, re-enable things that are interactive, bitmap cache, etc. Really simplifies my animation management!

 

Just my $0.02 - cheers on a fabulous free product!

[Carl]

glad you got things worked out.

 

TimelineMax has addCallback() which does exactly what you describe:

 

http://www.greensock.com/as/docs/tween/ ... dCallback()

 

to insert a function call at the current position of the timeline just do:

 

tl.addCallback(someFunction, tl.duration);