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.

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.