A lot of people I know use Fuse to code their tweens, transitions, etc. It’s obviously a valuable product that has helped a lot of people, but I’ve always somewhat had the attitude that it was for people who didn’t know how to write motion code. Since I have a little experience in that area ;), I never really felt that a Fuse-like product was something I needed. I’d rather “roll my own tweens”.
But on a recent project, I started seeing why people would jump on an animation scripting package like that. The mockup I was given contained quite a few tweens, eases, transitions, fade-ins-and-outs, etc. I started writing them with simple eases, which I can do in my sleep. I soon realized that in order to match the styles, I’d need to use more advanced tweening equations. Robert Penner to the rescue. His easing equations did the trick wonderfully.
In order to make them a bit easier to use, I created my own Easer class, into which I could pass the chosen Penner equation function, and then start it, sending a starting value, ending value, and time. It uses setInterval, with a configurable interval rate, fires change and complete events. This is all AS2 by the way. This worked beautifully. I create the easer, passing in the function, set listeners, add handlers, start it. The handlers grab the current value of the easer, and apply it to whatever element is easing.
However, things started getting even more complex. There are sections of the site, where one thing builds in, then another one when that is done, then a pause, then another series of elements build in. I got it all going, but in some sections, it’s linked together as a long series of “when this easer is complete, start this one. When that is done, start the next one.” It’s perfectly valid code, but really needs to be abstracted more. As it is though, the project is just about done, and I’m not going to start restructuring the whole thing.
My understanding of some of the animation packages out there, like Fuse, is that a lot of this kind of thing is taken care of. You can have series of actions set up, or other actions run in parallel, delays, etc. So, I’m going to have to eat crow and say I wish I had started out using something like that. Then again, I still probably would have wanted to build my own, and still may expand my Easer class to do some stuff like that for future projects.
Anyway, just an acknowledgment of stuff that’s out there, that I may have somewhat scoffed at in the past. 🙂
Keith,
That really surprises me that you haven’t been actively using an animation package in any of your projects. Would you have any interest in an early copy of my AS3 animation system I’ve been hard at work on? It has some really cool features like a virtual timeline, motion paths w/ orientation to path, and the ability to choose ‘enter frame’ or ‘timer’ as your render method on a per animation basis. Let me know if you’re interested and I will shoot you a link to the SVN; I’d love to get some feedback from you.
I wrote my own set of wrapper classes for Tween a while back but, like you, realized they were a bit tedious when I started using them for a recent project that was heavy on animation. I ended up going with Tweener (http://code.google.com/p/tweener/), which has a much terser syntax: Tweener.addTween(clipToTween, {_x: 300, _y: 200, time: .65, delay: 2});
The only thing it lacks that I miss from my own classes is a formal way to chain tweens together, but that’s easy enough to accomplish with delays or setInterval().
I’m also surprised you haven’t been using some animation package 🙂
Check out Tweener on GoogleCode. The goals were simplicity, flexibility, and modularity. It will tween any numeric property (x, y, width, height, rotation, color, alpha, filters, etc). Development is fairly mature–there are multiple stable releases for AS2 and AS3.
The Syntax is super easy, for example:
Tweener.addTween(myMC, {_x:100, _y:200, time:2.5, transition:"easeOutQuad", onComplete:myFunction} );It even fully supports seemingly complex animations that use bezier control points like in this example quite easily.
It is also easy to use in conjunction with Papervision3D like in this example.
And a cheatsheet of Penner’s easing equations can be found here.
Tweener looks cool. I knew I’d get plenty of suggestions on packages to use. I know there are plenty out there. I have a pretty good idea what I would like mine to do, and will probably add to what I’ve already build anyway though. 🙂
Fuse is _THE_ tweening system for AS2. I’ve been involved with it from his beginnings, and at first it’s only about the tweens, but real fun starts with the sequencing of function calls. Easy scoping, callbacks etc.
My point is – when it comes to really strict deadlines and anal clients, animation systems like Fuse are real life savers.
Btw, for AS3 I would strongly suggest checking out Ryans package (animation package that is!) 🙂
Dude! I hate to say it, but I told you so! 🙂
The real power of Fuse is not in its animation engine, but in the sequencing and cuing that it can do. Being able to setup a series of functions to be called at certain times has been invaluable in the past for me, and well, I know it would have helped on the project that you just did.
“I hate to say it”???
Come on, you’re loving the fact that you can say “I told you so” !
hey ryan… you making hot with all that talk about your as3 tweening system… can you send me a link to your svn too? i’d love to break it in for ya.. wahahaha
email .oO at Oo. grindstonemedia.net
I used Tweener recently and I really enjoyed it! I’ve used Fuse on a few gigs and really got along well with it – it really “works”.
But, I think after using it, I’d have to call Fuse a “sequencer” that has tweening capabilities. So, when I just read your post Keith, it seems you’re saying the same thing.
The one thing that I’ve felt is bitter sweet about Fuse is the syntax. I mean, I love that it’s easy – you can write complex sequences with tweens/animations and it’s very easy to follow. However, I never went passed the 3 or 4 commands I knew about because of the style of the api. With tools like FDT, you can’t use auto-complete to get a hint of the API to help you expand your knowledge of the code base. And I found it difficult to find samples/answers on line about what I should use, what would do this or that. SO, I’d break down, write Chris or Marc or beg someone else, and I’d finally get an answer. An answer, I might add, that I could have found with any other app using auto-complete on my own and within a minute or so.
I’ve talked to Moses about this already, and it was a great conversation. He’s really onto something with his style of api, but just needs to find a way to make it work well for developers in their tools.
Tweener was the same way. For guys like me who live in asdocs and api’s all day, it’s frustrating to have to go to a web site and scan everything to find out the answers with in paragraphs of text etc. Its a departure from what we normally use and have come to expect when using engines or “packages”.
@KP – Great news, looking forward to your solution.
@John Grden – I think it’s because there’s a few qualities you can chose from when deciding on your code – and they’re not easily exchangeable. You can have flexible code based on anonymous or semi-anonymous objects (ie, Tweener, Fuse, others) but then you completely lose the advantages of auto completion or an API or asdoc-generated documentation. On the other hand, the code is very easy to *read* and much more flexible — you can add a new revolutionary feature without having to struggle on how to add that to the parameters.
To compare MC Tween with Tweener, for example, in MC Tween:
mymc.slideTo(10, 20, 1, “linear”, 2);
What does each parameter on the above line to? Heck if someone knows from reading, it’s just a bunch of numbers with an occasional string, right?
On the other hand, it’s much easier to write – because auto completion will tell you what the heck you’re writing.
Tweener’s syntax, on the other hand…
Tweener.addTween(mymc, {_x:10, _y:20, time:1, transition:”linear”, delay:2});
…is bigger, but much more readable. Impossible for auto completion and easy asdoc documentation, as you have to remember the property names.
In the end, which is better? No easy answer, I guess. It’s a decision between a few different qualities or features. You could have auto completion with non-anonymous objects on Tweener if you created them with a constructor before doing the addTween, but using a separate object (plus more lines) would also remove the advantage of easy, straightforward, 1-line code. It’s all a matter of juggling these issues and deciding on what’s better for you/someone else. That’s why I think there will be no definitive tweening solution – because there are too many different use cases to be met, and you’d either focus on a certain approach, or try to do it all and have too many different solutions for the same thing and cause a break on the development structure.
Tweening might be simple – “make variable X go from P1 to P2” – but it’s a can of worms in itself… and it’s as if these worms have more worms INSIDE of them. So it’s something that’s small, but must be so tight and controlled that an entire site can depend on it. And most of the decisions taken on these existing tweening packages come from years of work and, specially, thought on emergent flash development patterns. I think this is the reason why people usually rely on other’s people solutions instead of building homebrew solutions. I mean, my latest work has 272 separate .addTween() calls.. break something small on one of them, and the entire site goes kaput; make the process of tweening frustrating, and the entire site development becomes frustrating because everything from simple mouse overs to complex area state changes depend on it.
Personally, I don’t like “recommending” a solution over any other because I know there are different solutions for different minds out there and heck, whichever tool do the job for you is okey, just pick the one you get along better. But today, I prefer the openness of a solution like Tweener, and that’s why I really love it (obviously, because I built it to be the way I expected it to work for me). Other mileages may and WILL vary.
(Keep in mind I used MC Tween and Tweener on the above examples because they’re the ones I have had contact with, but all other solutions will fit into a segment and meet features of its own).
Here it is:
http://www.boostworthy.com/blog/?p=170
@John – I totally agree with you about your API comments. The lack of a clearly defined API can certainly make things more difficult than need be.
@Keith – If you get a chance to check it out, let me know what your thoughts are.