There’s now a google project for this: code.google.com/p/swfvector. I’m going to be updating this so there might be some changes to the how the whole thing works.

I had a lot of positive feedback for my last project that lets you extract font glyphs out of a swf and write text using the flash drawing API or one of the popular 3D engines.

Now, this update fixes a couple of bugs and also adds support for any vector shape on the stage or the library.

Demo:

The syntax is very similar to the the old DynamicText class. The main difference is that for Text, you need to define a fill type and for vectors, the fill type is ignored because vector shapes have their own fill types.

for Vector Shapes

1
2
3
4

// extract shape from swf
VectorShapes.extractFromLibrary(_loader.data, ["woman", "snowman"], VectorShapes.METHOD_CONTINUOUS_POINTS);
// draw shape
VectorShapes.draw(graphics, "woman");

for Vector Text

1
2
3
4
5

// extract font data from swf
VectorText.extractFont(root.loaderInfo.bytes);
// draw text
graphics.beginFill(0x0000);
VectorText.write(graphics, "_Arial", 16, 16, 0, "Hello World", 10, 10);

IMPORTANT
There are two methods to parse and draw vectors. METHOD_CONTINUOUS_POINTS & METHOD_REGULAR.
METHOD_CONTINUOUS_POINTS (the default method) parses shapes while trying to keep the points continuous. This is the best way but it does not support flat shapes (more on that later)

METHOD_REGULAR parses the data as it is saved in the swf. This supports all vector shapes but is slower in both parsing and rendering.

For best performance and to get data that is easier to work with. Use METHOD_CONTINUOUS_POINTS , but your vector shapes must not be flat. What do I mean by flat? Flat is when you collapse everything into one layer in flash and keep hitting CTRL+B until all groups are killed and everything is merged. The flash then saves this in a very compact way which makes it difficult to break out (more on that later), Anyway, this flatten shape takes a lot more passes to render and it also create a data set that is not that friendly to work with.

The best way to create your vector data is to have each individual shape grouped so that they don’t cut into each other. In the included source, the snowman symbol is the right way and the circles symbol is the wrong way.

ok. more,
This is straight out of the SWF file specs:
“Most vector formats allow only one fill and line style per path. The SWF file format extends
this concept by allowing each edge to have its own line and fill style. This can have
unpredictable results when fill styles change in the middle of a path.”

This is why i have two methods to parse the data. METHOD_CONTINUOUS_POINTS actually does it wrong, because it ignores the two fill style per edge thing. two fills per edges is never used if the shapes don’t intersect. So even though METHOD_CONTINUOUS_POINTS is wrong, it is the preferred and default method.
Another thing worth mentioning is that the flash drawing API DOES NOT support two fill per edge. instead flash saves the shapes as triangles with one common point, I’m using 0,0. It then draws these triangles erasing it’s 0,0 tail by drawing over it again. that’s the short version anyway, the whole version is a lot more complicated and i’m too lazy to go into it.

Source code: code.google.com/p/swfvector

here’s the file specification from Adobe,

http://www.adobe.com/devnet/swf/

Drawing text in flash using font glyph information is definitely not new. five3D does it, PV3D uses the five3D files to do it. and Michael Baczynski also did it.

So what’s so different with my approach?

I extract the font glyphs from your SWFs, so you don’t need to go through the extra step of creating a Class that has a bunch of arrays describing your font. You can now embed fonts just as you normally would, and the best part is… you can use the same fonts with regular TextFields which lowers your overall file size.

SWF files store fonts as a bunch of ShapeRecords the same way it does with graphics youd draw on the Stage in the Flash IDE. These ShapeRecords are composed of a bunched of lineTo, moveTo, curveTo and styles instructions. For fonts we only need the first three. since we’ll be doing they styling in code when we’re about to draw text our text.

Now that we’ve extracted these ShapeRecords. I’ve created a DynamicText class that draws on a Graphics target. This target can be

1. the graphics property of a DisplayObject
2. the graphics3D property of a Shape3D in five3D
3. the graphics property of a VectorShape3D in PV3D

Sample code:

1
2
3
4
5
6
7

// extract font information from swf bytes
DynamicText.extractFontInformation(root.loaderInfo.bytes, true);
// set the style
graphics.beginGradientFill(GradientType.LINEAR, [0xff4400, 0x0], [1, 1], [0x00, 0xff], m);
// draw the ext
DynamicText.write(graphics, "Futura Md BT", 20, 20, 0, "Hello World");
graphics.endFill();

Flash DisplayObject.graphics draw sample:

Noticed the gradient fill? because we’re using the flash drawing API, we can use beginFill, beginBitmapFill and beginGradientFill when drawing to a DisplayObject.

The DynamicText class has the following features,

1. Kerning and Leading that use the same values as photoshop which makes it easier to match text styles to comps
2. TextBlock alignment of TL, T, TR, L, C, R, BL, B, and BR. TLC, LC and BLC provides centering of the text within the text block
3. Ability to align the text either using it’s baseline or it’s top or bottom edges. baseline alignment provides more accurate alignment, as the text starts from it’s baseline which also happens to be its zero point.

The same code can be use to draw on five3D and PV3D!

five3D Shape3D.graphics3D draw sample:

PV3D VectorShape3D.graphics draw sample:

Currently, It only works with fonts that were transcoded with the flash IDE. you can still embed the fonts with the [Embed] tag, as long as it’s from a SWF that was published with the flash IDE. embedding TTF directly with the [Embed] tags breaks my parser for some reason.

Source code: Download