Last active
June 21, 2016 02:53
-
-
Save defims/270709fe58ee6da0a6fc9fb8b2beb120 to your computer and use it in GitHub Desktop.
selected frames svg smil path data generator by Def ([email protected])
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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" | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment