Using SVG Path Data in Flash

Toucan read from SVG file, drawing animated with Animation Package

Why SVG?

SVG (Scalable Vector Graphics) is the w3c specification for "describing two-dimensional graphics and graphical applications in XML," in other words, a universally readable way to store vector graphic description data. SVG content can be viewed with an SVG browser plugin, or in this case, a subset of it (the path tags, which provide a description of static vector graphic shapes) can be parsed and used in a Flash movie, as above. SVG files can also be output from Illustrator 10 (and above?) which makes it a useful mechanism for getting path and color descriptions of Illustrator vector drawings into Flash.

The content on this page was originally an experiment in finding a way to convert the content of SVG Path tags (from the previous SVG spec, 1.1) into drawing commands which could be executed in Flash MX. I began, and was enormously aided by a number of smart people in the Flash community to finish, a routine that would parse SVG path tags, in particular the d attribute of that tag, which describes the line and curve elements of a path (vector shape), and produce an array of Flash drawing commands. Peter Hall's ASVDrawing class was/is the most efficient mechanism for storing these commands and rendering them as shapes in a Flash movieclip, so that was one of the outputs from the conversion routine. The other was an object that was further subdivided into individual elements of the path, providing a means for say, moving an object along a particular path.

Since then, Alex Uhlmann has published the complete source and documentation for his fabulously versatile Animation Package, and Ivan Dembicki has written some clever and inscrutable code which allows an object to be moved along a bezier curve with equidistant spacing over time (no mean feat; I know, having tried to do the same and only coming up with bad approximations). His Path class is included in the distribution of Animation Package. What this means is that it's possible to neatly go from SVG path (or other shape description) input to Flash drawn shape, animated shape (with AP), animated shape outline (AP), and even move-oriented-object-along-said-outline (AP with Path) --as well as any other Flash movieclip manipulations, of course-- with a package of AS2 classes.

Conversion of SVG data

The class that converts SVG path data to an array of Flash drawing commands is divided into two parts. The first parses the path tag into a fill object, stroke object, and an array in which each element is either a drawing command or a number value from the original d string. Some SVG editors produce d strings that are separated by spaces; others (including Illustrator 10) dump the output as one long oddly delimited string, eg:

d="M215,24c0-13-48-23.5-107.3-23.5S0.5,11,0.5,24s48,23.5,107.3,23.5z"

• Begin at 215, 24
• Using relative control points 0, 13 and -48, -23.5, draw a (cubic bezier) curve to (relative endpoint) -107.3, -23,5
• Using the reflection of the 2nd control point above as the new first control, draw a curve with 2nd control point 0.5, 11 to 0.5, 24
• Using the previous 2nd control point as the (relative) new first control, and 48, 23.5 as the (relative) second, draw a curve to (relative endpoint) 107.3, 23.5
• Close the path

So that string needs to be broken apart and each element put into an array. Additionally, the commands in the string above may be specified with multiple points following them, so parsing and rendering is necessary for polybeziers and multi-segment lines too -- they are added to the array.

The second part of the conversion creates an array with ASVDrawing-formatted elements. Relative points (specified by lowercase elements in the path tag) are converted to absolute ones, and cubic bezier curves (specified by c, s, C, or S in the path tag) are converted to a series of quadratic beziers, using Robert Penner's cubic-quadratic conversion, which recursively calculates a set of quadratic beziers that produce the same curve as the original cubic curve, to within a specified tolerance.

The toucan drawing samples

The samples on this page use an SVG file output from Illustrator 10 (from a drawing by Dynamic Graphics, Inc included in the CD for the Illustrator 8 WOW book). All CRLF's (carriage return/linefeeds) were removed from the path tags manually (with a pair of tweezers -- no, I mean with a global replace). Alternately, this can be done using the onData method of XML to remove them before onLoad is called, but that can add serious string-processing time to the Flash movie.

In both fla's, a blank array dCmds is created and the PathToArray class is used to read the SVG file and fill the array with drawing commands. svg_animatewithap.fla (the animated sample above) uses that array to create an array of AP Drawer objects, whose outlines are then animated sequentially with the .animateBy command, and then whose fills are faded in sequentially by creating an Alpha object for each shape and using .animate to fade in the fill and another Alpha to fade out the stroke. svg_displayinflash.fla (static sample below) creates a movieclip for each element of dCmds and uses its contents to display the toucan.

Toucan read from SVG file and displayed in Flash

The files to produce this sample and the one at the top of the page are available via the free download link at right under Files. I welcome any corrections, improvements, or suggestions for improvement (which I probably don't have time to implement) to the PathToArray class, or to the implementation of Animation Package methods to draw the toucan (send to htriolo at this domain). PathToArray.as has been minimally tested to make sure it works with the toucan svg file, the same file with color names instead of numeric values, and not much more (yet).