UPDATE: please use newer and improved version at http://wu-media.com/2009/05/extracting-vector-from-swfs-writing-and-now-drawing-with-them/
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
- the graphics property of a DisplayObject
- the graphics3D property of a Shape3D in five3D
- the graphics property of a VectorShape3D in PV3D
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,
- Kerning and Leading that use the same values as photoshop which makes it easier to match text styles to comps
- 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
- 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