Problem synching tweens in different timelines

[bosonandtennille]

I've got two sprites of identical size, both the full dimensions of the stage. I want the first to exit the stage with the same tween as the second one enters the stage with no visual gap between them.

 

The following code creates two simple sprites and creates for each an identical three tween timeline. The first tween brings the sprite on, the second pauses for a few seconds and does nothing, then the third sends the sprite off and restarts the timeline of the other sprite. This loops. The problem is that there is a varying visual gap between the the sprites as one tweens off and the next tweens on.

 

You can paste this example code into a new empty flash movie and watch it:

 

import com.greensock.*;
import com.greensock.easing.*;

// Just create 2 colored rect sprites the size of the stage and position them off the top of the stage
var a1s = createShape(0x000077, stage.stageWidth, stage.stageHeight);
var a2s = createShape(0x003300, stage.stageWidth, stage.stageHeight);
var a1 = new Sprite(); a1.addChild(a1s); 
var a2 = new Sprite(); a2.addChild(a2s);
a1.y = stage.stageHeight * -1;
a2.y = stage.stageHeight * -1;
addChild(a1);
addChild(a2);

// Now create two timelines to drop them down with a bounce in sequence with a 4 second pause between
// the end of the pause phase for each restarts the timeline of the other
var t1 = new TimelineLite({paused:true});
var t2 = new TimelineLite({paused:true});

t1.append(new TweenLite(a1,2,{ y:0, ease:Bounce.easeOut}));
t1.append(new TweenLite(a1,4,{  }));
t1.append(new TweenLite(a1,2,{onStart:function() { t2.currentProgress=0; },y:stage.stageHeight, ease:Bounce.easeOut}));

t2.append(new TweenLite(a2,2,{ y:0, ease:Bounce.easeOut }));
t2.append(new TweenLite(a2,4,{  }));
t2.append(new TweenLite(a2,2,{onStart:function() { t1.currentProgress=0; },y:stage.stageHeight, ease:Bounce.easeOut}))
t2.gotoAndPlay(t2.duration);
t1.gotoAndPlay(0);



function createShape( color: int, w: int, h: int ): Shape
{
var shape: Shape = new Shape();
shape.graphics.beginFill( color );
shape.graphics.drawRect( 0, 0, w, h );
shape.graphics.endFill();
return shape;
}

[GreenSock]

Nope, it's not a bug but I can see why it might seem a little confusing. Let me take a stab at explaining it in a succinct way. A tween's onStart gets called the first time it renders at a non-zero time (the first time change occurs). So in your case, the first time the y property changes in the a1 tween, you set the other t2 timeline's progress to 0, starting it over. That means when the a1 tween changes its values for the first time, t1's tweens get set to their starting point (no change yet). So on the next render, the a1 tween is on its second render, but the t1 is on its first. That's why there appears to be a gap between them.

 

I think you could simplify your tweening code a bit like this:

 

TweenLite.to(a1, 2, {y:0, ease:Bounce.easeOut});
var t1:TimelineMax = new TimelineMax({delay:4, repeat:-1, repeatDelay:2});
t1.appendMultiple([new TweenLite(a1, 2, {y:stage.stageHeight, ease:Bounce.easeOut}),
			   new TweenLite(a2, 2, {y:0, ease:Bounce.easeOut})]);
t1.appendMultiple([TweenMax.fromTo(a1, 2, {y:-stage.stageHeight}, {y:0, ease:Bounce.easeOut}),
			   new TweenLite(a2, 2, {y:stage.stageHeight, ease:Bounce.easeOut})], 2);

 

Hope that helps.

[bosonandtennille]

Ahh, that explains it, thank you!

 

My timelines are separate because this code is a simplified version of a system where each sprite needs a unique timeline. In addition the empty tween I've inserted between the arrive and depart tweens won't always be empty in the actual application. So sadly I can't use your simplification.

 

So is there a way to handle this with two independent timelines so I can start a tween in one at the same time a tween starts in the other? I tried using an oncomplete in the previous tween instead but that seemed to have the same behavior.

[GreenSock]

How about just using timeline2.gotoAndPlay(timeline1.currentTime)? Or if you need to offset it by a certain number of seconds, do that like timleine2.gotoAndPlay(timeline1.currentTime + 2) (or whatever).

 

Or just put them into a parent timeline that has them spaced the appropriate amount. Lots of options

[bosonandtennille]

How about just using timeline2.gotoAndPlay(timeline1.currentTime)?

 

Because I'm trying to synch a single tween from one timeline with a single tween in a different temporal position on another timeline.

 

I guess that's really the core question: is there a way for a tween to start another tween in a different timeline (or no timeline) at the same time it is starting itself? I sort of assumed that's what onStart() was especially good for.

 

Or if you need to offset it by a certain number of seconds, do that like timleine2.gotoAndPlay(timeline1.currentTime + 2) (or whatever).

 

I'll try this for proof of concept. It's not great because the relationship of the other tween isn't always the same from situation to situation and I need a general, perhaps label based solution. gotoAndPlay(label) had the same problem of not starting at the same time.

 

Or just put them into a parent timeline that has them spaced the appropriate amount.

 

Sadly they play programatically in ways that change based on user interaction so this won't work.

[GreenSock]

Well hopefully my explanation of the logic in the code will help you understand how to structure your code logic. Basically since onStart gets called when the tween/timeline is actually starting (meaning there is some change value), its currentTime at that moment will be something other than zero (could be 0.05 or whatever, depending on the frame rate, the machine's performance, etc.) and you can just use that value in your calculations. Shouldn't be too hard and you can make it dynamic in the onStart function if you want, like:

 

var myTimeline:TimelineMax = new TimelineMax({onStart:myFunction});
myTimeline.vars.onStartParams = [myTimeline, myOtherTimeline, 2];
function myFunction(timeline1:TimelineMax, timeline2:TimelineMax, offset:Number):void {
   timeline2.gotoAndPlay(timeline1.currentTime + offset);
}

 

Just a thought.

[bosonandtennille]

My timelines have labels at the key points so I was thinking of doing something like (pseudocaode):

 

timeCorrection = myTimeLine.currentTime - myTimeLine.timeOfLastLabelPassed()

 

And using timeCorrection to offset the second timeline like this (pseudocode):

 

idealStartTime = otherTimeLine.labelTime('startlabel');
otherTimeLine.gotoAndPlay(idealStartTime + timeCorrection);

 

But since the only label to time function I could find was getting the array of all labels with their times I decided to use a less reusable technique where I cache the idealStartTime when I'm originally constructing the timelines and later calculating the correction based on that. It works but it's not as elegant as I would like.

 

It might be interesting to think about what functions would look like that would make this kind of arbitrary inter-timeline tween synching easier. Or maybe I'm the only one doing this.

[GreenSock]

But since the only label to time function I could find was getting the array of all labels with their times

 

The timeline classes have a getLabelTime() method that allows you to get the time associated with a specific label. Is that what you're looking for? I'm not aware of a function that gets an Array of all labels with their times.

 

Also, TimelineMax has a "currentLabel" property as well as getLabelBefore() and getLabelAfter() methods that should give you a lot of flexibility. Did you see those? You're aware of the docs at http://www.greensock.com/as/docs/tween/, right? Just making sure.

[bosonandtennille]

Somehow I missed a couple of those. So, assuming I had labels at the beginnings of the tweens I want to synch I could do something like:

 

timeOffset = timeLine1.currentTime - timeLine1.getLabelTime(myTimeLine.currentLabel);
timeLine2.gotoAndPlay(timeLine2.getLabelTime(labelToSynchWith) + timeOffset);

[GreenSock]

Looks about right to me, although it's always best to test it in your specific scenario. Let us know if you run into any trouble.