• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Text > Working with Text Elements

Working with Text Elements

Once you've created a text element, you'll usually want to edit it. You can change character and paragraph attributes such as font, font color, margins, line spacing, and more. You may also want to alter the way a text element is defined (static, input, or dynamic) or change some of its core attributes (which determine how it works within your movie)—especially if you're talking about a dynamic text element. You make all text adjustments via the three text panels: Character, Paragraph, and Text Options. The first thing you need to know, however, is how to link your edits to a particular block or section of text.

Selecting and Editing Text Blocks

You can edit text as blocks, meaning the entire text element, or individual text within the block (for example, correcting spelling or changing words, setting character options for individual characters, and so on). The latter is known as working in text-edit mode.

When you select a text block, you can restyle the text as a block, and you can move, rotate, and scale that text as well. Once it's selected, a colored selection box surrounds the block. Adjustments in the Character panel and alignment adjustments in the Paragraph panel will be reflected in all of the text in the block.

When you select text within a block, the color of that text appears highlighted (Figure 4.7). When individ ual text is selected, adjustments in the Character panel will affect only the selected text and adjust ments in the Paragraph panel will affect only the paragraph that the selected text is part of (Figure 4.8).

Figure 4.7. When you select a text block, a colored selection box surrounds it (left), whereas individually selected text appears highlighted (right).


Figure 4.8. When individual text is selected, any adjustments made on the Character or Paragraph panel will affect only the paragraph the selected text is part of, not the entire text block.


Tip

Character or paragraph edits to individual text will be reflected in the exported movie only if the text is within a static text block. If the text is an input or dynamic text element, the HTML option has to be checked on the text options panel for the edits to be reflected.


To select and edit a text block:

1.
On the toolbar, choose the Arrow tool, or press the V key.

2.
Move your cursor onto the stage and click on any text block.

The text block becomes surrounded by a colored selection box.

3.
Resize, move, rotate, or align the text element on the stage, or format text within the text block by making adjustments in the Character and Paragraph panels as described above.

To select and edit individual text inside a text block:

1.
Do one of the following:

  • On the toolbar, select the Arrow tool, or press the V key.

  • Double-click any text to place it in text-edit mode. You can then edit individual letters, words, or paragraphs in the text block.

  • On the toolbar, select the Text tool.

When you move the cursor to the stage, it changes into an I-beam when you pass it over a text element.

2.
Click between characters to place the insertion point for entering more text.

3.
In text-edit mode, do any of the following:

  • Select a letter, word, or paragraph for editing by click-dragging from the first letter you wish to edit to the last; then release. This highlights and selects the text, which you can then edit in all sorts of ways (changing font, font size, color, and so on).

  • Delete text by click-dragging to select it, and then pressing the Delete or Backspace key.

  • Copy text by click-dragging the text you wish to copy and choosing Copy from the Edit menu.

  • Paste text by clicking once to place the insertion point where you would like the pasted text to begin. Then from the Edit menu choose Paste.

Character-Level Formatting

Although Flash cannot offer the same type of text control that a dedicated word processor can, it can handle some of the more common formatting tasks, such as setting font size, line spacing, and kerning. You make these kinds of edits—which are known as character-level formatting by means of the Character panel.

You work with the Character panel in one of two ways: If no text block or individual text is selected on the stage, any attributes you set on the Character panel will become the default attributes for all new text blocks. If a text block or individual text is selected on the stage, the current character attributes will appear on the panel and any adjustments made in the panel will be reflected immediately on the selected text.

Tip

When selecting a text block or individual text that contains more than one set of formatted text (for example, part of the text is green and bold, while the rest is red and italic), the Character panel will display the attributes of the first character of the selected text.


The Character panel is made up of the usual suspects, including the Font and Font Size, and the Bold and Italic buttons, as well as some others with which you might not be familiar (Figure 4.9):

Figure 4.9. The Character panel.


  • Font Color. Allows you to choose a font color. Clicking this color box will display a list of the available solid colors. You'll notice that gradients are not available for text objects; we discuss a way around this in "Breaking Text Apart" later in the chapter.

  • Tracking. Defines the amount of even space between characters. You can set a new tracking amount by typing it into the text box or by adjusting the slider next to the text box.

  • Kern. Most fonts contain information that describes how to handle the space between characters (for example, the letters AB require more space (kerning) than the letters II or AV. Check this box to use the font's built-in kerning information.

  • Baseline Shift. Controls how text appears in relation to its baseline (Figure 4.10).

    Figure 4.10. Baseline shift is used to set the text's relation to the baseline.

  • URL. Allows you to associate a URL with currently selected text—similar to creating hyperlinked text in HTML documents. You can associate sections of text within the same text block with different URLs. Text that has a URL associated with it will have a dotted line in the authoring environment. While HTML hyperlinks are normally identified by colored-underlined text, hyperlinks created using this feature will not be visually identified in your exported movie as a hyperlink (other than by a hand cursor) unless you format it differently.

To set default character formatting for new text elements:

  • With the Character panel open, adjust the various character attributes the way you want them.

    Afterward, all new text elements will have those attributes.

To change character formatting for selected text:

1.
Select a text block or any individual text you wish to edit.

2.
With the Character panel open, make any necessary adjustments. The text on the stage will be automatically updated to reflect your edits.

Tip

Most character formatting options are also available from the Text menu.


Paragraph-Level Formatting

Paragraphs are sections of text that are separated by a hard return (that is, by pressing Return or Enter on your keyboard). Paragraph-level formatting allows you to set alignment, margin, line spacing, and indentation.

To open the Paragraph panel, do one of the following:

  • Choose Window > Panels > Paragraph.

  • Press the Show Character button on the Launcher bar, and then click the Paragraph tab.

You work with the Paragraph panel in one of two ways: If no text block or individual text is selected on the stage, any attributes you set on the Paragraph panel will become the default attributes for all new text blocks. If a text block or individual text is selected on the stage, the current paragraph attributes will appear on the panel, and any adjustments made in the panel will be reflected immediately on the selected text.

The Paragraph panel includes options for aligning text to the left, right, center, or both right and left; and setting right and left margins, indentation, and line spacing (Figure 4.11).

Figure 4.11. The Paragraph panel.


Tip

With the exception of line spacing (which always defaults to points), the measurement units for paragraph settings default to the measurement units of the rulers.

You can apply different attributes to individual paragraphs within the same text block.

Alignment options are also available from the Text menu.


To set default paragraph formatting for new text elements:

  • With the Paragraph panel open, adjust the paragraph attributes. Once you've finished, all new text elements will have those attributes.

To change paragraph formatting for selected text:

1.
Select a text block or any individual text you wish to edit.

2.
With the Paragraph panel open, make any necessary adjustments. The text on the stage will be automatically updated to reflect your edits.

Text-Block Options

Text block options affect the selected text block as a whole (thus, you cannot apply them to individually selected text). You can apply different options to each text block on the stage. The Text Options panel contains three options—static text, dynamic text, and input text—each of which has its own configurable parameters. You can configure text options for multiple text blocks simultaneously by selecting them all before adjusting the parameters in the Text Options panel.

To open the Text Options panel, do one of the following:

  • Choose Window > Panels > Text Options.

  • Press the Show Character button on the Launcher bar, then click the Text Options tab.

Static Text

Static text—which will not change while your movie is playing—is best for form element labels, navigation labels, button labels, animated chunks of text, and any sections of text that will not be dynamically loaded from a text file or server. There are two settings available for static text boxes:

  • Use Device Fonts. Leaving this unchecked will cause Flash to embed font information for any fonts used in the text block so that the font will appear antialiased (smooth) in the exported movie. Checking this option will prevent font information for this text block to be embedded (see "Understanding Device Fonts" for more information).

  • Selectable. Allows the user to select text within the block to cut or copy into their system's clipboard so that it can be pasted into another program.

Understanding Device Fonts

Most fonts include a built-in description that contains information about how characters look, which character will appear in response to a specific key-press, kerning, and more. This font description also includes info that allows the text you see while working in Flash to appear smooth (antialiased) (if the View > Antialiased Text option is checked)—information that's embedded in your exported Flash movie, too, so that text there will appear smooth as well. Although the results are graphically pleasing, there are drawbacks to embedding this information in your exported movie. For one, smoothing makes small fonts almost impossible to read. In addition, this embedded font information can add to your exported movie's file size. The solution to both of these problems is to use device fonts.

Let's say you create a static text block that uses a font called MyFavoriteFont. You then select the Use Device Font option on the Text Options panel. After you export your movie, everyone who has MyFavoriteFont installed on their machines will see the text exactly as you intended, though it will not appear antialiased. Machines that don't have MyFavoriteFont will use the font that most closely resembles it—a process called font mapping. This solution is far from perfect, though, because sometimes the font a machine picks looks nothing like the original (Figure 4.12).

Figure 4.12. Device fonts can sometimes produce unexpected and undesirable results.


Because font mapping can sometimes produce unexpected results, Flash includes the following three built-in device fonts to make font mapping more predictable:

  • _sans

  • _serif

  • _typewriter

The Flash player knows to map these fonts—which can be found at the top of the font list on the Character panel—to specific fonts available on most platforms. For example, the _sans font in Flash looks almost exactly like the Arial font in Windows and Helvetica on a Macintosh. The following describes how Flash's device fonts are mapped.

  • _sans maps to Arial on Windows and Helvetica on a Macintosh

  • _serif maps to Times New Roman on Windows and Times on a Macintosh

  • _typewriter maps to Courier New on Windows and Courier on a Macintosh


Dynamic Text

Dynamic text blocks allow you to display text that's been dynamically generated by ActionScript or a Web server, as well as text that's been loaded from an external text file (Figure 4.13). This means that the text within a dynamic text block can change as your movie is playing, allowing you to display personalized messages, to update information by changing an external file, and even to display HTML-formatted text (see "Powering Input and Dynamic Text Elements with Rich-Text Formatting").

Figure 4.13. Dynamic text blocks can display text that is loaded into it from a source external to your movie, such as a Web server or text file.


When you create a dynamic text block, you assign it a name—or as Flash calls it, a variable name. This variable name lets you control the text block any number of ways using ActionScript. For example, if you create a dynamic text block and name it myTextBlock, the following ActionScript code will display the message "Hello, did you know it was the year 2000?" inside the text block:

   currentDate = new Date();

   myTextBlock = "Hello, did you know it was the year " + currentDate.
     getFullYear() + "?";

Don't worry about understanding the ActionScript code right now. You just need to understand why you assign variable names to dynamic text blocks and how those variable names are used in ActionScript to evoke interactivity.

The settings for dynamic text boxes include the following (Figure 4.14):

Figure 4.14. The options available when creating dynamic text blocks.


  • Line Display. This pop-up menu lets you specify how lines of text are displayed. Choose Single Line to allow only a single line of text. Choose Multiline to allow text to wrap to the next line when necessary.

  • Variable. This is where you assign a variable name to your dynamic text block. It must begin with a letter, not a number or space (though you may use a number after the first character) . By naming your text block, you enable Flash to identify it. We'll discuss this in greater detail in Chapter 14, "Building Advanced Interactivity with ActionScript."

  • HTML. Enables the text block to interpret HTML code that's been loaded dynamically. Also, checking this box allows you to use different styles of formatted text within a single input text block. For more information on this feature, see "Powering Input and Dynamic Text Elements with Rich-Text Formatting" later in this chapter.

  • Border/BG. Allows your text box to be identified (in Flash as well as in your final movie) by a solid thin outline and a background. If you leave this option unchecked, your text field will still be identified within Flash by a dotted outline. However, once you export your movie, the text block will no longer have a border.

  • Selectable. Allows the user to select text within the text block and cut or copy it to their system's clipboard for pasting in another program.

  • Embed Fonts. This option determines not only how text appears within the block but also how it affects your movie's overall size. Embedding fonts is primarily a matter of preference. If you don't embed fonts, your text will appear aliased (jaggy). However, text that uses a small font may be easier to read. By embedding fonts, you make your text appear smoother (and thus more graphically pleasing), but your presentation's size increases—and on the Web size is everything. Although there are settings available to minimize font overhead, you need to be aware of how they'll affect your movie's appearance and size. For more information about these settings or fonts see, "Powering Input and Dynamic Text Elements with Rich-Text Formatting" or "Using Font Symbols for Dynamic Type Styling" later in this chapter. Font embedding options include the following:

    Do not embed fonts. Though not a button itself, this is the default setting your machine will revert to if you haven't pressed any of the other Embed Font options.

    Embed all characters. Embeds all of a font's characters in your exported movie. If you check this option, your text block will appear smooth, but your file size could increase from 35Kb to 60Kb (on average). Selecting this option grays out the other embed options because it negates their functions.

    Embed uppercase characters. Embeds uppercase characters A through Z.

    Embed lowercase characters. Embeds lowercase characters a through z.

    Embed numbers. Embeds numbers zero through nine.

    Embed special characters. Embeds special characters such as ?, !, and others.

    Embed specified characters. Use this box to type specific characters to embed. For example, if you only want to embed the characters d, t, f, 3, and 4, you would type them into this box (without commas—unless you wanted them included).

Input Text

Input text blocks, such as form elements, password fields, etc., allow users to enter text that your movie can use internally by way of ActionScript or which can be sent to a Web server for processing. With a little creativity, you can produce Flash forms that are as engaging as the rest of your movie.

When you create an input text block, you assign it a variable name which lets you control the text box any number of ways using ActionScript. For example, if you created an input text block and named it myInputBlock, the following ActionScript code would convert any text entered into all lowercase text:

  myInputBlock = myInputBlock.toLowerCase()

In another example, the following code tells your movie to perform an action based on whether the myInputBlock input text block contains text. It basically states that if myInputBlock is empty (equals ""), go to and stop at Scene 2 frame 1, otherwise go to and stop at Scene 3 frame 1:

   if (myInputBlock == "") {
     gotoAndStop ("Scene 2", 1);
   } else {
     gotoAndStop ("Scene 3", 1);
   }

The settings for input text boxes include the following:

  • Line Display. With one exception, this is the same setting as that used with dynamic text: Choose Password to have asterisks (*) replace characters that have been entered into the text field.

  • Variable. See the Variable setting for dynamic text elements in the previous section.

  • HTML. See the HTML setting for dynamic text elements in the previous section.

  • Border/BG. See the Border/BG setting for dynamic text elements in the previous section.

  • Max Chars. Allows you to set the maximum number of characters that can be entered in the text field. If you enter zero, an unlimited number of characters can be entered.

  • Embed Fonts. Same as setting for Dynamic Text; allows user-entered text to be antialiased.

Tip

Neither input nor dynamic text blocks support kerning or tracking.

Neither input nor dynamic text blocks support full justification—just left, right, and center.

If you wish to perform rotation, alpha-color transformations, or masking (with Mask layers) with dynamic text blocks, you need to embed fonts.


Powering Input and Dynamic Text Elements with Rich-Text Formatting

First, we should probably explain precisely what we mean by rich-text formatting. Rich-text formatting allows your input and dynamic text blocks to display text of various font styles, sizes, colors, and even hyperlinks (Figure 4.15). When you select the HTML option for either input or dynamic text blocks, they become HTML-aware—that is, any text displayed in the text block that contains the supported HTML tags (see below) will be displayed in rich-text format based on the tags used. For example, if you create a dynamic text block named myDynamicText and then select the HTML option for the text block, the ActionScript

Figure 4.15. One text block without rich-text formatting (left), one with (right).


   myDynamicText = "Hello there! You are our <b><u>favorite</b></u>reader."

will cause the following text to be displayed in the text block:

Hello there! You are our favorite reader.

If, however, you had left the HTML option unchecked, the following text would instead be displayed:

Hello there! You are our <b><u>favorite</b></u>reader.

(For information on how to do this with a loaded text file, see below.)

Mixing and matching HTML tags allows you to create more sophisticated-looking text in your presentation.

Flash supports the following HTML tags:

   <A>
   <B>
   <FONT COLOR>
   <FONT FACE>
   <FONT SIZE>
   <I>
   <P>
   <U>

Combine Flash's support for HTML tags with its capability to load text from an external source such as a text file or Web server, and you have a powerful means of display ing dynamic, rich text in your movie. Updates to text content can easily be accomplished just by updating the external source. Using dynamic text in your movie is a two-step process of setting up your movie to load a file into a dynamic text block, and then actually creating the file that is loaded.

To load an HTML-based text file into a dynamic text block:

1.
In Flash, create a dynamic text block, name it intro, and then select the HTML option on the Text Options panel.

2.
Right-click (Windows) or Control-click (Macintosh) Frame 1 on the timeline and then select Actions from the menu that appears. The Actions panel will appear.

3.
In the left pane, click on the Actions group to expand it.

4.
Double-click the loadVariables action. to make an unconfigured ActionScript statement appear in the right pane. Parameter settings are at the bottom of the Action panel.

5.
In the URL parameter box, type the name and directory path to the text file. (Because our text file will reside in the same directory as our exported .swf file, all we need to enter here is the name of our file, MyMovieText.txt.)

6.
Leave the other settings as is, and then export this authoring file to a SWF movie.

To create the HTML-based text file that will be loaded into your movie:

1.
Either SimpleText for the Macintosh or Notepad for Windows is more than adequate for this job. Open either one and type the following:

&intro=<p align="center"><b><font size="12">Hello!!</font></b></
p><p>My <fontcolor="#FFCC66">name</font> is <a href="http://
www.mydomain.com"><u><font color="#0066FF">Gary</font></u></a>.
What is your <i>name?</i></p>

2.
Name this text file MyMovieText.txt (the same file name we identified in our ActionScript a moment ago) and save it to the same directory as your exported .swf file.

If you double-click and play the .swf file, this text will load into the intro text block and display the text in the external text file with rich-text formatting, based on the HTML tags we used (Figure 4.16) .

Figure 4.16. This is what would result if we were to enter our text file into the dynamic text block with the variable name of intro.


That's all there is to it. If you re-edit and save this text file, the .swf file will reflect your edits when played again, including any made to formatting tags.

A couple of things to notice about this text file:

  • It starts off with the code &intro=. This identifies the text block into which this text will be loaded.

  • The standard <HTML> and <BODY> tags are missing: Because they have no effect, they aren't used.

  • If this page were wide enough, you'd see that the code resides on a single line. Using returns anywhere in your code will cause Flash to insert a hard return, not always a desirable result.

The Rich-Text Tip Sheet

There are a number of issues you need to be aware of when using rich-text formatting in your movie:

  • Some HTML tags in ActionScript require the use of quotation marks to define certain values (for example, a hyperlink, font face, or font color). However, using quotes in this manner causes conflicts in ActionScript, so you need to employ what's known as an escape character (\"")to make everything work properly. Instead of defining a hyperlink this way: <a href="http://www.mydomain.com">, you would define it as follows: <a href=\"http://www.mydomain.com\">.(This only pertains to HTML-based text used with ActionScript; it does not apply to quotes used in an externally loaded text file.)

  • If you define a font style by using the HTML <font face>tag, your user will only see that particular font if it's installed on their machine; otherwise, the closest device font will be used (see "Understanding Device Fonts" earlier in this chapter). To ensure that the defined font appears as intended, embed that font into your movie.

  • If you embed a font for use in conjunction with the HTML <font face> tag, be aware that variations of the font face (Bold, Italic) are not embedded. Thus, text using these variations may not appear.

  • Opening the Character panel and then selecting a text block on the stage will display that text block's default font settings. Any text with characteristics (color, face, size) not defined in the HTML<font> tag will reflect the text block's default attributes as set in the Character panel.

  • Using one of Flash's built-in device fonts will give you the most predictable results when displaying rich text.

  • When defining a font's color using the HTML<font color> tag, use Hex-based values (see the color section in the previous chapter for more information on Hex values).

  • The font size value defined using the HTML <font size> tag is set in relation to the default size you defined for the text block using the Character panel.

  • Hyperlinks defined in HTML-based text are not automatically shown in a different color or with an underline as you normally see on an HTML page. If you want to identify a section of text as a hyperlink, you need to set these attributes manually using the <font color> and <u> underline tags.

  • When the HTML option is selected for an input or dynamic text block, rich-text formatting is only applied to text loaded into the text block. Entering tag-based text directly into a selected text block means that the tags will be included in the text block when your movie is exported (Figure 4-17).

    Figure 4.17. Entering tag-based text directly into a selected text block will export tags and text block with your movie.

  • Users cannot input information with rich-text formatting (different fonts, colors, sizes, etc.) into input text blocks: Text entered into input text blocks always reflects the text block's default attributes as defined on the Character panel.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint