Flash 8 has substantially improved the text- formatting and font-rendering capabilities of the Flash Player. It has added additional formatting options such as letter spacing (also known as tracking), as well as provided custom anti-aliasing features. These options combine to make smaller type sizes more legible than ever before. A practical comparison of 9-point type using the older type-rendering engine and the newer advanced type-rendering engine can be seen in Figure 11-8.
Figure 11-8. Normal and advanced anti-aliasing options compared
The new text-rendering engine goes by the name of FlashType. Although there's more to FlashType, here you'll look at the two biggest parts: the formatting and anti-aliasing controls.
You won't always need to use Cascading Style Sheets to format text in Flash. For example, you won't need the global benefits of CSS to format one instance of text, and at times you may want to take advantage of one or more of the ActionScript formatting options not supported by CSS. To accomplish this, you need to use the TextFormat class.
Using the TextFormat class is very similar to using the StyleSheet class, in that you create a TextFormat object, set the values of any properties you wish to use, and then apply it to a text field. TextFormat properties are numerous. Among them are font, size, color, bold, italic, underline, kerning, leading, align, indent, leftMargin, rightMargin, tabStops, and more.
To demonstrate the use of a TextFormat object, you'll use another property and a new Flash 8 enhancement, letterSpacing. Letter spacing, also known as tracking, is the space that is added to, or subtracted from, the space between all the letters of affected text. Take a look:
11.4.2. Custom Anti-Aliasing
Perhaps an even greater improvement to the legibility of small type sizes comes by way of the new custom anti-aliasing controls. When the anti-AliasType property is set to advanced, you can set the thickness, sharpness, and precision with which the type is rendered.
Finesse the anti-aliasing of the text in the file you are presently working on:
The first line of the preceding script sets the anti-alias type to advanced, making the changes that follow possible. The second line makes the text a bit thicker. This setting can have a value ranging from200 (much thinner) to 200 (much thicker), making it possible to exert much more granular control over the text than could be achieved by setting the format weight to bold.
The third line similarly affects the sharpness of the text. This value can range from400 to 400. Notice that, in this case, the value is100. Softening the text a bit when increasing the thickness can help improve the legibility of fine anti-aliased edges. If you've ever over-sharpened an image in a bitmap-editing application, this analogy will likely be clear. If not, however, experiment with much higher sharpness valuesperhaps a succession of 100, 200, and 400to see the legibility of the text decline.
Finally, the last line sets the grid fit type to subpixel. The default setting is pixel, which attempts to adjust anti-aliasing thresholds to the whole pixel value. A subpixel value allows adjustments in the fraction of pixels. This may imply that the subpixel setting always looks better because it is more precise, but that is not always the case. When setting custom anti-alias values, always test a variety of settings to achieve the best-looking result.
Although it is typically easier to adjust these settings using ActionScript, both thickness and sharpness can also be adjusted using the Properties panel. With a text element selected, choosing the anti-aliasing menu option "Custom anti-aliasing" will open the dialog seen in Figure 11-9, allowing numerical adjustment of the pictured settings.
Figure 11-9. The Custom Anti-Aliasing dialog
A pair of intermediate-level bonus source files has been included in the provided source, to let you experiment freely with these settings. The flashtype_01.fla file demonstrates the settings at work on a text field with text already included and embedded. The second version of this file, flashtype_02.fla, adds to this same demonstration the ability to create text fields on the fly and populate them with ActionScript.
11.4.3. Embedded font symbols
In addition to the code discussed in this chapter, other TextFormat properties and TextField properties are demonstrated in the flashtype sample files. One, the font property of a TextFormat object, requires embedded font symbols.
Embedded font symbols are font outlines that have been embedded into a file's library. This makes it possible to switch among custom fonts at runtime, without having to rely on device fonts that hopefully reside in the user's operating system.
To embed a font symbol, choose New Font from the Library's Options menu (found in the upper-right corner of the Library panel). The dialog pictured in Figure 11-10 will appear. Select the font and style you want to embed, and whether or not you want to include a bitmap version of the font. Bitmap versions of the font can improve legibility at smaller type sizes. Give the font symbol a name that is as descriptive as possible. If the font only has one purpose in Properties dialog your entire project, you can name it something like logoFont. However, it's very helpful to base the new font name on the original font name, adding a character such as an asterisk to differentiate the two. This also enables easy reuse of the font symbol across multiple projects.
Figure 11-10. Embedding fonts in a document's Library via the Font Symbol Properties dialog
11.4.4. What's Next?
Text is a broad, and important, category of assets in Flash. Text helps you, as a designer or programmer, communicate with your end user. You've not only learned how to create and format several kinds of text elements in this chapter, but you've even touched on using text to transfer data (with the LoadVars class).
But even with everything you've learned here, there is still much more to discover. One of the most reliable and frequently used ways of transferring data, for example, is through the use of XML, which will not be discussed in this book due to scope and space limitations. Consider XML an important topic for self-motivated review.
Similarly, try to expand on what you have learned in this chapter by creating a more advanced application styling scheme. Embed more than one font and then make a style sheet that makes use of each font. Also, create a small interface widget (a pair of buttons or, perhaps, a menu) that will load the appropriate CSS when needed.
Finally, practice calling ActionScript functions from text links using the asfunction protocol. This can be a fast and easy way to add interactivity to text because it is not necessary to create buttons in each case.
When you're ready to move on, you'll learn how to load the remainder of the main Flash asset types. You've already learned how to load text, style sheets, and (by extension) data. In Chapters 8 and 9, you learned how to work with external sound and video. In Chapter 12, you'll learn how to load external graphics and other .swf files.
In the next chapter, you will: