Menus with Beauty and Brains 3 pg 3: Production Graphics with Wendy Peck at webreference.com

Menus with Beauty and Brains 3: Special Antialiasing for Flash

Macromedia Flash is often the easiest of all programs to apply a graphic technique, with its simple interface and primarily vector format. However, when we enter the realm of small text, one small feature makes Flash a bear to work with.

Flash antialiases text by default. In most cases, this is a plus, since the text will scale with screen size, and will look good even if the page is viewed on a very large screen. However, with small, or screen fonts, this feature causes serious quality concerns. Small fonts do not look good or read clearly with antialiasing. In addition, most special small fonts, the ones that look so good at tiny sizes, are designed to be viewed at one size (or exact multiples of that size).

The samples at the left show the typical text problem. The top sample is taken from the design screen, and looks great. However, the lower sample shows the same text but this time using the the movie preview. You can see how the antialiasing is taking the crisp appearance away, as well as filling in the interiors of the characters.

Text will not be antialiased if the movie publishing parameters is set to Low quality. The text at the top is from the working screen, with the lower sample from the movie preview.

Low quality publishing removes antialiasing for all objects.

You can solve this problem by publishing at low quality. In the samples at the left, the first text is from the Flash screen, with the lower sample from the movie preview, with the publishing quality set for low. Note how there is no antialiasing added in the preview version.

However, this method falls apart when there is anything other than small text in the movie, since the low quality applies to all objects. The example shown at the left illustrates the problem. Although the text looks great, the lack of antialiasing ruins most graphic objects. The one exception can be seen in the example below, where the graphic objects have no curved or diagonal lines. This menu is published at low quality and looks great. Keep in mind, though, that no object in the movie can contain curved edges if you wish to use this method to remove antialiasing from text.

Verdana 10pt type displays with no antialiasing because the text was entered as dynamic text. Note how the text has been cut off though, since the display text is larger than the working text. Make sure that you allow enough extra space to account for minor differences in fonts.

You can also use dynamic text to work around the antialiasing problem. Dynamic text is not antialiased, but you must use a font that will be installed on most computer systems. Dynamic text calls on text in the viewing computer to display. You can include the font outlines for specialty fonts, but the text will again have antialiasing if the outlines are included.

The samples at the left show the working copy and the final movie view for dynamic text. Note how the circle is smooth in both cases, indicating that the movie was published at high quality. The text remains without antialiasing since it is dynamic text.

To set the text as dynamic in Flash 5, select the Text Options tab in the text panel. Make sure that the Selectable option is unchecked, and set the parameters for the look you desire. Make sure that the embed fonts is left blank if you do not want antialiasing to be added.

Flash 4 Text Field
In Flash 4, you can achieve the same result with the Text Field button as shown at the right. When this button is depressed, the text block will behave in the way described above. To edit the properties for a text field, select Modify>Text Field (window shown at left).

The final option for working with small text that we will talk about in this article, is preparing your graphics in another program and importing them as a GIF image. Since there is no antialiasing needed, you can specify two colors for the GIF, which results in a very small file. Of course, the text is not scalable, but we must avoid any scaling in all cases with small fonts or fonts that we have worked to remove antialiasing.

The samples at the left show images prepared in Fireworks using Tenacity screen font. The file is exported as a two-color GIF image and imported into a Flash movie. The lower sample shown here is a preview of the placed graphic. The graphic file size is 244 bytes.

Finally, if your movie must be scalable, use only fonts that will work well with antialiasing added. Perhaps with an upcoming version of Flash we'll be able to specify antialiasing, but for now, this should give you a few choices to work around small font problems.

I also recommend a visit to the Pixel Font page Joe Gillespie's site, Web Page Design for Designers. Joe is the designer for Mini 7 and Tenacity fonts. This page will help you to understand much more about pixel fonts and how to work with them.

Next page

Menus with Beauty and Brains 3: Tutorial Index

Small Fonts Continued
Fireworks and CorelDraw Antialiasing
Special Antialiasing for Flash
Creating Unified Menus
Finding the Fonts