selected frames svg smil path data generator by Def ([email protected])

selected-frames-svg-smil-path-data-generator.jsfl

/*
MIT license

what:
selected frames svg smil path data generator by Def ([email protected])

why:
[Flash2Svg](https://github.com/TomByrne/Flash2Svg) and [SnapSVG-Animator](http://cjgammon.github.io/SnapSVG-Animator/) are awesome.
but both of them generate shape tween svg code in frame by frame way.
this script generate svg path code in the keyframe way flash used.

how:
- selected frames in the .fla file
- create a jsfl document in adobe flash(animate) cc 2015 or newer version
- paste the code below into the jsfl file
- run it
- the keyTimes, duration and svg smil path data will appear in the output window
*/

var document = fl.getDocumentDOM(),
	library = document.library,
	timeline = document.getTimeline().getSelectedFrames()
		? document.getTimeline()
		: library.getSelectedItems()[0].timeline,
	selectedFrames = timeline.getSelectedFrames(),
	keyFrames = Array(selectedFrames[2] - selectedFrames[1] + 1)
		.join(".").split(".")
		.map(function(v, i) { return selectedFrames[1] + i })
		.map(function(v) { return layer.frames[v].startFrame })
		.filter(function(v,i,self) { return self.indexOf(v) === i }),
	startFrame = Math.min.apply(this, keyFrames),
	endFrame = Math.max.apply(this, keyFrames);

function getShapePath(shape) {
	//get bezier segment collection
	var cubicSegments = new Array(shape.numCubicSegments)
		.join(".").split(".")
		.map(function(v,i) { return shape.getCubicSegmentPoints(i) })

	/**/
	//the shape in the selected keyframes must own same points number
	var orderedCubicSegments = cubicSegments
		.reduce(function(result, v) {
			var prev = result[result.length - 1];
			result.push(cubicSegments
				.filter(function(v) {
					return v[0].x == prev[3].x && v[0].y == prev[3].y
				})[0]
			)
			return result
		},[cubicSegments.filter(function(v) {
		//use shape.contours to get the first point. shape.edges and shape.
		//vertices can't be used to generate path because sometimes their points number will be different.
			var vertex = shape.contours[0].getHalfEdge(0).getVertex();
			//ignore coordinate accuracy between shape.contours[0] shape.getCubicSegmentPoints(0)
			return Math.abs(vertex.x - v[0].x) <=.1
				&& Math.abs(vertex.y - v[0].y) <= .1
		})[0]]);

	cubicSegments = orderedCubicSegments;
	/**/

	/**
	//print points array
	fl.trace("["+cubicSegments.map(function(points) {
		return points.map(function(point) {
			return "["+point.x+","+point.y+"]"
		}).join(",")
	}).join("],\n[")+"]")
	/**/

	/**/
	//return svg path data, use Bezier Curves command
	return cubicSegments.reduce(function(result, cubicSegment) {
		return result
			+" "+cubicSegment[1].x+" "+cubicSegment[1].y
			+" "+cubicSegment[2].x+" "+cubicSegment[2].y
			+" "+cubicSegment[3].x+" "+cubicSegment[3].y
	}, "M"+cubicSegments[0][0].x+" "+cubicSegments[0][0].y+"C")+"Z"
	/**/
};

/*
fl.trace("\n===selected keyframes===\n"+keyFrames
	.map(function(v) { return v+1 })
);
*/

fl.trace("===selected keyTimes====\n"
	+keyFrames
		.map(function(v) { return (v - startFrame)/(endFrame - startFrame) })
		.join(";")
);
	
fl.trace("===selected duration====\n"
	+(endFrame - startFrame + 1)/document.frameRate+"s"
);

fl.trace("===selected path data===\n"
	+keyFrames
		.map(function(frame) { return timeline.layers[selectedFrames[0]].frames[frame].elements[0] })
		.map(getShapePath)
		.join(";")
	+"\n"
);