Export Animation as XML or JSON to Use Elsewhere?

[Dude5E3C]

Hi, I'm looking to export a tweened graphic symbol animation as a .xml, .json or other code file so that I can automate recreating the same animation in my video game that I'm making with C code.

To do that, I need the following symbol properties for each keyframe to exported in the order they exist on Adobe Animate's timeline:

• X and Y position
• Width and Height
• Rotation
• Scale
• Duration of tween or number of frames between keyframes
• Graphic Symbol Current Frame and Graphic Symbol Looping Setting (eg. Single frame, loop, play once)
• Opacity/Alpha (optional)

I'm aware you can export a texture atlas from a graphic symbol which includes a json file, but are there other ways to get each keyframes' properties such as extracting them from a .swf or even the .fla project file prehaps?

Thank you for any assistance!

[Vladin M. Mitov]

Hi,

Here is a script that exports the selected frames as JSON data. You need to include JSON in your finalized command, because it is not included by default in Animate JS API.

1. Download JSON from here:
https://github.com/douglascrockford/JSON-js/blob/master/json2.js

2. Save the code in your Command folder as 'JSON2.jsfl'

3. Run the export script.

(function(){

	fl.runScript( fl.configURI + "Commands/JSON2.jsfl" ) // initialize JSON here
	var report = {};
	
	exportAnimationFromSelectedFrames( report );
	
	
	fl.trace( ( JSON ) ? JSON.stringify( report ) : report );
	
	function exportAnimationFromSelectedFrames( r ){

		var doc = fl.getDocumentDOM();
		var myTimeline = doc.getTimeline();
		var i, j, myLayer, ln, myFrame;
		var selectedFrames = myTimeline.getSelectedFrames();
		var frmreport;
		
		if( selectedFrames.length === 0 ){
			fl.trace( "Select timeline frames to work on." );
			return;
		}
		
		// Loop through 'selected frames'
		for( i = 0; i < selectedFrames.length; i+=3 ){
			
			myLayer = myTimeline.layers[ selectedFrames[ i ] ];

			// Skip timeline folders
			if( myLayer.layerType === "folder" ) continue;
			
			ln = "Layer " + selectedFrames[ i ];
			
			r[ ln ] = [];
			
			for( j = selectedFrames[i+1]; j < selectedFrames[i+2]; j++ ){
				
				myFrame = myLayer.frames[ j ];
				
				// Skip empty frames
				if( ! myFrame ) continue;
				
				// get frame properties
				if( isKeyFrame( myLayer, j ) ){
					
					frmreport = {
						 frame		: j
						,label		: myFrame.name
						,duration	: myFrame.duration
					};
					r[ ln ].push( frmreport );
					
					getElementProperties( myFrame, frmreport );
				}
			}
			
		}
	}

	function isKeyFrame( aLayer, frameNum ){
		if( ! aLayer.frames[ frameNum ] ) return false;
		return ( aLayer.frames[ frameNum ].startFrame === frameNum );
	}
	
	function getElementProperties( fr, r ){
		
		if( fr.elements.length > 1 ) return;
		
		var el = fr.elements[ 0 ];
		
		if( el.elementType != "instance" ) return;
        if( el.instanceType != "symbol" ) return;
		
		var props = ( fr.useSingleEaseCurve ) ?
			[ "all" ] :
			[ "position", "rotation","scale", "color" ];
		
		var i, p, ease = {};
		
		for( i = 0; i < props.length; i++ ){
			p = props[ i ];
			ease[ p ] = fr.getCustomEase( p );
		}
		
		r.ease = ease;

		r[ el.libraryItem.name.split("/").pop() ] = {
			 x			: el.x
			,y			: el.y
			,width		: el.width
			,height		: el.height
			,rotation	: el.rotation
			,scaleX		: el.scaleX
			,scaleY		: el.scaleY
			,opacity	: el.colorAlphaPercent
			,firstFrame	: ( el.symbolType === "graphic" ) ? el.firstFrame : 0 
			,loop		: ( el.symbolType === "graphic" ) ? el.loop : "n/a" 
		}
	}

})();

[Dude5E3C]

Thank you @Vladin M. Mitov for taking the time to put together that script or to gather the information for it!

I'm not familar with using custom commands and seem to be running into issues getting the script to run without Adobe Animate 2018 crashing on me. Below are the steps I tooks and prehaps I am missing something? 

I'm not sure what exact steps I need to take to as you say "include JSON in your finalized command, because it is not included by default in Animate JS API." But prehaps that is what I did wrong?

1. I placed the "json2.js" from github and the "JSON2.jsfl" with your code in it in my commands folder located at: C:\Users\USERNAME\AppData\Local\Adobe\Animate CC 2018\en_US\Configuration\Commands

2. I made a simple tweened graphic symbol animation in Adobe Animate (just a Square graphic symbol moving from left to right between two keyframes on one layer).

3. I selected all the frames of the animation and ran the "JSON2" command from the Commands Tab in Adobe Animate. After a few seconds Adobe Animate closed.

[Vladin M. Mitov]

Hi,

I apologize for my unclear instructions.

1. Save the code, that I provided (as is) as EXPORT.jsfl in your Command folder.

2. The file with the json2 library must be named exactly JSON2.jsfl and must be placed in the Command folder too.

3. Run EXPORT command from the Commands menu in Animate

In the Animate output panel you'll see something like this:

{
    "Layer 1": [{
            "frame": 0,
            "label": "",
            "duration": 14,
            "ease": {
                "all": []
            },
            "Symbol 1": {
                "x": 102,
                "y": 138,
                "width": 48,
                "height": 48,
                "rotation": 0,
                "scaleX": 1,
                "scaleY": 1,
                "opacity": 100,
                "firstFrame": 0,
                "loop": "loop"
            }
        }, {
            "frame": 14,
            "label": "",
            "duration": 1,
            "ease": {
                "all": []
            },
            "Symbol 1": {
                "x": 102,
                "y": 138,
                "width": 48,
                "height": 48,
                "rotation": 0,
                "scaleX": 1,
                "scaleY": 1,
                "opacity": 100,
                "firstFrame": 0,
                "loop": "loop"
            }
        }
    ]
}