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
		setupNavigation();
	}

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
			about_mc.text_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();

Step 11: Navigation Variables

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
			scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width

			navigation_mc.selection_mc.buttonMode = true

			//on Mouse Down calls downHandler function
			navigation_mc.selection_mc.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);

			//this listener is set on stage in case you drag out
			stage.addEventListener(MouseEvent.MOUSE_UP, upHandler)

			//play, pause and rewind event handler associations
			play_bt.addEventListener(MouseEvent.CLICK, playSlides)
			pause_bt.addEventListener(MouseEvent.CLICK, pauseSlides)
			rewind_bt.addEventListener(MouseEvent.CLICK, rewindSlides)

		}

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
		setUpdateSlider(false)
		//adds a listener to mouse movement so every time the mouse moves it updates the navigation slides
		stage.addEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides)
		//starts drag of the slider
		navigation_mc.selection_mc.startDrag(false, new Rectangle(0, 0, scroll_amount, 0));
		//updates navigation 1 time
		updateNavigationSlides(null)
	}

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
		stage.removeEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides)
		//stops the drag
		navigation_mc.selection_mc.stopDrag()
	}

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:

	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
		timeline.gotoAndStop(navigation_mc.selection_mc.x*timeline.totalDuration/scroll_amount)
	}

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

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

		private function setUpdateSlider(bool:Boolean) {
			//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()
				timeline.removeEventListener(TweenEvent.UPDATE,updateNavigationSlider)
			}

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

Step 18: Updating the Slider

This function is called everytime a tween event updates

		private function updateNavigationSlider(e:TweenEvent):void {
			//does exactly the same as updateNavigationSlides, but inverts the fraction so that updates the selection_mc position
			navigation_mc.selection_mc.x=timeline.currentTime*scroll_amount/timeline.totalDuration
		}

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
			setupNavigation();
		}

	////////////////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
			about_mc.text_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});
		}

	//////////////////NAVIGATION/////////////////////

		private var scroll_amount:Number;

		private function setupNavigation():void {

			//sets the scroll ammount
			scroll_amount = navigation_mc.width-navigation_mc.selection_mc.width

			navigation_mc.selection_mc.buttonMode = true

			//on Mouse Down calls downHandler function
			navigation_mc.selection_mc.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);

			//this listener is set on stage in case you drag out
			stage.addEventListener(MouseEvent.MOUSE_UP, upHandler)

			//play, pause and rewind event handler associations
			play_bt.addEventListener(MouseEvent.CLICK, playSlides)
			pause_bt.addEventListener(MouseEvent.CLICK, pauseSlides)
			rewind_bt.addEventListener(MouseEvent.CLICK, rewindSlides)

		}

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

		private function upHandler(e:MouseEvent):void {
			//removes the listener on mouse movements
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides)
			//stops the drag
			navigation_mc.selection_mc.stopDrag()
		}

		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
			timeline.gotoAndStop(navigation_mc.selection_mc.x*timeline.totalDuration/scroll_amount)
		}

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

		private function setUpdateSlider(bool:Boolean) {
			//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()
				timeline.removeEventListener(TweenEvent.UPDATE,updateNavigationSlider)
			}

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

		private function updateNavigationSlider(e:TweenEvent):void {
			//does exactly the same as updateNavigationSlides, but inverts the fraction so that updates the selection_mc position
			navigation_mc.selection_mc.x=timeline.currentTime*scroll_amount/timeline.totalDuration
		}
	}
}

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!