Here is an example of the first Bullet-Proof TimlineMax Page Transition. This technique allows you to jump directly to the beginning animation of any section/page you are introducing from any point in the timeline. This is the leanest and meanest of the three techniques I will be discussing. The video inside gives a thorough run down of the timeline animations we will be using in the other techinques. You don’t want to skip this one.
Watch the Video: File Setup and Jump to Section Explained
For an overview of all 3 techniques I will be covering please watch: Bullet-Proof TimelineMax Transitions Overview
File Basics
Each section’s artwork is contained in its own container clip: home_mc, blog_mc, portfolio_mc, and about_mc. Each movie clip lives on its own layer. This keeps your file very neat and easy to manage.
Each section in the timeline has specific labels marking where the animation starts and ends
//start the build of home
tl.addLabel("home_in", tl.duration);
tl.append(TweenMax.to(home_mc, 0, {alpha:1, immediateRender:false, onStart:setSection, onStartParams:["home"]}));
tl.appendMultiple(TweenMax.allFrom([home_mc.welcome_mc,
home_mc.to_mc,
home_mc.snorkltv_mc
],
.8, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, .4));
tl.append(TweenMax.from(home_mc.makeAwesome_mc, .5, {x:"-100", alpha:0}));
//this marks the end of the build sequence
tl.addLabel("home_complete", tl.duration);
//tweens that go between this section's _complete and the next section's _in dictate the animate out sequence for future techniques
tl.append(TweenMax.to(home_mc, .5, {alpha:0}));
tl.addLabel("blog_in", tl.duration);
//add rest of blog transitions...
The Meat
To introduce the home section we will ask the timeline to tween from home_in to home_complete like so:
tl.tweenFromTo("home_in", "home_complete");
Regardless of what the numbskull in the video was saying, it is imperative that we use TimelineMax.
TimelineLite does not have the tweenFromTo or TweenTo methods!
Being that we want to dynamically jump to various sections based on what buttons we pressed, the actual code will look like this:
//give each button a unique ID
nav_mc.navHome_mc.ID = "home";
nav_mc.navBlog_mc.ID = "blog";
nav_mc.navPortfolio_mc.ID = "portfolio";
nav_mc.navAbout_mc.ID = "about";
function navClick(e:MouseEvent):void
{
//set targetSection based on the ID of the button you clicked
targetSection = e.target.ID;
//check to see that the button you clicked isn't the button of the currentSection you are in
if (targetSection != currentSection)
{
//create a dynamic tweenFromTo
tl.tweenFromTo(targetSection + "_in", targetSection + "_complete");
//update currentSection
currentSection = targetSection;
}
}
Jump To Benefit
The main advantage of this Jump to Section technique is that its lean, mean and fast. No waiting between sections.
Stay Tuned
If you want to see how we can reverse-out a section build before going to the next section and/or play a unique out sequence you’ll want to see:
#2 Reverse Out Technique
Animation build sequence always plays backwards before going to next section. Reverse Out now live.
#3 Reverse Out with Custom Forward Out Technique
If a section is building, it will reverse out quickly before going to next section. If the section is fully complete a custom out animation will play. Watch Reverse Out with Custom Forward Out
Both these techniques can be viewed on the Overview/Teaser page: Bullet-Proof TimelineMax Transitions Overview
Download Flash CS4 Source
Investigate these files and feel free to alter the animations. Understanding the basic file setup will really help as we get into more intricate in/out transitions
SNORKLtv-jumpToSection 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.
