# Build a Slider Microsite with GreenSock’s Timeline Lite

##### Tutorial Details
• Program: Flash
• Requirements: GreenSock Timeline Lite
This entry is part 4 of 11 in the GreenSock Tweening Platform Session
« PreviousNext »

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-108×54.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:

package {

public class Main extends MovieClip{

public function Main():void {

}
}
}


## 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:

package {

import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import com.greensock.TweenLite;
import com.greensock.TimelineMax;
import com.greensock.events.TweenEvent;
import com.greensock.easing.Linear;

public class Main extends MovieClip{

public function Main():void {

}
}
}


## Step 8: Main Function

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

	public function Main():void {
//This will setup the animation of the slides
setupSlides();

//This will setup the slides navigation
}


## Step 9: Slides Variables

We will be working with these variables:

	//An array that will store the slides for easier access
private var slides:Array;

//A Number that will set a margin for the slides
private var offset:Number

//A timeline that will store the slide tweens
private var slideline:TimelineMax

//A timeline that will store each slide tween
private var singlelines:TimelineMax;

//This timeline groups the main animation timeline and the single slides animations timeline
private var timeline:TimelineMax;


## 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.
	private function setupSlides():void {
//populates the slides
slides = new Array(home_mc, about_mc, works_mc, contacts_mc)

//sets the offset
offset = 110

//instantiates the timeline for the main slides
slideline = new TimelineMax()

//instantiates the timeline for each of the slides
singlelines = new TimelineMax();

//instatiates the timeline that will contain the other 2 timelines
timeline = new TimelineMax();

var i:int = 0
while (i < slides.length) {
//sets an index so i know in wich position the current slide is
slides[i].index = i
//aligns the slides
slides[i].x = i * 650 + offset
//creates the tweens and appends them to a timeline
slideline.insert(TweenLite.to(slides[i], 3, { x:slides[i].x - 650*3,ease:Linear.easeNone } ))
//increments the i for the next loop
i++
}

//initial states
home_mc.text_mc.alpha = 0
home_mc.image_mc.alpha = 0
works_mc.text_mc.alpha = 0
works_mc.image1_mc.alpha = 0
works_mc.image2_mc.alpha = 0
works_mc.image3_mc.alpha = 0
contacts_mc.text_mc.alpha = 0

//sequencing the animations
singlelines.append(TweenLite.to(home_mc.text_mc, 0.2, { alpha:1 } ))
singlelines.append(TweenLite.to(home_mc.image_mc, 0.2, { alpha:1 } ), -0.1)
singlelines.append(TweenLite.to(about_mc.text_mc, 0.2, { alpha:1 } ), 0.5)
singlelines.append(TweenLite.to(works_mc.text_mc, 0.2, { alpha:1 } ),0.15)
singlelines.append(TweenLite.to(works_mc.image1_mc, 0.2, { alpha:1 } ), 0.05)
singlelines.append(TweenLite.to(works_mc.image2_mc, 0.2, { alpha:1 } ), 0.05)
singlelines.append(TweenLite.to(works_mc.image3_mc, 0.2, { alpha:1 } ), 0.05)
singlelines.append(TweenLite.to(contacts_mc.text_mc, 0.2, { alpha:1 } ),0.55)
//makes both timelines active at the same time.
timeline.appendMultiple([slideline, singlelines]);
//starts timeline paused
timeline.pause();



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

	private var scroll_amount:Number;


## Step 12: Setting up Navigation

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

	private function setupNavigation():void {

//sets the scroll amount

//on Mouse Down calls downHandler function

//this listener is set on stage in case you drag out

//play, pause and rewind event handler associations

}


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

	private function downHandler(e:MouseEvent):void {
//makes sure that the slider update is off before making it draggable
//adds a listener to mouse movement so every time the mouse moves it updates the navigation slides
//starts drag of the slider
navigation_mc.selection_mc.startDrag(false, new Rectangle(0, 0, scroll_amount, 0));
}


## Step 14: upHandler Function

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

	private function upHandler(e:MouseEvent):void {
//removes the listener on mouse movements
//stops the drag
}


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

	private function updateNavigationSlides(e:MouseEvent):void {
//goes to that part in time,
// the calculation is a simple proportion fraction between the x position of the selection and the current timeline duration
}


## Step 16: Video

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


//sets slider to be updated and resumes tween
private function playSlides(e:MouseEvent):void {
timeline.timeScale = 1
timeline.play();
}
//removes slider to be updated and pauses tween
private function pauseSlides(e:MouseEvent):void {
}
//sets the timescale and reverses the tween
private function rewindSlides(e:MouseEvent):void {
timeline.timeScale = 5
timeline.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


//case false, checks to see if there is a listener, if true pauses animation and removes tween
if (timeline.hasEventListener(TweenEvent.UPDATE) && bool == false) {
timeline.pause()
}

//case true, checks to see if there's a listener, if false plays animation
if (!timeline.hasEventListener(TweenEvent.UPDATE) && bool == true) {
timeline.resume();
}
}



## Step 18: Updating the Slider

This function is called everytime a tween event updates


//does exactly the same as updateNavigationSlides, but inverts the fraction so that updates the selection_mc position
}



## Step 19: Full Code

This function is called everytime a tween event updates:


package {

import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import com.greensock.TweenLite;
import com.greensock.TimelineMax;
import com.greensock.events.TweenEvent;
import com.greensock.easing.Linear;

public class Main extends MovieClip{

public function Main():void {
//This will setup the animation of the slides
setupSlides();

//This will setup the slides navigation
}

////////////////SLIDES/////////////////

//An array that will store the slides for easier access
private var slides:Array;

//A Number that will set a margin for the slides
private var offset:Number

//A timeline that will store the slide tweens
private var slideline:TimelineMax

//A timeline that will store each slide tween
private var singlelines:TimelineMax;

//This timeline groups the main animation timeline and the single slides animations timeline
private var timeline:TimelineMax;

private function setupSlides():void {
//populates the slides
slides = new Array(home_mc, about_mc, works_mc, contacts_mc)

//sets the offset
offset = 110

//instantiates the timeline for the main slides
slideline = new TimelineMax()

//instantiates the timeline for each of the slides
singlelines = new TimelineMax();

//instaciates the timeline that will contain the other 2 timelines
timeline = new TimelineMax();

var i:int = 0
while (i < slides.length) {
//sets an index so i know in wich position the current slide is
slides[i].index = i
//aligns the slides
slides[i].x = i * 650 + offset
//creates the tweens and appends them to a timeline
slideline.insert(TweenLite.to(slides[i], 3, { x:slides[i].x - 650*3,ease:Linear.easeNone } ))
//pauses the slideline so it won't start automatically

//increments the i for the next loop
i++
}

//initial states
home_mc.text_mc.alpha = 0
home_mc.image_mc.alpha = 0
works_mc.text_mc.alpha = 0
works_mc.image1_mc.alpha = 0
works_mc.image2_mc.alpha = 0
works_mc.image3_mc.alpha = 0
contacts_mc.text_mc.alpha = 0

//sequencing the animations
singlelines.append(TweenLite.to(home_mc.text_mc, 0.2, { alpha:1 } ))
singlelines.append(TweenLite.to(home_mc.image_mc, 0.2, { alpha:1 } ), -0.1)
singlelines.append(TweenLite.to(about_mc.text_mc, 0.2, { alpha:1 } ), 0.5)
singlelines.append(TweenLite.to(works_mc.text_mc, 0.2, { alpha:1 } ),0.15)
singlelines.append(TweenLite.to(works_mc.image1_mc, 0.2, { alpha:1 } ), 0.05)
singlelines.append(TweenLite.to(works_mc.image2_mc, 0.2, { alpha:1 } ), 0.05)
singlelines.append(TweenLite.to(works_mc.image3_mc, 0.2, { alpha:1 } ), 0.05)
singlelines.append(TweenLite.to(contacts_mc.text_mc, 0.2, { alpha:1 } ),0.55)

timeline.appendMultiple([slideline, singlelines]);
timeline.pause();

}

private function gotoLabel(label:String):void {
slideline.tweenTo(label,{ease:Linear.easeInOut});
}

private var scroll_amount:Number;

//sets the scroll ammount

//on Mouse Down calls downHandler function

//this listener is set on stage in case you drag out

//play, pause and rewind event handler associations

}

private function downHandler(e:MouseEvent):void {
//makes sure that the slider update is off before making it draggable
//adds a listener to mouse movement so every time the mouse moves it updates the navigation slides
//starts drag of the slider
navigation_mc.selection_mc.startDrag(false, new Rectangle(0, 0, scroll_amount, 0));
}

private function upHandler(e:MouseEvent):void {
//removes the listener on mouse movements
//stops the drag
}

//goes to that part in time, the calculation is a simple proportion fraction between the x position of the selection and the current timeline duration
}

//sets slider to be updated and resumes tween
private function playSlides(e:MouseEvent):void {
timeline.timeScale = 1
timeline.play();
}
//removes slider to be updated and pauses tween
private function pauseSlides(e:MouseEvent):void {
}
//sets the timescale and reverses the tween
private function rewindSlides(e:MouseEvent):void {
timeline.timeScale = 5
timeline.reverse();
}

//case false, checks to see if there is a listener, if true pauses animation and removes tween
if (timeline.hasEventListener(TweenEvent.UPDATE) && bool == false) {
timeline.pause()
}

//case true, checks to see if there's a listener, if false plays animation
if (!timeline.hasEventListener(TweenEvent.UPDATE) && bool == true) {
timeline.resume();
}
}

//does exactly the same as updateNavigationSlides, but inverts the fraction so that updates the selection_mc position
}
}
}



## 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!

• Pedro Lins

Great post, so many people need this.
the green is so much lite!

• http://khaled.smartdevteam.com khaled

Nice Post i like it! i sarted playing with greensock’s API and i noticed the greate performance

• Juan

Really i ilke the idea but you try to build and stop into the twee between the buttons, i mean it’s nice but after a while the continuous tween play gets a little bit anoying and boring but overall it’s a great tut.

Tnx,

Greetz,
JC-P

• Juan

Really i ilke the idea but you should try to build and stop action into the twee between the buttons, i mean it’s nice but after a while the continuous tween play gets a little bit anoying and boring but overall it’s a great tut.

Tnx,

Greetz,
JC-P

• Bruno Crociquia

it makes sense, and is completely achievable, :) feel free to try and make it, by using insert, append, appendMultiple or even by adding labels, pausing one timeline to start another, or calling animations to start using various listeners that are already in the class, its quite simple :)

• http://www.neilrpearce.co.uk neil pearce

started playing around with greensock a few weeks ago and needed another tut like this….well done, many thanks!

• viaria

i dont need a tween engine to do that.. am i wrong?

• John Doe

Thanks.
Tweenmax has made my life at work easy. Please make some more Tween max and tween lite tutorials.

• http://tutorialblog.info/ tutorial blog

thank foe source

• http://www.ds123.net/blog/ hecooo

It is good post!But I love blue more !Thank you !

• http://www.bloggerzbible.blogspot.com/ Bloggerzbible

Thanks

• http://www.bloggerzbible.blogspot.com/ Bloggerzbible

Thanks man

• http://none khsuhal

Thanks to the SCRIPT

• http://none khsuhal

Thanks for the SCRIPT

• MJP

Not very useful if you can’t stop it.

• Bruno Crociquia

drag the green thumb thats over the menu, you have full control over its motion

• zyonman

awesome——thanks a lot. Keep rockin the cas_bah…………………