Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)

11.4. FlashType

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.

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.

11.4.1. Formatting

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:

1. Create a new file called flashtype.fla and save it in your 11 folder.

2. Create a dynamic text element on the Stage and give it an instance name of dynText1_txt.

3. Fill the text element with enough text to see changes in its appearance. A few lines should do.

4. Embed your font of choice in the text field you just created. This is an important step to watch for, should problems occur, because several text-formatting options require embedded fonts to work.

   ---

   Note: For testing purposes, where size considerations are not particularly important, feel free to embed all glyphs. When it comes to creating your final files, however, try to embed as few glyphs as possible to keep file size down.

   ---

5. Add a layer to the top of the timeline and name it actions. In the first frame of the actions layer, add this script:

   var txt1_fmt:TextFormat = new TextFormat(); txt1_fmt.letterSpacing = .5; dynText1_txt.setTextFormat(txt1_fmt);

   The first line of the preceding code creates an instance of the TextFormat class called txt1_fmt. The second line sets the letterSpacing property of this TextFormat object to .5, adding space between all the characters in the text field to which this format will be applied. The last line applies the format to the dynamic text field you created earlier, dynText1_txt.

6. Save your work and test your movie.

7. Your text passage should now have more space between every adjacent letter pair. If the effect is too subtle, increase the letterSpacing value in your script until you can clearly see a change. When you are satisfied, return the letterSpacing value to .5, as this will help the changes you will make in the upcoming section appear more like they would in a practical situation.

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:

1. At the bottom of the script in frame 1, add the following code:

   dynText1_txt.antiAliasType = "advanced"; dynText1_txt.thickness = 50; dynText1_txt.sharpness = -100; dynText1_txt.gridFitType = "subpixel";

2. Save your work and test your movie. The type should look even better now.

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.

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.

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:

• Load .swf files

• Load bitmaps, including baseline JPEG, progressive JPEG, GIF, and PNG files

• Learn how to use preloading components to make the loading experience more pleasant for the user

• Learn how to write your own preloading code to make your files even leaner

• Discover how event listeners can improve your event management