Transitions with TimelineMax?

[Guest kariannking]

I have a quiz flash game I'm working on.

 

I want to use TimelineMax to help transition to the next question. This works perfectly the first time I click my button.. but the second time, my onRepeat works, but the movieclip doesn't tween. Then on the third click, nothing works at all. (You can view the swf here: http://www.royalsong.net/wcc/timelineTransition.html)

 

Here's just the actionscript involved in the transition (and you can download the .fla at http://www.royalsong.net/wcc/timelineTransition.fla that has the full actionscript of a simplified version of what I'm trying to do. The actual project is much bigger.)

 

var timelineTransition:TimelineMax = new TimelineMax({repeat:1, yoyo:true, onRepeat:timelineRepeat, onComplete:timelineComplete});
timelineTransition.append( TweenMax.to(transitionMe, .8, {width:989, height:989, ease:Linear.easeNone}) );
timelineTransition.pause();

goNext.addEventListener(MouseEvent.MOUSE_DOWN, gotoNextFunction);

function gotoNextFunction(e:MouseEvent):void {
goNext.alpha = 0; 					// This gets reversed in a different function not displayed here on greensock
goNext.mouseEnabled = false; 	// This gets reversed in a different function not displayed here on greensock
transitionMe.alpha = 1;
timelineTransition.play();
i++
}

function timelineRepeat():void {
arrayString[i](); 				// this array is full of functions that change the question and multiple answers
questionFeedback.text = "";
}

function timelineComplete():void {
transitionMe.alpha = 0;
timelineTransition.clear();
}

 

Pretty sure this is just me not knowing what I'm doing with timeline max.

[Carl]

hello,

 

thanks for the clear question and sample. I couldn't open your fla. upload a cs4 version and I will give it a peak.

 

Carl

[Carl]

oh, just noticed

 

function timelineComplete():void {

transitionMe.alpha = 0;

timelineTransition.clear();

}

 

i don't think you want that in there.

[Guest kariannking]

oh, just noticed

 

function timelineComplete():void {

transitionMe.alpha = 0;

timelineTransition.clear();

}

 

i don't think you want that in there.

 

If that's not in there, then it doesn't go at all after the first run.

 

Here's a CS4 version of the file: http://www.royalsong.net/wcc/timelineTransitionCS4.fla

[Carl]

you really had me thinking here. the problem was a bit in our understanding of how onRepeat works.

 

onRepeat fires when the timeline rewinds for the first part of the yoyo AND it also fires immediately after the timeline is told to play when the next question comes in. or atleast that's what my traces were telling me. I semi-fixed the file by getting rid of the clear() and using timeline.restart() instead of timeline.play(). The problem though was on playing the timeline the second time... the onRepeat would fire immediately when it started playing SO the question would change before the blue thing covered it up. If that is confusing, don't worry. I found a good fix.

 

to minimize those onRepeats from firing I broke you timeline into 2 tweens

 

replace the following code in your file

 

var timelineTransition:TimelineMax = new TimelineMax({paused:true, onComplete:timelineComplete});

// changed your values of 989 to 500 so I could see the questions change and I slowed it down.
//the first tween moves the blue thing on screen and when its done it switches the question
timelineTransition.append(TweenMax.to(transitionMe, 2, {width:500, height:500, ease:Linear.easeNone, onComplete:timelineRepeat}));
//the second tween brings the blue thing back to where it started
timelineTransition.append(TweenMax.to(transitionMe, 2, {width:31.5, height:31.5, ease:Linear.easeNone}));


goNext.addEventListener(MouseEvent.MOUSE_DOWN, gotoNextFunction);

function gotoNextFunction(e:MouseEvent):void {
goNext.alpha = 0;
goNext.mouseEnabled = false;
transitionMe.alpha = 1;

trace(timelineTransition.currentProgress + " / " + timelineTransition.duration);

//restart() forces the timeline to play from the beginning
timelineTransition.restart();


i++
}

function timelineRepeat():void {
trace("repeat");
arrayString[i]();
questionFeedback.text = "";
}



function timelineComplete():void {
transitionMe.alpha = 0;
//timelineTransition.clear();
trace("complete! my progress is" + timelineTransition.currentProgress);
trace("***\n")
}

 

 

let me know how it works out.

I know this helped me understand onRepeat better.

 

Carl

[Guest kariannking]

Whoa, I didn't know you could have an onComplete in a tween. The solves the problem.

 

Thank you!

[GreenSock]

There was actually a problem in TweenMax and TimelineMax that would cause the onRepeat to get called if you restarted it after the tween/timeline had completed one of its cycles (it would only happen if you went to exactly the beginning - even gotoAndPlay(0.0000001) would work fine). It is fixed in the latest version - my apologies for the hassle/confusion. http://www.greensock.com/timelinemax/

[Carl]

thank you! i downloaded the new files and onRepeat does not fire when the timeline is restarted.