Macromedia Flash Mx 1002004 Actionscript Training From The Source [Electronic resources] نسخه متنی

Creating Dynamic Text Fields and Retrieving Information

In Flash, there are three types of text objects: static, input, and dynamic.

You compose static text on the stage using the Text tool. However, because you can't change the font, font size, or content of any static text area once an SWF file is created, you use static text for text that you'll only need to change occasionally. Web site navigation buttons, for example, are good candidates for static text.

Input text defines a text area that can be edited by users at run time. In other words, it's where users enter text. Input text fields are generally employed to gather from the user textual information that your movie uses or sends to a server for processing. This type of text field is commonly found in Flash forms.

A dynamic text field is a text area on the stage that can be populated, or filled with text as a movie playswhich means the text can change as the movie plays. A dynamic text field can also be set to display simple HTML-formatted text. A news section of a Flash Web site is a good example of where dynamic text would be useful. When you use a dynamic text field to display HTML-formatted text, you set attributes such as color, font, and hyperlinks dynamically.

NOTE

All input and dynamic text fields placed in a project are instances of the Text Field object. As such, you can control and change them using properties and methods of that class.

You configure text fields using the Property Inspector. If you select the text tool from the Tools panel and open the Property Inspector from Window > Properties, you'll see that it includes a drop-down menu (at the top) where you can select one of the three text types (static, dynamic, or input). Depending on which text type you select, different text options are available.

If you select Static Text from the drop-down list in the Property Inspector, you can choose from these options:

Use Device Fonts.
If you select this option, Flash will use fonts installed on the user's computer rather than any special fonts you've included.

Selectable.
If you select this option, the mouse cursor will change to an I-bar so that on mouse-over the text can be highlighted and copied.

Bold.
Selected text is bolded.

Italic.
Selected text is italicized.

Alignment.
You can change the alignment of the text to be left-aligned, right-aligned, centered, or justified using the appropriate paragraph icon.

Text Orientation.
Choose whether text in a static text field appears horizontally or vertically.

Format.
Clicking this button brings up the Format Options dialog box, where you can adjust indenting, line spacing, and margins.

Character Display Attributes.
You can choose the font, point size, and kerning for the text using this option.

Position Attributes.
At the bottom-left of the Property Inspector is information about the screen position and the height and width of the text field.

URL Link.
Enter a URL here to make the text field respond as regular hyperlinked text.

Alias Text.
By default, this option is turned on. While on, the text in the selected text field is smoothed. When off, the text is not smoothed.

If you choose Input Text from the drop-down list, you have these options:

Single Line, Multiline, Multiline No Wrap, Password.
If you select Single Line, only one line of text can be entered in this text field. Additional options impose restrictions on the length of that line. If you select Multiline, multiple lines of text can be entered, and lines that exceed the width of the text field will automatically wrap to the next line. The Multiline No Wrap selection prevents text from wrapping. Text that extends beyond the boundaries of the text field is simply not shown. With Password selected, stars serve as visual replacements for anything you type (and the computer remembers the correct content).

Instance Name.
Assigning instance names to input text and dynamic text fields lets you use ActionScript to control or access information from a text field. If you gave a text field an instance name of box_txt, for example, you could access its text using the reference box_txt.text.

Var.
You can also give text fields variable names. When you assign a variable name directly to a text field, its contents always reflect the value of that variable. Likewise, if the text field is modified, the value of the variable changes to match the modified field.

NOTE

The ability to assign variables to text fields is a holdover feature from Flash 5. This functionality may be useful on rare occasions, but in most cases you should assign instance names to your text fields. This makes available a lot of scripting functionality not available to text fields when they have been assigned variable names.

HTML.
Although input text fields are usually employed to accept user input, you can also use them to display dynamically generated text. If you select this option, the text field will be able to interpret any HTML 1.0 code (tags for bold, underline, and so on) that's included in the dynamic text that populates the field.

Border/Bg.
If selected, this option will add a white background and black border to the text boxa useful way to automatically show where the text field is located on the screen. If you leave this option unselected, the user might not be able to see where the input field is located on the stage.

Maximum Characters.
This option allows you to limit the number of characters that can be entered into the text field. (If this option is set to 0, users can enter an unlimited number of characters.)

Character.
When you click this button, you're presented with the Character Options dialog box, which enables you to configure several display options pertaining to the currently selected text field. One of these options is to embed this text field's fonts into the SWF at the time it's published, allowing Flash to display very smooth edges on your text.

TIP

Embedding fonts in a text field increases the file size of the SWF from about 1KB to 40KB, depending on the font and the characters that you choose to embed.

All of the options for Input Text are also available for Dynamic Text, which also has this additional option:

Selectable.
This is the same as the Selectable option for Static Text.

In the next exercise you'll create all the needed text fields for the News Flash Web site. All of the text fields used here are dynamic text fields.

With newsFlash3.fla still open, move the playhead to the frame labeled Sit.

On this frame you see the News Flash site graphics. On the left side of the stage four buttons correspond to news sections. In the upper-middle portion of the stage there's a movie clip instance that contains several weather icons. The name of this movie clip instance is icon_mc. The top-right of the screen shows an arrow pointing up and an arrow pointing down. The high and low weather temperatures will be displayed here. On the bottom-right, you'll see a movie clip that shows the letters M T W T F referring to the five business days in a week; this clip has an instance name of days_mc.

Select the Weather layer. Select the Text tool from the toolbar and open the Property Inspector. Select Dynamic Text from the drop-down list.

In the next several steps you'll create dynamic text fields in various areas of the stage. Once you create a text field, you edit the instance name in the Property Inspector.

Create a text field to the right of the weather icon by clicking on the stage. Adjust the width of this text field to approximately 150 pixels. Change the font of the text to _sans and the font size to 14.

This text field will display info about the day's weather. The text that will be dynamically placed in this field should be white. To make sure this is the case, choose White from the Property Inspector while the text field is selected. All of the text fields created for this project will be either white or black. Make sure that Single Line (rather than Multiline) is displayed in the Property Inspector.

With the text field still selected, edit its instance name in the Property Inspector to read weatherBlurb_txt.

This text field is now complete. Whenever the value for weatherBlurb_txt.text is set in the main timeline, the information displayed in this text field is updated.

Click and drag to create two text fields on this layer, one to the left of the blue arrow and another to the right of the blue arrow in the Weather section of the site. Change the font size to 13. Assign the instance name low_txt to the left text field and high_txt to the one on the right.

These two text fields will display the low and high temperatures for the selected day.

Select the News Box layer. With the Text tool still selected, click and drag to create another text field the width of the light-blue area just above the black line on the stage. Change the current font to _typewriter and the font size to 20, and select the Bold option. Using the Properties Inspector, choose the Center option for the text. Give the text field the instance name headline_txt.

This text field displays the headline of an article with the Courier font.

Click and drag to create another text field under the headline_txt text field approximately the size of the unoccupied light-blue area. Change the current font to _sans, the font size to 12, and the current color to Black. Select Multiline from the drop-down list. Assign the instance name article_txt to this text field.

This text field is where the actual article will be displayed. When the value for article_txt.text is set in the main timeline, the information displayed in this text field is updated.

Click and drag to create another text field about 130 pixels wide just to the right of the word Author on the bottom of the light-blue area. Change the Properties Inspector so that Single Line is selected. Assign this text field the instance name author_txt.

Like the other text fields, the information displayed in this text field will be updated whenever the value for author_txt.text is changed.

Select the Ticker layer. Click and drag to create another text field in the bottom-left of the screen, positioned on the dark gray bar. Change the current font to _sans, White, Bold, with a font size of 14. Assign this text field the instance name date_txt.

This text field will display the date of the day you select to view the news.

Save your work as newsFlash4.fla.

You have created all of the visual areas on the stage that will contain dynamic data. However, you still need to retrieve the stored information and use it to populate the text fields.