# TimelineLite Ultimate Starter Guide: Basic Methods and Properties

##### Tutorial Details
• Difficulty: Beginner
• Platform: Flash (Flash Player 9+)
• Language: AS3
• Software used: Flash Professional CS5
• Estimated Completion Time: 20 minutes
This entry is part 2 of 6 in the series TimelineLite Ultimate Starter Guide

In the first part of this series we took a general look at the capabilities of TimelineLite. In this video I’ll show you how to get up and running with your first TimelineLite animation. You’ll learn about the various methods and properties that will be a foundation for all of the lessons moving forward.

## TimelineLite in Action

You can find all the files used to create the SWF above in the source files for this tutorial.

## TimelineLite Basic Methods

The following methods are used to add tweens to a TimelineLite. It’s very important to understand the subtle differences as covered in the video.

insert() – Adds tweens to a timeline at a specific time. If no insertion time is specified the tween will be inserted at a start time of zero seconds.

//this tween will be inserted at the beginning of the timeline
tl.insert( TweenLite.to( mc, 1, {x:100} ) );
//this tween will be inserted 2 seconds into the timeline
tl.insert( TweenLite.to( mc, 1, {x:100} ), 2);


append() – Adds tweens to a timeline relative to the end of the timeline. The offset value can be positive or negative. A negative offset will allow tweens to overlap.

//this tween will directly after all previous tweens have finished
tl.append( TweenLite.to( mc, 1, {x:100} ) );
//this tween will play 1 second before all previous tweens have finished
tl.append( TweenLite.to( mc, 1, {x:100} ), -1 );


prepend() – Adds tweens to the beginning of a timeline and pushes all existing tweens forward in time.

//this tween occur before any other tweens that exist in the timeline
tl.prepend( TweenLite.to( mc, 1, {x:100} ) );


## TimelineLite Basic Properties

The following properties are very useful for adding functionality to your timelines and for debugging:

• timeScale – Multiplier describing the speed of the timeline where 1 is normal speed, 0.5 is half-speed, 2 is double speed, etc.
• currentProgress – Value between 0 and 1 indicating the progress of the timeline according to its duration where 0 is at the beginning, 0.5 is halfway finished, and 1 is finished.
• duration – Duration of the timeline in seconds

## TimelineLite Special Properties

When constructing a TimelineLite you can pass a number of "special properties" into the constructor. The video demonstates onUpdate, onComplete, and paused. The special properties are all contained in a vars object.

//this timeline will be paused initially and when it is done
//it will call a function called completeHandler
tl = new TimelineLite( {onComplete:completeHandler, paused:true} );


TimelineLite has many more methods, properties and “special properties” which are too numerous to list here. I urge you to investigate all there is to offer in the Official TimelineLite Documentation. The ones listed above are the most important to understand when getting started. As this series progresses I will be introducing more of the tools you will be using to gain advanced control over the setup and playback of your animation sequences.

The next video in this series will focus on controlling a TimelineLite while it is playing. It will cover everything from basic play() and reverse() to adding an interactive scrubber control.

## TimelineLite Code Sample

Below is a sample of the code used in the video to illustrate the basic structure of a TimelineLite.

			//constructor
tl = new TimelineLite();

//tweens that introduce car.
//insert() puts them all at a time of 0 seconds
tl.insert( TweenMax.from(gti_mc, .5, {x:-500, blurFilter:{blurX:140}}) );
tl.insert( TweenLite.from(gti_mc.wheel1_mc, .5, {rotation:-180}) );
tl.insert( TweenLite.from(gti_mc.wheel2_mc, .5, {rotation:-180}) );

//append() adds tweens relative to the end of the timeline
//.5 seconds after previous tweens end this text will show for 1 second and then fade out
tl.append( TweenMax.from(hello_mc, .5, {alpha:0, repeat:1, repeatDelay:1, yoyo:true}) ,.5);

//introduce second text .5 seconds after previous tween ends
tl.append( TweenMax.from( colors_mc, .5, {alpha:0}), .5 );

//tint sequence
tl.append( TweenMax.to( gti_mc.body_mc, .2, {tint:blue}) , .5);
tl.append( TweenMax.to( gti_mc.body_mc, .2, {tint:red}) , .5);
tl.append( TweenMax.to( gti_mc.body_mc, .2, {tint:black}) , .5);

//last text
tl.append( TweenMax.from( black_mc, .5, {alpha:0}), 1 );

//optional: inserts black box reveal at the beginning of the timeline
tl.prepend( TweenLite.from ( cover_mc, .5, {y:0}) );


Other parts in this series:«TimelineLite Ultimate Starter Guide: IntroductionTimelineLite Ultimate Starter Guide: Controlling Playback»

• http://blog.stroep.nl/ Mark

Great article!
Why do you use TimelineMax if the title is TimelineLite

TimelineLite Code Sample

tl = new TimelineMax();

• http://www.snorkl.tv carl schooff

Thanks Mark! Great catch. I’m sure we can get that edited, just a simple oversight. In this case Lite/Max would work exactly the same. Nothing fatal.

Thanks for watching and commenting,

Carl

• Ben

FAb Carl.
This comprehensive back to basics stuff is just what I need.
Keep up the great work mate.

Ben

• http://wwww.snorkl.tv carl schooff

Thanks Ben. So glad you are enjoying it.
-Carl

• http://www.queenswebdesignandgraphics.com Anthony Lombardo

Great screencast – Makes me wonder how I’ve gone so long without using Timeline Lite. You da man!

-Anthony

• http://www.snorkl.tv carl schooff

Hi Anthony,

Thanks for the kind words. There was a day and age when people could debate about the performance and features of various tween engines. Ever since I saw what TimelineLite could do… I haven’t looked back once. It is really amazing, powerful and fun. Once you get the basics you can do anything.

Glad you are enjoying it so far.

Carl

• http://www.prabhathonline.com Amila

grate tutorial.. thx

• Mike

Hey thanks for the tutorial i was looking for something like this one .. i finaly understand how to repeat via the code .
i ve been using greensock for a month or two and this is such an awesome tool to start as3 !!!
flash is awesome !!

• MD

Thanks a lot !!! you changed me from being a complete rookie tweener to a flasher !!
this series of tutorial is awesome i hope you will keep uploading more, it takes a little to realy understand how as3 works but once you get it combined with greensock flash is such a powerfull and awesome tool ..
ive been learning from greensock a little bit before but i couldnt control the timeline and now i am almost there !!! thank you ahah

long live to flash and greensock :)

• Randy

It seems the prepend() method is gone from the TimelineLite/Max. I just downloaded the greensock v12 package a couple days ago and no method of that name in TimelineLite,as anymore.
I also downloaded your source files for the demo and I see the function in this file.
There is very likely another way to do what prepend() did, but I am too green to know.

@Carl Schooff : do you know of this situation? I breaks the code for the demo.

• Randy

• http://www.snorkl.tv Carl Schooff

Hi Randy,

I addressed these concerns over on the other comment thread, but will post my response here for the benefit of other readers.

Please note of GSAP v12 is in BETA right now. There are a number of small changes in v12 that will make these v11 files need some upgrading. The best thing for you to do right now is read the full list of v12 changes at http://www.greensock.com/v12/

Please read the full expanded list of 39 changes. Changes that will impact v11 code are noted with a special warning icon.

Myself and the editors of AT+ have every intention of making it clear to viewers of this series that users migrating to v12 will have to pay attention to certain things.
The most drastic changes are that the properties I have discussed like

tl.time //previously currentTime
tl.timeScale

have been changed to methods
tl.time() // gets
tl.time(2) //sets the time value to 2

And yes, prepend() has been removed as it was hardly used and there are ways of doing the same thing.

I have already converted the source files for this series to v12 and plan on making them available here once we figure out the best way to keep this series pertinent into the future. The biggest changes are in the files that used a scrubber. I’d say 95% of the code is still real solid in v12.
Also there are some really cool new features in v12 that will make writing timeline code MUCH more concise and I look forward to sharing this with the AT+ community.

Thanks again for the feedback.
Carl

If you have any problems whatsoever with migrating to v12 please post on the v12 BETA forums at
http://forums.greensock.com/forum/7-v12-beta/
I moderate over there and will surely see and address your concerns.

• Randy

Just a fast courtesy thank you for your considered reply. I am nearly new to as3 but I am adjusting things bit by bit where the code is out of date. You have GREAT and well appreciated series here.