TweenLite + TweenFilterLite (2K) Tween Engines (AS2, AS3)

[prg9]

Hi All,

After seeing treatkor's post (http://www.kirupa.com/forum/showthread.php?t=277417), and knowing of TweenLite and the various work of Jack Doyle over at greensock, I did a quick search of the forums and found there was not any information regarding these nice classes. So I thought a dedicated post was in order so people could be aware of these and utilize them. They are very efficient/fast and work well for projects where file size is optimal. Enjoy!

Overview (from the greensock site):


Tweening. We all do it. Most of us have learned to avoid Adobe's Tween class in favor of a more powerful, less code-heavy engine (Tweener, Fuse, MC Tween, etc.). Each has its own strengths & weaknesses. A few years back, I created TweenLite because I needed a very compact tweening engine that was fast and efficient (I couldn't afford the file size bloat that came with the other tweening engines). It quickly became integral to my work flow. I figured others might be able to benefit from it, so I released it publicly.

Since then, I've added new capabilities while trying to keep file size way down (2K). TweenFilterLite extends TweenLite and adds the ability to tween filters including ColorMatrixFilter effects like saturation, contrast, brightness, hue, and even colorization but it only adds about 3k to the file size. Same syntax as TweenLite. There are AS2 and AS3 versions of both of the classes ready for download.

From the Comments:

Jack Doyle (greensock) said, on September 12th, 2007 at 11:02 am

I did run some benchmarks a while back and there wasn’t a single tweening engine that was faster than TweenLite. I tried VERY hard to eek every bit of performance out of the code that I possibly could. When I did the tests, TweenLite was 20-50% faster than many of them. A few others were close, but none surpassed TweenLite’s speed.

TweenLite:
A Lightweight (2k) Yet Powerful Tweening Engine -- AS2 (http://blog.greensock.com/tweenliteas2/) | AS3 (http://www.greensock.com/ActionScript/TweenLiteAS3)

TweenFilterLite:
Lightweight (3k), Easily Tween Filters & Image Effects -- AS2 (http://blog.greensock.com/tweenfilterliteas2/) | AS3 (http://www.greensock.com/ActionScript/TweenFilterLiteAS3/)

Update:
2008 -- TweenMax is on its way - READ A FEW Snippets about it HERE (http://www.kirupa.com/forum/showpost.php?p=2271811&postcount=25)!

:kommie:

[minthu]

This is very nice! I like TweenFilterLite more than TweenLite. Thanks for sharing.

[ChromeDemon]

mint class ... thanx for sharing

[andrewfitz]

I don't know about his tests, but I'm not sure the last statement in the quote is very accurate anymore (for AS2 at least) :P

[prg9]

I don't know about his tests, but I'm not sure the last statement in the quote is very accurate anymore (for AS2 at least) :P

I think your both probably biased (ha, ha), we need a third party without a tween class to conduct the tests. (ha, ha) (-:

[treatkor]

well, this got me curious so i did a comparison.

http://www.kirupa.com/forum/showpost.php?p=2225471&postcount=4

[dail]

Yeah, these are nice classes. I've used tweenfilterlite extensively in projects for some time. I've had a few performance problems with the As3 version of tweenlite, not sure why. I just switched to tweener in that instance. He also has a super nice text highlighter class.

[andrewfitz]

I did the test that laco did, with the 200 lines and the bounce ease, and Twease had an average of 49 fps with the project set at 50 fps. The zigoengine, which is a brilliantly fast engine, was 47-48ish. The Adobe tween class was a pathetic 35 fps out of the 50. Not sure what tweenlite was, but I think it was a good 40+ish.

treatkor, that's a really awesome example. Twease runs a boatload smoother, I'm actually shocked to see how well it runs in comparison. I spent many hours tweeking the hell out of the code for performance, so it's pretty much maxed out.

Anyone who makes a tweening engine has props in my book, so I hate to make it a competition, but if I'm to be honest, I feel Twease has them all beat in raw size, power, and performance, as well as features per byte. Of course, I am a bit biased. :P

[dail]

Here is another class, that kinda combines the two seperate tweenLite classes in approach. Has some interesting features, the virtual timeline is kinda sweet.

http://www.boostworthy.com/blog/?p=170

[andrewfitz]

Well yeah, there's tons of different engines, the one's mentioned are actually the lesser known, there's tons of high quality and well established engines out there. Fuse, Tweener, Animation System, Tweenlite, Twease, MCtween, mx.tween, etc. None of them are best of them all, each have their own strengths and weakness depending on what you want to do with them.

[prg9]

Animation System

I beleive its Animation Package (http://www.alex-uhlmann.de/animationpackage/).

EDIT: Opps, I guess there is a Animation System (http://www.boostworthy.com/blog/?p=138), I never knew about it, sorry about that Andrew.


Well yeah, there's tons of different engines, tons of high quality and well established engines out there. None of them are best of them all, each have their own strengths and weakness depending on what you want to do with them.

The intent of this thread (http://www.kirupa.com/forum/showpost.php?p=2224683&postcount=1) was to just make people aware of TweenLite (http://www.kirupa.com/forum/showpost.php?p=2224683&postcount=1) and TweenFilterLite (http://www.kirupa.com/forum/showpost.php?p=2224683&postcount=1), because as I stated there was not much talk on Kirupa about them and they provide some nice abilities and could prove useful for users.

But Andrew is correct, that there is not an end-all tween solution. Some are better than others in certain things and some offer different benefits/capabilities over others and of course personal preference is always another consideration among many others.

But the bottom line, hopefully someone will find some use in these two classes posted (http://www.kirupa.com/forum/showpost.php?p=2224683&postcount=1), as they are extremely good for what they were intended for.

[dail]

Nice performance test of the three engines talked about mostly here, over at greenstock..

http://blog.greensock.com/category/tweening/

[andrewfitz]

I'd just like to note that this performance test was made AFTER this discussion and AFTER a new improved version of Tweenlite was posted (for future reference so people don't think we're crazy).

[dail]

Yeah, I wonder if he read this thread..seems kinda random to suddenly do a performance test...

[prg9]

I'd just like to note that this performance test was made AFTER this discussion and AFTER a new improved version of Tweenlite was posted (for future reference so people don't think we're crazy).


Yeah, I wonder if he read this thread..seems kinda random to suddenly do a performance test...

Regardless of when/why - performance improvements and features are always good. :thumb:


Expect color and bezier in 1.2 as well as polishing off the Extend class and squashing any bugs that come up in this release. 1.3 I’m thinking will be the filter tweening release. After that, it’s pretty much done.

Now we are just waiting for the Twease updates to come about as mentioned before (http://blog.visualcondition.com/2007/09/10/twease-11-now-available/) :hugegrin:

[andrewfitz]

Yeah, I posted in the other thread that the performance increase was awesome. I just wanted to point out we were talking about an older version to anyone who reads this later.

I compared the 2 versions (of TweenLite), but due to my lack of time and knowledge of the internals of it, couldn't find the magic points responsible for the increase, let alone the 2x performance over Twease in the benchmark (which is incredible btw). I think it could be due to Twease's relatively slow initialization time of tweens and the checks for active tweens in the main update loop. But still, I'm kind of baffled.


Now we are just waiting for the Twease updates to come about as mentioned before
This wont be for at least a month when I finish my current Ruby on Rails project. Sorry.

[prg9]

Yeah, I posted in the other thread that the performance increase was awesome. I just wanted to point out we were talking about an older version to anyone who reads this later.

I compared the 2 versions (of TweenLite), but due to my lack of time and knowledge of the internals of it, couldn't find the magic points responsible for the increase, let alone the 2x performance over Twease in the benchmark (which is incredible btw). I think it could be due to Twease's relatively slow initialization time of tweens and the checks for active tweens in the main update loop. But still, I'm kind of baffled.

Yeah pretty good stuff. Do you still need to find a previous version as you mentioned in the other thread or have you found one already?


This wont be for at least a month when I finish my current Ruby on Rails project. Sorry.

A month, thats crap... JUST KIDDING, as was I just kidding about the update anyway, just giving you a hard time Andrew. But I am excited to see what you come up with when you do advance it further. Keep up the good work.

Let the battle of the 2k tween kits commence, long live 2k! Viva la 2k!

[andrewfitz]

Yeah I did, that's why I was able to compare them :P

It's okay, nobody uses Twease anyways, so I have no pressure at all mister.

[ChromeDemon]

for small projects it is incredible ...

thanx for sharing m8

[prg9]

Yeah I did, that's why I was able to compare them :P It's okay, nobody uses Twease anyways, so I have no pressure at all mister.

:P yeah (was just making sure). I am sure there are people using Twease. I have kept up with it since you released it. I am always trying to keep the toolkit full and know whats available for when its needed. Keep up the great work Andrew .... no pressure. ;)


for small projects it is incredible ...

exactly! TweenLite + TweenFilterLite offer alot of features with a small footprint!

[prg9]

Nice performance test of the three engines talked about mostly here, over at greenstock.. http://blog.greensock.com/category/tweening/

Now Moses from the FuseKit has also posted a Benchmarking Utility - TweenBencher (http://go.mosessupposes.com/?p=5) (but only for AS3). Also Jack over at greenstock has updated his Speed Test - Tweening Engine Comparison Tool (http://blog.greensock.com/tweening-speed-test/), to also now include an AS3 version.

From the looks of it AS3 is crazy fast comparatively. :stare: :thumb2:
:diss: Sadly I am still on AS2 as of now.

[prg9]

UPDATES to TweenLite and TweenFilterLite:

I see Jack from Greensock is now a member of the Kirupa Forums and noticed he posted about a new update that he released on 11/27/07.


.....make sure you're using the latest & greatest version of TweenLite and TweenFilterLite. I released an update today (11/27). You can get it at www.TweenLite.com or www.TweenFilterLite.com.

The sites will just take you to the respective pages of his blog that house the classes, but maybe eventually it will be at those two sites?

Have fun with the updates! :thumb:

[greensock]

Yep, I'm officially a Kirupa member now. It's where all the cool kids hang out, right?

Anyway, I just released version 5.7 of the TweenLite family (AS2 and AS3 flavors of TweenLite and TweenFilterLite) with even more speed enhancements.

Cheers.

[prg9]

Yep, I'm officially a Kirupa member now. It's where all the cool kids hang out, right?

You probably thought so once you saw all the traffic pouring to your site from the forums ;)


Anyway, I just released version 5.7 of the TweenLite family (AS2 and AS3 flavors of TweenLite and TweenFilterLite) with even more speed enhancements.

Wow your tweaking those babies to the max as far as optimization and speed.... great work Jack!

[prg9]

Wow your tweaking those babies to the max as far as optimization and speed.... great work Jack!

Perhpas a coincidence to what I said about tweaking to the MAX (just kidding) :D ... but I just saw this comment from Jack on the greesock blog:



jack said,

on December 5th, 2007 at 3:08 pm
Aaron, TweenLite doesn’t support bezier tweens at this point. One of the primary goals of the class is to keep it extremely lightweight, so I have to protect the file size diligently. I may release a TweenMax class that is more heavyweight and has even more features packed into it (at the expense of file size). At the moment, however, I’m buried under a mountain of work so I can’t attack this in the near future, but stay tuned because hopefully I’ll get to it eventually. If anyone wants me to e-mail them if/when I release TweenMax, let me know (e-mail me at jack - at - greensock.com with “TweenMax” in the subject).



jack said,

on December 31st, 2007 at 12:03 pm

In order to keep file size down, there is not currently a way to automatically reverse (or yoyo) in TweenLite. I may add that feature to TweenMax, an upcoming heavier-weight extension of TweenLite. Stand by for that…

In the mean time, you can always use onComplete to call a function that manually reverses the TweenLite (by simply doing another TweenLite and reversing the values).

It seems like a more robust heaver-weight feature rich version is on its way and in the works already..... THAT WILL BE GREAT, I am sure!

Go Jack Go :thumb2:

Also TweenLite and TweenFilterLite were updated on 1/8/2008 get your fresh copies! :thumb:

[andrewfitz]

Tweenlite is a fantastic little engine, and these updates are nice. ..and that's coming from somebody with their own.

You're just ridiculous with speed enhancements; I can't get any more speed outta mine :mountie:

[greensock]

Tweenlite is a fantastic little engine, and these updates are nice. ..and that's coming from somebody with their own.

You're just ridiculous with speed enhancements; I can't get any more speed outta mine :mountie:

I take that as a big compliment, Andrew, especially coming from you. Thanks for all the support, guys.

FYI, I'm preparing to release a new class pretty soon that'll make simple 3D stuff REALLY easy. Ever wanted to flip a MovieClip/Sprite around, complete with realistic perspective (not the cheesy skew with parallel sides) with a single line of code? Me too. Of course the new class will integrate with TweenLite, so you'll be able to make things flip and fly around to your heart's desire. Stand by for more info. I'll post again when it's ready.

[prg9]

FYI, I'm preparing to release a new class pretty soon that'll make simple 3D stuff REALLY easy. Ever wanted to flip a MovieClip/Sprite around, complete with realistic perspective (not the cheesy skew with parallel sides) with a single line of code? Me too. Of course the new class will integrate with TweenLite, so you'll be able to make things flip and fly around to your heart's desire. Stand by for more info. I'll post again when it's ready.

:sc: That sounds wonderful will it be AS2 and AS3?. Will that be part of the TweenMax or something completely different? Regardless keep the wonderful coding innovations rolling, your pumping out alot great stuff over there! Great work and thanks for sharing with the community, sounds awesome!

Thats exciting news! :thumb:

[mprzybylski]

oh no, jack is posting on kirupa now? time to find a new forum to troll.

and prg9, the new class is AS3 only.

[prg9]

and prg9, the new class is AS3 only.

How do you know Matt, are you a private beta tester :hugegrin:

Seems like the love for the AS2 and pre-CS3 folks is really dying fast, yourself included Matt (just kidding).

:crying: Thats a REAL bummer, I thought maybe it would be for both AS2 and AS3 since he metioned both "MovieClip/Sprite", again major bummer! I am almost crying now after my earlier excitement when I saw him post that, still sounds nice though - sigh.

[mprzybylski]

oh, i dunno, just a guess :P

and you need to upgrade to CS3 already, its the way of the future.

[greensock]

Who is this Matt guy and how does he know about my classes before I release them? Can you say "stalker"?

Seriously, though, Matt and I actually play basketball together occasionally and have a mutual client. Great guy. He had a project that could benefit from the new class, so I coughed it up as long as Matt promised to mention it on his blog when I do release it :-)

The new class is currently only AS3, but I'm pretty confident it could be ported to AS2. But keep in mind that AS3 performs MUCH faster than AS2, and when you get into 3D stuff, it definitely needs all the help it can get. I'm not sure if an AS2 version would perform well or not. I might give it a shot if there's enough demand for it.

[prg9]

.....you need to upgrade to CS3 already, its the way of the future.

Sadly I am fully aware of the prowness and impreovments of AS3 and that Adobe is not turning back and that I need to move forward. I was gonna upgrade to the Master Collection, but then life got in the way (it happens). I am sadly aware that I am missing out, as soon as I can upgrade I will.

:book: In the mean time I am reading as much as I can and watching the industry and others, so hopefully it will be a good landing when I get there and not just a resounding thump.


The new class is currently only AS3, but I'm pretty confident it could be ported to AS2. But keep in mind that AS3 performs MUCH faster than AS2, and when you get into 3D stuff, it definitely needs all the help it can get. I'm not sure if an AS2 version would perform well or not. I might give it a shot if there's enough demand for it.

Well, that would be really awesome/wonderful if an AS2 version can make its way out also Jack. I am sure I am not the only one whom would be interested. I understand the benefits of AS3 and its speed improvements (can wait to be there). Atleast I have the hope that your confident it can be ported to AS2 :thumb:

Keep up the great work Jack and sincerely thanks for your response! U 2 Matt ;)

[ChromeDemon]

AS2 Class would be great, coz I dont know when I am moving over to AS3 ...

[andrewfitz]

Jack, is this like the "3D" features Adobe plans to have in Flash 10, except not hardware accelerated?

Kind of like how Dashboard widgets flip over?

[greensock]

Yep, I think so. It's not just for flipping though. You'll be able to take a Sprite/MovieClip (actually, a Bitmap "snapshot" of it) and manipulate it in 3D space including x, y, z, rotationX, rotationY, rotationZ, etc. And I tried VERY hard to make it EXTREMELY easy to implement. No need to read through 20 pages of documentation, set up cameras, etc. It's not meant to be a full 3D engine by any means, but it fills what I see as a huge gap in the market for easy, simple 3D stuff. I've seen a lot of posts about wanting to add perspective, flip something around, etc. That's what my upcoming class does. You can get somewhat fancy with it too (parent things to a common point, then rotate/move that point and they all animate together, etc.). Tween the vanishing point, focal length, etc. to get interesting effects. But if you want to just do a simple animated flip, it takes 2 lines of code. That's it.

I'm pretty excited about it. Hopefully someone else will find it useful too. Matt got his hands on an early version, so he can give you a relatively unbiased opinion as to its value. [slipping Matt a $5 bill under the table...]

[prg9]

Yep, I think so. It's not just for flipping though. You'll be able to take a Sprite/MovieClip (actually, a Bitmap "snapshot" of it) and manipulate it in 3D space including x, y, z, rotationX, rotationY, rotationZ, etc. And I tried VERY hard to make it EXTREMELY easy to implement. No need to read through 20 pages of documentation, set up cameras, etc. It's not meant to be a full 3D engine by any means, but it fills what I see as a huge gap in the market for easy, simple 3D stuff. I've seen a lot of posts about wanting to add perspective, flip something around, etc. That's what my upcoming class does. You can get somewhat fancy with it too (parent things to a common point, then rotate/move that point and they all animate together, etc.). Tween the vanishing point, focal length, etc. to get interesting effects. But if you want to just do a simple animated flip, it takes 2 lines of code. That's it.

Wow, this description sounds wonderful!! Please dont leave a gap/void for the AS2 users, there is still a large contigency of them/us out there for numerous reasons :thumb2:

Great work, this sounds awesome!

[mprzybylski]

if you want an unbiased opinion, here you go.

i built my DistortionTweener for the project I was working on and it did the job just fine. However, when Jack showed me his class, I redid the whole project to use his as it was about 10 times easier to implement than my DistortionTweener and making a tween was a lot easier around a central vanishing point rather than my way of setting up points for each corner to tween to.

it's a really useful class if you want to do that kind of stuff, but i've only used it for my purposes. it has a lot more cool stuff that you can do with it that i haven't even scratched the surface of. i think it'll be a welcome addition to the community.

[dail]

The new class sounds awesome! Looks like I'll be hitting that donate button again.

[jns.johansson]

nice class. it's awesome to begin using your easy class' to gain more knowledge about the real functions behind.

even though alot of ppl are using as2, making things in as3 forces them to learn the new language and thus improving the web. which we all want.

[KroZ]

Wow!! That's I need..))
Thank you

[bootiteq]

It's okay, nobody uses Twease anyways, so I have no pressure at all mister.

Im lourvin it! After you showed me how to make it global I passed it round the office and some of my co-workers are lourvin it too.:love:

http://blog.visualcondition.com/2007/07/13/introducing-twease/#comment-1937

[andrewfitz]

Im lourvin it! After you showed me how to make it global I passed it round the office and some of my co-workers are lourvin it too.:love:

http://blog.visualcondition.com/2007/07/13/introducing-twease/#comment-1937

How exciting :thumb:

Twease update coming in a few days too. Shh don't tell Jack.

[prg9]

Twease update coming in a few days too. Shh don't tell Jack.

:td: Hey use your own thread Andrew, just kidding :thumb:
http://www.kirupa.com/forum/showthread.php?t=268329

Wow its been awhile, I hope it has the things you mentioned here and many more...
http://www.kirupa.com/forum/showpost.php?p=2210818&postcount=17

[andrewfitz]

Haha, heyy he brought it up again! :angel:

[greensock]

Just in case anyone hits this (rather old) thread and doesn't realize it, TweenMax has officially been released and it adds a slew of features on top of the TweenLite core engine including Bezier tweening, sequencing, pause/resume, orientToBeizer, and a lot more.

Get all the details at www.TweenMax.com