aape – The Adobe Animate PixiJS exporter

Hi everyone,

I’m thrilled to share my latest side project with you. I call it aape. It is my version of an Adobe Animate PixiJS exporter.

Here are two demos of exported animations:

aape - animation demo
runner - animation demo

How it works:

The project is split into two parts. A JSFL script to export your current Animate timeline and a few JS classes to download and display the animation.

Your animation is build as usual. The only difference being that you have to explicitly tell aape which part of the animation should be exported as Bitmap. This is done by selecting the MovieClip in your Animate library and changing it to a Graphics object.
This workaround allows you to use every filter option of Animates AS3 documents.

MovieClip labels and comments are also exported and can be used by executing the familiar gotoAndStop / gotoAndPlay methods.

After building your scene you execute aape form the toolbar. The export starts with the currently open MovieClip as root element.

A simple export generates three files. A PNG Atlas + JSON file containing image locations and a JSON object that describes the exported timeline (the library).
The files can than be loaded and added to the aape.Timeline object. It’s prototype is the PIXI.DisplayObject. So you can easily add it to your existing display list.
The tool is not yet finished. I’m still working on the Animate user interface with export settings as well as a proper documentation.

If you are interested in aape, feel free to try it yourself. You can find the complete repository here:

https://github.com/MRWUT4/pixijs-animation-export

What do you think?

One reply on “aape – The Adobe Animate PixiJS exporter”

  1. Suggestion:
    An option for export individual pngs (without package them to a atlas).
    Cuz people may have many animations, and they package whole assets in a big atlas by theirself is more efficient.

Comments are closed.