Tuesday, September 9, 2008

Flexy: A Flexible AS3 Animation Library

I'm currently working on new animation capabilities for the next release of Flex. We have some great stuff in there already, such as the effects infrastructure and state transitions, but I'm rounding out the functionality and rethinking some of the APIs to make the system more powerful and usable by both tools and developers.

For my effects work, I'm mostly concerned about Flex developers because, well, that's what the library is for.

But it occurred to me, through conversations and through random web perusals, that an animation system that could also be used outside of Flex might be interesting to the people doing ActionScript3 applications without the Flex framework, or to people doing both Flex and non-Flex AS3 programming. It also occurred to me that much of my code was Flex-agnostic. Of course, the code that is tied to Flex effects and transitions is necessarily dependent upon Flex, but the core animation engine really doesn't care what it's animating or how; it's simply varying values over time.

So I took a pass over the code to make it truly Flex-less, which involved removing a total of like 5 lines of code from my existing classes. I also added a class called ObjectAnimator, which is a simplified version of the new Flex Animate effect class.

But probably more interesting to the people reading this, I am putting out the results here as something for people to try out.

Caveat: (I love using the word Caveat. For one thing, it's a great hedge. But also, it's the only Latin word I know and surveys show that people who speak Latin are smarter. Except the Romans, when they let their city get overrun and their empire trampled) This is not a released product, either from Adobe or from me. Instead, it's a technology demo that shows you what the new Flex animation system does. My main focus is, and should continue to be, making Flex animation rock, which means that I can't spin up effort supporting an animation library that's a separate entity. Having said that, the code that I'm delivering here is about a 99% (taking a complete guess because I don't want to bother diffing and counting lines of code) copy of the code in Flex, so it's not like this is just some random code project spew.

There are various reasons I'm doing this:

  • Nice guy: This is just another example of what a great guy I am. A real pal. Your source for fun code and good CPU times.
  • Feedback: I'd like to get people, especially animation-savvy developers, interested in what I'm doing for Flex and giving me some feedback on things they think I'm missing, or things they would also like to see, or problems that they are having. I don't want Flex to be a constraint that makes it hard for those people to check out the animation code and play with it.
  • Share the wealth: If the stuff I'm doing for Flex can be useful in other Flash contexts, great! As I said, my main focus needs to be Flex. But if I'm doing generic work that can be used elsewhere in the Flash world, that's okay by me.

Demos are usually good, so here's one:

And here's the source code. The demo was built in Flash authoring (although you should be able to get the same result in either Flex or pure AS3 programming - I just used Flash as a proof-of-concept for this non-Flex animation library). The creation of the ball and button aren't obvious from the code because I did it in the authoring tool, but they aren't the main course of that demo anyway, and it would be easy to write something similar purely in code.

I was about to post this article, but then I realized that maybe you'd be interested in what the animation library actually does. Here are some quick explanations, but feel free to check out the demo code and the ASDocs for more concrete details:

  • Property Animation: Animating one or more properties on a given object for a set duration. This means calculating the in-between values and setting them on the object directly.
  • Arbitrary Type Interpolation: Animation of properties of any type: as long as you supply an IInterpolator implementation to the animation it can figure out how to calculate the in-between values. For example, there is a ColorInterpolator supplied with the library that handles per-channel interpolation for RGB uint values.
  • Easing: There is a simple IEaser interface with several built-in implementations to enable various linear and non-linear time easing calculations, providing for more realistic animations. For example, the Bounce demo above uses a cubic Power ease that accelerates for the full duration down.
  • Repetition. I repeat: Repetition: Animations that automatically repeat, either looping or reversing, for specified numbers of times. For example, the Bounce demo specifies a repeatCount of 2 that reverses each time to get that in-out behavior of both the bounce-down/up and the squish out-in effect.
  • Size Matters: The library is 10k. 10k! That's like less memory than Bill Gates thought anyone would ever want on the PC! Less than the word count of this blog (if I'd repeated each word 10 times)!
  • Multiple Leves of Control: ObjectAnimator exists to make creating animations even easier; you don't have to handle the animation events, but rather just tell it what properties to animation on which object between which values, and ObjectAnimator does the rest. But if you'd like to get your hands dirty, it's not that much more work to create the Animation object directly. Here's source code for an ObjectAnimator-less version of the same demo. Note that the steps to creating the animation are just about the the same as in the other version, but that we also have to set up and handle the update events in order to actually move the target object.

In the future, I may try to integrate this side-project more closely with Flex. For example, it's possible to build parts of the Flex framework (or any Flex project) as a separate library. For now, just to expedite getting this out there, I copied the code and created this project in Flash (that also helped me ensure that there were no Flex dependencies). But stay tuned to see if/when I start using the same source/build base for this project as for the rest of my Flex work.

So take the library. Try it out, with Flex projects and non-Flex projects. Check out the ASDocs. Check out the demo code. Check out the Flex opensource site for the actual code (only ObjectAnimator does not exist in Flex and most of that is culled from the Animate/AnimateInstance classes). Let me know how it works for you and what else you'd like to see in a core animation package.

Oh, and tell your friends what a nice guy I am.


Anonymous said...

Really cool!

Anonymous said...

Hello Chet,

Your animation library looks great. This, the recent release of GTween by Grant Skinner & other animation libraries obviously shows that programmatic animation in Flash is still a hot topic.
I don't know if you're aware of Moses Gunesch's efforts to unify ActionScript animation? If I remember correctly, it was just a little bit to late to incorporate his plans into Flex 2, (see http://www.goasap.org/faq.html). However, I strongly believe this should be considered for Flex 4 as it seems that the animation, effects & transition framework is being rearchitected. I see this as a huge opportunity to set a well-architected foundation for future animation platforms in Flash & Co and suggest you & Adobe should get in touch with him.


Anonymous said...

good post

Anonymous said...

hey chet,
i've been using flexy in some of my work lately, so i've been wondering about its future release plans. will it always be available independently, as its own .swc, as it is now? or in the future will we have to pull it out of the flex framework? will it always be usable in both flex and flash authoring? will there eventually be a more official separate site for flexy downloads and docs?


Chet Haase said...


At a minimum, I plan to update Flexy to take on some fixes and changes I've made to the Flex version of the classes. I would have done that already, but product deadlines have kept me focused on Flex recently.

Beyond that, I don't have specific plans. There is no plan for Flexy to be a 'supported' product. I would like to see it used or useful in other contexts beyond just in Flex, although for now it's meant more as a demonstration of what we're doing in Flex (and, if it's useful, as something you're free to use on its own).

The main issue for me is that I've got a lot of stuff to do for Flex itself, and I don't want to get side-tracked on other projects at the risk of not getting to the Flex features I have to get in for the next release. If I can enhance Flexy in the meantime, especially by simply releasing updates to the classes that I've already changed in Flex, then I'm happy to do it. Beyond that, any focus on Flexy will have to wait.

But in the meantime, I hope you've found it useful. If you see things lacking or that you would like to see changed, feel free to let me know about it. That was one of the main reasons I posted it, because features that would be useful to you might be useful to others and could be considered for changes in the core Flex version of the classes.

Anonymous said...

interesting. so the "official" way to use the services offered by flexy will be to use the flex framework? are the two apis identical? what about the flash authoring crowd? will they be able to use the flex framework too?

given that there's no official commitment to flexy, would you say it's correct to consider it simply "experimental"? should it, therefore, be avoided for commercial production quality code?

ideally i'd love to see the entire flex framework usable in flash. even if that never becomes a reality, i'd still love to see as much of the framework as possible separated out for use independently. (that's what i hoped the model for flexy.swc was...)

Porter said...

Just stumbled across this and it sounds pretty awesome. I definitely respect anyone going out of there way to share their works with the public, so kudos to you. I'll have to do some further digging to see what became of this (the post is a year old), but I'm sure I'll find it. Thanks for sharing, hope things went well.

Chet Haase said...

@Porter: Hopefully you can use what I've put here, even though the post is old. In the meantime, I have a more recent version of this library, more in line with the current codebase that we have in Flex 4 (some classes have moved around, some APIs have changed a bit, some functionality was added). I talked a bit about it at the end of my MAX 2009 talk (a link to that talk is in a recent blog post). I hope to post that version soon.