Getting Started With Scripted Tweening

Download Example Files

As someone who is a beginner starting out with developing in Flash, it's not always easy to figure out how to tween things through code and what products to use. There are more than enough tweening engines out there to make your head spin and some are more well known than others. Here I hope to shed a bit of light on what tweening engines can do what and are best used in what situation.

If you don't want to read this whole post and would rather see a bullet-point list of some scripted tweening engines, I'll point you to a very handy list that Ryan Christensen from draw.logic put together that lists some of the best animation packages for AS3. It's getting a bit out-dated as time goes on (as I'm sure my post will in a year) but it's still a great resource.

This is by no means meant to be a comprehensive overview of all the features of each engine and how to use them but rather a stepping stone to pull you into the right direction if you are just starting out with scripted tweening. I encourage you to go to each engine's site and read more about it so you can further familiarize yourself with them and make the proper choice for what you need to do in your projects.

Engine: Adobe Tweening Classes
SWF Size Addition: ~2KB
Author: Adobe
Download: N/A (bundled with Flash)
Version Used: Flash CS3

Right off the bat it is obvious that using Adobe's Tween class is is beneficial because it only uses up about 2KB of space. This is great for use in small things like banners and such. Why is it NOT a good engine to use otherwise? Well, there are a bunch of issues with using the Tween classes for more extensive projects. The first is that you cannot tween more than one property at the same time. This is a big problem because you are more than likely going to be running a series of tweens (alpha, x, y, scale, etc) on an object at once at one point or another.

Another issue with this class is its inability to manage callbacks efficiently. What do I mean by that? Well, when a tween is done, you have to register for the TweenEvent.MOTION_FINISH event and have the function you want to be performed run when you handle that event. This may seem cool and intuitive at first but it really isn't when you see how this compares to the other engines. The other problem is that it also cannot pass parameters to the function you want to call on completion of the tween.

Lastly, when you look at the way you write the code for each tween compared to some other engines, it's rather cryptic in the sense that you don't see just from looking at it what parameter that you are passing pertains to what part of the tween. For instance, you may end up passing in random values for x start and end positions, but when you look at the line of code to do so it isn't easily distinguishable because you also follow that with the time and a boolean. What do all these mean without having to look at the documentation to reference what properties you are setting?

Here is the code you would use to make a tween with the Adobe Tween class:

Actionscript:
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3. import fl.transitions.TweenEvent;
  4.  
  5. var boxTweenX:Tween = new Tween(box_mc, "x", Regular.easeOut, box_mc.x, 800, 1, true);
  6. var boxTweenY:Tween = new Tween(box_mc, "y", Regular.easeOut, box_mc.y, 800, 1, true);
  7.  
  8. boxTweenY.addEventListener(TweenEvent.MOTION_FINISH, handleTweenComplete);
  9.  
  10. function handleTweenComplete($evt:TweenEvent):void
  11. {
  12.     trace("Tween finished.");
  13.    
  14.     var boxTweenX:Tween = new Tween(box_mc, "x", Regular.easeOut, box_mc.x, 0, 1, true);
  15.     var boxTweenY:Tween = new Tween(box_mc, "y", Regular.easeOut, box_mc.y, 0, 1, true);
  16.    
  17.     boxTweenY.removeEventListener(TweenEvent.MOTION_FINISH, handleTweenComplete);
  18. }

Engine: HydroTween
SWF Size Addition: ~12KB
Author: Donovan Adams
Download: Here
Version Used: 0.4.4

Before using HydroTween you should keep in mind that it is in its infancy and all the kinks of it have yet to be ironed out. That being said, the nice thing about HydroTween (and the other engines that I will discuss from here on out) is that it is a static call rather than a variable that you have to set up for every tween you want to make. This means that rather than setting up variables like we had to do for the x and y tweens in the Adobe class, all we have to do is call HydroTween.go() and pass in our parameters. As with the other engines as well, HydroTween allows you to tween multiple properties of an object at once.

I will disclaimer what I am about to say by letting everyone know that this is the first time I've ever used HydroTween and I'm not comfortable with the syntax. That being said, I could not find a way to sequence my tweens (play one after the other) easily. The way I remedied this was by calling another tween as the callback function of the first tween was executed. The other problem with HydroTween is that a lot of the properties you pass into the tween are not part of an object that allows you to clearly and easily see what exactly you are passing values to. This makes for a possible disaster when you put the wrong values in the wrong spots without looking at the documentation. These values have to be in a pre-determined order and if you mess that up in any way your tween will not function as you had expected.

Let's take a look at the syntax used to tween something in HydroTween:

Actionscript:
  1. import fl.transitions.easing.*;
  2. import org.goasap.GoEngine;
  3. import org.goasap.PlayableBase;
  4. import org.goasap.items.GoItem;
  5. import org.goasap.events.GoEvent;
  6. import com.hydrotik.go.HydroTween;
  7.  
  8. HydroTween.go(box_mc, {x: 800, y: 800}, 1, 0, Regular.easeOut, handleTweenComplete);
  9.  
  10. function handleTweenComplete($i:int = 0, $j:int = 0):void
  11. {
  12.     trace("Tween finished. The sum of the parameters is " + ($i + $j) + ".");
  13.    
  14.     HydroTween.go(box_mc, {x: 0, y: 0}, 1, 0, Regular.easeOut);
  15. }

You may also notice that currently (as far as I know) there is no way to pass parameters to the callback function (much like the Adobe Tween class). Therefore my trace output 0 in the end because there was nowhere to put the integers I wanted to add on completion of the tween. This is a rather large setback for HydroTween and hopefully gets worked out in future versions (if it already isn't implemented).

Engine: Tweener
SWF Size Addition: ~11KB
Author: Zeh Fernando
Download: Here
Version Used: 1.26.62

The first thing to note about Tweener is that it has a huge user base and has been around since AS2. There is plenty of places to get help with Tweener if you get stuck and a lot of people have successfully used this mature engine in their own projects. It is tried and proven to work well and a lot of users swear by it. It has great features like callbacks, callback parameters, sequencing of tweens, bezier tweening (tweening through points that aren't on a straight line), and others. You can also use Tweener to tween filters as well as any other custom property that you make up! The only issue that an inexperienced programmer may have with things like this is that it is not really intuitive to register new properties to tween and can get rather confusing if you don't know what you are doing.

The down side of having all these features available to you is that it is rather large in file size. 11KB may not seem large for a large-scale project but if you are doing small things that require scripted tweening (banners, for one) that 11KB becomes very precious and you have to make a decision whether you want to stick with scripted tweening or drop the quality of some of your assets.

A call to use Tweener is one of the simplest of all tweening engines because it allows you to define the property and the value you want to set in one object. You can tween multiple properties in one line and its easy to see what you are doing from a quick glance at a line of Tweener.

Let's take a look at an example of using Tweener:

Actionscript:
  1. import fl.transitions.easing.*;
  2. import caurina.transitions.Tweener;
  3.  
  4. Tweener.addTween(box_mc, {x: 800, y: 800, time: 1, transition: Regular.easeOut, onComplete: handleTweenComplete, onCompleteParams: [3, 5]});
  5. Tweener.addTween(box_mc, {x: 0, y: 0, time: 1, transition: Regular.easeOut, delay: 1});
  6.  
  7. function handleTweenComplete($i:int = 0, $j:int = 0):void
  8. {
  9.     trace("Tween finished. The sum of the parameters is " + ($i + $j) + ".");
  10. }

As you can see we are getting back a nice result in our callback function with the addition of our two parameters that we passed into the onCompleteParams property. Everything that we are doing is readily available to us in the call and we can easily read back what we just executed without having to look at the documentation. There is many other advanced uses of Tweener that are available to you so what you need to know is that it is a very mature engine that can handle pretty much anything that you throw at it and is actively developed with a large community behind it.

Engine: TweenLite/TweenFilterLite/TweenMax
SWF Size Addition: ~3KB/~6KB/~8KB
Author: Jack Doyle
Download: All available from here
Version Used: TweenLite 6.1

What has garnered TweenLite a lot of attention recently is the fact that the output file size is only about 3KB. This is very advantageous because you can use it in small applications like banners or wherever file size is an issue. Even though TweenLite only comes in at a measly 3KB, it does not skimp on functionality, at all. Jack is very active in the community and listens to what others like about other engines like Tweener and tries to implement those into his engine which makes it a great choice.

The down side to using TweenLite was sometimes evidenced by more advanced users who needed things like frame tweening (letting the tween play the timeline for you), easy sequencing (rather than using delays), and the inability to bezier tween. This has just been fixed with the brand new release of TweenMax which handles all of those things and then some. Even though TweenMax is the "big brother" of TweenLite, it still comes in at 8KB (at its current version) and is smaller than the other engines.

You can also use TweenFilterLite to tween filters. It is packaged separately to retain the small file size of TweenLite. Not everyone needs to tween filters (I know I don't do it on every project that I use a tweening engine) so this is a good way for Jack to keep the file size as small as possible. Like Tweener, the syntax to using TweenLite is very simple and intuitive and allows for things such as callbacks, callback parameters, and other more advanced features (such as calling a function onUpdate of the tween, delayed function calls, etc).

The other thing that is very noteworthy about TweenMax is that it allows you to tween bezier points. Why am I singling this out if Tweener lets you do the same? Well, if you've worked with bezier points in the past, you know that it's a bit frustrating because you're not actually tweening through the point but rather two points that are "anchors" in the bezier tween and you can never actually see the point you are tweening through unless you use the drawing API to draw the lines out while testing your tweens. TweenMax introduces a bezierThrough property which allows you to define a point and the tween will bezier tween through that point! This is a GREAT addition and fixes something that has put me off from bezier tweening until this point.

Let's take a look at the syntax to make a TweenLite call:

Actionscript:
  1. import fl.transitions.easing.*;
  2. import gs.TweenLite;
  3.  
  4. TweenLite.to(box_mc, 1, {x: 800, y: 800, ease: Regular.easeOut, onComplete: handleTweenComplete, onCompleteParams: [3, 5]});
  5. TweenLite.to(box_mc, 1, {x: 0, y: 0, ease: Regular.easeOut, delay: 1, overwrite: false});
  6.  
  7. function handleTweenComplete($i:int = 0, $j:int = 0):void
  8. {
  9.     trace("Tween finished. The sum of the parameters is " + ($i + $j) + ".");
  10. }

As you can see, a call to TweenLite is very similar to Tweener. It is rather easy to flip back and forth between the two engines which is another upside of using them. TweenLite is also very actively developed and the community behind it is growing larger by the day. Like Tweener, it also has an AS2 alternative and the features of the AS2 and AS3 versions are identical.

Are there other choices?
Yes. As I stated earlier, there are many other choices for tweening using AS2 and/or AS3. One of the most popular AS2 (if not THE most popular) tweening engines is Fuse by Moses Gunesch. Fuse is very powerful and for a long time I swore by Fuse and used it in all of my projects. The problem with Fuse is that it isn't really actively developed any longer and that the file size as well as speed of Fuse is rather incomparable to some of the newer engines out there. Moses has started on a new project called Go which is something to look out for but it is still in its infancy and is very different from the model which Fuse was under.

So why didn't I review other engines here? Well, it would take me a long time to track all the engines down and learn how to use the syntax of each one of them. If you have an engine you'd like to see here and have some insight on it, please use the "Request" page to contact me and let me know. I'm more than willing to add more engines to this post, I just need your help in doing so. Scrap together a code example using your engine that is similar to the ones shown here (tween a box along the x and y, have a callback with params, etc) and I'll be more than happy to post it.

How do these engines stack up?
The question you're probably asking yourself by now is how do these engines really compare in terms of speed? Well, there is a rather easy answer to that. There are two tools available to you to test the engines in a head-to-head comparison. The first is written by TweenLite author Jack Doyle and the second is written by Go author Moses Gunesch.


Jack Doyle's Speed Test

Moses Gunesch's TweenBencher

Jack's utility allows you to test the AS2 and AS3 versions of some of the engines while Moses' utility tests only AS3 versions.

What tweening engine do I use?
As I stated before I used Fuse for a very long time for my AS2 work. When I started to use AS3 I had a choice to make. I could use either the Adobe Tween class which hasn't changed much at all or I could find a new engine and use it for AS3 as well as possibly my AS2 work. I took Tweener for a spin and at the time it didn't seem very intuitive for me because the syntax was very much different from what I was accustomed to with Fuse. Then I gave TweenLite a try and although hesitant because the syntax was much like Tweener, I was actually forced to use it on a project because, well, I was working with Jack Doyle :P.

I'm forever grateful that I was forced to use it because I can't see myself using anything else again. The syntax comes as second nature now (even though I still bug Jack about questions I have here and there) and it makes a lot of sense to me. With the advent of TweenMax and the new sequence() method things will be even better for me as it is now even closer to what I was used to doing when I was using Fuse regularly. The two best things about using TweenLite, however, are the file size and the speed. As you can see at Jack's speed testing utility, TweenLite outperforms all other engines and does a great job with resource management. Even though you probably won't be tweening 1,000 objects at once on a regular basis, it's good to know that you can safely do so without having to worry too much about performance. Jack is also always very open to suggestions and implements community wants/needs if they are sensible and could enhance the engine's capabilities. With TweenMax making its debut, it will no longer be an issue in getting a lot of new features put into TweenLite since Jack is aware (and as the name suggests) that TweenMax is going to probably get larger as time goes on.

What engine you use is ultimately up to you and I encourage you to make your own smart decision based on your needs.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

18 Comments

Thanks for writing this up. As a designer (not developer) I often get stuck on the Why's of these things.

Glad I could help, Jim! This is geared for exactly the type of people like yourself who aren't developers and don't always know what is available to them.

Cool article, thanks for mentioning Fuse and Go in there! It's true that GoASAP is in its infancy, but it's already really useful if you're an AS3 coder who knows how to write subclasses.

Go is a roots-up system, instead of a top-down approach like the others mentioned in your article. What it enables you to do are things like create a custom tween class of any kind, or even build a working Fuse-style parser in just a few minutes. There are some video tutorials available from the Go site, http://www.goasap.org/. In one of them I show how to build a parser, after a few lines of code I have something that can do this sort of thing:

BlockParserMG.sequence(
{ target: targ1,
x:50,
scaleX:1.5,
duration:.5,
useRelative:true,
easing:Quadratic.easeIn
},
{ target: targ1,
y:-10,
scaleY:1.5,
duration:.5,
useRelative:true,
easing:Quadratic.easeOut
},
{ target: targ1,
rotation:360,
alpha:-.25,
useRelative:true
});

That parser has limitations of course, but it also took about 10 minutes to write! 😛

Besides making it a lot easier for any AS3 coder to roll their own animation tools, GoASAP offers a core compatibility layer , something all of the systems you mention (including Adobe's) entirely lack. Yes, you can pick and choose systems all day, but what about a world where we could freely mix systems without degrading performance or glutting our code with top-to-bottom proprietary solutions? It's an experimental idea, and an invitation to all create that core together as a community, which will benefit everyone.

Thanks again!
moses

Hey Moses,
Thanks for stopping by and helping explain what Go is all about, it's much appreciated. Its things like this that need further explanation that I am unable to provide as I do not have experience with the systems or further development under them.

My article was not meant to sound like I am for or against any particular engine. I just wanted to help beginners shed some light on which engine may be right for them. As you mentioned, Go is already really useful for AS3 coders who know how to write subclasses. Not everyone who visits this article will be able to do so and that is why I didn't really go into detail on Go (aside from also the fact that I don't know THAT much about it). I think trying to explain some of that in the article would have confused some people and posted more questions than answered. With Go you can create your own animation system whereas with these engines you just have to call a method and it'll do it for you.

You're doing a great job with Go and from my understanding HydroTween uses Go (correct me if I'm wrong) as a base set of classes. It goes to show how poweful Go can be if in the right hands.

Cool! Thanks for the reply.. it's true that you have to be an AS3 coder to use Go at this stage, but hopefully more people will put out systems they create using Go, like Donovan's Hydro. Once there's more stuff being shared it will attract more of the designers and beginning coders. But I like how open it is, someone can create something similar to Fuse or do something totally different, hopefully we'll see new ideas come out of it that have never been done. 🙂

Absolutely, seeing people come up with new, cool things is the reason I think all of us that share code do what we do. I love seeing people use the classes I make and I'm sure you do as well. Keep up the great work.

As an aside, not sure if you saw my Image Slider but your InteractivePNG saved me a lot of trouble in that little thing. Thanks for that.

[...] Logic has a good list of the availble animation packages. Matt Przybylski comments and links to an article on his blog on getting started with animation [...]

Thanks for sharing your insight!
Good explained, taught me a lot!

Hey Matt,

Thanks for commenting. This was helpful for getting me kicked off with checking out TweenLite.

Mims

Hey Mims,
No problem, glad it helped.

It's worth noting that when I originally intended to do this article I wanted to include KitchenSync in my writeup. However, when I originally looked at it a little while ago, I didn't find it very easy to use and abandoned the idea of including it. After looking at your example PDF it seems a bit easier to me now (of course I'm talking in terms of comparison with other engines/ease of use) and if you want to whip up a similar example file to the ones shown here I'd be more than happy to include it in the article as I stated towards the end.

[...] Full article. [...]

It sounds like I followed the same path you did. I used the ancient AS2 Tween classes, then moved on to Tweener, and now I swear by (and evangelize) TweenLite. I have yet to run into a situation where it wouldn't work.

I may have to give Go a spin, though. Moses makes it sound pretty intriguing.

I think when people begin using Flash that's usually the case. As you go along, you learn to use better methods, this definitely being one of them 😛

Hey Guys

I'm a newbie in actionscript, could you please guide me to free resources maybe online manuals for studying actionscript.i'm using CS2

Wera,
A great place to start is http://www.kirupa.com as well as Kirupa's forums. That's how I learned a lot of what I know today. Hope that helps.

Hey Matt! Great post, and thanks for using HydroTween as an example for Go. The params point you brought up has long been remedied (although this post was quite a few months ago, I guess I'm a bit slow in coming across this :). Also I was using nested closures for my callbacks for a while so I was a bit slow to add params for the complete and update callbacks. Also sequencing has been broken out to a separate class called HydroSequence for Fuse like syntax. Also the ordering of properties is not an issue unless you are dealing with Color Matrix type tweens, which can actually be a benefit depending on what type of effects you are trying to achieve. I also use FDT so code hinting comes up which is a huge time saver for any api/library, but I understand your point there. Maybe I am misunderstanding you and the argument syntax is what you are referring to vs. the property order. Also check out John Grden's tweening engine for 3D on Go as well as Zaaz. I believe they are both strictly Object Oriented and offer more examples and approaches to using Go. All of these tweening systems in your post are great examples and it's great for people to see the differences in one place.

Keep up the great work!

Donovan

Donovan,
Thanks for the compliments. I have not tested HydroTween lately but I have followed the posts on your blog regarding it and it seems like its headed in the right direction. Hopefully if I get some free time I can make a new, updated version of this post in the future and include GTween in the update, but for now this will have to do. It does help, however, when the tweening engine developers make posts like yours to let everyone know what is going on with their engines.

Leave a comment

(required)

(required)