Shape export to Apples Motion

Scrubelicious · January 8, 2015

Hi,

what are the chances to receive the option to export Vector shapes into Shapes for Apple Motion?

This is a option I would love to see, which would push me away further from Adobe Illustrator.

We create most of our Logos in Illustrator and run a script to export the vector shapes for Apple Motion.

This would be a great feature for motion graphic artist that use Apple Motion!

Thanks

Scrubelicious · January 16, 2015

Or maybe a the option to create scripts to do so?

Any feedback?

Thanks

MattP · January 16, 2015

We're definitely not averse to considering things... I thought that some of our users had already got their data into Motion though? What file formats does it accept? Is there not an SVG or EPS import option?

Thanks! :)

Matt

paolo.limoncelli · January 19, 2015

We're definitely not averse to considering things... I thought that some of our users had already got their data into Motion though? What file formats does it accept? Is there not an SVG or EPS import option?

Thanks! :)

Matt

Unfortunately Motion accepts only PDF data, and cannot be edited.

You need a .MOTN file to properly use node key framing, strokes, fills, etc...

With AI CS6 I used this script found somewhere... Probably the same used by Scrubelicious.

It basically translates Adobe XML to Apple XML (I suppose...)

Not tried with CC 2014 yet...

function newFile(msg) {
	var filename = prompt(msg, "Untitled", "Name Your Shape");
	if (filename != null) {
		motn_file = new File("~/Desktop/" + filename + ".motn");
		if (motn_file.exists) {
			motn_file = newFile("There is already a file by that name on your Desktop.  Please try another name.");
		}
		return motn_file;
	}
	else {
		return null;
	}		
}

mySelection = app.activeDocument.selection;
 if (mySelection instanceof Array) {
 	if (mySelection.length > 1) {
 		alert("Multiple Selection\nYou have more than one item selected.  Only the first object will be exported.");
 	}
 	else {
		theObject = mySelection[0];
		if (theObject.typename != "PathItem") {
			if (theObject.typename == "GroupItem") {
				alert("Type Error\nThe selected item is a group.  This script can only export path items.  Please ungroup and try again.");
			}
			else if (theObject.typename == "CompoundPathItem") {
				alert("Type Error\nThe selected item is a compound path.  This script can only export path items.  Please release to layers, select the resultant path and try again.");
			}
			else {
				alert("Type Error\nThe selected item is a " + theObject.typename + ", not a path item.  Please select a path item and try again.");
			}
		}
		else {
			if (theObject.closed == true) {
				closedFlag = 1;
			}
			else {
				closedFlag = 0;
			}
			if (theObject.filled == true) {
				fillFlag = 135248;
				if (theObject.fillColor.typename == "CMYKColor") {
					fillRed = 1 - ((theObject.fillColor.cyan/100) * (1 - theObject.fillColor.black/100) + theObject.fillColor.black/100);
					fillGreen = 1 - ((theObject.fillColor.magenta/100) * (1 - theObject.fillColor.black/100) + theObject.fillColor.black/100);
					fillBlue = 1 - ((theObject.fillColor.yellow/100) * (1 - theObject.fillColor.black/100) + theObject.fillColor.black/100);
				}
				else {
					fillRed = theObject.fillColor.red / 255;
					fillGreen = theObject.fillColor.green / 255;
					fillBlue = theObject.fillColor.blue / 255;
				}
			}
			else {
				fillFlag = 168016;
				fillRed = 1;
				fillGreen = 1;
				fillBlue = 1;
			}
			if (theObject.stroked == true) {
				strokeFlag = 135248;
				if (theObject.strokeColor.typename == "CMYKColor") {
					strokeRed = 1 - ((theObject.strokeColor.cyan/100) * (1 - theObject.strokeColor.black/100) + theObject.strokeColor.black/100);
					strokeGreen = 1 - ((theObject.strokeColor.magenta/100) * (1 - theObject.strokeColor.black/100) + theObject.strokeColor.black/100);
					strokeBlue = 1 - ((theObject.strokeColor.yellow/100) * (1 - theObject.strokeColor.black/100) + theObject.strokeColor.black/100);
				}
				else {
					strokeRed = theObject.strokeColor.red / 255;
					strokeGreen = theObject.strokeColor.green / 255;
					strokeBlue = theObject.strokeColor.blue / 255;
				}
				strokeWidth = theObject.strokeWidth + 1;
			}
			else {
				strokeFlag = 168016;
				strokeWidth = 1;
				strokeRed = 1;
				strokeGreen = 1;
				strokeBlue = 1;
			}
			if (theObject.strokeJoin == "StrokeJoin.MITERENDJOIN") {
				strokeType = 0;
			}
			else if (theObject.strokeJoin == "StrokeJoin.ROUNDENDJOIN") {
				strokeType = 1;
			}
			else if (theObject.strokeJoin == "StrokeJoin.BEVELENDJOIN") {
				strokeType = 2;
			}
			xrange = new Array;
			yrange = new Array;
			for (i = 0; i < theObject.pathPoints.length; i++) {
				xrange[i] = theObject.pathPoints[i].anchor[0];
				yrange[i] = theObject.pathPoints[i].anchor[1];
			}
			xrange.sort();
			xmin = xrange[0];
			xmax = xrange.pop();
			xcenter = xmin + (xmax-xmin)/2;
			yrange.sort();
			ymin = yrange[0];
			ymax = yrange.pop();
			ycenter = ymin + (ymax-ymin)/2;
			xlist = new Array();
			ylist = new Array();
			for (i = 0; i < theObject.pathPoints.length; i++) {
				xitem = new Array();
				yitem = new Array();
				xitem[0] = theObject.pathPoints[i].anchor[0] - xcenter;
				xitem[1] = theObject.pathPoints[i].leftDirection[0] - theObject.pathPoints[i].anchor[0];
				xitem[2] = theObject.pathPoints[i].rightDirection[0] - theObject.pathPoints[i].anchor[0];
				xlist[i] = xitem;
				yitem[0] = theObject.pathPoints[i].anchor[1] - ycenter;
				yitem[1] = theObject.pathPoints[i].leftDirection[1] - theObject.pathPoints[i].anchor[1];
				yitem[2] = theObject.pathPoints[i].rightDirection[1] - theObject.pathPoints[i].anchor[1];
				ylist[i] = yitem;
			}
			output = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\
<!DOCTYPE ozxmlscene>\n\
<ozml version=\"1.0\">\n\
<factory id=\"1\" uuid=\"712462a4323911d78f8400039389b702\">\n\
	<description>Shape</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<factory id=\"2\" uuid=\"27f3ee8b229211d7925a00039389b702\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<factory id=\"3\" uuid=\"878a64bd193011d8bac3000a95af9f7e\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<factory id=\"4\" uuid=\"69f1e0a52e7911d8b19a000a95b0025a\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<factory id=\"5\" uuid=\"7644521e2e7911d891a6000a95b0025a\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<factory id=\"6\" uuid=\"10405f52139811d8b4db000a95af9f7e\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\
</factory>\n\
<factory id=\"7\" uuid=\"0e8d443513b611d89395000a95af9f7e\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<primaryObjects>\n\
	<id>10002</id>\n\
</primaryObjects>\n\
<primaryFactories>\n\
	<id>1</id>\n\
</primaryFactories>\n\
<scenenode name=\"Shape\" id=\"10002\" factoryID=\"1\">\n\
	<curve_X>\n";
			for (i = 0; i < xlist.length; i++) {
				output = output + "<vertex index=\"" + i + "\" flags=\"40\">\n\
				<vertex_folder name=\"Vertex\" id=\"" + (i+10) + "\" flags=\"69712\">\n\
					<parameter name=\"Enabled\" id=\"1\" flags=\"65616\" value=\"1\"/>\n\
					<parameter name=\"Value\" id=\"2\" flags=\"65616\" value=\"" + xlist[i][0] + "\"/>\n\
					<parameter name=\"Bias\" id=\"3\" flags=\"65616\" value=\"1\"/>\n\
					<parameter name=\"Input Tangent\" id=\"4\" flags=\"65616\" value=\"" + xlist[i][1] + "\"/>\n\
					<parameter name=\"Output Tangent\" id=\"5\" flags=\"65616\" value=\"" + xlist[i][2] + "\"/>\n\
				</vertex_folder>\n\
			</vertex>\n";
			}
			output = output + "</curve_X>\n\
			<curve_Y>\n";
			for (i = 0; i < ylist.length; i++) {
				output = output + " \
				<vertex index=\"" + i + "\" flags=\"40\">\n\
				<vertex_folder name=\"Vertex\" id=\"" + (i+20) + "\" flags=\"69712\">\n\
					<parameter name=\"Enabled\" id=\"1\" flags=\"65616\" value=\"1\"/>\n\
					<parameter name=\"Value\" id=\"2\" flags=\"65616\" value=\"" + ylist[i][0] + "\"/>\n\
					<parameter name=\"Bias\" id=\"3\" flags=\"65616\" value=\"1\"/>\n\
					<parameter name=\"Input Tangent\" id=\"4\" flags=\"65616\" value=\"" + ylist[i][1] + "\"/>\n\
					<parameter name=\"Output Tangent\" id=\"5\" flags=\"65616\" value=\"" + ylist[i][2] + "\"/>\n\
				</vertex_folder>\n\
			</vertex>\n";
			}
			output = output + "	</curve_Y>\n\
	<override>0</override>\n\
	<aspectRatio>0.9</aspectRatio>\n\
	<ignoreBehaviorsBeforeID>0</ignoreBehaviorsBeforeID>\n\
	<flags>0</flags>\n\
	<timing in=\"0\" out=\"299\" offset=\"0\"/>\n\
	<foldFlags>0</foldFlags>\n\
	<baseFlags>524369</baseFlags>\n\
	<parameter name=\"Object\" id=\"2\" flags=\"4176\">\n\
		<parameter name=\"Shape Animation\" id=\"317\" flags=\"80\" value=\"0\"/>\n\
		<parameter name=\"Shape Type\" id=\"300\" flags=\"65616\" value=\"1\"/>\n\
		<parameter name=\"Closed\" id=\"316\" flags=\"65616\" value=\"" + closedFlag + "\"/>\n\
		<parameter name=\"Fill\" id=\"313\" flags=\"" + fillFlag + "\">\n\
			<parameter name=\"Fill Mode\" id=\"314\" flags=\"65616\" value=\"0\"/>\n\
			<parameter name=\"Fill Color\" id=\"311\" flags=\"4176\">\n\
				<parameter name=\"Red\" id=\"1\" flags=\"80\" value=\"" + fillRed + "\"/>\n\
				<parameter name=\"Green\" id=\"2\" flags=\"80\" value=\"" + fillGreen + "\"/>\n\
				<parameter name=\"Blue\" id=\"3\" flags=\"80\" value=\"" + fillBlue + "\"/>\n\
			</parameter>\n\
		</parameter>\n\
		<parameter name=\"Outline\" id=\"308\" flags=\"" + strokeFlag + "\">\n\
			<parameter name=\"Outline Color\" id=\"307\" flags=\"4176\">\n\
				<parameter name=\"Red\" id=\"1\" flags=\"80\" value=\"" + strokeRed + "\"/>\n\
				<parameter name=\"Green\" id=\"2\" flags=\"80\" value=\"" + strokeGreen + "\"/>\n\
				<parameter name=\"Blue\" id=\"3\" flags=\"80\" value=\"" + strokeBlue + "\"/>\n\
			</parameter>\n\
			<parameter name=\"Width\" id=\"305\" flags=\"80\" value=\"" + strokeWidth + "\"/>\n\
			<parameter name=\"Joint\" id=\"312\" flags=\"65616\" value=\"" + strokeType + "\"/>\n\
			<parameter name=\"Joint\" id=\"319\" flags=\"65618\" value=\"1\"/>\n\
			<parameter name=\"Order\" id=\"306\" flags=\"65616\" value=\"0\"/>\n\
		</parameter>\n\
	</parameter>\n\
</scenenode>\n\
</ozml>";
		//motn_file = File.saveDialog("Select where to save the Motion file");
		motn_file = newFile("Please enter a name for the shape file.  It will be placed on your Desktop.");
		if (motn_file != null) {
			motn_file.open("w", "mofo", "motn");
			motn_file.write(output);
			foo = motn_file.close();
			if (foo == true) {
				alert("Export Successful\nAll done!");
			}
		}
	}
	}
 }      
 else {          
 	alert("You do not have a path object selected.");
 }

Quarian · January 19, 2015

Great topic! I'm using Motion and Blender and have my head stuck into HitFilm, Natron, and AD. Was thinking that I'd just export PNGs from AD and bring them into Motion or HitFilm OR bring exported SVG files into Blender in order to make AD part of my burgeoning Motion Graphics/Animation workflow. If all else fails, I'm running Freehand MX in wine on one of my Macs and on my PC (using the Windows version to keep parity going back and forth)...

Affinity, I know it's wishful thinking at this point with as much as you guys have in front of you, BUT in about 3 years down the line...I hope you might be thinking about a Motion Graphics tool. I know it's a lot to ask (and I've never used MoviePlus) but, looking at how well you've implemented Designer, I think you could knock it out of the park with a Motion Graphics tool that could directly import AD and APhoto files.

Or maybe you could talk to FXHome (HitFilm) about devising an importer for AD files.

Just a thought...

MattP · January 20, 2015

Hmmm, interesting to see that script Paolo, thanks :) I'm sure we could get a very basic support quite easily - but people would expect it to be far more than basic if we officially tried to support it, and that may prove to be very time-consuming... Perhaps it's something we can consider for the future...

ronniemcbride · January 20, 2015

I know its not like importing a vector shape layer but you can import a PSD inside of motion Unfortunately, the layer import that it speaks of does not seem to work with AD PSD export.

Add a layered Photoshop file using the drop menu

Drag a layered Photoshop file from the File Browser into the Canvas, Layers list, or Timeline.
Before releasing the mouse button, pause until the Canvas drop menu appears and the pointer becomes curved.

This menu presents commands for importing the layered file.
Continuing to hold down the mouse button, drag the curved pointer over a command in the drop menu, and when the menu item is highlighted, release the mouse button.

The layers of the Photoshop file are added using the command you choose.

The Canvas drop menu has the following options:
- Import Merged Layers: All layers of the Photoshop file are collapsed into a single Motion layer.
- Import All Layers: A group is created, and each layer of the Photoshop file is preserved as a separate Motion layer in this new group.
- [individual layers]: Each layer in the Photoshop file appears as a separate item in the drop menu. Selecting a layer adds only that layer to the project, where it appears as a single Motion layer.

Note: When a Photoshop file contains more layers than can be displayed in the drop menu, the Choose Layer option appears in the drop menu. After you click the Choose Layer option, the Pick Layer to Import dialog appears.

Ben · January 20, 2015

AD PSD export has been improved and fixed in the last Beta. There were a couple of problems that only affected certain importers.

As a baseline, I'm only testing whether PSDs exported form AD will load into PS. Beyond that, it will depend upon the quality of the PSD importer for the other apps. The PSD file format is hideous, so I can imagine that other developers had similar trouble trying to decide how to handle some of the more recent features. There are still a couple of poorly documented bits that I am trying to decipher.

ALx · January 22, 2015

+1

I currently use Motionize plugin by Scott Ash for AI. It works but a big limitation is it's inability to export compound shapes and you need to be really careful with the layer structure. Everything is nicely explained on his site.

ronniemcbride · January 22, 2015

Thx Znak. This very interesting.I did not know this existed. i going to have to give this a try.

Hector Leon · April 2, 2015

Thank Znak!!!!!! hopping affinity can implement this feature soon!

Tabaleo Estudio · April 2, 2015

Hello,

It would be wonderful AD and AP could work with Apple Motion 5. Same After Effect with Illustrator.

Currently on the website of Mark Spencer, there is a plugin to convert Illustrator vectors into an editable format for Motion 5.

Link plugin: http://cl.ly/400S3t3I2A16/download/Export%20as%20Motion%20shape.js.zip

(Sorry, no English. I used Google Translate)

Castellano:

Hola,

Sería maravilloso que AD y AP pudieran trabajar con Apple Motion 5. Igual que After Effect con Illustrator.

Actualmente en la pagina web de Mark Spencer, existe un plugin para convertir los vectores de Illustrator en un formato editable para Motion 5.

ArcadaClub · April 26, 2015

Unfortunately Motion accepts only PDF data, and cannot be edited.

You need a .MOTN file to properly use node key framing, strokes, fills, etc...

With AI CS6 I used this script found somewhere... Probably the same used by Scrubelicious.

It basically translates Adobe XML to Apple XML (I suppose...)

Not tried with CC 2014 yet...

function newFile(msg) {
	var filename = prompt(msg, "Untitled", "Name Your Shape");
	if (filename != null) {
		motn_file = new File("~/Desktop/" + filename + ".motn");
		if (motn_file.exists) {
			motn_file = newFile("There is already a file by that name on your Desktop.  Please try another name.");
		}
		return motn_file;
	}
	else {
		return null;
	}		
}

mySelection = app.activeDocument.selection;
 if (mySelection instanceof Array) {
 	if (mySelection.length > 1) {
 		alert("Multiple Selection\nYou have more than one item selected.  Only the first object will be exported.");
 	}
 	else {
		theObject = mySelection[0];
		if (theObject.typename != "PathItem") {
			if (theObject.typename == "GroupItem") {
				alert("Type Error\nThe selected item is a group.  This script can only export path items.  Please ungroup and try again.");
			}
			else if (theObject.typename == "CompoundPathItem") {
				alert("Type Error\nThe selected item is a compound path.  This script can only export path items.  Please release to layers, select the resultant path and try again.");
			}
			else {
				alert("Type Error\nThe selected item is a " + theObject.typename + ", not a path item.  Please select a path item and try again.");
			}
		}
		else {
			if (theObject.closed == true) {
				closedFlag = 1;
			}
			else {
				closedFlag = 0;
			}
			if (theObject.filled == true) {
				fillFlag = 135248;
				if (theObject.fillColor.typename == "CMYKColor") {
					fillRed = 1 - ((theObject.fillColor.cyan/100) * (1 - theObject.fillColor.black/100) + theObject.fillColor.black/100);
					fillGreen = 1 - ((theObject.fillColor.magenta/100) * (1 - theObject.fillColor.black/100) + theObject.fillColor.black/100);
					fillBlue = 1 - ((theObject.fillColor.yellow/100) * (1 - theObject.fillColor.black/100) + theObject.fillColor.black/100);
				}
				else {
					fillRed = theObject.fillColor.red / 255;
					fillGreen = theObject.fillColor.green / 255;
					fillBlue = theObject.fillColor.blue / 255;
				}
			}
			else {
				fillFlag = 168016;
				fillRed = 1;
				fillGreen = 1;
				fillBlue = 1;
			}
			if (theObject.stroked == true) {
				strokeFlag = 135248;
				if (theObject.strokeColor.typename == "CMYKColor") {
					strokeRed = 1 - ((theObject.strokeColor.cyan/100) * (1 - theObject.strokeColor.black/100) + theObject.strokeColor.black/100);
					strokeGreen = 1 - ((theObject.strokeColor.magenta/100) * (1 - theObject.strokeColor.black/100) + theObject.strokeColor.black/100);
					strokeBlue = 1 - ((theObject.strokeColor.yellow/100) * (1 - theObject.strokeColor.black/100) + theObject.strokeColor.black/100);
				}
				else {
					strokeRed = theObject.strokeColor.red / 255;
					strokeGreen = theObject.strokeColor.green / 255;
					strokeBlue = theObject.strokeColor.blue / 255;
				}
				strokeWidth = theObject.strokeWidth + 1;
			}
			else {
				strokeFlag = 168016;
				strokeWidth = 1;
				strokeRed = 1;
				strokeGreen = 1;
				strokeBlue = 1;
			}
			if (theObject.strokeJoin == "StrokeJoin.MITERENDJOIN") {
				strokeType = 0;
			}
			else if (theObject.strokeJoin == "StrokeJoin.ROUNDENDJOIN") {
				strokeType = 1;
			}
			else if (theObject.strokeJoin == "StrokeJoin.BEVELENDJOIN") {
				strokeType = 2;
			}
			xrange = new Array;
			yrange = new Array;
			for (i = 0; i < theObject.pathPoints.length; i++) {
				xrange[i] = theObject.pathPoints[i].anchor[0];
				yrange[i] = theObject.pathPoints[i].anchor[1];
			}
			xrange.sort();
			xmin = xrange[0];
			xmax = xrange.pop();
			xcenter = xmin + (xmax-xmin)/2;
			yrange.sort();
			ymin = yrange[0];
			ymax = yrange.pop();
			ycenter = ymin + (ymax-ymin)/2;
			xlist = new Array();
			ylist = new Array();
			for (i = 0; i < theObject.pathPoints.length; i++) {
				xitem = new Array();
				yitem = new Array();
				xitem[0] = theObject.pathPoints[i].anchor[0] - xcenter;
				xitem[1] = theObject.pathPoints[i].leftDirection[0] - theObject.pathPoints[i].anchor[0];
				xitem[2] = theObject.pathPoints[i].rightDirection[0] - theObject.pathPoints[i].anchor[0];
				xlist[i] = xitem;
				yitem[0] = theObject.pathPoints[i].anchor[1] - ycenter;
				yitem[1] = theObject.pathPoints[i].leftDirection[1] - theObject.pathPoints[i].anchor[1];
				yitem[2] = theObject.pathPoints[i].rightDirection[1] - theObject.pathPoints[i].anchor[1];
				ylist[i] = yitem;
			}
			output = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\
<!DOCTYPE ozxmlscene>\n\
<ozml version=\"1.0\">\n\
<factory id=\"1\" uuid=\"712462a4323911d78f8400039389b702\">\n\
	<description>Shape</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<factory id=\"2\" uuid=\"27f3ee8b229211d7925a00039389b702\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<factory id=\"3\" uuid=\"878a64bd193011d8bac3000a95af9f7e\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<factory id=\"4\" uuid=\"69f1e0a52e7911d8b19a000a95b0025a\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<factory id=\"5\" uuid=\"7644521e2e7911d891a6000a95b0025a\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<factory id=\"6\" uuid=\"10405f52139811d8b4db000a95af9f7e\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\
</factory>\n\
<factory id=\"7\" uuid=\"0e8d443513b611d89395000a95af9f7e\">\n\
	<description>Channel</description>\n\
	<manufacturer>Apple</manufacturer>\n\
	<version>1</version>\n\
</factory>\n\
<primaryObjects>\n\
	<id>10002</id>\n\
</primaryObjects>\n\
<primaryFactories>\n\
	<id>1</id>\n\
</primaryFactories>\n\
<scenenode name=\"Shape\" id=\"10002\" factoryID=\"1\">\n\
	<curve_X>\n";
			for (i = 0; i < xlist.length; i++) {
				output = output + "<vertex index=\"" + i + "\" flags=\"40\">\n\
				<vertex_folder name=\"Vertex\" id=\"" + (i+10) + "\" flags=\"69712\">\n\
					<parameter name=\"Enabled\" id=\"1\" flags=\"65616\" value=\"1\"/>\n\
					<parameter name=\"Value\" id=\"2\" flags=\"65616\" value=\"" + xlist[i][0] + "\"/>\n\
					<parameter name=\"Bias\" id=\"3\" flags=\"65616\" value=\"1\"/>\n\
					<parameter name=\"Input Tangent\" id=\"4\" flags=\"65616\" value=\"" + xlist[i][1] + "\"/>\n\
					<parameter name=\"Output Tangent\" id=\"5\" flags=\"65616\" value=\"" + xlist[i][2] + "\"/>\n\
				</vertex_folder>\n\
			</vertex>\n";
			}
			output = output + "</curve_X>\n\
			<curve_Y>\n";
			for (i = 0; i < ylist.length; i++) {
				output = output + " \
				<vertex index=\"" + i + "\" flags=\"40\">\n\
				<vertex_folder name=\"Vertex\" id=\"" + (i+20) + "\" flags=\"69712\">\n\
					<parameter name=\"Enabled\" id=\"1\" flags=\"65616\" value=\"1\"/>\n\
					<parameter name=\"Value\" id=\"2\" flags=\"65616\" value=\"" + ylist[i][0] + "\"/>\n\
					<parameter name=\"Bias\" id=\"3\" flags=\"65616\" value=\"1\"/>\n\
					<parameter name=\"Input Tangent\" id=\"4\" flags=\"65616\" value=\"" + ylist[i][1] + "\"/>\n\
					<parameter name=\"Output Tangent\" id=\"5\" flags=\"65616\" value=\"" + ylist[i][2] + "\"/>\n\
				</vertex_folder>\n\
			</vertex>\n";
			}
			output = output + "	</curve_Y>\n\
	<override>0</override>\n\
	<aspectRatio>0.9</aspectRatio>\n\
	<ignoreBehaviorsBeforeID>0</ignoreBehaviorsBeforeID>\n\
	<flags>0</flags>\n\
	<timing in=\"0\" out=\"299\" offset=\"0\"/>\n\
	<foldFlags>0</foldFlags>\n\
	<baseFlags>524369</baseFlags>\n\
	<parameter name=\"Object\" id=\"2\" flags=\"4176\">\n\
		<parameter name=\"Shape Animation\" id=\"317\" flags=\"80\" value=\"0\"/>\n\
		<parameter name=\"Shape Type\" id=\"300\" flags=\"65616\" value=\"1\"/>\n\
		<parameter name=\"Closed\" id=\"316\" flags=\"65616\" value=\"" + closedFlag + "\"/>\n\
		<parameter name=\"Fill\" id=\"313\" flags=\"" + fillFlag + "\">\n\
			<parameter name=\"Fill Mode\" id=\"314\" flags=\"65616\" value=\"0\"/>\n\
			<parameter name=\"Fill Color\" id=\"311\" flags=\"4176\">\n\
				<parameter name=\"Red\" id=\"1\" flags=\"80\" value=\"" + fillRed + "\"/>\n\
				<parameter name=\"Green\" id=\"2\" flags=\"80\" value=\"" + fillGreen + "\"/>\n\
				<parameter name=\"Blue\" id=\"3\" flags=\"80\" value=\"" + fillBlue + "\"/>\n\
			</parameter>\n\
		</parameter>\n\
		<parameter name=\"Outline\" id=\"308\" flags=\"" + strokeFlag + "\">\n\
			<parameter name=\"Outline Color\" id=\"307\" flags=\"4176\">\n\
				<parameter name=\"Red\" id=\"1\" flags=\"80\" value=\"" + strokeRed + "\"/>\n\
				<parameter name=\"Green\" id=\"2\" flags=\"80\" value=\"" + strokeGreen + "\"/>\n\
				<parameter name=\"Blue\" id=\"3\" flags=\"80\" value=\"" + strokeBlue + "\"/>\n\
			</parameter>\n\
			<parameter name=\"Width\" id=\"305\" flags=\"80\" value=\"" + strokeWidth + "\"/>\n\
			<parameter name=\"Joint\" id=\"312\" flags=\"65616\" value=\"" + strokeType + "\"/>\n\
			<parameter name=\"Joint\" id=\"319\" flags=\"65618\" value=\"1\"/>\n\
			<parameter name=\"Order\" id=\"306\" flags=\"65616\" value=\"0\"/>\n\
		</parameter>\n\
	</parameter>\n\
</scenenode>\n\
</ozml>";
		//motn_file = File.saveDialog("Select where to save the Motion file");
		motn_file = newFile("Please enter a name for the shape file.  It will be placed on your Desktop.");
		if (motn_file != null) {
			motn_file.open("w", "mofo", "motn");
			motn_file.write(output);
			foo = motn_file.close();
			if (foo == true) {
				alert("Export Successful\nAll done!");
			}
		}
	}
	}
 }      
 else {          
 	alert("You do not have a path object selected.");
 }

Anyone able to do this in HTML and JavaScript?

deeds · April 26, 2015

side topic, does the new Apple Motion have realtime RAM Preview fixed so that it's actually playing back at the fixed and desired rate of Playback?

Pillow · August 2, 2015

kudos to this topic.

Exporting Shapes, or complex layered projects to motion files would be great!

deadpixelx · September 9, 2015

I'd be very very interested too by an exportation option into affinity to export shapes to Apple Motion to be animated then like drawing animation ....

Tank you in advance .. your work is amazing

GAN · October 25, 2015

Options like this would actually make Affinity an alternative to Adobe.

Now one has to use Illustrator, no use bothering with Affinity apps (I own them but was too optimistic). Export to Motion would be so amazing.

Ben · October 26, 2015

I've recently made some fixes to PSD export that should improve import to FCP X and Motion. They should be in the current Beta for Designer and Photo.

Aside from that - I know FCP X only handles raster layers from a PSD. What can Motion handle? We export vector shapes and masks to PSD where possible.

paolo.limoncelli · October 26, 2015

What can Motion handle? We export vector shapes and masks to PSD where possible.

From PSD only raster stuff...

To keep vectors editable and become animated Motion needs *.MOTN file

Ben · October 26, 2015

Right - that makes more sense. Thought I was missing something. I had a feeling that Motion and FCP X each would only support raster content. Our PSD support should be the same for both then.

As far as MOTN files - not sure we can do anything without a full file description. And then, it would be subject to the rest of our roadmap which is pretty full right now.

ArcadaClub · November 24, 2015

Hi Affinity Team. Here you can find Motion XML File Format: https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/motion_XML_guide/Overview/Overview.html

If we could export Vector-Files to Motion Shapes, we can make great Animations with them.

Martin Majewski · December 2, 2015

THAT WOULD BE AMAZING!

"Designer and Motion are both so intense! Put'em together, it just makes sense..."

:-P

cloudy · January 20, 2016

THAT WOULD BE AMAZING!

"Designer and Motion are both so intense! Put'em together, it just makes sense..."

:-P

Couldn't agree with you more. Adobe has no financial incentive to support Apple Motion because of all their Creative Cloud but if Affinity where to step up here and deliver something better in terms of export this would help sell a lot of licenses and get press no doubt. I hope you will prioritize this in your roadmap.

I'm trying to build a non Adobe workflow which of course includes Motion so am keeping my fingers crossed that you guys listed to all of us asking for better support and make this happen.

Positive Media · January 22, 2016

Definitely want to see this. It really can be done wth a script if set up correctly. I've also used the Motionize script to go from Illustrator to Motion 5. Would love to see that built into Affinity. It would be incredibly useful for me.

Dudemeister · January 31, 2016

Currently on the website of Mark Spencer, there is a plugin to convert Illustrator vectors into an editable format for Motion 5.

Link plugin: http://cl.ly/400S3t3I2A16/download/Export%20as%20Motion%20shape.js.zip

That plugin is age old and not anywhere near as useful as "Motionize" from Scott Ash. In fact I don't think it even works anymore.

Speaking of which, couldn't one simply reverse-engineer what either plugins i.e. scripts are doing and simply make a Designer compatible version of it. That is, assuming Designer even HAS any type of plugin API to cater to, I don't even know. Or is that notion just too naive?

Whatever is doable, I'd most certainly +1 it and it would eliminate one of the very last reasons I have for still keeping Illustrator on my machine.

Shape export to Apples Motion

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Scrubelicious

jediha

ArcadaClub

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information