Jump to content
Search Community

Any way to play timeline TO a label?

cerulean test
Moderator Tag

Recommended Posts

Let's say I have many nested timelines.

 

First, in the root timeline can I reference a label in one of the child timelines?

 

Second, if I pause the root timeline, all the little kid timelines also stop mid-stride?

 

If both above are yes: is there a way to play TO that label and stop? That is, not jump to it, but continue playing from my paused state, up to it and stop?

 

Thanks

Link to comment
Share on other sites

Let's say I have many nested timelines.

 

I have many nested timelines

 

First, in the root timeline can I reference a label in one of the child timelines?

not directly, but using getChildren() and getLabelTime() you can make it work.

 

Second, if I pause the root timeline, all the little kid timelines also stop mid-stride?

 

yes

 

If both above are yes: is there a way to play TO that label and stop? That is, not jump to it, but continue playing from my paused state, up to it and stop?

 

use getChildren to find the child timeline that contains the label you want to tween to.

use getLabelTime() to find the time that the label occurs in the child timeline.

add the previous time to the time that the child timeline starts in the root timeline.

the use parentTimeline.tweenTo(theTimeYouJustCalculated)

 

so if cow timeline is added to the farm timeline at 3 seconds and cow has a moo label at 2 seconds... moo will happen at 5 seconds in the farm timeline.

 

attached is an example.

there are 4 timelines that have a frame label "middle" in them.

each timeline is added to a master timeline

the master timeline will play (making all 4 timelines play in sequence)

pressing the button will make the master timeline go to the point in time that the second timeline's "middle" frame occurs.

 

this is fairly complex, please read up on getChildren() and getLabelTime()

 

there may be other ways, feel free to experiement. this is just one possible way.

Link to comment
Share on other sites

  • 9 months later...

These forums are very helpful - why don't the attachments don't stick around very long?

Carl, if you have this one, could you repost it?

Thanks.

 

Edit: I see the 'tweenTo' is the answer. But it would be nice if the attachments hung around longer...

Edit 2: Even better: tweenFromTo

Link to comment
Share on other sites

I have another 2 cents to add to this thread.

I found 'tweenTo' and 'tweenFromTo' incredibly helpful in a recent project.

It took a bit to figure out how to control them for my purposes, so I'd here's what I learned.

 

Per the manual, these methods create an instance of TweenLite. What threw me at first was that when a 'tweenFromTo' was playing, my buttons which controlled the main timeline didn't work! After realizing that it probably wasn't a bug in the code, and resisting the temptation to post for help under the pressure of a tight deadline, I discovered that to control the 'tweenFromTo', it must be assigned to a var, as Jack points out above.

 

Example:

//Create Timeline:
var tl = new TimelineMax({});
tl
.to (mc, 4,  {x:'+=250'} )
.append('stop1')
.to (mc, 1, {y:333});

//Create TweenLite to hold the fromTo:
var fromTo:TweenLite;

// fromTo can be assigned and reassigned just like any other var:
function changeFromTo(e:MouseEvent):void
{
fromTo = tl.tweenFromTo(tl.duration(),1,{paused:true});// Reassign the fromTo (reverse a section)
};

//However, while the fromTo playing, controlling tl does nothing:
tl.pause();// Fails
// We can stop fromTo via its var:
fromTo.pause();
// At this point controlling either fromTo or tl will work.

// To get more comprehensive control, we can pause both fromTo and tl (and the rest of our 'tweenTo' timeline segments with our pause function*:
function pauseMe (e:MouseEvent)
{
tl.pause();
fromTo.pause();
};

However there is a caveat. If fromTo is declared with no value as above, and none has been assigned when pauseMe is invoked, Flash will throw a null object error. Declaring it with a value will get you off and running:

var fromTo:TweenLite = tl.tweenFromTo('stop1',tl.duration(),{paused:true});// Could use a dummy timeline if need be.

Link to comment
Share on other sites

Thanks for the followup.

I've been a bit uncertain about the kill function.

I tested the code you suggested. I see that a 'killed' tween can be restarted, so killTweenOf() appears to be a pause() - is that correct?

A couple other questions:

1)

When I execute:

TweenLite.killTweensOf(tl)

it stops the 'tweenTo()' tweens, but not the .to() tweens. Why is that?

2)

Based on the way it's declared in my example, I would've thought that tl would be a tween of fromTo...

Link to comment
Share on other sites

No, killTweensOf() doesn't just pause tweens - it kills them.

 

And the killTweensOf() method will kill all the tweens that have that particular object AS THEIR TARGET. That is very different than killing any tweens inside that target (assuming it's a timeline). I think you were mixing the two in your head :)

 

For example, let's say I have this setup:

 

var tl = new TimelineLite({paused:true});
tl.to(mc1, 1, {x:100});
tl.to(mc2, 1, {y:200});

TweenLite.to(tl, 2, {time:2}); 

 

Notice that the timeline contains tweens of mc1 and mc2. Then I create a tween that actually uses the TimelineLite itself as its target, tweening its "time" property/method. So we've got 3 tweens with 3 totally different targets involved.

 

If I TweenLite.killTweensOf(mc1), it'll search through the existing tweens and kill any that target mc1 (our first tween in this example). If I TweenLite.killTweensOf(tl), it will look for any tweens whose target is that TimelineLite (the last tween in our example). That TimelineLite instance is the thing being tweened. However, it will not also kill all the tweens inside that TimelineLite instance. That's a totally different concept altogether. See what I mean?

 

Imagine tweening a the position of a MovieClip that has 100 child MovieClips all animating also. Killing the positional tween of that MovieClip shouldn't also reach into that MovieClip and destroy all the animations therein. Same concept here.

 

Make more sense?

 

I didn't understand your question #2 - could you restate it in a different way?

Link to comment
Share on other sites

Well I totally missed the boat on understanding how kill works.

However, in my example, I have tl with one tween, and fromTo which is a tween.fromTo of tl.

When I execute:

TweenLite.killTweensOf(tl);

fromTo stops dead in its tracks, but if I then execute

fromTo.restart():

or

fromTo.seek(0);

fromTo.play?

 

those commands still work. So unless I have an error in my setup, kill() doesn't eliminate the fromTo, which is why I assumed it was a pause().

 

2nd question is irrelevant as it was based on my misunderstanding of what killTweensOf() targets.

Link to comment
Share on other sites

I'm smiling because this is actually a "problem" that is the result of me putting a bunch of extra effort into making the system as flexible as possible. Yes, it is possible to resurrect a tween/timeline after it was killed by manually restarting it or calling some method on the instance itself (which means you must have kept a reference to it yourself, thus preventing gc). I did that for cases where maybe something gets killed that you want to reuse for some reason. In other words, it's a feature, not a bug :) I'm curious what behavior you'd prefer - would you rather things break if you try to manually restart() a killed tween/timeline? Would throwing errors be better?

 

My recommendation would be to write your code such that you don't try calling methods on a killed tween/timeline (maybe null your variable?). Currently, it seems like your code is functionally equivalent to doing something like myLoader.unload(); myLoader.play() or BitmapData.dispose(); BitmapData.draw(...). See what I mean?

Link to comment
Share on other sites

Yes, I see what you're saying. I had stored the fromTo in a var at the root of the MC.

I also see that when you reach a certain level of complexity, there are many choices on how to handle things, the implications of which will be beneficial in some circumstances, detrimental in others.

 

As for which way I think it should work, I'd rather have the error so I learn the correct way to kill(), pause(), stop(), rewind(), etc. If we hadn't had this discussion, I would have (understandably) assumed that kill() worked the same as pause(), because that's how it worked in my testing. If I had observed that sometimes it deletes a tween and other times it pauses it, I'd have been hard pressed to figure out which circumstances caused which behavior.

 

I'm new to your software, so I'm just testing out how things work to learn how to use it - its very helpful to know what's going on under the hood.

I keep libraries of code, notes, and test files so when I come back to this in XX months, I can pick up where I left off.

 

I consider your recommendation a 'best practice'.

 

Thanks much.

Link to comment
Share on other sites

Indeed, file it under "best practice" :)

 

It is a difficult line to walk sometimes in terms of providing solid, detailed documentation without overwhelming people with every little intricacy. We probably haven't hit the balance just right yet.

 

Anyway, I like your approach of keeping notes and test files with various libraries you play with so that when you return to them after a few months, you can get right back up to speed quickly. Hopefully the docs will supplement your efforts nicely too.

 

I think that once you spend some time getting used to how things work, you'll really like what you can accomplish. My hope is that it ends up feeling very intuitive and flexible.

 

Happy tweening!

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...