Best Way to Animate Sprites in Flex

Question

Is there a preferred way to handle animation when using Flex -- For instance, if I want to render a ball and bounce it around the screen?

Answer 1

I prefer to use a tweening library for things like this. Check these out:

Tweener

TweenLite / TweenMax

KitchenSync

I've had good luck actually using the first two, and have read great things about the last one.

Answer 2

If you're building a Flex application, you should use Flex's native Effect classes. They're probably already compiled into your app, since the core components use them, and you won't increase your SWF size with duplicate functionality like you would if you used another library. For simple animations, either mx.effects.AnimateProperty or mx.effects.Tween should work well.

If you're working on a regular ActionScript project (without the Flex framework), then I concur with the answer given by Marc Hughes. However, if that's the case, then please don't say you're using Flex because that implies that you're using the Flex framework and it can be very confusing. If you mean Flex Builder, then please use the full name to avoid potential misunderstandings.

Answer 3

You can't always use Flex's effect class with plain sprites. Certain effects expect your target object (the object to be tweened) to implement IUIComponent interface, while others don't. So you can either use mx.effects.Tween, or if you must use the one of the effects classses, you will need to coerce your sprite into a UIComponent.

Another option is to use one of the tween packages suggested above or roll your own with goasap!

goasap

Answer 4

You can use mx.effects.AnimateProperty even though your target is not a UIComponent.

If the tween you want to acheive is a simple one (Move, Resize, Fade etc) this saves you writing the boiler plate code that mx.effects.Tween requires.