Skip to content

Effortless Animations in Flash

by pixelpracht on Juni 25th, 2011

You want to display an Animation in Flash. The animation consists of a number of frames, each is saved as a small image somewhere on your HD. You wonder: What is the best way to do it?

If this scenario applies to you, here is one possible answer that does not require the Flash IDE or any full blown framework. It involves a free tool and a couple of small classes (also free) that should be easy to integrate with your project.

Step 1: Create an Image Atlas out of the individual images.

What is an Image Atlas? A big image containing many small ones side by side. Also known as Texture Atlas or Sprite Sheet.

Why do we want one? Because it’s easier to embedd one image file than many. :) It’s also reducing the size of the SWF because it compresses better then individual images. We’ll use a tool called Texture Atlas Generator to create our image atlas.

Create an Image Atlas

  • Check “PNG” so an image atlas is generated.
  • Check “Pack Transparent”. This will pack the images as small as possible by removing empty pixels. The 17 original images have a resolution of 128 x 64 each. The image atlas has a resolution of 400 x 182. So the same animation takes up roughly half the amount of pixels.
  • Check “TXA” to generate another file that stores meta information e.g. what frame went where in the image atlas.
  • All other options can be un-checked.

If everything works you end up with 2 new files: A TXA file and a PNG image atlas that should look roughly like this:

Step 2: Embedd the image atlas and the meta data in your Flash.

As described in my other blog post you can embed all kind of data in a SWF.

[Embed(source = "../Resources/MoikSlashAni.txa", mimeType="application/octet-stream")]
private static var animationTxaResource:Class;
public static var animationPngResource:Class;

Step 3: Use the ImageAtlas and AnimatedBitmap class to display the embedded animation.

In the Code Sample you’ll find a couple of classes from my library of custom code. Feel free to use them for your own projects. In this tutorial we’ll use the ImageAtlas class to unpack the individual frames from the image atlas and the AnimatedBitmap class (that behaves just like a normal Bitmap class with some extra functionality) that we will add to the stage to display the animation.

//unpack the embedded resources
var imageData:BitmapData = (new animPngResource as Bitmap).bitmapData;
var metaData:ByteArray = new animTxaResource;
//create an image Atlas storing our animation
var imageAtlas:ImageAtlas = new ImageAtlas(imageData, metaData);
//create an animated bitmap...
var animation:AnimatedBitmap = new AnimatedBitmap(imageAtlas);
//...make it play a sequence of frames...
animation.assignFramesByName("MoikSlashAni_0000", 16);;
//and add it to the stage

It’s as easy as that! :)

Sorry, either Adobe flash is not installed or you do not have it enabled

Download the sample project here: ImageAtlasTutorial

Step 4: Make it your own.

You probably want to have a look in the source code (to learn what AnimatedBitmap can do) and wrap the functionality with your own code. The AnimatedBitmap has a couple of functions that make it flexible to use.

  • You can toggle wheter you want the animation to loop.
  • You can set the current frame yourself or let it update automatically (by calling the play method).
  • You can reassign new frames so you could store a lot of different animations in the same image atlas. Running, Slash, Jump and so on. So one image atlas and one animated bitmap could be enough to display a full character. You just have to change the sequence of frames you want currently played e.g. assignFramesByName("jump001", 14) to play 14 frames of jumping.
  • You can pass a callback function as a parameter to the play that is called when the last frame is reached (and the animation isn’t looping) to play a follow up animtion.

I hope this tutorial has given you something to get started with! Feel free to post further questions in the comments. :)

Copyright Notice: The sprite I used in the demonstration is public domain and consider the code used in the sample as released under the MIT license.

From → Tutorials

  1. Maus Zozo permalink

    The embeded flash looks like it’s playing the animation backwards. Is it just me?

  2. pixelpracht permalink

    Huh, looks like you’re right!

    I acquired the frames from this spritesheet:

    And I guess I somehow messed up when splitting it into frames. *blush*

    When you look at the first screenshot, the individual frames are allready in reverse order. So there’s nothing wrong with the process described in the post but with the animation itself.

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS