Jump to content
Search Community

TimelineLite tween from problem

40lb Suit of Bees test
Moderator Tag

Recommended Posts

This may or may not be a bug. However, when using the following code with ".from" the sequencing breaks (everything happens at once and myTimeline.stop() doesn't work...

 

import com.greensock.*;

//create the timeline
var myTimeline:TimelineLite = new TimelineLite();

myTimeline.insert(new TweenLite.from(square1, .5, {_x:-50}), 0);
myTimeline.insert(new TweenLite.from(square2, .5, {_x:-50}), 2);
myTimeline.insert(new TweenLite.from(square3, .5, {_x:-50}), 4);

//stop the timeline
myTimeline.stop();

 

However, using runBackwards:true works, but the objects properties aren't set until the delay time is reached ...

import com.greensock.*;

//create the timeline
var myTimeline:TimelineLite = new TimelineLite();

myTimeline.insert(new TweenLite(square1, .5, {_x:-50, runBackwards:true}), 0);
myTimeline.insert(new TweenLite(square2, .5, {_x:-50, runBackwards:true}), 2);
myTimeline.insert(new TweenLite(square3, .5, {_x:-50, runBackwards:true}), 4);

//stop the timeline
//myTimeline.stop();

 

Again, not sure if that's a bug or I'm just misunderstanding how to and from work.

 

THanks again

Link to comment
Share on other sites

Yep, it's not a bug. Let me explain:

 

1) Your first block of code was malformed because you used "new TweenLite.from(...)". You can either do "new TweenLite(...)" or "TweenLite.from(...)", but you can't mix them. That's just how static methods work. "new" is only for use with the constructor.

 

2) By default, from() tweens will render the values immediately which is what most users want. Imagine a bunch of MovieClips on the stage and you animate them from() above and fade them in - you'd want them to immediately render in their faded out, higher position and then animate in after any delay. You can control this behavior with the "immediateRender" special property (set it to either true or false). TweenLite.from() will automatically set immediateRender to true unless you specify it as false.

 

Make more sense now?

Link to comment
Share on other sites

Awesome! That makes sense.

 

Well, I have another one for you. In the code below. If I invoke the myTimeline.stop() method, then the myTimeline.gotoAndPlay() method, it doesn't resume playing the timeline again. However, if I invoke an extra myTimeline.play() method before the gotoAndPlay method it works.

import com.greensock.*;

//create the timeline
var myTimeline:TimelineLite = new TimelineLite();

myTimeline.insert(TweenLite.from(square1, .5, {_x:-50}), 0);
myTimeline.insert(TweenLite.from(square2, .5, {_x:-50}), 2);
myTimeline.insert(TweenLite.from(square3, .5, {_x:-50}), 4);

// With stop and gotoAndPlay (breaks)
button1.onRollOver = function()
{
myTimeline.stop();
myTimeline.gotoAndPlay(0);
}

// With stop, play and gotoAndPlay (works)
button2.onRollOver = function()
{
myTimeline.stop();
myTimeline.play();
myTimeline.gotoAndPlay(2);
}

button3.onRollOver = function()
{
myTimeline.gotoAndPlay(4);
}

 

And, is it possible to add a stop() action into the timeline at a certain time, the same way you can add labels?

 

Thanks again for your help.

Link to comment
Share on other sites

Wow, that was weird - definitely looks like a bug in Flash. There was a play() call inside gotoAndPlay() that wouldn't resolve unless I added "this." to it, this.play() even though that should be implied! Anyway, I just posted a fix. Thanks for letting me know about the issue.

 

As for adding a stop() action, you have several options:

 

1) Use TimelineMax's addCallback() to add a callback which calls stop() at a particular time on the timeline.

 

2) Manually add a zero-duration TweenLite with immediateRender:false and overwrite:false to the timeline with an onComplete - that's the same as using TimelineMax's addCallback() but less convenient.

 

3) Use TimelineMax's tweenTo() method if you want to just go from wherever the timeline is to a particular point and stop.

Link to comment
Share on other sites

Thanks for the feedback. The gotoAndPlay() method is working. I decided on option 2 for the stop() action because of file size. Anyway, everything is working great. I definitely think the TimelineLite approach is an improvement over TweenGroup.

 

One more thing I noticed. If I put a 0 duration time in the onComplete is only called once, or not at all. But if I put a 0.1 duration in then it is always called...

import com.greensock.*;

//create the timeline
var myTimeline:TimelineLite = new TimelineLite();

var count:Number = 0;

myTimeline.insert(TweenLite.from(square1, .5, {_x:-50}), 0);
myTimeline.insert(TweenLite.to(null, 0, {immediateRender:false, onComplete:traceMessage}, 0), 2);
myTimeline.insert(TweenLite.from(square2, .5, {_x:-50}), 2);
myTimeline.insert(TweenLite.from(square3, .5, {_x:-50}), 4);

function traceMessage()
{
trace("message traced "+count++);
}

button1.onRollOver = function()
{
myTimeline.stop();
myTimeline.gotoAndPlay(0);
}

button2.onRollOver = function()
{
myTimeline.stop();
myTimeline.gotoAndPlay(2);
}

button3.onRollOver = function()
{
myTimeline.gotoAndPlay(4);
}

Link to comment
Share on other sites

That's actually not a bug. By default, gotoAndPlay() and gotoAndStop() suppress events as the virtual playhead is "picked up" and placed at the new position. Otherwise, all the onComplete/onUpdate/onStart events of tweens/timeline that would normally occur between the old time and the new time would get triggered. You put your zero-duration tween at exactly 2 seconds. When you gotoAndPlay(2), it suppresses events, picks up the playhead, moves it there, and starts to play. Since your onComplete was one of the events that would have normally been called, it gets suppressed. If you wish to allow the events to get called, just pass the extra parameter, like myTimeline.gotoAndPlay(2, false). Basically, events get called when a frame is entered, not exited. Otherwise some funky stuff would happen, like when a TimelineMax yoyos, a callback that's at the very end would get called twice.

 

Make more sense now?

 

You could also do gotoAndPlay(1.999) if you want to make sure that onComplete gets called at 2 seconds. Or have a duration of 0.1 or whatever like you tried already.

 

Glad to hear you're diggin' TimelineLite and TimelineMax. They're WAY better than TweenGroup. So much more flexibility and convenience. Plus they're less kb!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...