Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save defims/270709fe58ee6da0a6fc9fb8b2beb120 to your computer and use it in GitHub Desktop.
Save defims/270709fe58ee6da0a6fc9fb8b2beb120 to your computer and use it in GitHub Desktop.
selected frames svg smil path data generator by Def (def@hai.li)
/*
MIT license
what:
selected frames svg smil path data generator by Def (def@hai.li)
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"
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment