Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kariannking

Transitions with TimelineMax?

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

oh, just noticed

 

function timelineComplete():void {

transitionMe.alpha = 0;

timelineTransition.clear();

}

 

i don't think you want that in there.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Thank you!

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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

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