Chapter 5
What’s Your Type?
In This Chapter
Creating, editing, and formatting text
Using cool text effects
W
e assume that occasionally you want to say something on your Web
site, so this chapter covers text in all its forms and formats. You can
use Flash to create the text for your Web pages if you want (although you don’t
have to). But if you want flashy text effects, Flash is definitely the way to go.
Typography is the art or process of arranging text on a page, and basically
that’s what this chapter is all about. Many graphics programs call text type.
We use the words interchangeably here — we don’t care what you call it.
Presenting Your Text
The majority of text on most Web sites is formatted by using HyperText
Markup Language (HTML) coding that sets the font, size, and color of the
text. Using HTML code is ideal for larger amounts of text because the HTML
is simple to code and loads quickly.
For smaller amounts of text that you want to have special formatting or
effects, Flash offers more options than HTML. Of course, if you want to animate your text, you can use Flash. For example, an animated logo usually
includes not only the graphic art but also the name of the organization,
which is, of course, text.
Here are some innovative things you can do with text:
Rotate, scale, skew, or flip text without losing the ability to edit the text.
Turn text into shapes and modify them any way you want. However, after
you turn text into shapes, you can’t edit the text characters by simply
typing. Figure 5-1 shows some text that was modified in this way.
120
Part II: 1,000 Pictures and 1,000 Words
Create transparent type.
Create hyperlinked text that sends the user’s browser to another Web
page when the user clicks the text.
Enable viewers to control some aspect of the movie by entering text in a
text box
Load text, such as sports scores or current weather, dynamically from a
server.
Figure 5-1:
You can turn
text into a
shape and
edit it to
your heart’s
content.
Creating text
Creating text in Flash is simple. Follow these steps:
1. Click the Text tool on the Tools panel.
2. Specify the text starting point on the Stage.
• To specify the width of the text, click the Stage in the left edge
where you want your text to start and drag to the right until you
have the width that you want. Flash places a square block handle
in the upper-right corner of the text block.
• To create a text block that expands while you type, just click the
Stage at the desired starting point. Flash places a round block
handle in the upper-right corner of the text block.
3. Start typing.
To force a return to the left margin after you type one or more lines,
press Enter or Return. Otherwise, if you specified a width, the text wraps
to the next line when it fills up that width.
4. After you finish typing, click anywhere off the Stage to deselect
the text.
Congratulations — you’ve just said something! We hope it was worthwhile.
Chapter 5: What’s Your Type?
Editing text
After you type text, it never fails that you want to change it. Editing text is
easy in Flash, but first you have to select the text. Here are the selection
techniques:
To edit an entire text block: Click the Selection tool and then click the
text. Flash places a selection border around the text. You can move,
rotate, and scale all the text in a text block this way, just as you would
with any other object. For example, you can use the Free Transform tool
to scale the text.
To edit the content of the text itself: Double-click the text with the
Selection tool active. (Or click the Text tool and then click the text.)
Flash switches to the Text tool automatically and places the text cursor
where you clicked or double-clicked the text, more or less.
To select a character or characters individually: Click the Text tool and
drag across one or more characters. Do this when you want to edit only
those characters.
To select a word: Click the Text tool and double-click any word to
select it.
To select a string of words or block of text: Click the Text tool, click at
the beginning of the text you want to select, and then Shift+click at the
end of the desired selection.
To select all the text in a text block: Click the Text tool, click in a text
block, and then press Ctrl+A (Windows) or Ô+A (Mac).
To change the content of the text, select the characters or words that you
want to change, as we explain in the preceding list. Type to replace the
selected text. Other text-editing techniques are the same as in your word
processor. For example, you can press the Delete key to delete characters to
the right of the text cursor or press the Backspace key (Windows) or Delete
key (Mac) to delete characters to the left of the cursor.
Checking spelling
Spell checking works like the spell checker in your word processor, so you’ll
probably find it easy to use. This feature shows Adobe’s commitment to
reducing typos on the Web!
The first step is to set up the parameters for spell checking. Choose Text➪
Spelling Setup to open the Spelling Setup dialog box, as shown in Figure 5-2.
If the Check Spelling item isn’t available on the Text menu, you need to open
this dialog box and close it again.
121
122
Part II: 1,000 Pictures and 1,000 Words
Figure 5-2:
Use the
Spelling
Setup dialog
box to
specify how
spell
checking
works.
The Spelling Setup dialog box has three sections:
Document Options: Choose which parts of a movie that you want to
check. For example, you may not want to spell check symbol and bitmap
names.
Personal Dictionary: You can change the location of the file that holds
words that you add to the dictionary. Click the Edit Personal Dictionary
button to add words directly. Otherwise, you add words when you are
checking the spelling of specific text.
Checking Options: Set options that define how spell checking works. For
example, you can choose to ignore words in uppercase or with numbers.
You can also choose which dictionaries you want to use in the Dictionaries
list. When you’re finished, click OK to return to your movie. You’re now ready
to check spelling.
To check spelling, you can select text if you want to check just that text or
leave all the text deselected to check the entire movie. Choose Text➪Check
Spelling to open the Check Spelling dialog box, as shown in Figure 5-3.
Chapter 5: What’s Your Type?
Figure 5-3:
The Check
Spelling
dialog box.
If you selected text, Flash checks that text first and then asks whether you
want to check the rest of the document. Click Yes to continue or No to end
the spell check. For each misspelled word, you can do one of the following:
Choose one of the suggestions and click Change to change that instance
of the word.
Choose one of the suggestions and click Change All to change all
instances of the word.
Click Ignore to go to the next misspelled word.
Click Ignore All to ignore all instances of that word and go to the next
misspelled word.
Click Delete to delete the word.
Click Add to Personal to add the word to the Personal Dictionary so that
it won’t appear as misspelled in the future.
To finish spell checking, click Close. You may see a message asking whether
you want to start from the beginning of the document. Click Yes to do so.
When spell checking is complete, you see a Spelling Check Completed message. Click OK to return to your movie.
Finding and replacing text
If you need to change all instances of the word big to large, for example,
you’re in luck. The Find and Replace feature comes to the rescue. In Chapter
4, we discuss how to find and replace color. Here we explain the steps (which
are similar) for finding and replacing text:
1. Choose Edit➪Find and Replace.
The Find and Replace dialog box appears.
123
124
Part II: 1,000 Pictures and 1,000 Words
2. In the For drop-down list, choose Text.
3. In the Search in Text box, enter the text that you want to find.
4. In the Replace with Text box, enter the replacement text.
5. (Optional) Enable one or more of the three check boxes on the left to
define what type of text you want to find: Whole Word, Match Case,
and Regular Expressions.
Regular expressions are formulas you use to locate specific text patterns
in a text string. Regular expressions are beyond the scope of this book,
but you can find a good tutorial at www.regular-expressions.info/
tutorial.html.
6. (Optional) Select one or more of the check boxes on the right to
define where you want Flash to look for text.
• Text Field Contents searches text objects.
• Frames/Layers/Parameters looks for frame labels and scene names
(see Chapter 9), layer names (see Chapter 6), and component parameters (see Chapter 10).
• Strings in ActionScript looks for text strings in ActionScript.
• ActionScript looks for all ActionScript code.
7. To edit each object on the Stage, select the Live Edit check box.
8. Click the appropriate button as needed:
• Click Find Next to find the next occurrence of the text.
• Click Find All to find all occurrences of the text.
• Click Replace to replace the currently selected object.
• Click Replace All to replace all instances of that text.
When Flash finds the specified text, the box at the bottom of the Find and
Replace dialog box displays its location and type along with the entire text so
that you can see the context of the text you’re replacing. You can resize the
Find and Replace dialog box as well as the columns in the list of found items.
When you’re finished, click the Close button in the Find and Replace dialog
box to return to your movie.
Setting character attributes
Of course, you don’t always want to use the Flash default font and size for
your Web site. Boring! You can set the attributes before you start typing or
edit the attributes of existing text. To edit existing text, double-click the text
block and then select the characters or words you want to format. To either
Chapter 5: What’s Your Type?
set or edit attributes of text, choose Window➪Properties➪Properties to open
the Property inspector.
Figure 5-4 shows the expanded Property inspector when some static text is
selected. (Static text is normal text that just sits there and looks pretty.) The
Property inspector changes slightly depending on which type of text you
select. See “Creating input and dynamic text,” later in this chapter, for more
information about the various types of text.
Setting the font, font size, and font style
Usually, the first step in formatting text is selecting a font. To select a font for
your text, simply choose one in the Font drop-down list in the Property
inspector. Flash changes the font of the selected text.
You can change the font characteristics that control specific properties of the
font, such as size and style:
To select a font size: Type a font size in the text box or drag the slider to
the desired value.
To select a font style: Click Bold, Italic, or both. Flash applies the style
to the selected text.
You can also select fonts, font sizes, and font styles directly from the Text
menu. This menu is devoted entirely to helping you format your text.
Character position
Letter spacing
Text type
Text (fill) color
Font
size
Font
Bold
Align center
Italic
Edit
format
options
Justify
Figure 5-4:
The
Property
inspector is
the place to
liven up
your text.
Change
orientation
of text
Auto kern
Target for URL
Position
Width and height
URL link
Selectable
Line type
Show border
around text
Render as HTML
Align right
Align left
Font rendering method
125
126
Part II: 1,000 Pictures and 1,000 Words
You can create vertical text, where letters flow downward rather than across.
Okay, so the purpose is mostly for languages that are often written vertically,
such as Chinese. Vertical text must be static and can go from either left to
right or right to left. (We explain static, input, and dynamic text later in this
chapter.) Figure 5-5 shows some vertical text.
Figure 5-5:
Try vertical
text for a
change of
direction.
To create vertical text, follow the instructions for creating normal text, but
before clicking the Stage to place the text, select the Vertical, Left to Right or
the Vertical, Right to Left option from the Change Orientation of Text button
on the Property inspector (refer to Figure 5-4).
Specifying text color
Black is the Flash default color, but you have lots of additional options. The
first concern is that the text is legible against its background. For example,
yellow text looks great in front of a black background, but it’s almost invisible
against white. Also consider that text is often unreadable in front of complex
graphic images, no matter what the color.
To set text color, select the text that you want to change if you’ve already created the text. In the Property inspector, click the Text Color button (refer to
Figure 5-4) to open the color palette, and select a color. (For more information on colors, see Chapter 3.) If you haven’t created the text yet, choose the
Text tool, select the color, and then create the text. Click anywhere else to
deselect the text so that you can see the new color.
To create transparent (or semitransparent) text, select the text and choose
Window➪Color Mixer to open the Color Mixer panel. In the Alpha text box,
type a new Alpha percentage and press Enter or Return. A 100-percent alpha
setting results in opaque text. Text with a 0-percent alpha setting is completely
transparent. A setting of 50 percent results in text that looks somewhat
Chapter 5: What’s Your Type?
transparent but is still visible. You can also set the transparency after you
choose the Text tool but before you type anything.
Adjusting kerning and tracking
Kerning reduces the spacing between certain letters, such as V and A. Because
of the diagonal line on the A and V, without kerning, the letters might look too
far apart. Figure 5-6 shows an example of text with and without kerning.
Figure 5-6:
The first
line uses
kerning; the
second line
doesn’t.
By default, Flash uses a font’s kerning information, which is embedded in the
font definition. Sometimes with smaller font sizes, kerning can make text hard
to read, so you can turn it off. Without kerning, text takes up slightly more
space. To turn off kerning, select the characters that you want to adjust and
clear the Auto Kern check box in the Property inspector.
You can adjust the spacing between all the letters, a process called tracking.
Perhaps you need the text to fit into a tight space or you want to stretch it
out without changing the font size. Figure 5-7 shows some text with various
tracking settings. To change tracking in the Property inspector, type a value
in the Letter Spacing text box or drag the slider bar to the desired value.
Figure 5-7:
Stretched
and
condensed
text.
Making text selectable
Do you want users to be able to select text and copy it to the Clipboard? If so,
you should make the text selectable. To do so, select the text (naturally), and
click the Selectable button in the Property inspector. Deselect this button to
prevent users from selecting text.
127
128
Part II: 1,000 Pictures and 1,000 Words
Hyperlinking text
You can create text that acts as a link to other Web pages. Flash underlines
linked text, following the global convention on Web sites. To create text with
a hyperlink, follow these steps:
1. Select the text.
2. Choose Window➪Properties➪Properties.
The Property inspector appears.
3. In the URL text box, type the URL (Uniform Resource Locator, or Web
address) of the Web page that you want to use.
When you complete the URL, a dotted line appears below the text to
indicate that it’s a hyperlink. When your Flash movie appears on a Web
site (or even when you test the movie on your own computer), clicking
the hyperlinked text displays the URL you specified.
The dotted line below the text doesn’t appear when you test or publish
the movie.
4. In the Target drop-down list, choose one of the window targets for
the URL.
The two most commonly used are _blank, which opens the URL in a
new browser window, and _self, opens the URL in the same window
and is the default.
Getting the best text appearance
Flash usually stores outlines of the text in your movie when you publish or
export it, so your audience will see your fonts in your movie even if they’re
not installed on your audience’s computer. However, not all fonts displayed in
Flash can be stored as outlines when you publish or export your movie.
To test whether Flash can export a font with a movie, choose View➪Preview
Mode➪Antialias Text. If the text appears jagged, Flash cannot export the text
with the movie.
Anti-aliasing is a method of making text look smoother — reducing the jaggies
that sometimes create stairlike lines on text. Anti-aliasing is especially helpful
for smaller font sizes. If you’re worried about the jaggies, try choosing the
Anti-alias for Readability option in the Font Rendering Method drop-down list
in the Property inspector.
Chapter 5: What’s Your Type?
The way that your type looks on the Stage is only an approximation of how it
will look when you publish or export your movie. To see a more accurate rendering of how your type will look when you publish or export it, view your
movie by choosing Control➪Test Movie.
If you want to use type in a font that Flash can’t export, you can break apart the
type into shapes, as we describe at the end of this chapter. However, this option
increases the size of your movie file and makes the text no longer editable.
If you’d like a space-saving alternative to storing your text as outlines in your
Flash movie, you can use Flash’s three device fonts that the Flash Player
always converts to the closest available font on the local computer:
_sans: A sans serif font similar to Arial (Windows) and Helvetica (Mac).
_serif: A serif font similar to Times New Roman (Windows) and
Times (Mac).
_typewriter: A font that looks like it has been typed on a typewriter.
(Are you old enough to remember what that is?) It’s similar to Courier
New (Windows) and Courier (Mac).
When you use device fonts, your resulting published movies are smaller, so
download time is shorter. With device fonts, your text also might be more legible in text sizes below 10 points. To use device fonts, specify one of the device
fonts and then deselect the text. Then select Use Device Fonts in the Font
Rendering Method drop-down list in the Property inspector. (This setting
applies only to horizontal static text.) When you publish your movie, select
the Device Font check box on the HTML tab (Windows only) of the Publish
Settings dialog box. Chapter 13 tells you more about publishing settings.
Setting up paragraph formats
You can set paragraph attributes such as alignment, margins, indents, and
line spacing. Use these settings whenever you type more than one line of text.
(You are getting long winded, aren’t you!)
Setting text alignment
You can align text along the left margin or right margin of the text block. You
can also center text. You can create an even edge along both margins, called
full justification or justified text. By default, text is left aligned.
To align text, select it and display the Property inspector (choose Window➪
Properties➪Properties to open the Property inspector (refer to Figure 5-4) or
129
130
Part II: 1,000 Pictures and 1,000 Words
click its title bar if its collapsed). Then click the Align Left, Align Center, Align
Right, or Justify button.
Setting margins and indents
The margin is the space between the text block border and your text. By
default, the margin is 0 pixels. You can increase the margin to guarantee some
space around the text. You can set only the left and right margins (not the top
or bottom ones).
To set the left margin, select the paragraph and click the Edit Format Options
button in the Property inspector to open the Format Options dialog box, as
shown in Figure 5-8. Type a value in the Left Margin text box or click the arrow
and use the slider to specify a value. Then press Tab or Enter (Windows) or
Return (Mac) to see the result right away. To set the right margin, use the
Right Margin text box.
Figure 5-8:
Use the
Format
Options
dialog box
to whip your
text into
shape.
Indentation creates an indented first line. It’s equivalent to placing a tab at
the beginning of a paragraph. (Remember your sixth-grade teacher who told
you to always start each paragraph with an indent?) To indent the first line,
select the paragraph and type a value in the Indent text box in the Format
Options dialog box or click the arrow and drag the slider bar.
Specifying line spacing
Line spacing determines the space between lines. Flash measures line spacing
in points (1⁄72 of an inch) because font size is measured in points. For example,
if your text is 18 points high and you want to double-space the lines, use a
line spacing of 18 points so that a space exactly one line high exists between
each line of text. To set the line spacing, select the paragraph, click the Edit
Format Options button in the Property inspector to open the Format Options
dialog box, and type a value in the Line Spacing text box or click the arrow
and drag the slider bar. Press Tab or Enter (Windows) or Return (Mac).
Chapter 5: What’s Your Type?
Click OK (Windows) or Done (Mac) when you’re finished with the Format
Options dialog box.
Flash remembers paragraph properties from movie to movie. When you
change paragraph properties for one movie, the properties rear their ugly
heads in your next movie. If your text automatically indents at the beginning
of paragraphs or comes out double-spaced, check out the Format Options
dialog box.
Creating input and dynamic text
You can create three kinds of text in Flash:
Static text: Regular text that doesn’t change or do anything, although
you can animate it.
Input text: Text that viewers can enter, as in a text box. You can use
input text, for example, for forms and surveys or to interactively create
values that affect the movie.
Dynamic text: Text that changes based on data coming from an external
source (such as a Web server), an internal source (such as
ActionScript), or input text in the movie. Dynamic text is often used for
data such as sports scores, current weather, and stock prices.
To choose the type of text, use the Text Type drop-down list in the Property
inspector. (It’s a good thing the Flash creators didn’t call it the Type Type
drop-down list.)
Several text settings in the Property inspector apply only to input or dynamic
text (and therefore don’t appear if you use static text):
Instance Name: This text box appears under the Text Type drop-down
list when you select input or dynamic text. An instance name identifies
the text object so that you can refer to the text in ActionScript. (See
Chapter 10 for the scoop on ActionScript.) Instance names are handy
because with input or dynamic text, the contents of the text field can
change while your Flash movie is playing; but if you give your text field
an instance name, you can always refer to it in your ActionScript, even
though you don’t know the contents of the text field ahead of time.
Line Type: Defines how text is displayed.
• Multiline displays the text in multiple lines.
• Single Line displays the text as one line.
131
132
Part II: 1,000 Pictures and 1,000 Words
• Multiline No Wrap displays text in multiple lines that break only if
the last character is a breaking character, such as Enter (Windows)
or Return (Mac).
• Password displays asterisks.
Render Text as HTML: Preserves formatting, such as fonts and hyperlinks, with certain HTML tags. You need to create the formatting by
using ActionScript.
Show Border Around Text: Displays a black border and white background for the text field. This border helps users know where to enter
text in an input text block.
Variable: Enables you to enter a variable name for the text field. You can
use variable names similarly to instance names, but your options are
more limited.
Maximum Characters: Specifies the maximum allowable characters that
users can input in a text box. For example, you could limit a zip code to
five digits.
Embed: Opens the Character Embedding dialog box, where you can
select options for embedding font outlines. Choose one or more of the
options (such as Uppercase and Lowercase). You can press Ctrl (Windows)
or Ô (Mac) and click several options. Or click the Don’t Embed button if
you don’t want to embed font outlines. When you’re finished, click OK.
The font outlines you chose are exported when you publish the movie to
ensure a smooth appearance. Limiting the font outlines you export helps
to make the file size smaller.
Creating Cool Text Effects
Flash wouldn’t be worth its salt if you couldn’t create some flashy effects
with text. You can manipulate text in several ways:
Transform text just like other objects. In other words, you can scale,
rotate, skew, and flip type. Figure 5-9 shows an example of skewed text.
Convert type to shapes by breaking it apart. Select the text and choose
Modify➪Break Apart. The first time that you use the Break Apart command, words are broken up into individual letters. Use this command
again, and letters are turned into shapes so that you can then edit the
text in the same way that you edit shapes. However, you can no longer
edit the text as text, so check your words before converting them! (Refer
to Figure 5-1 for an example of text turned into shapes.)
Chapter 5: What’s Your Type?
Figure 5-9:
This text is
skewed to
match the
angles of
the skewed
rectangles,
creating a
3-D effect.
Apply special graphic effects to text, called filters. Select the text and
click the Filters tab of the Property inspector. Click the Plus (+) icon and
choose one (or more) of the following filters: Drop Shadow, Blur, Glow,
Bevel, Gradient Glow, Gradient Blur, or Adjust Color. Each filter has a
number of settings that you can adjust to get just the right effect. Figure
5-10 shows these effects in the order listed here.
Figure 5-10:
Filters are
shortcuts to
cool looking
(but not
necessarily
legible) text.
You can animate text to your heart’s content. To animate text, you usually
break it apart so that you can move letters individually. You can then use the
Modify➪Timeline➪Distribute to Layers command to put each letter on a separate layer. After that, you can animate each letter. (See Chapter 9 for the
details on animation.)
133