intense creativity » SWF TextField Factory — Dynamically Loading Fonts in AS3 using Flex SDK 3.4

Hi Everyone,

it has been a long while since I wrote! Been busy. Now I have some time and the first thing I did is to get away from the Flash IDE completely. I had been waiting to be able to debug directly in FlashDevelop for a while, tried some extension that didn't work, then Philippe did actually fix another one and it works beautifully. You can find the link here, look for Version 0.9.7 at the bottom of the first post. Unzip into your FlashDevelop plug-ins folder, restart FlashDevelop and bravo!

So I am Flash IDE Free!! Woohooo. Then the first thing I wanted to master is the Preloader, and FlashDevelop has a very nice "AS3 with Preloader" project template. It is very easy to work with. Very beautiful.

Now the next challenge, loading fonts dynamically. Euh, well, I used to do it from a FLA, was easy. But using the Flex SDK 3.4 it seems that some things changed. After HOURS of playing around, I ended up with the following system:

embed the font inside of a swf that contains a Main class + the font class
create a function that will spawn textfields already using the font inside this Main class

Although this system has some limitations, it works beautifully.

Why not just use Font.registerFont from the main SWF?
Well, cause it doesn't work. I manage to get the reference to the fontClass, this font class:

PLAIN TEXT

Actionscript:

/* embedFonts.swf code */
public class Main extends Sprite
{
[Embed(source="../lib/fonts/arial.ttf",fontName="Arial",unicodeRange="U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E,U+2013-U+2022,U+00A1-U+00FF,U+00")]
public static const FONT:Class;
}

However to my great surprise, this turns out to be a FontAsset class. ok. So FontAsset is derived from Font; so I try to do something like this:

PLAIN TEXT

Actionscript:

/* main SWF code */
protected function doFontLoaded(evt:Event):void
{
var fontLib:Class = evt.target.applicationDomain.getDefinition("Main") as Class;
var fontClass:Class = fontLib.FONT;
Font.registerFont(fontClass);
}

But I get an error, the parameter to registerFont is invalid. Euh? What? So I toy around with the applicationDomain using a LoadContext to ensure the loaded SWF sits in the same domain as my main SWF.. same problem..

weird. Then I try to list embedded fonts from inside of the loaded swf like so:

PLAIN TEXT

Actionscript:

/* embedFonts.swf code */
public class Main extends Sprite
{
[Embed(source="../lib/fonts/arial.ttf",fontName="Arial",unicodeRange="U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E,U+2013-U+2022,U+00A1-U+00FF,U+00")]
public static const FONT:Class;
public function Main():void
{
Font.registerFont(FONT);
traceFonts();
}
public function traceFonts():void
{
var embeddedFonts:Array = Font.enumerateFonts(false);
for (var i:Number = 0; i <embeddedFonts.length; i++)
{
var item:Font = embeddedFonts[i];
trace("[" + i + "] name:" + item.fontName + ", style: " + item.fontStyle + ", type: " + item.fontType);
}
}
}

What do I get? The fonts ARE available in that "context". Ok. So maybe it doesn't like the FontAsset class.. how do I get a pure Font class? After some researching, I find this post which describes the "constructor" property of all objects.. cool. This will let you simulate "duplicateMovieClip" if you think about it for a minute.. just like in the old AS2 days. THIS is the ONLY function I miss from AS2. Sometimes I like wasting a whole day on a problem, you might not solve the said problem, but you do find some really cool stuff along the way ;).

So, back to fonts. First add a function inside of the embedFonts.swf code to let me get access to the listed fonts.. like so..

PLAIN TEXT

Actionscript:

/* embedFonts.swf code */
public function getFonts():Array
{
return Font.enumerateFonts(false);
}

Now I can call this function from the main SWF, get a reference to the Font object that is registered in the child ApplicationDomain and register it in the main SWF's ApplicationDomain.. you think eh?

PLAIN TEXT

Actionscript:

/* main SWF code */
protected function doFontLoaded(evt:Event):void
{
// get a generic reference to the loaded swf (embedFonts.swf)
var lib:Object = (evt.target as LoaderInfo).content;
// get a reference to the registered fonts
var fonts:Array = lib.getFonts();
// take the first one, this is a Font object containing our font..
var fontItem:Font = fonts[0];
// get it's Class
var exampleType:Class = Object( fontItem ).constructor;
// register that..
Font.registerFont(exampleType);
}

uh oh? Error again! Damn. What to do?

Turning Point

After all this mis-understanding between me and the Flex SDK, I thought: "Man, why isn't it simple like in FLA files?". Then I thought, if the font is registered in that context, let's create a textfield in the context, set it's format properly, and see if it will appear.. It did. Then, I thought, ok, so the TextField works with the proper font, lets try to pull it outside of the loaded SWF and add it to the stage of the main SWF. That worked too... so here you go: perfect base for the Factory pattern..

This is the final solution; with a description of the UTF ranges I use to limit file size.

PLAIN TEXT

Actionscript:

/* embedFonts.swf code */
package
{
import flash.display.Sprite;
import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFormat;
/**
* ...
* @author Martin Legris
*/
public class Main extends Sprite
{
/*
* utf codes -- see http://en.wikipedia.org/wiki/Latin_characters_in_Unicode
*
* U+0020-U+002F ( !"#$%&'()*+,-./ )
* U+0030-U+0039 ( 0-9 )
* U+003A-U+0040 ( :;<=>?@ )
* U+0041-U+005A ( A-Z )
* U+005B-U+0060 ( [\]^_` )
* U+0061-U+007A ( a-z )
* U+007B-U+007E ( {|}~ )
* U+2013-U+2022 ( bulles, quotations, underline and other weird characters )
* U+00A1-U+00FF ( all punctuated characters )
* U+00 ( ?? )
*
*/
[Embed(source="../lib/fonts/arial.ttf",fontName="Arial",unicodeRange="U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E,U+2013-U+2022,U+00A1-U+00FF,U+00")]
public static const FONT:Class;
public function Main():void
{
Font.registerFont(FONT);
}
public function generateField():TextField
{
var font:Font = new FONT();
var field:TextField = new TextField();
var format:TextFormat = field.defaultTextFormat;
format.font = font.fontName;
format.color = 0x000000;
format.size = 14;
format.bold = font.fontStyle.toLowerCase().indexOf("bold") != -1;
format.italic = font.fontStyle.toLowerCase().indexOf("italic") != -1;
field.defaultTextFormat = format;
field.text = "emptéàû";
field.embedFonts = true;
field.width = field.textWidth + 5;
field.height = field.textHeight + 5;
return field;
}
public function getFont():Font
{
return new FONT();
}
public function traceFonts():void
{
var embeddedFonts:Array = Font.enumerateFonts(false);
for (var i:Number = 0; i <embeddedFonts.length; i++)
{
var item:Font = embeddedFonts[i];
trace("[" + i + "] name:" + item.fontName + ", style: " + item.fontStyle + ", type: " + item.fontType);
}
}
public function getFonts():Array
{
return Font.enumerateFonts(false);
}
}
}

Other interesting facts I picked up during the day

OTF Fonts cannot be embedded.. no matter how hard you try
Embedding directly from the TTF gives much smaller file sizes then embedding "System Fonts"
You can specify exact characters to be included by using unicodeRange="U+0020-U+002F" as demonstrated up there
Fonts have always been a pain in the ass in Flash / ActionScript, no matter what they say
This post was really useful!
This post (hi Dave!! what's up?) seems to be obsolete?!?!

Sample usage

First, rename embedFonts.swf to a proper name: arial.swf and put it where it belongs (./lib/fonts folder).

Then add this to your Main class..

PLAIN TEXT

Actionscript:

/* main SWF code */
protected function loadFont():void
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, doFontLoaded);
var ctx:LoaderContext = new LoaderContext(true, new ApplicationDomain(ApplicationDomain.currentDomain));
loader.load(new URLRequest("../lib/fonts/arial.swf"));
}
protected function doFontLoaded(evt:Event):void
{
trace("doFontLoaded");
var lib:Object = (evt.target as LoaderInfo).content;
var tf:TextField = lib.generateField();
stage.addChild(tf);
tf.text = "you and me";
tf = lib.generateField();
stage.addChild(tf);
tf.x = 150;
tf.y = 50;
tf.textColor = 0xFF00FF;
tf.alpha = 0.8;
tf.rotation = 45;
tf.selectable = false;
}

Voilà! Source code with FlashDevelop project and everything for the first part can be found here.. Second part, well, if you can't figure out how to use it (hey, ask questions, I will try to answer), maybe you should be trying some easier tutorials somewhere on the internet first, then once you've mastered the basics... come back here!

Last note
If anybody can prove me wrong, LEAVE A COMMENT! thank you.

Hang in there. Much more to come!

Filed under: actionscript, as3, as3 tutorials, work, actionscript 3, flashdevelop.org, font, library, tutorial

3 Responses to “SWF TextField Factory — Dynamically Loading Fonts in AS3 using Flex SDK 3.4”

Thomas says:
Yes it’s a good way to use fonts lib, but where do you specify if it’s a Text Bitmap or aliasing font ?

December 11th, 2009 at 1:29 am
Martin Legris says:
@Thomas, please read this post: http://www.gskinner.com/blog/archives/2007/03/bitmap_fonts_in.html

December 14th, 2009 at 12:50 am
Webmaster Crap » Blog Archive » intense creativity » SWF TextField Factory — Dynamically Loading … says:
[...] Original post: intense creativity » SWF TextField Factory — Dynamically Loading … [...]

December 17th, 2009 at 11:37 am

Categories

Meta

Archives

martin's world

Ads by Google

12.10SWF TextField Factory — Dynamically Loading Fonts in AS3 using Flex SDK 3.4

3 Responses to “SWF TextField Factory — Dynamically Loading Fonts in AS3 using Flex SDK 3.4”

Leave a Reply