About this site's lack of design: Yes, it's supposed to look this way — I'm using a sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977


Bitmap Fonts in Flash

It’s 3:00AM and I just spent 2 hours fixing a bitmap font (pixel) to display correctly in my Flash movie. I eventually solved the problem. Thank god, because I think I was going mad. Here’s what I did to avoid a few notorious problems.

Problem 1: Blurry Text

You got your nifty font all ready and suddendly Flash is not being nice and diplaying it all blurry. Yuck. It turns out that when a text field’s X and Y stage coordinates are non-integer values (for example X: 102.4 and Y: 301.3) the pixels at the edge of the font suffer from over anti-aliasing. You can read more about it in a Flash TechNote. The solution is pretty simple: just change those nasty non-integer values to nice integer values. This was somewhat of a “duh” moment — when reading the TechNote I remembered this oddity (the document dates from 2001 for crying out loud.) Additionally Fonts For Flash has a useful user guide to help you make sure those bitmap fonts display as crisp as they should (note: they carry a nice selection of bitmap fonts for sale.) Good, time to move on.

Problem 2: Filled Characters

My problems were far from over. The first problem was solved in a mere 5 minutes. A little Google here and there and you’re ready to get going again. But then suddendly some characters of my font filled themselves where no fill was intended. Compare the two images below.

Look mom! I screwed up my font in Flash!

Now, obviously situation A totally sucks. Useless. Before I go on I must add that this was a bitmap font I edited and changed myself using Macromedia Fontographer, an application I’m not terribly familiar with. I didn’t like some specific letters. However only “R” and “D” were giving me trouble (i.e. filling up) and I didn’t touch those — go figure. Anyway, to be honest I had no clue what was going on. I redesigned both letters, but alas without satisfactory result (I was doing something wrong obviously.) After doing some research I came across a tutorial at Ultrashock.com on this very subject. I was saved. I correctly edited the letters that were causing the pain and it automagically all worked perfectly as shown in situation B.

Feeling Silly

I feel a bit silly for my lack of knowledge in this specific case — it’s not like this is an extremely recent problem or anything (more like known for ages.) I guess I never really used bitmap fonts much in Flash and if I did, I was a lazy bum and would import images (which is obviously a big no-no considering file size and dynamic text fields.) Anyway, I hope my ignorance will help you with future projects and lead to less frustration and time loss. I’m going to bed and dream about bitmap fonts in Flash and world domination. Catch you later.

This item was posted by dhilhorst on Tuesday, July 6th, 2004.


You can follow comments on this item via the RSS 2.0 feed.

Comments are closed.

6 comments on “Bitmap Fonts in Flash”

  1. Posted by Jeff Adams on Wednesday, July 7th, 2004.

    Fonts in Flash drive me nuts, sheesh

  2. Posted by Tim Uruski on Wednesday, July 7th, 2004.

    Good link to the Ultrashock tutorial, with that title it should hopefully Google more readily. Like you, I spent hours Googling and forum-hopping to find that solution.

    As best I can tell it has to do with the vertices touching, if you seperate them by even a tiny bit Flash will be have, otherwise it drops the compound shape and collapses your nice opening into a black box. Blah.

  3. Posted by Rob Cameron on Wednesday, July 7th, 2004.

    Well, let’s see the project you were working on! :)

  4. Posted by [m] on Friday, July 9th, 2004.

    Or you could open up mx 2004 and set the anti-aliasing off. ;)

  5. Posted by stefano on Wednesday, July 14th, 2004.

    finally, a GREAT article about this problem!!! thank you so much. I have much appreciate and i have insert this link in my blog:


  6. Posted by annia on Thursday, July 15th, 2004.

    whee thanks for sharing the link! Flash sucks sometimes with those simple things :(