• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Export Animation as XML or JSON to Use Elsewhere?

New Here ,
Jul 01, 2022 Jul 01, 2022

Copy link to clipboard

Copied


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!

Views

4.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 02, 2022 Jul 02, 2022

Copy link to clipboard

Copied

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" 
		}
	}

})();

 

 

 

 

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 02, 2022 Jul 02, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 03, 2022 Jul 03, 2022

Copy link to clipboard

Copied

LATEST

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"
            }
        }
    ]
}

 

 

 

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines