MovieClip Tweening Prototypes
Lately I've been working on a component-based Flash application for PGA to be used in an upcoming event -- one that will include a variety of news feeds (via RSS), schedule of events, photos, and other data that will rotate every half minute or so. Because the app will be used internally, I decided to try out some of the new tricks Flash MX 2004 and Flash Player 7 allow, including this fantastic collection of MovieClip tweening prototypes.
Chances are if you've coded motion using ActionScript, you've used Robert Penner's unbeatable collection of easing equations to achieve the effect you need. But using Penner's equations always included either copying/pasting his Math functions into your ActionScript or including them as an external *.as file, plus the extra headache of coding an engine to parse his functions and return the data to a MovieClip on your stage. I've used this methodology numerous times, and while it worked, I've always longed for tweening actions that could be applied with one line of code, provide a variety of options, and be easily accessible with code-hints in the ActionScript editor. Now thanks to the work of Ladislav Zigo, you can do just that.
Zigo's extension basically takes Penner's equations, wraps an engine around them, and applies it to the global MovieClip object as a "tween" method. Once you have it installed, applying ActionScript-based motion to a movie clip is as easy as: instanceName.tween(property,end value). In other words, if you wanted to move a movie clip from zero registration (0,0) to the right 100 pixels, you would write instanceName.tween('_x',100). The same example would apply to virtually any MovieClip property too (width, height, alpha, color, etc). But the tween method also packs a bunch of great properties, including animation type (Penner equation), delay (move after so many seconds), and the ability to call a function after the motion is complete.
Once I got the hang of it, I could apply the method to anything -- including items inside my own components. Additionally, I tested what would happen if I applied two tween methods to the same clip, and to my surprise it handled both just fine.
So what's the rub? Well, you have to use Flash MX 2004, publish a Flash Player 7 file, and use ActionScript 2.0 -- a rather steep set of requirements for most people, and not something you'd want to deploy on a large public scale. But for internal work, and for your own experimentation, the extension is a great tool to check out.
Update: Several people sent emails noting that Zigo's extension is an ActionScript 2.0 port of Zeh Fernando's work, which is essentially the same as the extension, except that it works in ActionScript 1 and requires a little more developer experience to get up and running. Also, according to Ladislav Zigo, the extension works fine in Flash Player 6, as long as you stipulate ActionScript 2.0 when you publish.
Update (2): In case you haven't read the comments in this thread, check out this excellent suite of benchmarks compiled by Zigo illustrating the speed and accuracy of various tweening engines.
Comments
Good point about the ability to publish to Player 6 with AS2; I forgot it all compiles down in the end. Using AS2 classes instead of AS 1 is likely to be cleaner, and perhaps more powerful: I'm curious how they compare. Zeh's excellent work creates a 'container' movieclip for tweening, which can run into problems occasionally. Any insight there?
Posted by: A. White at January 28, 2004 12:48 PM
I have making some performance and accuracy tests of tweening engines, you can find it here: http://laco.wz.cz/mc_tween/
Posted by: Ladislav Zigo at January 29, 2004 3:47 AM
Very interesting, Zigo - thanks for the great tests! Definitely your methods seem to perform better (2x-4x) than some of the other methods. Worth a look!
Posted by: A. White at January 29, 2004 7:59 PM
Ladislav, Thanks for sharing this extention. It is absolutly fantastic!!
Is there any way to add code hinting?
Posted by: Paul M at January 29, 2004 10:23 PM
Well, at least I beat Penner! In your face, tween-boy!
I'm #2! I'm #2!
nig
Posted by: nig at February 2, 2004 11:18 PM
:-)
Posted by: Laco at February 3, 2004 7:11 AM
my ActionScript Timeline solution wasn't included, but I downloaded everyone else's and ran my own tests. I didn't have particularly high expectations -- framerate wasn't at the top of my spcec. Nor am i an independent tester, but FWIW I found that my solution tied or ever-slightly beat nigel's. My results:
Kato: 17.8 FPS
Zigo: 16.7 FPS
shove: 14.2 FPS
nigel: 14.0 FPS
Zeh: 9.7 FPS
penner: 5.5 FPS
I ran everybody in a standalone Flash 7 player exported from MX 2004. The above are average of three.
I feel pretty good considering my library has a LOT of extra stuff that i don't believe these others have -- for one you can specify enterFrame OR interval based tweening. Shitloads of events to listen for... And there's XML input / output which I think is pretty wicked.
download: http://www.shovemedia.com/ioLib/timeline_v1.zip
In any case, I definitely need to port to AS 2.0 -- probably nobody's going to give a shit till then...
Posted by: jon williams at February 3, 2004 11:51 AM
Hi all,
i have during weekend just finished work on custom Easing Tool & Movieclip
tweening prototypes.
Currently it is about 40% faster than previous version :-) (i have
eliminated usage of with in update function) Check again the benchmarks :
http://laco.wz.cz/mc_tween/index.php#ver11
Posted by: Ladislav Zigo at February 9, 2004 7:53 AM
what about perceived speed? the actionscript timeline "looks" the fastest on my computer... maybe i am crazy? even though it did not score the fastest fps. most were nearly the same however... except mr penner's.
Posted by: matt cram at April 23, 2004 11:56 AM
