Text is an important part of most websites, particularly informational or commercial sites. Flash allows you to have a lot of control over the kind of text you can add to a document and of editing the property settings of the text. Text can be loaded from a server or placed directly on the Stage. Kerning, character spacing, justification, color, and anti-aliasing of text can all be controlled by setting properties in the workspace. Text is regularly used in Flash for creative, beautiful, and traditional purposes. In fact, Flash allows you to create many textual effects that are not possible when using HTML or CSS style sheets (Cascading Style Sheets).
)
In this lesson, you will add and format the properties of many text fields in Flash. You will learn how to add a Filter effect to a static text field. You will also spell check the entire document before you finish the lesson. This lesson gives you a foundation in the way text and fonts work and a good basis for using increasingly complex methods of working with text and components in upcoming lessons.
What You Will Learn
In this lesson, you will:
- Learn how to use the Text tool to add text fields
- Learn about static text and device fonts
- Learn to change text properties for legibility
- Align text fields on the Stage
- Learn about embedding fonts and charters in a SWF file
- Use a Filter with text
- Check spelling in a document
Approximate Time
This lesson takes approximately 45 minutes to complete.
Lesson Files
Media Files:
None
Starting Files:
lesson03/start/bookstore6.fla
Completed Files:
lesson03/complete/bookstore7.fla
Using the Text Tool
There are several different kinds of text that you can use in Flash 8. The three text field types available are static, dynamic, and input text, and they are each used for different purposes. Static text is similar to an image or graphic: It displays any kind of text on the Stage and does not change unless you manually edit the text field. Dynamic text can be used with ActionScript to change what displays in the field—for example, it might change based on some user action (such as a failed login) or if you load text into the field from a file on a server. Input text allows a user to type in text when the SWF file is running in Flash Player. You might use this rather often if you are building a form in which you need to gather a person’s name and address. ActionScript is used to capture input text that a visitor types into the form and then send it to a server.
There are many text properties that can be edited using the Property inspector. Flash allows you to have control over the font face (a set of characters in a given design), color, size, kerning (adjusting the space between characters for aesthetic purposes), character spacing and position, justification (alignment), and orientation of text fields. You can also control typefaces, meaning that you can set the characters to be regular, bold, and/or italic. What’s more, Flash 8 introduces tools that control font anti-aliasing for different situations, such as animation or plain old display, to make the text as legible as possible. Select the Text tool in the Tools panel and maximize the Property inspector. If you don’t see properties similar to the following figure, click the Stage once.
)
If you send a FLA file to someone to edit, that person needs the fonts you used to be installed on the computer to see the file. A missing font doesn’t stop a person from opening and editing the file because any missing font can be mapped to any font currently installed on the system. An alert appears when the file is opened or published, indicating any missing fonts, and allows an available font to be chosen as a replacement. The original correct font is used again if the file is passed on to someone who has it installed.
Understanding Static Text and Device Fonts
When you use static text in a FLA file, Flash creates outlines of each character and uses them to display the text. It doesn’t matter what font you select; the characters are visible, no matter who views the file. You can also be sure the fonts display the same way you see them on the Stage. A pitfall of this feature, and therefore of using static text, is that using it does increase the SWF file. Fortunately, there is a way around this: You can choose to use device fonts, which use the font installed in the end user’s computer, rather than using an outline created by Flash.
Device fonts can be used for horizontal static text fields and are the default for input and dynamic text fields. If the end user doesn’t have the font you selected installed on the computer, the SWF file uses the browser default: the sans font. There are also three default device fonts in Flash: _sans, _serif, and _typewriter. The _sans font is similar to Arial or Helvetica, _serif appears like Times New Roman, and _typewriter is similar to Courier.
Flash 8 Basic includes tools to assist with font legibility at any font size. One of the features in Flash that can make font choices problematic is anti-aliasing. Static text in Flash is anti-aliased by default, which can make smaller font sizes look blurry and difficult to read. In the past, the only way to defeat anti-aliasing was to either shut it off altogether, use a device font, or use a dynamic text field to display text. Now you can select several different rendering types in the Font Rendering Method drop-down list: Bitmap text, which is not anti-aliased; Anti-alias for animation; Anti-alias for readability; and Custom anti-alias, which controls the smoothing of the font. Custom anti-alias is available only in Flash 8 Professional.
)
Adding Static Text to a Document
The first step of learning how to effectively use text in a Flash document is to add some basic static text to the Stage. In this exercise, you will add static text to the FLA file. The character outlines are embedded in the file, so you can use any font on your computer system, and it is visible to the site’s visitors.
- Open bookstore6.fla from the TechBookstore folder, and save it as bookstore7.fla.
Alternatively, you can open bookstore6.fla from lesson02/start and save it as bookstore7.fla.
- Add a new layer for static text and rename it page names. Insert a layer folder and name it text.
Select the graphics layer folder and insert a new layer above it. Rename the layer to page names. With the new layer selected, click Insert Layer Folder at the bottom of the Layers pane, and name the new folder text. Drag the page names layer into the text folder.
- Extend the main document Timeline to 70 frames.
The various “pages” for the Tech Bookstore will be organized along the main document Timeline. Each of these pages will include a static text field, including the name of the page.
Click on Frame 70 of the labels layer (only that frame should be highlighted). Now hold down Shift and select Frame position 70 of the background layer. By pressing down Shift, you are highlighting Frame 70 across all the layers, so you can extend each layer to that point in time at once. Press F5 on your keyboard or select Insert > Timeline > Insert Frame to extend all your layers to 70 frames.
- Organize the layers to form the website’s pages.
First, you need to add some keyframes to the labels layer that will represent each of the different parts of the Tech Bookstore website. Select Frame 10 of the labels layer and press F6 to insert a keyframe. Continue to insert keyframes at Frames 20, 30, 40, 50, and 60. Each of these keyframes is labeled with the title of the section.
You already have a frame label in Frame 1 of the labels layer. To add the others, start by selecting Frame 10 on the labels layer, type catalog into the <Frame Label> text field in the Property inspector, and press Enter. Leave the Label type at Name. Repeat this process for the next five keyframes on the label layer, entering reviews, tour, news, feedback, and map.
- Select the Text tool and change the font properties in the Property inspector.
Select the Text tool from the Tools panel and maximize the Property inspector.
Select Static from the Text Type drop-down list. Then select Arial from the Font drop-down list and select 12 for font size. Click the Text (fill) color box and enter #666666 into the Hexadecimal field above the palette. Click the Bold button so the text appears boldface. Click the Align Right button on the Property inspector to right-justify the text field. All the other settings can remain at the default settings. In the Font Rendering Method drop-down list, select Anti-alias for readability. Your Property inspector should match the settings in the following figure.
- Add the page name text to each area of the bookstore site using static text.
Now you need to create the text field on the Stage. The page names are placed on the far right of the bar graphic that sits beneath the title area.
Select Frame 1 on the page names layer. Remember that the text is right-aligned in the text field. Therefore, click the Stage where you want the text to end. Type HOME into the text field and select the Selection tool from the Tools panel after you finish. Select the text field you just created and move it to where you want all the page names on other pages to appear.
The frames in the page names layer should extend right up to Frame 70 because you added the layer after you extended the Timeline. Select Frame 10, which is labeled catalog, and insert a keyframe by pressing F6. Continue by inserting keyframes at each labeled frame: 20, 30, 40, 50, and 60.
Now you need to add the actual page names to each page because every one of them says HOME! Go to Frame 10 and double-click the page name. The text returns to an editable state, so you can change the text from HOME to CATALOG. Make sure that you do not move this text field on the Stage or any text properties, so it remains consistent and aligned with all of the other text fields.
Repeat this step for all the other pages, giving them the same name (in all caps) as the frame labels you created in Step 4. All you need to do is double-click the text field and edit HOME to the name of the current label.
Lock the page names layer when you finish. The Timeline should look like the previous figure.
- Add the bookstore’s slogan using static text on top of the title area.
You need to add another text field above the page names. However, you need to create a new layer because the slogan stays the same throughout the website, whereas the page names change on every page.
Select the page names layer and then insert a new layer. Rename that layer propaganda. An empty keyframe and frames should extend right to Frame 70 already. Select the Text tool and maximize the Property inspector. All the current settings will be used for this text field, except you should click the Italic button and change the Text (fill) color to #999999.
In the propaganda layer, click on top of the title area of the layout and type SELLING QUALITY BOOKS about MACROMEDIA SOFTWARE. When you finish, select the Selection tool and move the text field to a desired location in the general lower-right area of the title area. If you want to align the slogan with the page names, use a vertical guide. Drag the guide from the vertical ruler and align it with the right side of the page name. Then select the slogan and snap the right side of the text field to the guide.
- Add aliased small text to the bottom of the Stage.
Small fonts can sometimes be very hard to read in Flash because Flash has to create outlines for the fonts, which can cause them to be blurry. Choosing Bitmap Text (no anti-alias) from the Font Rendering Method drop-down list can prevent the blur. Aliased text is not smoothed out.
The next step is to add some more text on the propaganda layer. At the bottom of the web page is copyright and contact information for visitors to use. You should use a very small text size because you probably don’t want to make it too distracting.
Select the Text tool and maximize the Property inspector. Then leave the text type as static, and select Arial as the font. However, change the font size to 10, change the Text (fill) color back to #666666, make sure that Bold and Italics are not selected, and select the Align Left button to left-justify the text.
Next, from the Font Rendering Method drop-down list, select Bitmap Text (no anti-aliasing) so the text you create renders clearly on the Stage. Using the Text tool, click in approximately the center of the bar on the bottom of the Stage and type Tech Bookstore © 2005.
Create a second text field within the bottom bar area. Because this text field has exactly the same properties, you don’t need to use the Property inspector before you create the field. Click the Stage and enter the following e-mail address: info@trainingfromthesource.com.
- Align the small text on the Stage using the Align panel.
When you finish creating both text fields, click the Selection tool and maximize the Align panel. Make sure the To Stage button is selected. Click the first text field you created and then click the Align Horizontal Center button, which centers the text in the middle of the Stage. Use the Up and Down arrow keys on your keyboard to fine-tune the text placement vertically approximately in the center of the lower bar graphic, but depending on where it looks best against the gradient.
Select the second text field that contains the e-mail address and click the Align Right Edge button in the Align panel. This procedure aligns the bounding box around the text field with the right edge of the Stage. If you think it is too close to the edge, select the text field and use the Left Arrow key to move it a few pixels to the left.
These two text fields are probably already lined up horizontally, but let’s make sure that they are aligned perfectly. Select both text fields by holding down Shift while clicking them with the Selection tool. In the Align panel, click the To Stage button again so it is not selected. Now click the Align Vertical Center button so both fields are vertically aligned. When you finish, the text should look similar to the previous figure.
- Add a link to the bookstore’s e-mail address using URL link in the Property inspector.
Sometimes you need a quick and sturdy way to add a URL type link to a line of text. One way is to create an invisible button, which serves as a hot spot, over the text, and then use a button action to specify the URL or e-mail to link to. Or, you can select the text block, and apply a URL link in the URL Link field.
Select the text field with the e-mail address and maximize the Property inspector. At the URL Link field at the bottom, enter mailto:info@trainingfromthesource.com?subject=TechBookstore into the text field. When you finish, the text field has a dotted underline to signify that there is a URL link applied to it.
If a visitor clicks the link, a new e-mail message will open in the user’s default e-mail client addressed to info@trainingfromthesource.com, with Tech Bookstore entered into the subject field. When you finish, lock the propaganda layer so you do not accidentally add something else to this layer.
- Save the changes you made to the bookstore7.fla file.
The changes you made in this exercise are saved to the file.
)
)
)
)
)
)
)
Using Embedded Fonts
In contrast to static text, dynamic and input text fields use device fonts by default, which you learned about near the beginning of this lesson. You might want to use the option of embedding your fonts if you want more control over the exact size and look of your dynamic or input text. Dynamic and input text both rely on system fonts, so whatever font you use for the text field must also reside on the computer that the SWF file is running on by default. The SWF file contains only the name of the font and then looks for a similar name on the end user’s computer. If a matching font isn’t found on the computer, the user cannot see the correct font in that field. The closest matching font is used instead. Embedding a font gets around that troublesome issue.
When you embed a font in a dynamic or input text field, the font outlines are stored in the SWF file when it is published and ensures proper rendering when the SWF file plays on a visitor’s computer. The main issue with embedding fonts is that it increases your file size, depending on how much information (how many characters, or glyphs) you choose to store in the SWF file.
In this exercise, you will create a dynamic text field and embed a font in it.
- Create a dynamic text field.
Select Frame 1 of the propaganda layer on the Timeline. Unlock the layer, select the Text tool, and maximize the Property inspector. Select Dynamic from the Text type drop-down list. Click anywhere on the Stage and type my cat eats chicken into the text field.
- Open the Character Options dialog box.
Select the dynamic text field you just created and click the Embed button in the Property inspector. The Character Embedding dialog box opens, in which you can specify a range of characters (or individual characters) to embed. Or if you clicked the Embed button by mistake, you can click the Don’t Embed button as well as a Cancel button to get out of the dialog box.
- Control-click on Windows to select the characters you want to embed. On OS X, Command-click to select them.
To help reduce the amount of information Flash stores for the font, you can specify for only a particular range of character outlines to be embedded in the SWF file. Select the first two options in the list by simply clicking both listings. Press the Ctrl or Command keys while making your selections.
- Click Cancel and delete the text field.
Obviously, visitors to the Tech Bookstore don’t need to know that your cat eats chicken. Click Cancel at the bottom of the Character Embedding dialog box to close it. Then delete the dynamic text field from the Stage and lock the propaganda layer again.
)
Looking at Font Properties
In Flash, and in other programs in which you can edit text, there is a wealth of options available for formatting text to change its appearance. So far, we have used only the most basic and common of them. In this exercise, you will use some new properties that you didn’t use in earlier exercises and learn how they are used and what they do in Flash. You should still be using bookstore7.fla for this example.
- Add Static text to the map page and set the properties for the text in the Property inspector.
The map page will contain some store information and a title, and load a map into a placeholder. Loading content into a SWF file is dealt with in Lesson 6, but the address and title are created here. Open the Property inspector so you can set properties for the store information that needs to be placed on the Stage.
Change the Text Type drop-down list to Static. Select Arial as the font and then set the font size to 12 and the color to black. Click the Align Center button to set the alignment (justification), which centers the characters you will enter in the text field. Also, choose to anti-alias the text for readability.
Kerning refers to the spacing between characters; however, it is not uniform like the Character Spacing setting. Kerning is built into the font and determines how two particular letters are spaced. For example, some letters might be spaced closer together based on the way they are shaped. The character W is usually placed closer to an A character than O is. Kerning helps the spacing look uniform based on the shape of each character by spacing two characters in varied amounts. Check the Auto Kern check box in the Property inspector to use the built-in kerning information for the font.
- Enter the store information and place it on the Stage.
Select the graphics folder, insert a new layer, and rename it map. Click Frame 60, also labeled map on the labels layer, and insert a keyframe (F6). Select the Text tool and click and drag on the Stage to produce a fixed-width text box. Enter the text in the following figure into the text field, using the Enter key to create new lines.
- Format parts of the address text in the Property inspector.
If you need to resize your text field, click and drag the drag handles around the text box. To edit the field, double-click on it with the Selection tool or click once on it with the Text tool. Highlight the first line. With the line highlighted and the Property inspector maximized, click the Bold button and then select a dark grey swatch from the color control palette for Text (fill). Repeat this step for all headings in the text field.
It is also a good idea to make the address selectable. For example, some of the website visitors might want to copy and paste this information into an e-mail, send it to a portable device, or save the text. Select the text field with the Selection tool, and then click the Selectable button in the Property inspector so visitors can highlight and copy all the text in the text box at runtime.
- Select the Bitmap Text option in the Property inspector.
An aliased image has a hard and definitive edge, and curves tend to appear jagged. Anti-aliasing creates the illusion that lines are smoothed or curved by using blending and shading to smooth the image or lines. Anti-aliasing reduces the jaggedness of aliased text or graphics. Although anti-aliasing is often a good choice for web graphics, it does not work well with very small text because blending and smoothing usually make small text appear fuzzy and unclear. When you select the Bitmap Text options from the Font Rendering Method drop-down list, anti-aliasing is shut off.
Select the text field you just created in Step 3. Expand the Property inspector and then switch to Bitmap Text in the Font Rendering menu. Notice the change in appearance for your text. Return the text field to Anti-alias for readability.
- Change the properties for the map title using the Property inspector.
Maximize the Property inspector to change the font properties again. You will use some large text this time.
You will still use a black Arial font, so don’t change those properties. However, change the font size to 26 by typing into the field or using the numerical slider next to it. Make sure that the Bold and Italic buttons are selected. You can leave Auto Kern checked, or deselect the check box. Because you are increasing the Character Spacing in the next step, it doesn’t particularly matter.
- Enter the text for the map title and position it on the Stage.
Create a static text field on the Stage, and enter the following text: How to find us.
You might need to edit the exact placement later on when you add the map to this page. For now, change the values of the x, y coordinates in the Property inspector to 70 (x) and 470 (y).
- Change the Character Spacing value to 2.
When you change the character spacing for a text field, a uniform amount of space is set between each character. You can enter a positive value to space the characters further from one another, or enter negative values so they are closer. Select the text field you just created and enter 2 into the Character Spacing field. Take note of the way the characters change in the text field and adjust the amount as desired.
- Save your work.
Timeline Effects are used to add certain effects to assets in Flash. Flash installs with several Timeline Effects made by Macromedia, but you can also find many more on the web for download to install into Flash, in places like Macromedia Exchange.
)
)
)
)
Adding a Timeline Effect to a Text Field
Timeline Effects are used to add certain effects to assets in Flash. Flash installs with several Timeline Effects made by Macromedia, but you can also find many more on the web for download to install into Flash, in places like Macromedia Exchange.
)
Timeline Effects are applied from Insert > Timeline Effects. To add a Timeline Effect to something, select it first; then select Insert > Timeline Effects > Effect and choose the particular effect you want, such as Drop Shadow. When you add an effect, you will see a preview window that will show you what the effect will look like when done, and provide you with options to modify how the effect is applied.
)
- Create a new layer and layer folder for the home page on Frame 1.
Move the playhead back to Frame 1 on the Timeline, labeled home. Select the map layer, insert a new layer, and give this layer the name home. With it selected, insert a new layer folder and name it pages. Drag the home layer (and the map layer you created in the earlier exercise as well) into this folder. The pages folder will eventually hold all the layers created for each page in the website.
Select the home layer again. Click just to the right of the final frame on the layer, and drag the cursor back to Frame 10 and release the mouse to select the row of frames. Right-click or Control-click and select Remove Frames from the contextual menu. Because the contents of the home page will display only in the first 10 frames of the Timeline, it isn’t necessary to have this layer extend all the way out to Frame 70.
- Create a static text field with the words Featured Book.
Open the Property inspector, so you can change some of the text properties. Leave the text as a static text type and Arial. Change the font color to #CCCCCC and the font size to 14. Make sure that the typeface is set to Bold and Italic, and that Anti-alias for readability is selected. You probably need to change Character Spacing back to 0 and make sure that Auto Kern is selected.
With the home layer selected, click the Stage to create a new static text field and type FEATURED BOOK into the field. Place the text field on the upper-right side of the Stage under the Home text, similar to the following figure.
- Add a Timeline Effect to the text field.
Select the text field you just created. Select Insert > Timeline Effects > Effects > Drop Shadow to add the drop shadow effect.
In the Drop Shadow dialog box, experiment with the settings until you find something you like. After you have entered values into any of the fields, press Update to see your text field update in the preview window. Press OK to exit the Drop Shadow dialog. This creates a graphic symbol in your library called Drop Shadow 1. You will learn more about symbols in the next lesson. For now, simply be aware of the addition.
- Lock the home layer and save your work.
)
)
Spell Check Your Document
The spell checker tool in Flash allows you to check your spelling in all text in a FLA file. Cleaning up the spelling in a FLA file before you publish it for the world to see is a great habit to adopt. The spell check feature in Flash allows you to have a lot of control over how the FLA file is checked. You can check the spelling of all text fields and even layer names or ActionScript. Now that you have added a lot of text to the FLA file, you should spell check the text you added.
- Use the Spelling Setup dialog box to select your settings.
If you haven’t used the spell check feature yet, select Text > Spelling Setup. You need to open this dialog box before you can use the spell check for the first time. Even if the Spelling Setup has already been run, open the dialog box and explore the settings available. Notice that you can control what text is spell checked in the FLA file under the Document heading. The options under Checking Options allow you to decide what kinds of words and changes are included or omitted in the spell check. In the Spelling Setup dialog box, check off the selections seen in the following figure before getting started.
Make any additional selections if desired. All the options are quite self-explanatory, and tooltips explain what each option does, as shown in the previous figure. Remember that you can change these settings at any time.
- Check the document’s spelling using the Check Spelling dialog box.
Select Text > Check Spelling to open the Check Spelling dialog box and start the spell checker. Currently, it is set to check the spelling of all text fields in the FLA file. If a word is correct but is not recognized by the spell check dictionary, you can click Ignore to ignore the word or you can add it to your personal dictionary by clicking the Add to Personal button.
An alert pops up when the spell check is complete. Click OK to exit the Check Spelling feature.
- Save your work as bookstore7.fla.
Save the new version in the TechBookstore folder on your hard drive. If you want to look at the completed file for this lesson, open bookstore7.fla, which can be found in the lesson03/complete folder on the CD-ROM.
)
Using Text-Based Components
One of the ways you will add text to the Tech Bookstore application in upcoming lessons is by using text components. Text components include the TextArea and TextInput components. TextArea is used when you need to display larger blocks of text that can be scrolled. TextInput is when you need to have users enter data into a text field that can be collected and used. In some ways, these two components are replacements for the dynamic and input text fields discussed earlier. A drawback of using TextArea and TextInput instead of dynamic or input text fields is a greater file size, and sometimes you have to write or use more ActionScript to get them to work the way you need them to. The advantage of using these components is the wealth of things you can do using them, and the scroll bars that are automatically attached to the field.
Understanding Dynamic Text Fields
Dynamic and input text fields are quite different from the static text fields you have worked with earlier. These different kinds of text fields can each handle changing text. This means you can load text into them and change the text based on some kind of event that happens while the SWF file is running.
Dynamic and input text fields can also understand HTML formatted text. This means you can use HTML tags within the text you enter or load into the field, and Flash will display the font type according to the tags within the text. For example, you could enter <b> tags to boldface text, and Flash will render text within the dynamic text field as bold. You can also place URLs, images, and paragraphs within a dynamic text field using HTML tags. You will explore these techniques in Lesson 9, except you will use a TextArea component, which works in almost the same way.
What You Have Learned
In this lesson, you have:
- Learned about the Text tool (pages 71–72)
- Learned more about static text and device fonts (pages 72–80)
- Tried embedding characters in a SWF file (pages 80–81)
- Changed text properties using the Property inspector (pages 82–85)
- Added a Filter to a static text field (pages 86–88)
- Learned how to check spelling in your document (pages 88–89)
- Learned more about text-based components and dynamic text fields (pages 89–90)