Tài liệu Creating Dynamic Text Fields and Retrieving Information ppt

< Day Day Up >

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 plays—which 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.
N
OTE
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 box—a 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.
1. 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.

2. 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.

3. 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.
4. 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.
5. 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.
6. 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.
7. 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.
8. 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.
9. 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.
10. 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.

< Day Day Up >