Tweening Tips & Tricks

Hopefully you’ll find a few nuggets of wisdom here that bring your animation skills to the next level. The tips will cover all levels; beginner, intermediate and advanced. I’ll add to the list every so often and if you have any tips to share, please do so in the comments section below. To get notified when new tips are added, feel free to follow @greensock on Twitter and make sure you sign up for a free GreenSock account.

1) Get smoother rotations on large objects with transformMatrix

Flash applies rotation values in a much less precise way when you set the “rotation” property directly on a DisplayObject compared to setting its more complex transform.matrix (this has nothing to do with the tweening engine). The difference isn’t nearly as noticeable on small or medium sized objects, but as you can see in the example below, it’s quite noticeable on large objects. The TransformMatrixPlugin provides a simple way to get smoother, more precise, and faster rotations. Don’t forget to activate() the plugin first (see the Plugin Explorer).

2) Speed tips

TweenLite and TweenMax are already highly optimized for maximum speed, but here are a few tips to keep things performing their best:

• Minimize the area of change that Flash must re-render on each frame refresh. Graphics rendering is by FAR the most CPU-intensive thing in most apps (ActionScript execution pales by comparison) and the more pixels that change on the screen, the harder it is for Flash to keep up. You could have a single tween fading a 2000×2000 image out that could bog the sysem down whereas running 500 tweens moving objects within a small 150×150 area on the screen could run great.
• Vectors require more processing for Flash to render than bitmaps.
• Avoid masks if possible. scrollRect is faster. BlitMask is even faster yet.
• If you’re using TweenMax, speed things with FastEase. Most common eases are eligible for a speed boost like this and all you need to do is activate the ease(s) once in your swf like FastEase.activate([Linear, Quad, Strong]); See the ASDocs for details.
• When scaling and/or rotating an object, use the TranformMatrixPlugin instead of directly tweening rotation/scaleX/scaleY. Like:

  //normal
  TweenLite.to(mc, 1, {scaleX:2, scaleY:2, rotation:30});
  //slightly faster
  TweenLite.to(mc, 1, {transformMatrix:{scaleX:2, scaleY:2, rotation:30}});

  Keep in mind that tweening the tranformMatrix of an object affects ALL transform properties like x, y, scaleX, scaleY, rotation, width, and height so if you need to have another concurrent tween running that affects one or more of those properties, don’t use trasnformMatrix.

• Since it is very slightly faster, use TweenLite instead of TweenMax unless you need a TweenMax-specific feature for that particular tween. Remember, TweenMax extends TweenLite so if you’re already using TweenMax in your project, it costs absolutely no more kb to use TweenLite also. Feel free to mix and match.
• Callbacks are faster than event listeners. For TweenMax it’s better to use onComplete than addEventListener(TweenEvent.COMPLETE, myFunction). That’s especially true for onUpdate vs TweenEvent.UPDATE.
• If your animation looks a little jerky, it may be caused by cacheAsBitmap being set to true on your animating object(s). Whenever cacheAsBitmap is true, it only allows the object to render on whole pixel values which can make it look slightly jerky at slow speeds. Important: whenever a DisplayObject has a filter applied to it (blur, glow, drop shadow, etc.), it forces cacheAsBitmap to true and cannot be reset to false unless the filter is removed. That’s a Flash limitation and has nothing to do with the tweening engine.

3) Simplify animation workflow with animateIn() and animateOut()

Once you understand this concept, it can revolutionize the way you animate. Don’t skip past this one if you’re comfortable with object-oriented programming (this might be a little beyond newbies).

It’s very common for apps to have various screens (or states or slides) that must be transitioned from one to another. For example, the home page animation has various “slides” that animate into place, stay on screen for a while, then animate out. As one slide finishes animating out, the other is already starting to animate in to keep things snappy. It can get clumsy trying to coordinate all those tweens manually each time a transition needs to occur especially because some slides must do more (and longer) animation to get stuff onto and off of the screen. Wouldn’t it be great if you created animateIn() or animateOut() methods for your objects that did all the work? Sure. That’s not exactly revolutionary. But what if those methods tucked all of the associated tweens into an object that could be controlled easily and scheduled to run in a sequenced fashion? That would be swell indeed.

TimelineLite and TimelineMax to the rescue.

Build your objects with animateIn() and animateOut() methods whose sole job is to construct a TimelineLite (or TimelineMax) instance and spit it back. You’ll see the power of this shortly. Here’s a very simple example that does an autoAlpha fade:

//you build these functions into your objects (classes, MovieClips, whatever):
function animateIn():TimelineLite {
    var tl:TimelineLite = new TimelineLite();
    tl.append( new TweenMax(this, 0.5, {autoAlpha:1}) );
    return tl;
}

function animateOut():TimelineLite {
    var tl:TimelineLite = new TimelineLite();
    tl.append( new TweenMax(this, 0.5, {autoAlpha:0}) );
    return tl;
}

Of course you could add more tweens into the TimelineLite, like sliding lines of text onto or off of the screen, etc. But now if we need to transition between slide1 and slide2, we could nest the TimelineLite instances inside another one to make sequencing and overall control simple:

var tl:TimelineLite = new TimelineLite();
tl.append( slide1.animateOut() );
tl.append( slide2.animateIn() );

And if I want them to overlap by 0.25 seconds, I can easily do that using the offset parameter in append(), like:

var tl:TimelineLite = new TimelineLite();
tl.append( slide1.animateOut() );
tl.append( slide2.animateIn(), -0.25);

If I want to build an entire slide show with each slide staying on the screen for 5 seconds, I can do that like:

var tl:TimelineLite = new TimelineLite();
tl.append( slide1.animateIn() );
tl.append( slide1.animateOut(), 5);
tl.append( slide2.animateIn(), -0.25);
tl.append( slide2.animateOut(), 5);
...etc...

Now if I decide that I want to tweak slide2′s animateIn() animation so that it also slides some text into place and takes 3 seconds instead of 0.5 seconds, that’s fine – everything adjusts automatically! This makes updates simple and painless.

I could even attach a scrubber to that master TimelineLite in order to allow the user to fastforward/rewind or I could change the timeScale to make everything go in slow motion or I can reverse() or restart() the entire animation anytime. If you notice, after the animation completes on the home page, a slider fades into place and you can skip through the animation as you please. That’s how it’s done. Everything is completely ActionScript-driven.

If you haven’t done so yet, I’d highly recommend watching the brief video explaining how TimelineLite works at http://www.greensock.com/timeline-basics/

Sub-tip: You can add optional onComplete and onCompleteParams parameters to your animateIn() and animateOut() methods so that you can call myObject.animateOut(myFunction, [param1, param2]) to have it run its animation and then call myFunction(param1, param2).

Want to see the source files for the home page animation? “Shockingly Green” and corporate Club GreenSock members can send me an e-mail request (it uses special plugins like motionBlur, physics2D, and others that are membership benefits of Club GreenSock – that’s why it’s not available to everyone).

Carl Schooff created a video that covers this technique at snorkl.tv.

4) Relative vs absolute values

When a value is cast as a String, TweenLite and TweenMax will interpret it as relative. For example, let’s say you want to tween mc 100 pixels up from where it is but you don’t know exactly what y-coordinate that represents:

TweenLite.to(mc, 1, {y:"-100"});

//or to cast a numeric variable as a String...
var destY:Number = -100;
TweenLite.to(mc, 1, {y:String(destY)});

5) TweenMax.allTo() – multiple targets to common values

Let’s say you’ve got an array of objects that you want to fade out and move down 100 pixels from wherever they are. No need to loop through the array and create each tween; just use TweenMax.allTo(). You can even stagger the start times (let’s stagger by 0.1 seconds here):

TweenMax.allTo([btn1, btn2, btn3], 1, {alpha:0, y:"100"}, 0.1);

TweenMax.allTo() can be useful when you want to instantly change the properties of all objects in the array as well – simply do a zero-duration allTo():

//set all objects in myArray to alpha:0 and visible:false
TweenMax.allTo(myArray, 0, {autoAlpha:0});

There are also TweenMax.allFrom() and TweenMax.allFromTo() methods available. And since all of these methods return an array of tweens, you can easily insert them into a TimelineLite or TimelineMax like myTimeline.insertMultiple( TweenMax.allTo([mc1, mc2, mc3], 1, {autoAlpha:0}) );

6) Play a MovieClip backward and forward with a tween

The FramePlugin makes it pretty simple to set up a tween that controls a MovieClip which means you can simply play(), reverse(), pause(), or restart() the tween. In this example, we’ll create a tween and when the user rolls over the MovieClip, it will play and when they roll out, it will reverse:

mc.stop(); //stop the MovieClip first.
var tween:TweenMax = TweenMax.fromTo(mc, mc.totalFrames - 1, {frame:1}, {frame:mc.totalFrames, ease:Linear.easeNone, useFrames:true, paused:true});

mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
function rollOverHandler(event:MouseEvent):void {
    tween.play();
}
function rollOutHandler(event:MouseEvent):void {
    tween.reverse();
}

7) Common mistake: MOUSE_OVER/MOUSE_OUT instead of ROLL_OVER/ROLL_OUT

MouseEvent.MOUSE_OVER and MouseEvent.MOUSE_OUT can be dispatched many times during a single rollover. They are triggered every time the mouse interacts with a CHILD of the object. So, for example, if you have a Sprite that contains a TextField with words in it, as the mouse moves over each letter, a MOUSE_OVER event would be dispatched by the Sprite and as the mouse moves off each letter, a MOUSE_OUT would be dispatched! This can cause your tweens to appear to act strangely (“why do my tweens look like they keep starting and stopping as I roll over the Sprite?”). It is almost always better to listen for MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT instead.

8) Use delayedCall() to call a function later

This is actually more reliable than setTimeout() because there were bugs in some versions of Flash related to setTimeout() especially on the Mac:

//calls myFunction(myParam1, myParam2) after 2 seconds
TweenLite.delayedCall(2, myFunction, [myParam1, myParam2]);

9) The Plugin Explorer is your friend

The Plugin Explorer not only writes activation code for any set of plugins, but also gives examples that demonstrate the correct syntax. It is in all of the download zips as well as online.

10) Kill the easing with Linear.easeNone

To eliminate the easing in a tween (which is Quad.easeOut by default for more natural motion), simply use the Linear.easeNone ease.

11) Tween a tween? A timeline? Huh?

You can pause() a TimelineLite or TimelineMax or TweenLite or TweenMax and then tween its currentTime property to fastforward or rewind it, complete with easing. You can even tween the timeScale property to make it gradually speed up or slow down (the only exception is a TweenLite because it doesn’t have a timeScale property).

12) Delay the initial render in a from() or zero-duration tween

Simply pass immediateRender:false in the vars parameter to prevent a from() or zero-duration tween from rendering immediately.

More resources

There are some great video tutorials, articles, and written tutorials covering various aspects of the tweening platform on the learning resources page.

Got a tip or trick?

Post it in the comments section below. If you have a question, it’s typically best to post it in the forums at http://forums.greensock.com

Comments (34)

Subscribe