AnimatedImage

Overview

The AnimatedImage component animates spritesheets at the requested frames per second ("FPS") and the FPS is not locked to the stage FPS. This grants developers granular control over the animation speed of these animated images, as well as the ability to jump to specific frames in the animations.

Difference from Embedded SWFs

Embedded SWFs can be animated, but they are forced to run at the flash player's global FPS. This can result in animations being forced to run too fast or too slow without any way to modify the FPS. An AnimatedImage animation can be run at any FPS, up to the flash player maximum.

Creating the AnimatedImage

The AnimatedImage extends the spark BitmapImage class and can be added to any visual container that supports IVisualElementContainer.

Using the AnimatedImage

AnimatedImage components fully support the BitmapImage API and can accept the same source formats (png, jpg, raw BitmapData, etc.) for the bitmap data as the BitmapImage class.

To use an AnimatedImage component, set the following properties based on the Spritesheet (read more about Spritesheets below):

• frames per row: "framesPerRow"
• rows: "rows"
• frames in the last row: "framesLastRow' and
• framerate: "framesPerSecond"

Next, set the source to the desired spritesheet graphic. The animation will begin running automatically once the source loads.

Note that the "framesPerRow", "rows", and "framesLastRow" in the last row should be adjusted to reflect the particular spritesheet.

For example, these would be the correct settings for the following spritesheet:

Frames Per Row: 10
Rows: 6
Frames In The Last Row: 10

 

Creating Spritesheets

See computer graphics for information on spritesheets.

To create a spritesheet, use software that has support for spritesheet generation, like CS6, or manually concatenate each frame in your animation from left to right, top to bottom within a single image in graphics editing software. Make sure that each frame has the same width and height. See the demo application for spritesheet examples.

Automatic Play

Be default, the animation will run once the bitmap data is set.

Manually Setting the Specific Frame

To manually jump to a particular frame, use the "jumpToFrame()" method. Keep in mind, frames are counted from 0 to N. Therefore, the first frame in the spritesheet animation is at index 0.

If an animation is playing when jumpToFrame() is called, the frame will jump but the animation will continue to play. To freeze the animation at a frame, first call stop() on the animation and then call jumpToFrame().

Flash Version

A pure flash version named AnimatedBitmap is included for use when the flex framework is not available. The AnimatedBitmap operates nearly the same as the AnimatedImage, but the spritesheet bitmapData is added to the "spriteSheetBmd" property instead of "source".

Also, the AnimatedBitmap only accepts pure BitmapData as input, rather than embedded graphics generally.

Garbage Collection

Call dispose() to make the component eligible for garbage collection. When an AnimatedImage instance is removed from the stage, it is automatically stopped and dispose() is called.

Custom Events

The AnimatedImage component dispatches no custom events.

Example:

See the AnimatedImage application for example code.