Media Art, User Experience Design, and Interface Development

Loading assets dynamically (part 4: fonts and CSS)

Posted on 2010-01-28

One of the great promises of Flash, back when it was introduced, was that finally designers would not have to worry anymore about the limitation of web fonts. But Flash developers all around had to find different way to use and implement the designers’ choice efficiently.

Lots of websites done with static content or localized only in one language did not need to worry much about fonts, however as Flash grew in popularity and demand, projects became more complex and required text to be dynamic and localized. That’s when the party started.

What is presented here is a workflow that I have been using with my team for quite some time, and it has proven efficient. I do not dare to say it is the best, especially since dealing with fonts in Flash is such a pain that many people have probably lots of different ways to import and use fonts properly.

Creating a SWF Font File

The idea is to create a SWF file that contains the fonts necessary to the website and pair it with whatever little CSS ActionScript can handle. Lee Brimelow has a great video tutorial on how to create such a SWF. Dominic Gelineau from Zedia Flash Blog also posted something quite similar to what I explain here, he just posted before me, while my text was still a draft.

When I was working on a project for a client that needed all sorts of different languages (Chinese,  Japanese, Russian, English, French, etc.), I made different SWF files and named them according to the alphabet they contained:

Using the unicodeRange parameter is quite interesting, especially for Chinese characters, so you can considerably reduce the size of your embedded font.

I noticed recently with the update to Flash Builder 4 beta 2 that the embedAsCFF parameter was now set to true by default. This is quite annoying, because unless you use the new Flash Player 10 Text Layout Framework, text will not render on screen. I now always set the embedAsCFF as false.

In your project, load the SWF file that contains the font just like I explained how to load SWF files whose library contain classes that are meant to be exported for ActionScript. Here as well, the LoaderContext‘s application domain parameter must be set to ApplicationDomain.currentDomain so that the loaded fonts are available to the whole application.

It may be useful to test if the fonts are indeed embedded once the file has loaded. Here is a little function that will trace all embedded fonts in your app:

public function traceEmbeddedFonts():void
{
	trace(this, "--- traceEmbeddedFonts ---");
	var embeddedFonts:Array = Font.enumerateFonts(false);
	var font:Font
	var i:int = 0;
	var numLoops:int = embeddedFonts.length;
	for(i; i < numLoops; i++)
	{
		font = embeddedFonts[i];
		trace("[" + i + "]\nfontName:" + font.fontName + ",\nstyle: " + font.fontStyle + ",\ntype: " + font.fontType + "\n");
	}
}

I strongly suggest that developers always include the font files they use in their assets directory, for it is a great pain to discover that the version of the font used for developement differs than the one we may actually have in hand. Font may have different kerning and leading from version to version, which sometimes leads to completely redoing the design. Keep that in mind people.

Using CSS

Now that we know we have our needed font loaded into our application, let’s look at the CSS part of it. Here as well, I named the CSS files according to alphabet, since not all fonts were laid out the same.

In the CSS, I made sure that the font tag would use the font name I gave my font in the SWF file created earlier.

CSS:

.someCSSClass
{
	font-family:"CustomFontName";
}

Once the CSS is loaded into my application, I convert it to a StyleSheet. Then, I can use it like this:

var styleSheet:StyleSheet = new StyleSheet();
styleSheet.parseCSS([the-loaded-CSS-goes-here]);

var t:TextField = new TextField();
t.width = 320;
t.height = 240;
t.embedFonts = true;
t.styleSheet = styleSheet;
t.htmlText = "<span class='someCSSClass'>Some text goes here</span>";

I believe in using CSS rather than AS3’s native TextFormat for it is possible to change the text layout without having to recompile the application every time. Do make sure to check what tags are actually supported as it is quite limited.

Pixel Fonts

I recently created a game in which I wanted to make sure I could use pixels, which

meant I needed a pixel font. After looking googling and reading many blogs and tutorials, it became clear that Lee’s technique would not be useful this time, since there was no way to choose bitmap when embedding the font.

Instead, I found a workaround that did just the trick. In the Flash IDE, I created a symbol, which I named BitmapTextFieldAsset and gave it the exact same class name. In that symbol, I created a textfield into which I embedded the whole bitmap font like we did back when sites could be static. I then created a class that would be the one I used as a textfield whenever I needed the bitmap font in the game, and voilà! A dynamic custom textfield class that would use a Bitmap font. CSS does work as well in this case.

Conclusion

It would be presumptuous from me so say I covered all there is to say about fonts and CSS in Flash, but I do believe that in a nutshell, this workflow is efficient.

What say you?


2 responses to “Loading assets dynamically (part 4: fonts and CSS)”

  1. Social comments and analytics for this post…

    This post was mentioned on Twitter by jansensan: Blogged: Loading assets dynamically (part 4: fonts and CSS) http://tr.im/LTB8 #flash #as3…

  2. […] The alphabet tag is not relative to any specific standard, but just actually the logic part of what I use to load the fonts and the CSS (see previous post). […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.