Animate CC exporter

[ptotheaul]

Hi.

I know there has been some discussion about how to export an Animate CC animation for use with Phaser/Pixi on the forums but it all is kind of old so I figured I'd ask to see if there is a new method of doing this.   I have a movie clip that has other nested movie clips(each with a timeline animation) that need to be triggered.  This is a conversion from Flash and works in createJS but it's really slow and I think would be much better if done with Phaser or Pixi.  Also do any of the Phaser IDEs have timeline animators in them?  That could also be an option.

[hektor74]

Hi,

In the screenshot above you can see the spritesheet export window of Animate CC. I go to this windows by right clicking on a movieclip and selecting "generate spritesheet" from the menu.

On the spritesheet export window, inside the red rectangle you can see that I prefered custom and insert witdh and height to tile my movieclip contents horizontally. If this customly orginized with and height are not fits the minimal needs you will see an exclamation mark next to image dimensions selection box. This means you should increase the height or width till this mark is disappeared. Then in the dark blue rectangle you see that I prefered basic algorithm and JSON data format. Border and shape padding arrangements is up to you. I recommend to export the spritesheet directly into your phaser asset directory.

Then in Phaser Editor open a pack file and in the screen above after createing a section click on the "add asset" button inside the red rectangle and choose spritesheet entry inside the dark blue rectangle.

Then open the json file that Animate CC created with png image file while exporting spritesheet. Insert values of width, height and padding to the fields of Phaser Editor's spritesheet properties. After finishing and saving this pack editing session you can use this spritesheet by drag-dropping this asset into your canvas visually.

[PhaserEditor2D]

Hi,

Very nice explanation of how to load a spritesheet in Phaser Editor

 

In addition, you can learn how to preview that spritesheet and animations here: https://phasereditor2d.com/docs/preview-window.html#the-sprite-sheet-preview

 

And how to create the animations in the scene editor:    https://phasereditor2d.com/docs/canvas.html#animations

 

In a future, we should implement a timeline animation tool.