Posts Tagged Timeline

Introduction to TimelineLite / TimelineMax

TimelineLite is a new library from the maker of TweenLite that enables you to group TweenLite instances (Tweens) to create the equivalent of the Flash Authoring Tool Timeline but in code. If you don’t know what TweenLite is head over to my tutorial on it first.

What is it for

The goal of this library is to give more power to the already powerful TweenLite library and to emulate some of the MovieClip’s functionalities. Once built, a TimelineLite instance will possess some methods that we’ve known for a long time: play(), stop(), gotoAndPlay(), etc. Three methods are used to create the timeline: append(), insert(), insertMultipple(). I prefer the insert method, it gives you more flexibility because you can set the time at which the Tween starts. The append() method will simply add your TweenLite instance at the end of the current timeline.

Here are some examples of how you would create a TimelineLite :

var myTimeline:TimelineLite = new TimelineLite();
 
//this will have 3 tween starting one after the one before is done
myTimeline.append(new TweenLite(mc, 1, {x:200, y:100}));
myTimeline.append(new TweenLite(mc, 0.5, {alpha:0}));
myTimeline.append(new TweenLite(mc, 0.5, {alpha:1}));
 
myTimeline.play();
 
//this one will have concurrent tweens a bit like layered tweens in the Flash Timeline
myTimeline.insert(new TweenLite(mc, 1, {x:200, y:100}), 0);
myTimeline.insert(new TweenLite(mc, 0.5, {alpha:0}), 0.75);
myTimeline.insert(new TweenLite(mc, 0.5, {scaleX:2}), 1.25);

Some of the cool stuff you can do with is that inside a TimelineLite you can insert other TimelineLite instances. Also you can add Labels and tween using TweenLite to those labels. You can tween the time of the timeline as well as the progress. Here are examples of what I just mentioned:

var myTimeline:TimelineLite = new TimelineLite();
myTimeline.insert(new TweenLite(mc, 1, {x:200, y:100}), 0);
myTimeline.insert(new TweenLite(mc, 0.5, {alpha:0}), 0.75);
myTimeline.insert(new TweenLite(mc, 0.5, {scaleX:2}), 1);
 
//Tween the timeline to any place in percent (from 0 to 1)
TweenLite.to(myTimeline, 0.5, {progress:1});
 
//Tween to a particular second in time (from 0 to the duration of the timeline)
TweenLite.to(myTimeline, 0.5, {time:0.75});

Its advantages

The major advantage that TimelineLite posesses over real timeline is the fact that it is dynamic. Meaning that you could make an function that takes a display object, that function would create an animation based on it and return a TimelineLite instance that you could use afterward. Then you could use that function to create the same animation on multiple display objects. Another example is that you could create animation based on what the user does, like you make him choose a number and you append that many instances on TweenLite in your TimelineLite (easy to do with traditionnal timeline too, but its just an example).

Its Max conterpart

As for the TweenLite library, TimelineLite has its Max equivalent, TimelineMax, which has more features like AS3 event listeners, repeat, repeatDelay, yoyo, addCallback(), removeCallback(), getActive(), etc.  Just to tell you how good this library is,  I have done a TimelineLite instance that tweened 25 display objects and 625 TweenLite instances and it worked perfectly fine, it wasn’t even slowing down.

, , , , , ,

4 Comments


Mixing timeline and AS3; where are my global variables

Well using only ActionScript to do a website at my company is kind of a break in the workflow.  Before I came, only designers were doing the Flash websites so it was mostly timeline with ActionScript all over the place (meaning not so much ActionScript, but well spread over timeline, buttons and MovieClips). It’s not what I believe the best way to work.

So we get this microsite to do; I can show it to you because it is online right now. It’s Ski-Doo Spring Promotion. For this microsite we had a really tight deadline; 3 days to do design and production of the whole microsite. So I had to work very closely with the designer, which was good because he is really creative at doing animations. The trouble is that he does them timeline and I am used to doing only ActionScript websites… So I had to learn to mix both ways.

Every thing was going fine until I had to use global variables. I forgot to mention that we decided to do this project in ActionScript 3, in which there are no global variables anymore. My need for global variables was for data that was passed from the html to the flash, the country from which the user came and his language. So at first I was using the root.loaderInfo.parameters.country (as an example) as a global variable. I could, from any timeline anywhere in any movieclip, reference the parameters  had passed to the flash.

The trouble arose when I had to add an external preloader to the microsite. All of a sudden all my call to root.loaderInfo.parameters did not work anymore. I had to find another solution to my problem which I found in the GlobalVarContainer class from greenethumb. It is a really easy class to use and it did exactly what I wanted. You should go check it out.

I know using global variables is not a not a best practice; it’s not modular and you can’t safely reuse your code everywhere. But in this case, it really helped me mix the timeline animation workflow with the coding workflow.

, , , , ,

1 Comment