Advertisement
  1. Code
  2. Web Design
Code

Build a Slider Microsite with GreenSock's Timeline Lite

by
Difficulty:IntermediateLanguages:
This post is part of a series called GreenSock Tweening Platform.
Build a Brilliant Binary Clock with Flash
Interview with Jack Doyle, Founder of GreenSock

During the this tutorial I'm going to take you through building a simple slider that will scroll a personal microsite. We'll use the GreenSock Timeline Lite class and demonstrate just how straight-forward it can make your Flash animation workflow.


Final Result Preview

Let's take a look at the final result we will be working towards:


Introduction

From time to time, changes happen in our lives, changes that force us re-think the way we act. This is especially true in our community, where we are faced daily with changes that question the way we build what we build.

Some of these changes are for the worst, like loosing .php webservice support in Flash ide, but most of them are for the better, like optimizing tips. Once in a while someone makes a class that revolutionizes the way we think about Flash.

Like Papervision3d was for 3d, or box2d for physics, there is now Timeline for animation. This simple package will ultimately change the way you structure ActionScript animation, making it possible to create an infinite amount of virtual timelines, completely dynamically, giving you full control of your animation. If it doesn't, you can just add whatever feature you need as a plugin.


Step 1: Where to Get it

This is the most difficult part of the whole tutorial..

Just go to http://blog.greensock.com/timelinemax and download a copy of the GreenSock tweening platform for AS3. It's a zip file, save it to your hard drive, export all of it to a folder and copy the "com" folder to the root of where you plan to use the class. The whole lot is very well documented (as you can see in the docs folder) and you even have an ease visualizer.


Step 2: Files Needed

Besides the com folder I created a Main.as to serve as a document class and a TimelineMicrosite.fla for UI drawing. I also copied badge-made-with-tweenmax-108x54.gif from the badges folder that came in the zip file we downloaded earlier.


Step 3: Structure

I'm not going to focus on how to create a user interface, as this is completely up to you. I will, however, give you the guidelines I followed to make this microsite.

Begin by creating five layers and name them: background, slides, navigation, player and footer.


Step 4: Background and Slides

The background layer contains a simple gradient, nothing else. The slides layer contains several movieclips. Each movieclip is an area of the microsite. In this case they are home_mc, about_mc, works_mc and contacts_mc. Each one of them has nested movieclips with instance names.


Step 5: Navigation, Player and Footer

The navigation layer has a navigation_mc movieclip, inside of which there is a selection_mc. Its structure is as shown in the image below.

The footer is just an import of the tweenmax badge. Here's the full tree:


Step 6: Document Class

You all know how this is done right? In case you've forgotten here's the skeleton for a Main document class:


Step 7: Importing

If you are using fdt, flash builder, eclipse with flex sdk or flash develop, you probably import these automatically, but if you are using the Flash ide to code, then besides my sympathy you will also need to import:


Step 8: Main Function

You want your main class function to setup the scene for you.


Step 9: Slides Variables

We will be working with these variables:


Step 10: Setting up the Slides

The core of the microsite. I use 3 basic functions of this engine, but first imagine the timeline as if it was a real timeline.

  1. The first function is insert(), this inserts a tween in the current frame, meaning that every time you insert() you will be adding a tween to the frame you're working, making all of your inserts start at the same time.
  2. The second is append(), this method lets me add tweens to a timeline in a sequence.
  3. The third is appendMultiple(), this method lets me pass an array of tweens to start at the same time, in sequence or with delay, depending on how I set the params.

Step 11: Navigation Variables

We only need one variable, and it's for the slider to know how much to slide.


Step 12: Setting up Navigation

Now we'll set up the scroll_amount and associate a few listeners to some functions.


Step 13: downHandler Function

This is the method that is called when mouse is down over the dragger. It activates the mouse move listener that tells the slides where to go. It also removes any listener that is associated with the player.


Step 14: upHandler Function

This is the method that is called when mouse is up. It just stops the drag and removes the listener.


Step 15: updateNavigationSlides Function

I love how I can just "goto and stop" to a label or to a time in a completly virtual timeline:


Step 16: Video

Using ActionScript animation as video is as easy as setting up a timescale and calling play(), pause() or reverse().


Step 17: Setting up Slider Updates

Since there are two methods of navigating this microsite we need to make sure one doesn't influence the other, which could cause bugs later on. So we need to setup a small setter to identify whether it will update the slider or not according to the timeline animation, instead of the opposite. For that we create a setUpdateSlider


Step 18: Updating the Slider

This function is called everytime a tween event updates


Step 19: Full Code

This function is called everytime a tween event updates:


Conclusion

Be it Timeline Lite, or Timeline Max, building interactive motion graphic experiences with them is really easy.

This tutorial only scratches the surface of what the class can do. It has a very flexible workflow, I'm still working my way through it, but I assure you that after playing around with this class and realizing how to think with it, you will understand my hype.

I hope you liked this tutorial, thanks for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.