I tried to find a step by step procedure for After Effects to Spine but was unsuccessful so I've compiled the steps I used here. The steps I use fixed problems I had with locating images and renaming files after I had imported the project into Spine. Please feel free to add useful comments/additions.
After Effects to Spine Process:
Download file and unzip.
Copy the ae_to_spine.jsx file(s) and the lib directory to the scripts directory for After Effects and the LayersToPNG.jsx file to the scripts directory for Photoshop. For After Effects on a Mac, this is generally under "/Applications/Adobe After Effects CS/Scripts/". For Photoshop this is under “/Applications/Adobe Photoshop CS/Presets/Scripts/“.
Before using this script for the first time you must set up After Effects as follows:
Allow the script to write files to disk:
Go to menu Edit - Preferences - General...
Check the box: Allow Scripts to Write Files and Access Network.
Create a PNG template to be used by the script:
Create an empty composition, then go to menu Composition - Add to Render Queue.
On the Output Module option, click on: Lossless.
Choose Format: PNG Sequence, Channels: RGB + Alpha. Press OK.
Click the Arrow next to the Output Module option - Make Template...
In the Setting Name dialog, type in exactly this text: PNG
Click OK and you are ready.
When working in After Effects and Photoshop, make sure all compositions, layer names, and assets follow standard naming conventions — no spaces between words, etc.
Start with an image in Photoshop, with each image “part” separated on its own named layer. Make sure the Photoshop file is in RGB mode. In After Effects, import the Photoshop file and select “retain layer sizes.”
Create the animation(s) in After Effects. I usually start by creating a base animation named “idle.” I then duplicate it and rename it according to the animation (“attack” or “flying” for example.) There are limits to which effects can be exported properly and I stick to the basic transformations - rotation, scale, opacity, and position. Once the animations are finalized, create a folder in the project directory called (ProjectName)-assets. Return to Photoshop and using the LayersToPNG script (File > Scripts > LayersToPNG), export the Photoshop layers to this folder. Uncheck all options except “Write layers as PNGs.”
In After Effects, replace the image files (currently the imported layers from Photoshop) with the exported PNGs from the (ProjectName)-assets folder (this allows the Spine project to easily locate and import the images after exporting from After Effects). Save the AE Project and select the composition (or cmd click multiple compositions) from the Project window and go to File > Scripts > ae_to_spine.jsx and click “Export”
Launch Spine.
Go to the Menu > Import Data and browse for the (ProjectName)_spine.json file and click “Open.” Rename the Skeleton name (ProjectName). This will allow your import to find the images located in the (ProjectName)-assets folder.
The animations should have the same names as their After Effects composition names (“idle” “attack” or “flying” for example) but you can also double click the animations and rename them. After adjusting the animations in Spine, export the data (json file, atlas, and png) to the same directory. My final project folder is structured as follows:
ProjectName(folder)
ProjectName.psd
ProjectName.aep
ProjectName-assets(folder)
ProjectName_spine;project.spine
ProjectName_spine.json
ProjectName.json
ProjectName.png
ProjectName.atlas.txt
The next step is importing the animation project into Unity.
