Using the Adobe Flash Sprite Sheet Generator

Adobe Flash Professional CS6 introduces a new tool called the Sprite Sheet Generator. This feature lets you generate a sprite sheet from any symbol or image on the Stage or in the document Library. Sprite sheets are an efficient way to add looping animations to games because they can be rendered using the GPU.

This article examines how to convert a looping animation into a sprite sheet using the Flash Sprite Sheet Generator.

Flash is one of the best tools for creating interactive content—a groovy crossroad where animation and interactivity purposely collide with beautiful results. If there's one thing I've noticed in the past year, it's been the undeniable shift in web technology. We've all been hearing the term "HTML5" being tossed around and less talk about "Flash". I've even heard people say that HTML5 is going to be the true Flash killer. As an animator, I've enjoyed using Flash for well over a decade; but am I worried that the future of Flash is in question? Not at all. No technology lasts forever, but Flash is here to stay, at least for a little while longer; and it's clear Adobe thinks so, too.

Before creating the sprite sheet, you need an animation. I've chosen to animate a character I designed for the Starling Framework (see Figure 1).

The bird avatar for the Starling Framework was conceived using the Adobe Photoshop Touch App, uploaded to the Adobe Creative Cloud, and then imported and redrawn in Adobe Flash Professional CS6. As I drew the bird using Flash's vector tools, I broke down each part into separate assets and converted them to symbols (see Figure 2).

The next step was to create the wing animation. I double-clicked the wing symbol and animated it using a method known as frame-by-frame animation, where each key frame is a new drawing (see Figure 3).

I copied the instance of the symbol containing the wing animation and pasted it to a new layer below the body of the bird. I then flipped it horizontally and positioned it for the bird's left wing. To add a slight sense of depth, I selected the instance of this symbol and applied a subtle color effect. The idea here is to darken it slightly to push it back from the rest of the body parts (see Figure 4).

I also animated the entire bird floating up and down in sync with the direction the wings are flapping (see Figure 5).

Now that the animation is complete, Flash can generate the sprite sheet. With the symbol instance containing the animation on the Stage, right-click over it and select Generate Sprite Sheet from the pop-up menu (see Figure 6).

The alternative way to create a sprite sheet is to right-click over the symbol listed in the Library panel and select Generate Sprite Sheet from the pop-up menu (see Figure 7).

The Generate Sprite Sheet will open in its own panel (see Figure 8).

Select image dimensions appropriate to your animation (see Figure 9):

Sprite sheet settings

From the Image Format drop-down menu, select between PNG 8 bit, PNG 24 bit, PNG 32 bit and JPEG formats. If optimization is a concern, you can choose PNG 8 bit format with transparency to bring the file size down considerably (see Figure 10).

You can also set a custom background color for your sprite sheet by clicking the Background color swatch and selecting a new color from the palette, or mix your own by clicking the small mixer icon in the upper right corner of the color palette panel (see Figure 11).

The Generate Sprite Sheet panel is then updated to reflect the new background color change (see Figure 12).

The Algorithm setting provides for Basic or MaxRects.

• Basic: The Basic setting is best for simple animations. Sprites are arranged uniformly in rows.
• MaxRects: The MaxRects setting is used to pack the frames more tightly together. (see Figure 13).

Incorporating the sprite sheet dynamically in a game

To prepare the sprite sheet for incorporation in a game, select the appropriate data format (see Figure 14). The data format describes the x, y, width, height and other info for each frame of animation in the sprite sheet. The developer uses this data to produce an animation from the sprite sheet for whatever framework they are using. You can even create your own data format using JSFL if you don't see one here that you need.

You can preview the sprite animation at any time by clicking the Preview tab above the sprite window (see Figure 15).

If you wish, you can also visit the Animation Learning Guide for Flash, which explains how to use all of these animation types in Flash Professional CS6.

Integrating your sprite sheet into The Starling Framework: if you haven't already, download the Starling package. For more information about the Starling Framework, and specifically, how to incorporate a sprite sheet into a game engine, read Thibault Imbert's Adobe Developer Connection article Introducing the Starling 2D framework.

For more information on creating and exporting Sprite Sheets, see Create a Sprite Sheet Help topic.