Flash CS5 THE MISSING MANUAL phần 4 pot

209   Choosing and Formatting Text F lash isn’t just about moving pictures. Text is a big part of many projects, and with Flash you can do remarkable things with text and type. You can label buttons, boxes, and widgets with small, helpful text, and make page headlines pop with big, bold type. When you use large blocks of text—as in newspaper ar- ticles or how-to instructions—you can add scroll bars so your readers can see all the text in one place, or you can create hyperlinks that lead to other pages. And of course, Flash can do things to type that wouldn’t enter Microsoft Word’s wild- est dreams: morphing paragraphs as they move across the screen; exploding words and letters into dozens of pieces. You can also create the same kind of effects that you see in the opening credits of TV shows. To handle all this variety, Flash pro- vides different text tools. As with any craft, it’s important to choose the right tool for the job. Text handling is another feature that has grown and evolved with new versions of Flash. In fact, Flash Professional CS5 introduces a brand-new and powerful way of handling text, officially named Text Layout Framework, but usually called TLF text. If you’re comfortable working with Flash’s tried-and-true text tools, don’t panic. Flash provides backward compatibility with Classic text, too. You can even mix and match text in the same document, layer, and frame. So, each time you click the Text tool, you need to choose which text engine you want to use. How do you know which to use? That’s what you’ll learn in this chapter. First, you’ll get tips on choosing the right tools. Then you’ll learn how to work with text and cre- ate special effects. Finally, at the end of the chapter (page 232) you’ll find a subpanel- by-subpanel description of text properties, including which properties work with which text engines and text types. (Interested in using ActionScript to make text jump through hoops? Turn to Chapter 17.) 210 F CS: T M M Text Questions Text Questions When you add text to your Flash animation, you have a specific job in mind. You may want to put a headline at the top of the page, label a widget on the screen, or provide instructions. If you’re creating the next great eBook reader, your needs are different than if you’re creating a splashy intro sequence like the ones on The Daily Show or American Idol. Because these text jobs vary so much, ask yourself a few questions before you click the Text tool: • Is the text a single line or a paragraph? • If the block of text is several lines, should it have scroll bars? • Should the text be selectable by the audience, or is it read-only? • Will the audience be able to change or add to the text? • Do I want to animate the text? • Do I want to make changes to the text using ActionScript? • Do I need to provide text in multiple languages? As you’ll see in the following section, the answers to these questions help you choose the right text engine and text type. Flash designers have always had to consider these questions, and even with a new way of handling text (TLF), the questions are still valid. Read on to learn which text tools best accomplish these jobs. Choosing TLF or Classic Text Click the text tool—it looks like a big capital T in the Tools panel (Figure 6-1). The Properties panel changes to show all the different text properties available to you, the designer. Starting at the top, the first drop-down menu gives you a choice be- tween two text engines—TLF Text and Classic Text. These text-handling routines are called engines because they’re the mechanisms used to display text in Flash Player—the tool your audience uses to watch your Flash animation. In previous ver- sions of Flash, the text options were much more limited than those provided by programs like InDesign, Illustrator, and Photoshop. TLF text goes a long way toward closing that gap. Classic text is still an option for a number of reasons, including compatibility. Choose TLF text if: • You’re new to Flash. It’s the text engine of the future, so you may as well start learning it. It gives you the most control over your text. In spite of the many op- tions, it’s fairly easy to use. • You want to animate your text in three dimensions. It’s much easier to spin and rotate TLF text fields. 211 C : C  F T Choosing TLF or Classic Text Figure 6-1: After you choose the Text tool, you need to use the drop-down menus to choose the text engine and the text type. Your choices determine how the text functions in your ani- mation. The menu shown here lists the text types available when you’ve chosen the TLF text engine. Text engine menu Text Tool Text type menu • You want to use fancy typographic features such as ligatures (special characters that represent two letters). TLF text provides many more of the features that print typographers expect. • You want to provide text in different languages, including those where text doesn’t flow from left to right. TLF text is much more cosmopolitan than Classic. Choose Classic text if: • You need to be compatible with older versions of Flash. You can open and work on older projects in Flash Professional CS5. You can even mix Classic and TLF text in the same project. • It’s critically important to make your animation files (SWFs) as small as pos- sible. If you’re using text simply as labels on the stage and you aren’t changing it with ActionScript or giving your audience a chance to add and edit, then Classic static text takes up the least room in your SWF file. • You’re a Flash veteran and the old ways are just fine, thank you very much. There’s nothing wrong with sticking with what you know will work, especially when there’s a deadline looming. Choose a Text Type Once you’ve chosen TLF Text or Classic Text, the Properties panel changes to display settings for that text engine. You notice right away that TLF includes many more op- tions. Immediately below the “Text engine” menu, the first setting is the “Text type” menu. Below that, there are several subpanels filled with widgets to help you manage your text. The choices you make at the top of the Properties panel determine which 212 F CS: T M M Choosing TLF or Classic Text properties are available as you work your way down. For example, TLF has different text types than Classic. TLF text types • Use Read Only when you want to display text on the stage, but you don’t want the audience to interact with the text. • Use Selectable when you want to give your audience the ability to select and perhaps copy and paste text. • Use Editable when you want to give your audience the ability to change or add their own text. For example, choose this option when you’re creating “fill-in” forms. Classic text types Classic text continues to offer the three options familiar to Flash veterans (Figure 6-2): • Use Static Text when you want to display text on the stage for simple chores like headlines and labels. Your audience can’t change static text, and you can’t change it using ActionScript. Static text is actually converted to images when it’s stored in your final SWF file. • Use Dynamic Text when you want to make changes using ActionScript. Cre- ating a program that continuously updates basketball scores? That’s a job for dynamic text. • Use Input Text when you want to give your audience the ability to change or add their own text, perhaps through the use of a text input box or form. Input text can also be used in conjunction with ActionScript. Figure 6-2: If you’re a Flash veteran, you’ll recognize the Classic Text options. As shown here, you can choose the following text types: Static Text, Dynamic Text, and Input Text. Because static text is converted to an image before your audience sees it, you can’t edit the text (change the words or letters) when the animation is running. Some options, such as your choice of typeface, size, and color, remain the same no matter which text engine or text type you choose. Other options, such as highlight, ligatures, and baseline shift, appear or disappear from the Properties panel based on your choices. So, if a particular setting you need is unavailable, go back and choose a different text engine or text type. In general, TLF text gives you more typographic control. You can mix TLF and Classic text in the same document and even in the same layer or frame. 213 C : C  F T Adding Text to Your Document About Typefaces and Fonts Choosing a typeface for your project should be fun—just not too much fun. There are two paths to the available typefaces installed on your computer. Using the menus, go to Text➝Font or in the Properties panel, find the Character subpanel, and then click the Family menu. Either way, you see a list like the one in Figure 6-3. Make your typeface decisions based on the job at hand, and you can’t go wrong. Think about what you expect your type to do, and then help it do that job by choosing the right typeface, size, color, container, and background. Beginning designers often treat text as yet another design element and let the desire for a cool look override more prac- tical concerns. Designers sometimes talk about a text block like just another shape on the page. But cool type effects can torture your readers’ eyes with hard-to-read backgrounds, weird letter spacing, or hopelessly small font sizes. (For more advice on readability, see the box on page 214.) Note: If you want to be technical in a Gutenbergian fashion, typefaces are families of fonts. Times Roman is a typeface, while “Times Roman, bold, 12 point” is a font. Somewhere along the line, as type moved from traditional typesetters to computer desktops, the meaning of the word “font” came to be synony- mous with “typeface.” That’s okay, but knowing how the terms originated makes great cocktail party banter. Figure 6-3: Most likely you’ve got a bewildering number of typefaces on your computer. Many of the typefaces include style variations, like bold, italic, and so on. Choose carefully, making sure that your text performs its intended job— communication. Adding Text to Your Document Enough theory—it’s time to put some words on the stage. Just as Flash has tools for adding shapes and lines to your drawings, it also has a tool specifically designed to let you add text to your drawings—the Text tool (T). The following steps describe the basic method for putting read-only text on the stage. 214 F CS: T M M Adding Text to Your Document FreqUenTly ASked qUeSTion Small Is Beautiful How can I use small type and make sure it stays readable? For most people, reading text on a computer screen is more difficult than reading it off a piece of paper. In fact, most people simply won’t read text if it’s too hard to see. If your Flash project includes text with small font sizes (12 points or less), there are a few things that you can do to keep your audience from straining their eyes: • If possible, bump the type up to a larger size (Properties➝Character➝Size). At small sizes, a point or even half a point makes a big difference. • It’s easiest to read black text on a white background. If you don’t want to use that combination, opt for very dark text on a very light background. If you have to use light text on a dark background, then make sure there’s a great deal of contrast between the colors. • Use sans-serif type, like Helvetica or Arial for small sizes. Sans-serif type looks like the text in this box; it doesn’t have the tiny end bars (serifs) you find in type like the body text in this book. Computer screens have a hard time creating sharp serif type at very small sizes. • Use both upper- and lowercase type for anything oth- er than a headline. Even though all-uppercase type looks bigger, it’s actually less readable. The height differences in lowercase type make it more readable. Besides, too much uppercase type makes it look like you’re shouting. • Avoid bold and italic type. Often bold and italic type are hard to read at small font sizes. But this varies with different typefaces, so it doesn’t hurt to experiment. • If your text isn’t going to be animated, then turn on “Anti- aliasing for readability” (Properties➝ Character➝“Anti-alias”➝”Anti-alias for readability”.). Antialiasing is a bit of computer magic and fool-the- eye trickery that gives type nice, smooth edges. • Choose “Anti-aliasing for animation” (Properties➝ Character➝“Anti-alias”➝”Anti-alias for animation”) if you’re going to be pushing that text around the screen with tweens or ActionScript. It never hurts to get second and third opinions. If you’ve got eyes like an eagle, you may want to get some opinions from your less-gifted colleagues when it comes to readabil- ity. You want your Flash project to be accessible to as wide an audience as possible. To use the Text tool: 1. In the Tools panel, select the Text tool. Flash highlights the Text tool; when you mouse over to the stage, your cur- sor changes to crosshairs accompanied by a miniature letter “T,” as shown in Figure 6-4. 2. Using the two menus at the top of the Properties panel, choose TLF Text and then, below, choose Read Only. Armed with this information, Flash is ready to create a text field that meets those specs. By choosing Read Only, you create text that can’t be changed by your audience. It works well for simple labels or headlines. Tip: In the Properties panel, many of the text widgets, including the “Text engine” and “Text type” menus, aren’t labeled. However, if you’re ever in doubt, move the cursor over a widget, and a tooltip appears with the official name. 215 C : C  F T Adding Text to Your Document Figure 6-4: After you select the Text tool, the cursor changes to crosshairs with a T symbol, and the Prop- erties panel shows the available options. At the top, you choose a text engine and text type. Farther down, you can choose a font family, style, and size. Text engine Text Tool Text type Family Style Size Text cursor 3. In the Character subpanel, choose a family, style, and size. These are the familiar settings that you use every time you create text. The choices are similar to those you’d use in your word processor. In Figure 6-5, the settings are for Verdana family, bold style, and 50-point type size. 4. Click the stage and drag to create a text field. If you simply click once, Flash displays a squished-up, empty text field. If you drag, you create a rectangle. Either method works, because the box resizes as you type your text, and you can resize the box at any time. 5. Type some headline text, like Breaking News! Your text appears on the stage, showing the specs you chose in step 3. Figure 6-5: You can modify text using several different subpanels in the Properties panel. The Position and Size set- tings work the same as they do with other objects on the stage. Using the Character and Paragraph subpanels, you can fine-tune your type as you would in a page layout program. 216 F CS: T M M Adding Text to Your Document Tip: If the type you specified looks different on someone else’s computer, then you’ve got a font-embedding problem. It most often happens when you let your audience add or edit text, or when you create text with ActionScript. Font embedding is covered in the chapter on animating text with ActionScript, page 556. Changing Text Position, Height, and Width Once you have a block of text on the stage, you can make changes as you would with any other graphic element. • To move the text field, use the Selection tool (V). Drag to reposition the text. • To resize the text field, use the Selection tool (V) to drag one of the handles around the edge of the box. • To stretch or squash the type, use the Free Transform tool (Q) and drag one the handles, as shown in Figure 6-6. When resizing the text field, you can drag the handles whether you’re using the Text tool or the Selection tool (solid arrow). The container holds the text and changes size, but the text itself remains the same size. Some text fields can be changed to au- tomatically expand to accommodate the text they hold. When you resize a text field that’s set to automatically expand, Flash changes it to a fixed-width field. To change a fixed-width text field to one that automatically resizes to fit the text, double-click the hollow square handle. The handle changes to a hollow circle. As with shapes and other graphics, you can make position and dimension changes directly in the Properties panel. Want to change the height of the text field? Just type a new number. TLF text and Classic text fields behave in the same way when you move them or change their width and height. Figure 6-6: You can use the same tools to posi- tion and transform blocks of text that you use to work with other graphics. Here, the headline was stretched dramati- cally by increasing the Height property for the text field. Note, however, that the font size is still 50. Transforming distorts the text but doesn’t change the underly- ing typographic properties. Text box handles Postion Properties Free Transform tool 217 C : C  F T Adding Text to Your Document Rotating, Skewing, and Moving in 3-D Naturally, Flash lets you spin your type around in different directions—after all, it is an animation program. To spin text in two dimensions, use the Transform tool (Q). Select the text, and then move the cursor near one of the corners. When you see a circular arrow, click and drag. The steps are similar for skewing text, except that you position the cursor near one of the edges of the text field. A slanted double-arrow appears when it’s time to click and drag. If you want to rotate a text field in 3-D, you need to use TLF text, as shown in Figure 6-7. Then, you can use the 3D Rotation tool (W) and the 3D Translation tool (G), as you would with any other graphic. The 3D Translation tool lets you move the text field in 3-D space, as in text zooming in at you from far away. Figure 6-7: You can use the Transform tool (Q) to rotate text in two dimensions. For 3-D rotation or motion, use TLF text and the 3D Rotation tool (shown here) or the 3D Translation tool. Changing Text Color Colorful text puts pizzazz into your animation; just make sure you don’t sacrifice readability. You can change the color of an entire block of text, or you can choose certain characters and change their color, as shown in Figure 6-8. To change the color of an entire block of text, use the Selection tool (V) and click the text. Once you see the familiar text box and handles, head over to the Proper- ties panel. In the Character subpanel, click the Color swatch. A color picker opens, similar to the ones you use to specify colors for shapes. You won’t see any gradient settings for text, but you can change its opacity using the Alpha percentage in the upper-right corner. To change the color of individual characters, use the Text tool (T). Click the text block, and you see a blinking line similar to ones used in word processors. This line marks the insert position. So, if you start typing, new characters appear in the text. Just as in a word processor, you drag to select text. Select the text you want to change, and then choose a color in Properties➝Character➝Color. 218 F CS: T M M Adding Text to Your Document With text, you set the color for the entire character—unlike shapes, where you choose separate stroke and fill colors. However, TLF text gives you an extra color option called Highlight. As the name implies, this gives you a way to make your text stand out through the use of a background color, as if you had highlighted the text with a marker. Tip: You can create additional color effects using the Color Effect, Display, and Filters subpanels at the bottom of the Properties panel. These settings work the same for shapes, objects, and text, and they’re described on page 237. Figure 6-8: You use Flash’s familiar color picker to select a color for your text. To change the color for specific characters within a block of text, select the characters before you make your color selection. Creating a Text Hyperlink You can add hyperlinks to your text with or without using ActionScript to generate the code. Using TLF text, you can add a link to an entire text block, or you can add the link to a few words or characters. Hyperlinks often open web pages or docu- ments, but with some ActionScript code, they can they can perform other feats, too. To link to open a web page or document, you provide a URL address. URL stands for Universal Resource Locator. You usually hear this term in relation to the Internet, but a URL can just as well point to a file on your computer. The key is in the prefix: Instead of beginning with http://, a link that points to a file on your computer begins with file://. Here are the steps for creating a link when you’re using TLF text: 1. Use the Select tool (V) to select an entire text block, or use the Text tool (T) to select text inside a text block. [...]... number from 1 to 10 for the Columns setting, as shown in Figure 6- 14 Then use the box at the right to specify the distance between columns Columns 2 24 Gutter width Figure 6- 14:   With TLF text you can create up to 10 columns in a text container Use the box to the right to specify the gutter width—that is, the distance between columns Flash CS5: The Missing Manual Choosing and Using Text Containers Flow... descriptive name 4 Set the Type drop-down menu next to Graphic, and then click OK Flash creates the new graphic symbol, places it into the Library, and automatically replaces the selected image on the stage with a selected instance of the symbol (Figure 7 -4) Notice the instance’s single bounding box (the original three images in this example had three) Figure 7 -4:   You get two clues that Flash has converted... paste it from some other source 3 Click Frame 48 in the timeline, and then press F5 The timeline for your movie is now 48 frames long 4 Right-click the timeline, and then choose Create Motion Tween In the timeline, the frames show the light-blue highlight that indicates a motion tween 5 Move the playhead to the last frame in the tween That should be Frame 48 6 Select the 3D Rotation tool (W), and then... placed in the Character subpanel, where they’ve always been They include these choices: 2 34 Flash CS5: The Missing Manual Text Properties by Subpanel • Selectable Click to let your audience select text at runtime This option is a ­ lways on for input text • Render text as HTML (dynamic text and input text only) Tells Flash to i ­ nterpret any HTML code it encounters in dynamic text instead of just displaying... again That turns the character into a shape, just like any other Flash shape Once you’ve done that, you can change the stroke and fill color Independently Use Modify➝Transform➝Envelope to distort the character And, of course, you can use the Shape Tween tool to animate these changes 238 Flash CS5: The Missing Manual chapter 7 R  eusable Flash: Symbols and Templates The secret to productivity is to work... your Flash arsenal You can use these predesigned Flash documents as starting points for your own projects Even better, you can save documents as templates You can also save templates containing the pictures, logos, and other elements that appear in just about all your documents Then you don’t have to start from scratch next month when you have a s ­ imilar ­ roject p Tip: With Flash Professional CS5, ... symbols, and it’s a great way to create unique, 240 Flash CS5: The Missing Manual Symbols and Instances complex-looking images for a fraction of the file size you’d need to create them individually Suppose you’ve drawn the perfect bug eye You can turn it into a symbol and place it inside your symbols for roaches, ladybugs, and any other insect you want Flash lets you create three types of symbols: graphic... described in the box on page 243 Chapter 7: Reusable Flash: Symbols and Templates 241 Symbols and Instances Figure 7-2:  If you’re really serious about paring down the size of your animation file, consider nesting your symbols Here, a single wing symbol is used for both the butterfly’s wings The wing instance on the left was flipped horizontally Modify➝Transform➝ Flip Horizontal) Flash lets you flip, resize,... stage to a graphic symbol: 1 On the stage, select the image (or images) you want to convert Flash s selection tools are described on page 58 Converting a grouped or editable image into a graphic symbol is quick and easy Figure 7-3 shows three separate images selected that, all together, form a star 242 Flash CS5: The Missing Manual Symbols and Instances Frequently Asked Question Multiframe Graphic Symbol... point of your symbol Most of the time, it’s fine to leave the registration point in the upperleft corner; see the box on page 246 for the full story If necessary, you can reposition it later by editing your symbol (page 248 ) Chapter 7: Reusable Flash: Symbols and Templates 243 Symbols and Instances 2 Select Modify➝Convert to Symbol The Convert to Symbol dialog box appears 3 In the Name text box, type . job. Text handling is another feature that has grown and evolved with new versions of Flash. In fact, Flash Professional CS5 introduces a brand-new and powerful way of handling text, officially named. they’re the mechanisms used to display text in Flash Player—the tool your audience uses to watch your Flash animation. In previous ver- sions of Flash, the text options were much more limited. text if: • You need to be compatible with older versions of Flash. You can open and work on older projects in Flash Professional CS5. You can even mix Classic and TLF text in the same project. •