Design with Text

In this section we are going to learn how to…

■ Create and edit text
■ Change the look of your text
■ Change the direction of text
■ Spell check
■ Find and replace text
■ Create input text fields
■ Create dynamic text fields
■ Load rich text into a dynamic text field

You can create three different types of text in Flash 8: static, input, and dynamic. Static text is basic text and input text is text that allows your audience to type in text for applications such as forms or games. Dynamic text is display text that can be updated dynamically. All three types of text are covered in this chapter. Once you create text in Flash, it doesn’t just have to sit and look pretty on the stage. There are many exciting effects you can achieve with text and properties you can assign. For example, you can make breathtaking motion graphics, with text zooming across the screen and fading out. You can create scrolling text boxes, too. The many uses of the text object are limited only by your imagination, and once you become more experienced in Flash, you will discover the infinite possibilities of designing with text. The other important point about Flash text is that it is vector based. Fonts, therefore, are not only scalable but also look crisp and clean in a Flash movie. As easy as making text in Flash may sound, there are still many things you need to know about Flash text. In this chapter we cover the basics of creating text. Throughout the book you will continue to build on your knowledge of text in Flash. So let’s get going and start designing with text.

Create Basic Text

Basic text—or static text, as it is known in Flash—is easy to create; the interface is so simple it’s almost self-explanatory. You create text using the Text tool in the Toolbar. Text in Flash resides within a rectangular block, so you can manipulate the rectangle to control the width of the text block. As is the case with any object you make in Flash, you can assign properties to text. The properties associated with text include size, color, character spacing, and paragraph formatting. The following list outlines the process for creating basic text in Flash:

1. Go to the Toolbar and select the Text tool, shown here.

2. Set the attributes of the text you are about to type in the Properties Inspector. Here is where you set the color, size, and alignment of the text, among other things. Additional text attributes are covered later in this chapter.
3. Drag the tool onto the stage to the point where you want the text positioned and click. Notice that the cursor transforms into a text-input icon (crosshairs with the letter A in the bottom right), as shown here.

4. Start typing and you’ll see text appear in a text block with a circle in the upper-right corner. The circle is the handle that allows you to change the width of the text block. A circle handle icon in the top right of the box indicates that you’ve created an extended-width text block, as shown here.


As you type, the text box expands in width to accommodate the text you’re typing. If you need to type more than one line, you must press enter (Windows)/return (Mac) to go to the next line, just as in a word-processing program; otherwise, the line you are typing will go on indefinitely. This kind of behavior is indicative of an extended-width text block. As you can see, this kind of text lends itself to small, one-line text blocks.

To modify text, select the Text tool from the Toolbar and highlight the text you want to modify. With the text area highlighted, start typing over the old text. The new text will automatically appear where the old text was located.

An extended-width text block is limiting if you need to input a paragraph or more of text. When this is the case, you can use a fixed-width text block, which you’ll learn about next.

Manipulate a Fixed-width Text Block

Unlike an extended-width text block, a fixed-width text block constrains the text you type to the parameters of the text box. The constraining function of the fixed-width text block is similar to the left and right margins in a word-processing program. It creates its own soft return that conforms to the width of the block. Both the extended- and the fixed-width text blocks have no vertical limit. The height of the block can be whatever you want.

To make a text block with a fixed width, click the Text tool in the Toolbar, set the text properties, and position the pointer where you want the text to appear on the stage, just as you would for an extended-width text block. But instead of just clicking, as you do for an extendedwidth text block, click and drag the text block to the desired width. This will create a fixed-width text block. The handle on a fixed-width text block appears as a square in the upper-right corner, as shown here.

Change the Width of a Text Box
So you created an extended-width text block and you meant to make it a fixed-width? Or perhaps you made a fixed-width text block and you need to change the width. Fortunately, it’s easy to change the width of a text block.
To modify the width of a text box, select the Text tool. Click and drag your pointer (which transforms into a double-headed arrow) over the handle in the upper-right corner to expand or reduce the width, as shown here.

Modifying the width of a text block does not distort the actual text within the box. It just rewraps the text within the block, much like what happens when you change margins in a wordprocessing program.
Convert an Extended-width Text Block
You can change a fixed-width text block to an extended-width text block. To do this, doubleclick the square handle in the upper-right corner. The square icon transforms into a circle and snaps the text box back to the last character in the block, indicating that the block is now an extended-width text block.

Control the Look of Text

All objects in Flash, including text objects, have properties that can be set and changed. And as with any other object, there are numerous ways you can change the look of your text in Flash. The easiest way to control the look of text is to use the Properties Inspector, which enables you to set or change the font, size, and paragraph attributes, among other things, of new or existing text (see Figure below).

In the bottom right of the Properties Inspector, there is an arrow that expands and contracts the contents of the bottom half of the Properties Inspector, as shown in the figure. The settings in the top portion of the Properties Inspector are general character attributes and character style settings. On the bottom half, the settings include text block location and position information, a URL link box, and other settings related to dynamic and input text, which are discussed later in this chapter in the section “Understand Input and Dynamic Text Fields.”

Some of the text options in the Properties Inspector will be dimmed if static text is selected as a text type because these options are not applicable to static text. Likewise, other selections are dimmed for both input and dynamic text fields.

Set the Text Attributes in the Properties Inspector

You used the Properties Inspector to set attributes on simple graphics in the last chapter, so no doubt you’re becoming familiar with its functionality. If you recall, the Properties Inspector is contextual, reflecting attributes of the currently selected object, which in this case is text. So, quite naturally, when you select text the properties relate to that class of object and include such options as size, font, and color.

To set the appearance of text before you input text, select the Text tool and then select a font, color, size, style, alignment, spacing, and so on, in the Properties Inspector. Next, position your pointer on the stage, click and drag to create a fixed-width text block (if you’re typing in more than a word or two), and begin typing. The type will reflect the selections you made in the Properties Inspector. It’s that simple to set the characteristics of text.

To change the appearance of existing text, select it with the Text tool or the Selection tool and choose the new attributes in the Properties Inspector the same way you would for new text. The selected text will change accordingly. Now let’s look more closely at specific text attributes you can set or change in the Properties Inspector. Some attributes are obvious and don’t need much explanation. For example, to set a font, you simply click the Font pop-up list and select a font. To change an existing font, select the text block or the individual characters you want to change and select a font from the Properties Inspector in the same way.

The following sections provide a rundown of the various settings in the Properties Inspector for creating and modifying regular text. As mentioned earlier, to create text, first set the properties for the text and then type it in. To modify existing text, always select the text first and then modify the properties.

Selecting Text with the Text Tool Versus the Selection Tool

It stands to reason that before you modify the properties of text you need to select the
text first. You can always select the text you are about to modify with the Text tool. One
easy way to edit text without clicking on the Text tool first is to double-click the text with
the Selection tool. When you do this, a text cursor appears in the block and the Text tool
becomes the current tool.
You can also modify most text properties by selecting the text with the Selection tool. In
fact, the only properties you can’t modify this way are attributes that involve the changing of
characters themselves, such as text input or character spacing.
When you get up to speed in Flash, you’ll probably find it easier to select text with the
Selection tool because it’s the tool you’ll be using most often.

Set Basic Text Attributes
To set the size of text, select a text size from the pop-up Font Size list or type a number in the Font Size box. Text is measured in points. To set the fill color of text, click the Text Fill Color button and select a color from the pop-up palette, shown here.

To choose a bold text style, click the B button in the Properties Inspector. To select an italic style, click the I. To make the style both bold and italic, click both buttons. To change the alignment of text or a paragraph of text, click one of the four alignment options: left, centered, right, or justified.

Font properties can also be accessed from the Text menu. Additionally, you can set the text’s fill color from the Fill color palette in the Toolbar as well as the Color Mixer and Color Swatches palettes. If these palettes are hidden you can access them in the Window menu.