While working on Adlib I came across a problem importing text from Photoshop. Fonts which looked great in my design were looking awful in Flash CS4. After some investigation I found a workaround which I’d like to share with you. Using my solution you can get pretty close to a 1-to-1 match with Photoshop for dynamic text fields. Check out an example demonstrating the problem and a possible workaround after the fold.
Photoshop has a number of anti-aliasing options for text. Unfortunately, for dynamic text Flash CS4 doesn’t support these options out of the box. In fact, Flash CS4′s default “anti-alias for reading” option tends to produce visibly worse results. This problem leads to inferior looking text in your final product despite all your hard work during the design phase. Check out this swf I’ve created:
1. Text created in Photoshop, 2. Text created in Flash CS 4
Note that item #1 was imported directly from Photoshop as an image. This way works but of course it makes it difficult to change the text after the fact. A more flexible approach would be to import the text as a text field. If the value of the text won’t change at run time then you can specify that the text field be a static one and avoid any problems. However, if the text is expected to change at run time, for instance it’s the instructions for your game or a characters dialogue, then you have to maintain the text as dynamic text. Switching to dynamic text renders a result as seen in #2. Now check out what happens after applying my fix:
1. Text created in Photoshop, 2. Text created in Flash CS 4, 3. Text created in Flash after fix
In this swf #1 and #2 are the same as before. #3 is a dynamic text field just as #2 however it employs the trick I’m about to share. As you can see, the text is now lighter than in #2 and almost the same as #1. So how did I achieve this? By embedding a subset of the characters into the font then switching back to normal anti-aliasing. Here are the steps:
- Select the dynamic text field and go properties
- Select the “anti-alias” drop down menu and select “Use device fonts”
- Again with “anti-alias” select “Bitmap text [no anti-alias]“
- This prompts you to embed the font, say Embed and specify the characters you need
- Again with “anti-alias” select “Anti-alias for readability” and confirm that things are fixed
It’s a very strange set of steps indeed but it works. The only reason for step one is that in my experience skipping it and going directly to bitmap fonts doesn’t bring up the embed dialogue. Feel free to skip it if your experience differs, though. Anyway, I hope that you found this useful and that your next project completely sidesteps the issue!
Hello, my name is Alex Schearer. I grew up in New York and currently live in Seattle.
One Comment
Thanks! It was really starting to drive me nuts that the fonts looked fuzzy. I actually layout out all my type in InDesign and the fonts look terrible. I’m going to give your solution a try.