One of the most popular AS3 tween engines in Zeh Fernando’s Tweener. Another tween engine I just found out about is Jack Doyle’s TweenLite. Both are great lightweight engines that provide a convenient syntax for handling tweens.
There is also Flash’s built in syntax for handling tweens. Until today I thought that calling an AS3 tween in Flash required the Flex framework, but it turns out that in addition to Flex’s mx.effects.Tween there is also a Tween class built into the Flash Player: fl.transitions.Tween. This works exactly like Flash’s AS2 tween class.
So, which is the best one to use? Tweener and TweenLite both offer an easier way to handle multiple tweens, delayed tweens, color tweens and more. TweenLite is smaller at 2k, over Tweener’s 10k. I haven’t dug into all the details of both, but for most cases, TweenLite does everything you need.
One other thing I love about TweenLite is that by default it will overwrite previous tweens to the same object. This means if you apply many tweens to the same object (for example a button color tween on rollover/rollout), you won’t start piling up tween objects in memory. In practice, the memory usage for a tween object is very small, but its nice to know that over a long period of time youre SWF won’t be leaking memory.
Latest Tweets
“So, which is the best one to use?”
I think of the AS1 and AS2 tween engines a lot of popularity of Zeh Fernando’s was down to the benchmark tests (http://laco.wz.cz/tween/?page=benchmark).
Be interesting to see how the AS3 one’s pan out with benchmarking.
As for the benchmarks, I did some extensive testing when originally creating TweenLite and nothing could beat it in terms of speed (or file size) at the time. I haven’t tested the AS3 version against others, but I suspect you’d find the same results. I spent a lot of time optimizing things for maximum performance and the smallest possible file size. Maybe some smarter folks out there could improve upon it – all I’m saying is that a lot of thought and effort went into it and the feedback I’ve received over the years has been extremely positive.
Great post Felix. Keep up the good work!
You forgot AS3 Animation System v2.0 which is more powerful and more flexible than Tweener and TweenLight. (and handle filters too)
http://www.boostworthy.com/blog/?p=170
To clarify, fl.transitions.Tween is not built into Flash Player. It is an ActionScript class that comes with Flash CS3. When you use it, the class will be compiled into your SWF.
What about fusekit? Any opinions on that?
Fardeen: I haven’t tried AS3 Animation System v2.0 so I can’t comment on it.
Josh: Thanks for the clarification. You can also use fl.transitions.Tween in a FlexBuilder AS project by adding the Flash ActionScript 3.0 library to your project.
Brendan: From my experience, Fusekit offers a lot of functionality but comes at the price of a larger filesize. Fusekit has a looser syntax which may be easier to use for non-advanced coders.
Unfortunately, Fuse isn’t built for AS3, so it’s not in the race.
I’m hoping Adobe addresses their built-in tweening classes in the next build … TweenLite’s size is definitely a plus, however, I really wish the code used JavaDocs and that ease methods were separated from the class and more plentiful (maybe include Penner’s stuff…). Granted, easy fix, but coders are lazy and presentation means alot.
Just a note about Rich’s comment – the ease methods ARE separated from the TweenLite class and couldn’t be more plentiful – you’re able to use any easing method you want (Penner’s, the ones that ship with Flash, your own custom ones, etc.)
Cheers
Simple Tween Class
http://as3s.org/tween/
– Multiple tweens
– Light weight
– Standard EventDispatcher/Event class-based
– any easing method( fl.motion.easing package or your own)
Tweener is totally overwritten, its kind of a piece of crap and doesnt have the filters like tweenFilterLite. TweenLite and TweenFilterLite are better but I think its a mistake to separate them into two separate classes. Fuse is a pathetically overwritten embarrassment. Im glad theres no as3 version.
Gobot, I totally hear your frustration. Most of the options out there seemed totally bloated to me too. That being said, let me point out a few reasons TweenLite and TweenFilterLite are split apart:
1) File size. Only a portion of projects out there require tweening of filters. Almost every project I work on uses TweenLite, but only a few require tweening filters (TweenFilterLite). TweenLite is 2k whereas TweenFilterLite is 5k. Again, one of the stated purposes of TweenLite was to minimize file size & code bloat. If someone only wants to use TweenFilterLite, fine. But I think many people appreciate being able to use the most lightweight option for their needs and shave off the 3k when possible.
2) Speed. Tweening filters is a more complex task. There are additional if/else statements and calculations in the rendering loop inside TweenFilterLite which could potentially slow things down a bit, even for non-filter tweens (I doubt anyone would notice a difference unless they’re running hundreds or thousands of simultaneous tweens, but I’m a big fan of keeping things as efficient & fast as possible)
Jack
Looking for a Bezier Tween in Tween Lite. Does one Exist?
Why someone would be so concerned about the file size these days?
I mean, when the difference is less then 10k, why bother (unless you are making banners, that are strictly limited in weight 🙂 )?
Yes, it’s cool to do the things this way – tiny and fast.
But while the speed is almost always a priority, the weight is not so important. My guess is that almost no one will notice the weight loss beyond 10k. 🙂
Nox, it is always good to take size into considerations. I think trimming down 2-3k is actually really good since a lot of things only trim down a few bytes rather than a few k. Imagine you have a popular website and that flash object takes up 10k rather than 7k. You get 10,000 hits every day. That’s 30,000k you saved. 300,000k per month.
ya … boostworthy’s AS v2.1 is unreal. I’ve used it above the other choices out there. Lightweight and versatile.
Another important consideration is speed and scalability. It may be worthwhile to check out a speed comparison at http://blog.greensock.com/tweening-speed-test/. Big speed enhancements were made in version 5 and then again in 5.7, so if you’re not using the latest and greatest version, it’s time to download it.
Big news: TweenMax was just released. It’s built on the TweenLite core engine and adds a slew of new features but maintains great speed. Check it out at http://www.TweenMax.com
It’s fun to compare all the different packages out there, but it sort of begs a question: Why do we need them all in the first place? The answer is that creating solid, versatile animation tools has historically been really involved. The only real options have been to find a solution that works for you, or to spend months trying to build your own, only to realize that you’ve created one more proprietary system that doesn’t tie into anyone else’s work.
Luckily there is finally a 3rd option! GoASAP (the Go ActionScript Animation Platform) finally makes it approachable & really fast to create your own animation tools. Since you work from a set of core classes that many other devepers also use, you and your team’s custom library will be naturally compatible with the tools made by other developers. (None of the other tools mentioned on this page are compatible, they are all standalone solutions.) Go is easy to learn, and instead of presenting a set of syntax rules and limitations, it leaves things wide open for you to define the syntax the way you like, and to easily expand your toolkit for any new challenge that comes up in a project. It really rewards creative developers.
Oh and, it has sequencing built in! So, create a tween class (or use someone else’s from the Go Playground), and you can immediately start sequencing. It’s also very easy to write a parser, for example one Go system is called HydroTween (by Donovan Adams of Scifi.com), which looks a lot like Tweener, but with sequencing! John Grden of Papervision is using Go to create a killer 3D tweening system. You can pretty much do anything you want with it!
Learn more at http://www.goasap.org/ and http://go.mosessupposes.com/ 🙂
I really want to like the new Go engine… really, I do. Fuse was my favorite AS2 solution, and I was really hoping for a Fuse for AS3. I feel that Go has really missed the mark, and it’s a bit inaccessible to most developers.
TweenLite has been the best solution yet, especially considering all the features of TweenMax, it’s bigger brother. The syntax is easy to understand, and there aren’t 20 different ways to code tweens like Go.
One of the main intentions of Go is to open up a community of developers to make their own tweens and etc – however it’s counterproductive to then give them so many different ways to collaborate, without a standard. So now, everyone is using Go, but then using a proprietary parser on top of it, so you’re defeating the purpose and adding another class to the picture.
Moses, I am going to try the go engine but I think that a lot of developers are not familiar with checking out code from svn repositories some people will need a “download” link with the package.
You can download a zip file of Go at http://code.google.com/p/goasap/, you aren’t limited to checking out via an svn repository.
I think that everything is reasonably well documented for GoASAP and by providing a framework that is non-proprietary I think it is in any designer/developers best interest to at least take a look. I’m going through it now and I don’t see anything that is that much more confusing or difficult than installing FuseKit.
I might have overlooked it the first time, but I think that *now* you can download a zip, not when I posted my comment. Nevertheless, I agree with you that all should check it out and maybe the other tween engine developers can think about conforming to the proposed framework.
who needs a reason when you have tweenmax…
Anybody heard about tweensy and tweego? both available in google codes. Tweensy breaks all records in tween performance. Tweego is as3 version of fusekit. I have started a blog and posted about all these. http://blog.browseforart.com/
Hi all !
Just a silly question of an AS3 noob :
I used to work with Jack’s TweeLite in AS2. I really like it.
But i got to live with my time and get adapted to AS3…
As many of my AS3 projects need 3D animations, does TweenLite works with 3D animation
(perhaps my question is really silly as i didn’t get immersed enough in AS3 3D things) ?
Because when i search a bit about this question, the Zeh’s Caurina Tweener seems to be recommended…
So ?
Regarding flashmad’s comment about Tweensy being faster, I’d encourage everyone to do their own speed tests before assuming the speed test on the Tweensy site gives accurate real-world results. According to the tests I have done, TweenLite and TweenMax are still the fastest (http://blog.greensock.com/tweening-speed-test/) (source code available on the site). The tests currently on the Tweensy site are more a measure of rendering performance between a single Bitmap vs. thousands of overlapping objects rather than the tweening engines themselves.
As for [ D ]’s question, yes, absolutely – TweenLite and TweenMax work great for 3D animation. In fact, I hear all the time from folks who switch from other engines and see a huge performance improvement. http://www.TweenMax.com
A big issue with TweenMax and TweenLite is that they are not free and have a bad licensing model. It has screwed a lot of project and small developers. Despite being very well written but many supporters feel stabbed in the back. I really want a refund of my donation and memberships now that I have to re-code tons of my widgets.
Well said Sam.
Sam, I think you might be misunderstanding a few things.
1) TweenLite/Max are absolutely FREE for virtually all uses including commercial uses. The only exception has to do with usage in products for which a fee is charged to multiple end users, like in commercial components or games (see http://blog.greensock.com/licensing/), and in that case all that’s needed is a corporate Club GreenSock membership. That’s an extremely small fraction of the use cases out there (probably less than 1%), but when you really think about it, there are some compelling reasons why this licensing model is a very GOOD thing for end users like you. I won’t go into specifics here, but I have posted elsewhere on the topic and will likely be adding a post to my blog soon explaining exactly why the licensing model should give you more confidence, not less.
2) If you wanted a refund, all you had to do was ask. I clearly state on the site that there’s a 30-day 100% money back guarantee. I’m passionate about having happy customers. I have no idea why you feel “stabbed in the back” (the licensing terms have been clearly stated for quite a long time), but if you’re not a happy customer, there’s no reason for you to be in the club. You’re the first person who has ever expressed dissatisfaction with the value they got from joining Club GreenSock (unless my memory is failing me). The feedback I regularly get from club members is that the value they get FAR exceeds the cost and that their products perform better, development time is accelerated, and they’re able to do more than they otherwise could. I’m sorry to hear that wasn’t your experience, though. Contact me and I’ll get you the refund immediately.
I’d also encourage you to consider what it really costs to use a “free” open source engine that has no viable funding mechanism. Believe me, there is a cost, although it may not be financial. Is it support? Continued innovation? Optimization/speed? Prompt bug fixes? Plenty of companies and developers have chosen the GreenSock platform in large part BECAUSE of the licensing model, not in spite of it. They see it as a strength that protects it from the common frailties of open source projects which often wither and die as the authors get busy with other more profitable endeavors, gradually resenting support requests from their once exciting venture. End users end up paying a steep price for using a “free” product. If you’re in the extremely small minority of developers who’d need the special license and “what does it cost?” is your main focus, definitely go with a different engine. If “what does it pay?” is what you care about, I’d encourage you to consider the speed, features, ease of use, stability, file size, frequency of updates, and reputation of the GreenSock platform and decide for yourself. Again, roughly 99% of all use cases will NEVER require the special license that comes with a corporate Club GreenSock membership anyway. I firmly believe this model serves the community better overall.
I tried a number of the open source tweening libs suggested above and they’re cute at most, including TweenMax. They’re poorly designed, with loose syntax and a bunch of static methods. I don’t believe in the flexibility argument, it’s just spaghetti code. These might, however, work well for designers, because they requires less programming experience to use.
I’m voting for fl.transitions (find it in your Flash CS3 folder). I’m going to extend these classes if the need arises.
Hi all,
just want to inform you that I found several bugs in TweenLite/Max classes which makes then unusable.
If you create new TweenLite instance, and use paused:true attribute, or pause it later, and then make couple of more instances, and program it in a way that one instance is triggering another, Flash will slow down and close.
I also manage to made it without pausing, and only difference is that flash is closing less often.
Sometimes instance will not trigger the function.
Also static approach is not working with TweenLite.from, it will not execute onComplete function if put in a loop with second tween.
I am very disappointed, and have spent menu hours trying to solve it.
Mox
Hi all,
just want to inform you that with new version of TweenLite , 1.133, bugs are gone.
Mox
what is the word on HydroTween or OpenTween? How do these engines compare? I have been using these engines for a while and am curious if I should move to something new.
Hi everyone
For those who are looking for a AS3 tween engine I would like to mention a new one
http://blog.inkora.com
Tweencube is free and open-source. It’s XML driven and has a class to create sound synchronized tweens.
Give it a try 🙂