In Flash, you can create three types of text: static, dynamic, and input. Static is text that doesn’t change. Dynamic is text that updates, such as stock quotes, weather reports, or sports scores. Input is text entered by a user in forms or surveys. You can create editable text fields for use as static display text or to implement dynamic text objects with the Text tool. In the program’s text menu, as well as the Property Inspector, there are a number of attributes to choose from such as Font type, size, color, indentation, and orientation. Also included are familiar letter form formatting procedures for kerning, tracking, and anti-aliasing. Because text fields are editable, you can change any text attribute—as well as the content in the text field—after it is created.
Use the Break Apart command to break editable text fields into shapes and edit them with any of the selection tools or pen modifiers. This is especially useful for creating new font forms, and it also allows you to implement shape tweening. Create dynamic text fields that can be updated from a text file on a server or some other source using ActionScript. In Flash, you can now configure the Find and Replace feature to target text contained in specific elements in your Flash document and swap these out with new entries from the built-in Adobe dictionaries or from a personal dictionary you create. Find and Replace makes navigating the text in large, complex files much simpler. Other new features include new implementation of Cascading Style Sheets for consistent HTML text formatting and the new built-in Spell Checker for enhanced productivity.
Static text refers to any text field that isn’t dynamic or input text. It’s generally used for displaying information or for animation. Text created in Flash is editable, which means that you can continue to change it after it is created. This includes changing its attributes as well as the textual content (the letters it contains). The Text tool creates an editable text box wherever you touch down on the Stage. Flash will keep the text on a single line until you hit the Return key. If you need a text box with a predefined width, you can create a text box before you start typing. The entered text will automatically wrap relative to the boundaries of the box and any formatting settings you’ve applied. To re-enter an existing text box to change the text, simply double-click any character in the Text box or click it with the Text tool to activate it and make it ready to edit.
Click the Text tool on the Tools panel.
The pointer becomes a crosshair with a small “T” in the corner.
Click the Stage where you want your text box to begin.
Flash displays a handle on the corner of a text box to identify the type of text box.
Begin typing in the box that appears.
Click anywhere on the Stage outside the text field to deselect it.
To reselect a text box, click to select it.
A blue bounding box with square handles appears around a text box when it’s selected.
See “Setting Text Preferences” on page 62 for information on setting preferences for Default Text Orientation, Right to Left Text Flow, and No Kerning.
Click the Text tool on the Tools panel.
The pointer becomes a crosshair with a small “T” in the corner.
Click the Stage where you want your text box to begin and drag until the box is the size you need.
Begin typing in the box that appears.
Click anywhere on the Stage outside the text field to deselect it.
To reselect a text box, click to select it.
A blue bounding box appears around a text box when it’s selected.
Flash includes a number of text properties to choose from. These include a font type, style, size, and color. You can set these attributes before you create a text field or alter them on existing text. To make changes to the entire text field, select it with the Selection tool without entering the field (or making it active). Any changes made are applied to the whole field. A text box is considered “active” when the background of the field is an opaque white and text can be entered into it (as opposed to just being selected on the Stage, when it appears in a bounding box). If you only want to change a portion of the field, enter the text field and select only those characters or words you want to change. Attributes such as font type, style (New!), size, and color as well as more advanced text properties can be easily accessed in the Property Inspector. When the Text tool or any text field is selected, the Property Inspector displays all of the available attributes.
Select the text field you want to change with the Selection tool or select text within the text field with the Text tool.
Click the Family popup in the Property Inspector, and then select a font name.
The Family menu displays the font name and sample text for each font style to make it easier to decide what font you want to use. (New!)
Click the Style popup in the Property Inspector, and then select a font style: (New!) Regular, Italic, Bold, or Bold Italic.
Click the current point value in the Property Inspector, and then enter another point value in the Size entry box.
Select the text field you want to change with the Selection tool, or select text within the text field with the Text tool.
Click the Color box in the Property Inspector, and then select a fill color or click the Color Wheel icon to create or select a custom color.
You can change the text color in any of the color palettes. Change the fill color of any selected text field by clicking on any of the color palettes. They are located in the Tools panel, the Color Mixer panel, and the Color Swatches panel.
See “Setting Text Preferences” on page 62 for information on setting options for showing font previews on font menus.
Sometimes the space between text characters can appear awkward or where increasing the space is a creative solution. Flash provides methods for adjusting these spaces, called kerning and tracking. Tracking is the space between characters and words on a single line and adjusting tracking affects the entire line. Kerning deals with the space between any two characters and adjusting it will only affect that space. Many Fonts contain built-in information about problematic character pairs. Flash makes use of this information when you turn on Auto Kern in the Property Inspector.
Select the text in a text field you want to track or you can select the entire text box with the Selection tool.
Click the Text menu, point to Letter Spacing, and then click Increase or Decrease.
The Tracking increases or decreases in 0.5-point increments.
You can adjust tracking in the Property Inspector with the Character Spacing entry field or slider.
You can quickly adjust kerning or tracking using the keyboard. Select the text or text field (to track) or place the cursor between two characters, and then press Option+ +right arrow (Mac) or Ctrl+Alt+right arrow (Win) to increase the space or Option+ +left arrow (Mac) or Ctrl+Alt+left arrow (Win) to decrease the space. Holding down the Shift key with this keyboard shortcut adjusts the space in larger increments.
In addition to a variety of properties that can be applied to text in Flash, there are also procedures for changing the orientation and direction of text. Included is a formatting option for creating vertical text automatically without using any of the Transform commands. When text orientation is set to be vertical, the characters appear in columns though they remain in their normal horizontal orientation. If you need the text to rotate ninety degrees and follow the orientation of the line, you can set it to rotate automatically in the Property Inspector. This is useful if you are looking for something other than a column. The orientation of the text becomes vertical.
Click the Text tool on the Tools panel.
Click the Change Orientation button in the Property Inspector, and then click Vertical, Left To Right, or Vertical, Right To Left.
Click the Stage where you want your text box to begin, and then start typing in the box that appears.
When you’re finished, click on the Stage outside the text field.
You can convert an existing text field into a vertical text field. Select the text field on the Stage, click the Change Direction popup in the Property Inspector, and then select a vertical option.
You can make vertical text the default orientation. Select the Default Text Orientation check box in the Editing tab of the Preferences dialog box. This can be useful when working in some Asian languages.
Click the Text tool on the Tools panel.
Click the Change Orientation button in the Property Inspector, and then click Vertical, Left To Right, or Vertical, Right To Left.
Click the Stage where you want your text box to begin and drag until the box is the size you need.
Begin typing in the box that appears.
When you’re finished, click anywhere on the Stage outside the text field.
Similar to other text editing tools or word processing programs, Flash includes features for formatting paragraphs with alignment, margins, and indentation. These features can be accessed through the Text menu and in the Property Inspector whenever any text field is selected on the Stage. Each text field can have its own individual properties assigned to it. Alignment governs the position of the text in a text box, margins are the space between the left and right side of the text and the boundaries of the text box, and indentation sets the amount of character spaces before the first line of text in a paragraph begins.
Select the text in a text field you want to align or you can select the entire text box with the Selection tool.
In the Property Inspector in the Paragraph section, click one of the following:
• Align Left. Aligns text to the left margin.
• Align Center. Text is centered between the boundaries of the text box.
• Align Right. Aligns text to the right margin.
• Justify. Each line of text fills the width of the text box boundary.
Select a text field with the Selection tool.
In the Property Inspector in the Paragraph section, enter values for any of the following:
• Indent. Indents the first line of the paragraph.
• Line Spacing. Adjusts the space between lines of text.
• Left Margin. Adjusts the amount of space between the left barrier of the text box and the left side of the paragraph.
• Right Margin. Adjusts the amount of space between the right barrier of the text box and the right side of the paragraph.
When a line of text is created in Flash, it appears in a bounding box that is editable. Sometimes you might need to adjust the characters separately or you might want to modify the shape of the characters themselves to create new character styles. The Break Apart command allows you to do this. There are two levels of breaking that you can utilize. The first break will separate the text field into singular, editable characters. This is useful if you want to reposition or align the letters of a word independently. The second break severs the text from its font reference: in essence it becomes a shape that you can edit with any of the drawing tools or pen modifiers.
Anti-aliasing affects the pixels on the edge of a shape by allowing them to blend in with the background. It is a crucial feature when working with some text as it makes it appear smoother and more integrated. Flash includes FlashType, a new text rendering feature that improves anti-aliasing and readability for fonts. FlashType is enabled whenever Flash Player 8 is the selected player, and anti-aliasing is set to anti-aliasing for readability or custom. The drawback with anti-aliasing is that at smaller font sizes the text can appear blurry. To avoid this problem, use sans serif text, such as Helvetica or Arial, and don’t use bold and italic. You can use anti-aliasing with static, dynamic, and input text. You apply anti-aliasing to text boxes instead of characters.
Select the text field with the Selection tool.
Click the Font Rendering Method popup in the Property Inspector, and then select one of the following:
• Use Device Fonts. The SWF file uses fonts installed on the local computer to display fonts.
• Bitmap Text (No Anti-Alias). No text smoothing.
• Anti-Alias for Animation. Smooths out animation (Flash Player 8 or earlier).
• Anti-Alias for Readability. Uses anti-aliasing (Flash Player 8 only).
• Custom Anti-Alias. Modify font properties.
If you open a document with a missing font on a computer, a Missing Font alert appears, asking you to choose a substitute font. You can open and use the Font Mapping dialog box to map a substitute font to the missing font, view the mapped fonts in the document, and delete a font mapping. After you select a substitute font, text appears with the correct font (if available) or the substitute font (if missing). When you use a substitute font, the text box or attributes might need to be adjusted.
Open a document.
• To view all the font mappings saved on your computer, close all documents.
Click the Flash (Mac) or Edit (Win) menu, and then click Font Mapping.
Click a font in the Missing Fonts column.
Click the Substitute Font popup, and then click a font, or click System Default.
Click OK.
You can delete the font mapping. Close all documents, click the Flash (Mac) or Edit (Win) menu, click Font Mapping, select a font mapping, click Delete, and then click OK.
You can turn off the Missing Font alert. Click the Flash (Mac) or Edit (Win) menu, click Font Mapping, select the Don’t Show Again For This Document, Always Use Substitute Fonts check box, and then click OK.
When you include a font in your Flash document that is installed on your computer, the font outline information is embedded in the exported Flash movie. This is called an embedded font and it ensures that your fonts will look consistent when displayed on other computers. Of course this adds to the file size, as each character from the selected font family has to be included in the final .swf. If file size is an issue, and the exact character matching is not important, you can choose to use device fonts. When a font is set to device, Flash will not embed the font information in the exported file. Instead the Flash Player will substitute the closest resembling font by name on the computer playing the Flash movie. The drawback is that you won’t be able to predict how the fonts will display on every computer. To combat this uncertainty, Flash includes three device fonts. Each is designed with characteristics of typical fonts usually found by default on most computers. You can also choose device fonts when using small font sizes because they are not anti-alias and display clearly.
Select a text field you want to set to device font.
Click the Family popup in the Property Inspector or click the Text menu, point to Font, and then select one of the following fonts:
• _sans. Matches up with a sans-serif font, such as Helvetica or Arial.
• _serif. Matches up with a serif font, such as Times or Garamond.
• _typewriter. Matches up with a typewritten-looking font, such as Courier.
When you create text fields in Flash, they default to static fields. A static field is for display only and is hard-coded in the .swf. One cannot be changed unless you return to the Flash development environment, edit it, and re-export the file. If you need your text to be updatable from an outside source, such as a text document on a server or if you need the user to input text for you to retrieve and process with ActionScript, you can set your text field to enable this functionality. Setting your text field to dynamic text turns it into an ActionScript object that can be given an instance name or turned into a variable that can be populated from some other source outside of the .swf. This is great when you need to update content on the fly and would rather not have to deal directly with Flash for each update. If you require the user to enter a string of text, such as in a form, you can set a text field to input text. This enables the user to enter information in the text field that can be retrieved and processed.
Select the text field on the Stage you want to be a dynamic field.
Click the Text Type popup in the Property Inspector, and then click Dynamic Text.
Select from the following properties:
• Instance Name. Gives the text field an instance name so it can be controlled with ActionScript.
• Letter Spacing. Changes character position on a line.
• Render Text As HTML. Preserves Rich Text Formatting, allowing you to include hyperlinks and HTML tags.
• Show Border. Displays a border around the text field in the exported movie.
• Variable Name. Gives the text field a variable name for use with ActionScript.
• Character Options. Allows you to choose which characters you want to embed in the text.
Select the text field on the Stage you want to be an input field.
Click the Text Type popup in the Property Inspector, and then click Input Text.
Select from the following properties:
• Instance Name. Gives the text field an instance name so it can be controlled with ActionScript
• Letter Spacing. Changes character position on a line.
• Line Type. Choose from Single Line and Multi-Line with or without Wrap, and Password (available only for Input text).
• Selectability. Allows or denies the user the ability to select the text in the exported movie.
• Show Border. Displays a border around the text field in the exported movie.
• Variable Name. Gives the text field a variable name for use with ActionScript.
• Maximum Characters. Limit the amount of characters a user can enter into the field.
• Character Options. Allows you to choose which characters you want to embed in the text.
The Character Options that are available to dynamic and input text allow you to specify which, if any, font outlines you want embedded in the Flash movie for use in these fields. This is a great way to keep file size down because you can include only those characters you need. You can also limit the types of characters a user can enter. For example, if you are asking a user to enter a zip code, you can disable all characters except numbers from being entered.
Select a dynamic or input text field on the Stage.
Click the Edit Character Options button in the Property Inspector.
Select which character’s outlines you want to embed in the exported movie.
Type specific characters into the Include These Characters box to include those outlines.
Click Auto Fill to include each unique character from the selected text box on the Stage.
Click OK.
Cascading Style Sheets (CSS) contain sets of formatting rules for HTML and XML text. CSS allow you to define certain text attributes and give them a style name. This style name, called a selector, can be applied to any implemented text. Each time you need to implement the defined style, you can refer back to the CSS. This allows for more control over the text displayed on your Web page. Load styles from an external CSS or create them within Flash using the Style Sheet Object. The ActionScript class for CSS is described as: TextField.StyleSheet. This is a new functionality and it is only available to SWFs in the Flash 7 Player or later.
In any text or HTML editor, place the following code:
// External CSS File: styles.css
headline {
font-family: Arial, Helvetica, sans-serif;
font-size: 12 px;
}
bodyText {
font-family: Arial, Helvetica, sans-serif;
font-size: 10 px;
}
This code is typically found in a CSS. This example defines two styles, one for a sans-serif headline at 12 pixels, the other a sans-serif body text at 10 pixels.
Select the first frame of your Flash movie. Place the following code in the Actions panel:
var css_styles = new TextField.StyleSheet();
css_styles.load("styles.css");
css_styles.onLoad = function(ok) {
if(ok) {
// display style names
trace(this.getStyleNames());
} else {
trace("Error loading CSS file.");
}
}
The CSS you created, “styles.css” is loaded into this object. A loader is created to ensure the CSS is loaded properly. Make sure the CSS and the swf are in the same directory.
Select the first frame of your Flash movie. The following code creates a text style for headline text and body text. Place the following code in the Actions panel:
var styles = new TextField.StyleSheet();
styles.setStyle("headline",
{fontFamily: 'Arial,Helvetica,sans-serif',
fontSize: '12px'}
);
styles.setStyle("bodyText",
{fontFamily: 'Arial,Helvetica,sans-serif',
fontSize: '10px'}
);
This CSS code can now be placed in the Actions panel in Flash. This example defines two styles, one for a sans-serif headline at 12 pixels, the other a sans-serif body text at 10 pixels.
Flash includes a global spell-checker that is fully configurable. Search the entire Flash document or isolate specific elements to search in the Spelling Setup dialog box. You can choose from a variety of built-in dictionaries as sources including a personal dictionary you can edit. Additionally, you can choose which text characteristics to ignore, such as words with numbers and internet addresses, as well as choose what type of alternative suggestions you want Flash to provide.
Click the Text menu, and then click Spelling Setup.
Select from the following options:
• Document Options. Specify which elements in the Flash document you want to spell check. You can also specify whether you want to live-edit the document during the Check Spelling process.
• Dictionaries. Select a built-in dictionary as a source. At least one dictionary must be selected to activate Check Spelling.
• Personal Dictionary. Specify an option to use a dictionary created and edited by you. Navigate to a text document on your hard drive or edit the default one included by clicking the Edit Personal Dictionary button. Each new entry in the personal dictionary must be on a separate line.
• Checking Options. Set word-level behaviors. You can have Internet addresses ignored, find duplicate words, or specify the types of suggestions you want displayed in the Check Spelling window.
Click OK.
Click the Text menu, and then click Check Spelling.
If Flash finds suspect words, the Check Spelling dialog box opens. Otherwise, Flash displays a message that the Spell Check is complete.
Word not found (*element*):
This identifies the suspect word and what type of element it was found in parenthesis.
Do one of the following:
• Add To Personal. Click to add the word to your personal dictionary.
• Ignore. Click the Ignore and Ignore All buttons to not flag this word again in this Check Spelling session.
• Change. Click Change or Change All. In the Change To and Suggestions fields, Flash displays the closest alternatives to the suspect word.
• Delete. Click to delete the word from the field that contains it.
Continue until Flash produces a message that Check Spelling is complete or click Close to stop the Check Spelling process before it is completed.
Use Find and Replace to locate specific elements in your Flash document. You can specify where to look, what to look for, and what to replace it with. Choose to search the entire Flash document or the currently active scene. Each element you search for has its own configurable settings and options. Included is a log that shows the exact locations of the found element.
Click the Edit menu, and then click Find And Replace.
Select where you want to search from the Search In popup menu.
Select which element from the For popup menu you want to search for in Flash:
• Text
• Font
• Color
• Symbol
• Sound
• Video
• Bitmap
Enter and/or select the parameters you want for your search.
To find the element with the characteristics you’ve entered, click Find Next or Find All.
To update the found element with the new characteristics, click Replace or Replace All.