Adobe Animate

Daniel Sperl
Load and play Adobe Animate CC's 'Texture Atlas' animations
animate, movieclip, animation


This extension requires Starling 2.4 (which hasn't been released yet, so please use the latest head revision).

For a long time, Animate CC has been offering a “Sprite Sheet” export option. In Starling terminology, it created a TextureAtlas: one big texture that includes SubTextures for each frame of the timeline – ready to be loaded into Starling's MovieClip instance.

In 2017, Adobe added a new export format called Texture Atlas. That name is misleading for Starling developers — this format is actually a new format that efficiently describes an Animate CC animation.

Such an export creates 3 files:

  • spritemap.png – a texture atlas containing all elements of the animation (not the frames, but the actual building blocks).
  • spritemap.json – a JSON file that describes the positions of each SubTexture inside the PNG file (similar to Starling's native XML format for texture atlases).
  • Animation.json – a description of the animation in JSON format. It describes which object is visible at which frame; the complete timeline, layers, symbols, etc.

This extension can load and display this new format.

Here is an example of the extension in action! Use the directional keys on your keyboard (up, down, left, right) to change the animation phases of the Ninja Girl™.

The Adobe Flash Plugin is needed to display this content.

[This animation was created by the brilliant Chris Georgenes, the designer who also brought the Starling logo to life! You'll find the complete FLA file in the project download.]


Exporting from Animate CC

Adobe describes the process of exporting an animation from Animate CC in this tutorial.

In a nutshell:

  • Create the animation inside a new Symbol, i.e. it must show up in the “Library” panel.
  • Right-click on the Symbol and choose “Generate Texture Atlas”. In the dialog box that pops up, choose a folder in which to store the 3 output files.

Playback inside Starling

Adding Code & Assets

First, you need to add the extension code to your game. I recommend you simply copy the “starling.extensions.animate” package (found inside the “src” folder) to your game.

Now you need to add the actual animation files to your project. Add them just like any other assets – but keep the folders intact. You should have one folder per animation.

Like here:



// etc.
You can also add those png files to one of your texture atlases, of course. Just be sure that they are accessible via the name of the folder (“joker”, “mole”), not “spritemap”.

Alternative: Embedding the files

If you want to embed the files into your game (useful for pure Flash projects), you need to follow some simple naming conventions.

  • file name: [name]/Animation.json → member name: [name]_animation
  • file name: [name]/spritemap.json → member name: [name]_spritemap
  • file name: [name]/spritemap.png → member name: [name]

The Demo project shows an example of how it's done.

Loading the Assets

The extension contains an extended version of Starling's AssetManager, called AssetManagerEx. Use this version of the class in your game – it can do everything the standard AssetManager can, but adds some new features.

Enqueue the animation assets as shown below.

var appDir:File = File.applicationDirectory;
var assets:AssetManagerEx = new AssetManagerEx();
assets.loadQueue(/* ... */);

That's all there is to do!


To actually display those animations, we are going to create instances of the new Animation class. It works very similar to a classic Flash MovieClip, with the exception that you need to add it to a Juggler to see any movement – hey, this is still Starling, right?

Instantiating those Animations couldn't be easier. The AssetManagerEx does that for us. Like this:

var mole:Animation = assets.createAnimation("mole");

That's it! This will display the looping mole animation.

Of course, the Animation class is very flexible when it comes to playback.

// if you named two frames of the animation "walk" and "end-walk",
// this will make the clip loop between the two.
  function():void { mole.gotoFrame("walk"); });
// change the frames per second
mole.frameRate = 24;
// disable looping (all animations loop per default)
mole.loop = false;
// get notified when the animation is finished
mole.addEventListener(Event.COMPLETE, onMoleComplete);

The AnimationAtlas

Actually, I took a small shortcut above. We let the AssetManagerEx create the animation for us directly; but the animation is actually stored inside an AnimationAtlas. You can get that from the AssetManagerEx, too.

var atlas:AnimationAtlas = assets.getAnimationAtlas("mole");

Just like a TextureAtlas stores lots of different textures, an AnimationAtlas stores lots of different animations (or, to be exact: the raw data to create lots of animations).

With that atlas, you can create the mole animation like this:

var mole:Animation = atlas.createAnimation();

This will instantiate the default animation stored inside the movie clip; i.e. the main time line of the Animate CC symbol.

The atlas might contain other symbols, too. E.g. you could simply add lots of instances of other symbols inside its timeline and access them like this:

var background:Animation = atlas.createAnimation("background");

To find out at runtime which animations are available, trace them out like here:

trace(atlas.getAnimationNames().join(", ")); // mole, background, hands, feet, ...

[Note that these are only made-up names. The download repository does contain a 'mole' animation, but it does not contain those sub-symbols.]

Reducing the file size

The “Animation.json” file that is exported by Adobe Animate becomes really big quickly. However, the file is mostly made up by whitespace – Animate CC doesn't “minify” it.

Until Adobe provides such an option (vote for it here!), I recommend you minify the JSON file yourself. For example, the RubyGem json_minify does that job nicely, or this small script that I wrote myself.

That way, the “ninja-girl” animation, for example, shrinks down from almost 4MB to just 614kB!

If you additionally zip the file, you end up with just 46kB. I'll soon add another extension to the AssetManager so that it can load the zipped version directly.


The current version of this extension does not support all features that are stored in the Animate CC format. Most notably, masks and filters are missing, as well as color tinting.

Note that even when those features will be implemented, they will come with a noticeable performance penalty - so they should be avoided, anyway. Nevertheless, feel free to open an issue inside the Issue Tracker if you need them.


  • 2018/03/06: First public version

User Comments

Feel free to edit this part of the page if you want to add information that's lacking in the above description.
Questions are better asked in the forum, though.

  extensions/adobe-animate.txt · Last modified: 2018/03/16 07:40 by daniel
Powered by DokuWiki