A shape drawn on the stage is a <DOMShape> in a frame’s
<elements>. Like a shape in a SWF file, it is not a list of separate
outlines but a set of edges, each saying which fill lies on its left and which on its
right, and which stroke draws it. The styles come first, numbered, and the edges refer to
them by number. The edges themselves are packed into one compact string. Adobe has not
documented this encoding; the description below follows the xfl2svg project’s reader
and was checked against the files examined for this site.
<DOMShape>
<fills>
<FillStyle index="1">
<SolidColor color="…"/>
</FillStyle>
</fills>
<edges>
<Edge fillStyle1="1" edges="!36 -36S2|120 0!120 0|36 36!36 36|0 120 …"/>
</edges>
</DOMShape>LIBRARY/Tween 1.xml of a Flash CS5.5 document; the colour differs from file to file.Fill styles
<fills> holds one <FillStyle> for each fill the
shape uses. Its index attribute is the number the edges use, counting from
1. It holds one of:
<SolidColor>– a flat colour<LinearGradient>– a linear gradient<RadialGradient>– a radial gradient<BitmapFill>– a bitmap from the library
Stroke styles
<strokes> holds one <StrokeStyle> for each line
style, again numbered by index, holding the stroke’s settings.
Edges
<edges> holds the shape’s <Edge> elements. Each
has:
| Attribute | Meaning |
|---|---|
fillStyle0 | The fill on the left of the path, as it is drawn. |
fillStyle1 | The fill on the right of the path. |
strokeStyle | The stroke that draws the path. |
edges | The path, as a string of commands. |
The string is a run of commands, each one character followed by numbers separated by spaces. There is no space before a command:
| Command | Numbers | Meaning |
|---|---|---|
! | x y | Move to the point. |
| or / | x y | A straight line to the point. |
[ or ] | cx cy x y | A quadratic Bézier curve to (x, y), with control point (cx, cy). |
S | a digit | A marker such as S2. Its meaning is not established; xfl2svg skips it when drawing. |
Points are absolute, in the shape’s own coordinates. To draw a shape as filled areas, a reader collects the edges of each fill style, reversing those that have the fill on the other side, and joins them end to end into closed outlines, as for the shapes of a SWF file. Strokes are drawn from the edges of each stroke style as they are.
Reading the example: !36 -36 moves to (36, −36); S2 is a
marker; |120 0 draws a line to (120, 0). Then !120 0|36 36
moves to (120, 0) and draws to (36, 36), and !36 36|0 120 draws from
there to (0, 120). Here each segment starts with its own move, even where it carries
on from the one before.
Numbers
Coordinates are in twips, twentieths of a pixel, so 120 is 6 pixels.
They are written in one of two ways:
- Decimal, with an optional sign and fraction:
36,-120,1.25. - Hexadecimal fixed point, after
#: the whole part in hexadecimal, a dot, and the fraction as two hexadecimal digits, in 256ths.#1.2Cis0x1+0x2C÷ 256 = 1 + 44 ÷ 256 = 1.171875 twips.
Morph shapes, for shape tweens, use the same numbers in their
<MorphSegment> and <MorphCurves> elements, in
the # form.
How negative numbers are written in the # form is not covered by the
files examined here.