Here we go, the last technique in my Bullet-Proof TimelineMax Transitions series. This technique allows you to have a unique animate out sequence for each section as well as do the reverse from the previous technique. Notice in the swf above that if you click to go to a new section there are 2 possible transitions: If the current section is fully resolved then a custom out animation will play. If the current section is still building then it will reverse out quickly. Take a look inside to see how its done.
Watch the Video
Background
Make sure you have watched the previous tutorials in this series:
Bullet-Proof Transitions: Teaser / Introduction
#1 Jump to Section
#2 Reverse Out
#3 Reverse Out with Custom Out : You are Here:)
Visualization of Label Analysis
Unlike the other two techniques where there was only one course of action when a transition took place, here we have 2 options. The way we decide whether to play forward or reverse is based on where the playhead is when a new section is requested. We do this by analyzing the next frame label in our timeline. As in the videos I use a Flash IDE timeline as a reference:
Reverse current section build if it is still animating in
Play unique forward-out animation if the current section’s in animation is complete
How to Analyze the Next Label with AS3 Code
In order to figure out if the next label is a section_in, we will use TimelineMax’s getLabelAfter() method. This method has 2 uses:
1) Get the next label after the playhead : someTimeline.getLabelAfter()
2) Get the next label after some point in time: someTimeline.getLabelAfter(someTime or someLabel)
In either case getLabelAfter() returns a string value representing the next label. In my file that label will either contain “_in” or “_complete”. such as:
home_in
home_complete
blog_in
blog_complete
portfolio_in
…
We are going to test to see if the next label is someSection_in.
AS3 Code to Detect Which Way to Go
if (tl.getLabelAfter().indexOf("_in") != -1) {
//label contains "_in" so playhead is at "someSection_complete"
trace("go forward");
tl.tweenTo(tl.getLabelAfter(), {onComplete:introduceTargetSection});
}
else {
//label does not contain _in (playhead is between _in and _complete);
trace("go back");
tl.timeScale = 3;
tl.tweenTo(currentSection + "_in", {onComplete:introduceTargetSection});
}
Download Flash CS4 Source Files
THANKS!
Thanks everyone for all the feedback on this series in the comments and on facebook and twitter. So glad to hear you are enjoying it.
I’ve had a lot of fun working on these videos. Don’t hesitate to ask questions if you need more clarity on anything.
Carl
