This Bullet-Proof TimelineMax Transition which I call the Reverse Out, tells the current section’s build sequence to play quickly in reverse before introducing the next section. Click a few buttons in the swf above to get the idea. To learn more jump on in.
Watch the video
If this is your first time jumping into this series I strongly suggest you watch the previous videos:
Other Bullet-Proof TimelineMax Transitions
Bullet-Proof Transitions: Teaser / Introduction
#1 Jump to Section
#2 Reverse Out : You are here:)
#3 Reverse Out with Custom Forward Out
How does this work?
This video is a direct continuation of Jump to Section. In that example we were able to directly set our currentSection variable appropriately because currentSection became targetSection as soon as any button was clicked. We didn’t care much about where we were… only where we were going.
In order to Reverse Out, it is imperative that our app always knows what section we are in. In order to really bullet-proof our app we want it to stand up even if the animation is playing all the way through without any user interaction. To do this, we trigger a function called setSection every time a new section starts to build.
Adding onSart and onStartParams
By using the onStart callback, we can trigger a function when any tween in our timeline begins. We can also pass in an array of parameters for that function with the onStartParams special property. To notify our app that our timeline has started the about section we would do the following:
tl.addLabel("about_in", tl.duration);
//this is the pertinent line. note onStart and onStartParams special properties.
tl.append(TweenMax.to(about_mc, 0, {alpha:1, immediateRender:false, onStart:setSection, onStartParams:["about"]}));
tl.append(TweenMax.from(about_mc.about_mc, .5, {x:"100", alpha:0}));
tl.append(TweenMax.from(about_mc.aboutCopy_mc, .5, {x:"-50", alpha:0}), -.25);
//this function will be called when each build starts
function setSection(section) {
currentSection=section;
trace("setSection to " + currentSection);
}
You will need to define onStart and onStartParams for each section of your timeline.
Update the navClick function
The navClick() function will behave a bit differently then in Jump To Section as it needs to:
-rewind the current section
-call a function called introduceTargetSection after the rewind takes place
function navClick(e:MouseEvent):void{
trace(e.target.ID);
targetSection = e.target.ID;
if(targetSection != currentSection){
//speed up the timeline (long transitions get boring);
tl.timeScale = 2;
//we know what section we are in so let's rewind to it's _in label
//when that tween is complete we will go to the requested/target section
tl.tweenTo(currentSection + "_in", {onComplete:introduceTargetSection});
}
}
Introduce targetSection
function introduceTargetSection(){
//bring timeScale back to normal
tl.timeScale = 1;
//tween from target section's "_in" label to "_complete"
tl.tweenFromTo(targetSection + "_in", targetSection + "_complete");
}
Benefit of Reverse Out
You get a really cool section-out animation without doing any extra work;) I strongly believe it is important that this out sequence goes fast. You don’t want people waiting too long to get to where they want to go. Experiment with different timeScale values.
Coming Soon
#3 Reverse Out with Custom Out Technique
This transition will reverse out if you request a new section while a section is building. If the section is fully complete a custom out animation will play.
To get a quick look at all the techniques go to Bullet-Proof TimelineMax Transitions Overview
Download Flash CS4 Source
Investigate these files and feel free to alter the animations.
SNORKLtv_reverseOut Flash CS4
More Resources
Check out my other TimelineMax Tutorials on Snorkl.tv.
Learn more about TimelineMax/Lite from GreenSock.
Read the Official TimelineMax Documentation to see all the cool stuff it is capable of.
