Create A CSS Sprite Sheet In Adobe Animate CC

by Todd Greenbaum

posted on 07-20-2016

CSS Sprite Sheets have been around for over 40 years when they first made an appearance in video games. The idea, which still holds today, was it was much more efficient to show a piece of a larger image than constantly having to load a new image. It is understandable, therefore, why CSS Sprites are so popular when it comes to web animation … especially in the mobile space.

When Flash disappeared on mobile devices a rather interesting thing happened. While mobile was all the rage as the “shiny new thing,” Adobe quietly added the ability to create CSS Sprite Sheets into Flash CS6. This meant animators or motion graphics designers could still take advantage of the power of Animate CC to create motion graphics but, instead of publishing a SWF that could be embedded into a web page, they could simply output the animation as a sprite sheet and left the heavy lifting to HTML5 and CSS3 rather than the Flash Player.

For those of you wondering, a sprite sheet is a bitmap image file that contains several graphics in a tiled grid arrangement. By placing all of the graphics into a single jpg or .png file, the device only needs to load one file rather than a few dozen separate image files.

In Adobe Animate CC, you can create this file from any combination of movie clips, button symbols, graphic symbols or bitmaps on the timeline. They can be created either from the main timeline on the stage or from items found in the Animate CC Library but not from both sources. As well any transforms such as scaling, skewing and so on applied to the object on the Animate CC timeline will be preserved in the Sprite Sheet.

In this exercise we are going to create a CSS Sprite Sheet using an animation from that “Animator Extraordinaire”, Chris Georgenes. What we are going to do is to convert a bird in flight to a CSS Sprite Sheet.

The Animate CC CSS Sprite Sheet Rules

To get started open the Starling_animation.fla file found in the download. When it opens you will see a bird against a blue sky. If you test the file by pressing Command-Return (Mac) or Ctrl-Enter (PC) you will see Chris’ bird flapping its wings.

If you take a look at the Library you will discover there are quite a few bits and pieces that comprise this animation including a couple of movieclips. To see how the bird was constructed, double-click the starling_flight movieclip in the Library. If you scrub the timeline you will see the bird flapping it wings.

Which brings us to the rules:

  1. Sprite sheets can only be created from timeline animations. This is understandable because each frame on the timeline will be converted to a sprite. The timeline can be either the main timeline or that found in a movieclip.
  2. Nested movieclips – a movieclip on another movieclip’s timeline – can’t be used. Again this makes sense because nested movieclips only show the first frame of that movieclip on the timeline.
  3. Actionscipt used to pull assets into the movie, add interactivity or to control the timeline will be ignored.

Bottom line? Sprite Sheets are created from straight heads-up timeline animations found on the stage or in a Button or movieclip symbol.

How To Create A CSS Sprite Sheet In Adobe Animate CC

Creating the sprite sheet is a rather uncomplicated process. All you need to do is to Right Click on the starling_flight movieclip and, when the Context Menu opens, select Generate Sprite Sheet. This will open the Generate Sprite Sheet dialog box.

On the left side of the dialog box you are being told the starling_fight movieclip has been selected. On the right side of the dialog box, moving from the top to the bottom, you are given a number of options. They are:

When finished, click Export and the CSS Sprite Sheet will be saved to the location set.

Conclusion

As you have seen, creating a CSS Sprite Sheet in Adobe Animate CC is what I refer to as being “dead simple”. As long as there is a timeline involved, no Actionscipt and no nested symbols, the process of creating the Sprite sheet is reduced to a couple of mouse clicks. Best of all you are handed the power of Animate CC to create animations ranging from the simple to the complex and use them in situations where you are precluded from using a SWF file.

Products: Creative Cloud, Animate

Topics: Video & Audio, Creativity