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.

Timing a preloader animation with the main content animation

Sometimes you don’t want to start the loaded content as soon as it’s been loaded.  You want to leave time for the preloader’s exit animation to end or you want to morph your preloader with the main content to have some sort of continuity. In those cases, the external preloader has to call a method of the main content. That sounds simple but it actually isn’t. If you try to call a method directly like we used to do in ActionScript 2 the compiler will complain because it doesn’t know if the loaded content will have such a method. In order to solve this problem you will have to use interfaces. You can get more information about interfaces on this previous post of mine. Now that the loaded content is typed to an interface you will be able to call it’s method and the synchronization between the preloader and the content will be good.

Using FlashVars

FlashVars are really useful and a lot of times you might end up using them. The problem is that contrarily to ActionScript 2, in AS3 the root variable will refer to this SWF’s root, not to the entire application’s root. So from the loaded content you don’t have access to the FlashVars. You solve this problem the same way as we solved the preceding problem: by using an interface. In the first case, we mostly would have called a method without parameters like init() or something like that, but in this case the parameters will be the FlashVars. You might want to pass the root.loaderInfo.parameters.YOUR_VAR_NAME as a parameter or you might want to do some checking as to know if the parameter was passed or not. In your interface you will have to write down all the parameters you want to pass and what type (String, int, Number, etc) they are. Here is an example of how you could do it.

Here is the interface:

package com.zedia.interfaces{
  public interface IMain{
    function init(flashvars1:String, flashvars2:Number):void;
  }
}

Here is some of the code of that the preloader could contain:

import com.zedia.interfaces.IMain;
 
var mainContent:IMain;
function onLoadComplete(event:Event):void{ // this would be the function that the loader would call when the loading is completed
  mainContent = IMain(loader.content);
  addChild(Sprite(mainContent) );
  mainContent.init( String(root.loaderInfo.parameters.flashvars1),Number(root.loaderInfo.parameters.flashvars2) )
}

Here is some code of the loaded content:

package{
  import com.zedia.interfaces.IMain;
 
  public class Main extends Sprite implements IMain{
    public function init(flashvars1:String, flashvars2:Number):void{
      //do something with the FlashVars
    }
  }
}

As you can see in the preloader’s ActionScript, in order to add the content to the stage, you first have to cast it to Sprite. You will have to do this when you will want to have access to Sprite properties like x and y. I admit this is a down side of using interfaces but at the same time it solved both the problems of timing an animation and passing FlashVars to the loaded content.

What I am doing is mostly websites and in those website I use ActionScript to make everything move; I rarely use the timeline. All of my tweens are at most 1 second long but most of the time they last about 0.5 second. I liked Tweener because it was way better than Adobe’s Tween classes but I found from 2 different sources (TweenLite, GOASAP) that TweenLite is faster for small tweens than Tweener. You might know that already, but being fast is one of the most important attribute for me in a tweening engine. Not so much because I use too much animation at the same time but more because that when I start Tweens, I don’t want them to eat all of the cpu, I want them too leave as much processing power for other stuff like timeline animations, video etc. These is all to say that I am changing all my code from Tweener to Tweenlite (that I had previously changed from Adobe Tween classes to Tweener) because I need the extra speed badly.

Something came up since I started this project. From the maker of the Fuse kit comes GOASAP. Which looks very promissing; it’s  not an animation package per say, it’s more like animation package building blocks. Since sometime there is a lot of overhead in animation engine for things that you will never use, Moses Supposes made us all animation library developers. The GOASAP code base is in AS3 and I can’t wait to start using it. In the mean time I invite you all to go and start developing your own animation code;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import caurina.transitions.*;
 
var simpleSprite:Sprite = new Sprite();
simpleSprite.x = 100;
simpleSprite.y = 100;
simpleSprite.graphics.lineStyle();
simpleSprite.graphics.beginFill(0xff0000);
simpleSprite.graphics.drawRect(0,0,200,100);
addChild(simpleSprite);
simpleSprite.buttonMode = true;
 
simpleSprite.addEventListener(MouseEvent.MOUSE_OVER, makeBlue);
simpleSprite.addEventListener(MouseEvent.MOUSE_OUT, makeRed);
 
function makeBlue(e:MouseEvent):void{
  Tweener.addTween(simpleSprite, {_color:0x0000ff, time:1, transition:"easeOutQuart"});
}
function makeRed(e:MouseEvent):void{
  Tweener.addTween(simpleSprite, {_color:null, time:1, transition:"easeOutQuart"});
}

That’s it. And it does exactly the same thing and probably faster than the Tween classes. Notice that it takes only one line of code to change the color instead of the more complex method I used previously . Also you only have to import the Tweener classes as opposed to six import statements.

Well that’s it for today, I’ll try and investigate on more Tweener properties because it just keep surprising me.

So here is the new code using Tweener:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

package{
  import flash.display.Sprite;
  import flash.text.TextField;
  import flash.events.MouseEvent;
  import caurina.transitions.*;
  public class simpleButton extends Sprite{
    public function simpleButton(newLabel:String){
      myLabel.text = newLabel;
      myLabelOver.text = newLabel;
      myLabelOver.alpha = 0;
      buttonMode = true;
      mouseChildren = false;
      addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
      addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
      addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
    }
    private function handleMouseOver(event:MouseEvent):void{
      Tweener.addTween(this.Over,{alpha:1, time:0.5, transition:"linear"});
      Tweener.addTween(this.myLabelOver,{alpha:1, time:0.5, transition:"linear"});
      Tweener.addTween(this.myLabel,{alpha:0, time:0.5, transition:"linear"});
    }
    private function handleMouseOut(event:MouseEvent):void{
      Tweener.addTween(this.Over,{alpha:0, time:0.5, transition:"linear"});
      Tweener.addTween(this.myLabelOver,{alpha:0, time:0.5, transition:"linear"});
      Tweener.addTween(this.myLabel,{alpha:1, time:0.5, transition:"linear"});
    }
    private function handleMouseUp(event:MouseEvent):void{
    }
  }
}

The major advantage of Tweener in the case of a rollover and a rollout (like most buttons) is that you don’t have to keep track of previous Tweens in order to stop them. With the Tween classes, if you don’t do that, you’re going to end up with strange rollover behaviors.  Also, we had to check if the Tween  existed before trying to stop them which added extra code. Tweener handles all that for us which is pretty practical. I spoke some times of the Fuse Kit; it seems packed with a lot of options, but you can’t do simple rollovers with it; with Tweener you can.

Well I’m about done with my tutorial on Tweener but I think I’ll do one about using Tweener to Tween between two colors, just like Color.interpolateColor static method.

On a side note, I am now using TweenLite instead of Tweener; TweenLite execute faster and is smaller in size. Here is a tutorial on TweenLite.

For this tutorial I am going to do exactly what I did in the previous tutorial but this time I’ll use Tweener. The first thing you have to do, as with the Tween classes, is import Tweener, you do it in this way.

import caurina.transitions.*

Tweener as some easing classes in it but you can also use the easing classes from Flash. One good side of Tweener is that it compile perfectly fine in Flex. Tween and easing classes don’t compile with Flex… A down side of Tweener is that it adds an additional 8k to your file (as opposed to 2k for Tween classes for a total of 10k).  Ok so now we are ready to go.

Tweener.addTween(rectangle, {x:300, time:3, transition:"linear"});

The “Tweener.addTween” part is how you add a Tween, that’s kinda obvious. “rectangle” is the name of the object you want to do a Tween on one of its property (or more). “x:300″ is the final x position that rectangle will be at. “time:3″ is the time it will take to get there and “transition:’linear’” is the easing to use. You see this is already easier to use and to read than the Tween classes. One major change is that you input the starting position of the property. I think this is a good thing since like 90% of the time I have been doing Tween, I want the Tween to start from the current position of the property and you can just set the property before doing the Tween anyway.

The next example was about doing multiple Tweens on the same object but on different properties here is how we did it with the Tween classes:

var myTweenX:Tween = new Tween(rectangle, "x", Strong.easeOut, 0, 300, 3, true);
var myTweenAlpha:Tween = new Tween(rectangle, "alpha", Strong.easeOut, 0, 1, 3, true);
var myTweenAlpha:Tween = new Tween(rectangle, "width", Strong.easeOut, rectangle.width, rectangle.width + 300, 3, true);
var myTweenAlpha:Tween = new Tween(rectangle, "rotation", Strong.easeOut, 0, 90, 3, true);

Here is how you would do that with Tweener:

Tweener.addTween(rectangle, {x:300,alpha:1, width:rectangle.width + 300, rotation:90, time:3, transition:"linear"});

So in one line I did what it used to take me 4 and it easy pretty easy to understand.

Another thing that is really nice with Tweener is that it as a delay property. If you want your Tween to start in 1 second you do it in this way:

Tweener.addTween(rectangle, {alpha:1, time:3, delay:1, transition:"linear"});

This is practical when you want to do Tweens in sequence (one after the other). With the Tween classes you would do it in this way:

var myTweenX:Tween = new Tween(bloc, "alpha", Strong.easeOut, 0, 1, 3, true);
myTweenX.addEventListener(TweenEvent.MOTION_FINISH, doNextTween);
 
function doNextTween(e:TweenEvent):void{
  var myTweenAlpha:Tween = new Tween(bloc, "x", None.easeOut, 0, 300, 3, true);
  myTweenX.removeEventListener(TweenEvent.MOTION_FINISH, doNextTween);
}

With Tweener:

Tweener.addTween(bloc, {alpha:1, time:3, transition:"linear"});
Tweener.addTween(bloc, {x:300, time:3, delay:3, transition:"linear"});

As you can see you use way less code using Tweener and it tends to keep all your code for an animation together which will be easier to understand when you come back. Also I have seen some benchmark and Tweener seems to be performing better than the Tween classes. So all in all I guess I am just going to ditch the Tween classes and start using Tweener from now on.

I went on the blog of Samuel Asher Rivell, the author of the presentation I spoke of earlier, and found some other interesting things. First there is the Montreal Game Summit that’s going to be held on November 27th and 28th. I live in Montreal so I’d be pretty happy to go there, at least on the first day. It has some interesting conferences about Flash that I’d like to see especially the one given by Samuel Asher Rivell on Advertgames.  The second nice thing I found on his blog is the powerpoint presentation of one of the conference he gave on blitting. I had seen the technique some time on the web but never knowing what it was or how to do it. His presentation is a good introduction to it and I’d be really interested in hearing his speech about it. There might be more on blitting on this blog since it looks really promising.

1
2
3
4
5

import fl.motion.Color;
import flash.geom.ColorTransform;
var ct:Color = new Color();
ct.setTint(0xFF0000, 0.5);
mc.transform.colorTransform = ct;

With mc being the displayObject you want it applied on. setTint can be pretty useful for setting a tint on a bitmap and it can also be used with tweens in the same way I used the interpolateColor in a previous post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import fl.motion.Color;
import flash.events.*;
import flash.geom.ColorTransform;
 
var simpleSprite:Sprite = new Sprite();
simpleSprite.x = 100;
simpleSprite.y = 100;
simpleSprite.graphics.lineStyle();
simpleSprite.graphics.beginFill(0xff0000);
simpleSprite.graphics.drawRect(0,0,200,100);
addChild(simpleSprite);
 
// Get access to the ColorTransform instance associated with our sprite.
var colorInfo:ColorTransform = simpleSprite.transform.colorTransform;
// This function is called when the stage is clicked.
function makeBlue(event:MouseEvent):void
{
  var tempMovie:Sprite = new Sprite();
  var alphaOver:Tween = new Tween(tempMovie, "alpha", Strong.easeOut,0, 1, 8, true);
  alphaOver.addEventListener(TweenEvent.MOTION_CHANGE, tweenToBlue);
}
function tweenToBlue(event:TweenEvent):void{
  // apply the change to the display object
  colorInfo.color = Color.interpolateColor(0xff0000, 0x003399, event.position);
  simpleSprite.transform.colorTransform = colorInfo;
}
stage.addEventListener(MouseEvent.CLICK, makeBlue);

The first block of code is to import all that is needed to do our Tweening. The two classes that are of importance are the fl.motion.Color and flash.geom.ColorTransform.

In the second block of code, I create the Sprite that I will do the tweening on and draw a red rectangle in it using the graphics.drawRect method.

After that, it’s the listening function to the mouse event CLICK on the stage. This function create a new Sprite that will never be displayed. Its sole purpose will be to use its properties to do our Tween. Then we create our Tween as we would normally and we add a listener for the MOTION_CHANGE event.

All the good stuff happens in the next function; tweenToBlue. It is here that we use the static method interpolateColor of the Color class. We use the event’s position to give us the place where the Tween is at. That is why in our Tween as to have the start parameter as to be 0 and the end parameter as to be 1. We than apply to colorTransform to our Sprite.