| In Flash there are three types of text: Static text Input text Dynamic text You compose static text on the stage using the Text tool. However, since you can't change the font, font size, or content of any static text area once a SWF file has been created, you'll generally use static text for text that changes infrequently. 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, this is where users enter text. Input text fields are generally employed to gather textual information from the user which your movie then either 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 using a dynamic text field to display HTML-formatted text, you can set attributes like 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 object class.
The Property inspector is where you configure text fields. If you select the text tool from the Tools panel and then open the Property inspector from Windows > 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 the following 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. If selected, text is bolded. Italics. If selected, text is italicized. Alignment. You can change the alignment of the text to be left justified, right justified, or centered using the appropriate paragraph icon. Text Orientation. This allows you to choose whether text in a static text field appears horizontally or vertically. Format. Pressing this button brings up the Format Option dialog box where you can adjust indentation, 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. This can be modified here. URL Link. Enter a URL here to make the text field respond as regular hyperlinked text.  If you choose Input Text from the drop-down list, you have the following options: Single Line, Multiline, Multiline no wrap, Password. If you select Single Line, only one line of text can be entered into this text field. (The following 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. "Multiline no wrap" prevents text from wrapping. Thus, 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 machine remembers the correct content). Instance Name. If you assign instance names to input text and dynamic text fields, you can use ActionScript to control or access information from a text field. If you gave a text field an instance name of, say, box, you could access its text using the reference box.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. HTML. Although input text fields are normally 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 your user might not be able to see where the input field is located on the stage. Maximum Characters. This 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 press 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. If, on the other hand, you select the No Characters radio button (the default behavior), the font won't be embedded. If you select the All Characters radio button, all characters of the current font will be embedded into the movie usually adding 20K to 30Kto its file size. If you know you're only going to display numbers, uppercase letters, lowercase letters, or punctuation, there are individual radio buttons and checkboxes for embedding only those characters one way to keep your file size smaller. The text-entry area on the bottom of this Character Options dialog box lets you enter specific characters that you want embedded useful, for example, if you were creating a percent preloader for your movie (in which case you could select the "Numerals (0-9)" button and type loaded into the text-entry area).  All of the options for Input Text are also available for Dynamic Text, which also includes this additional option, In the following exercise you'll create all of 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 refresh. On this frame, you can see the News Flash site graphics. On the left side of the stage there are four buttons that correspond to news sections. On the top middle of the stage there's a movie clip instance that contains several weather icons; the name of this movie clip instance is icon. The top right of the screen contains two arrows, one that points up and one that points down. This is where the high and low weather temperatures will be displayed. On the bottom right, you'll see a movie clip that contains the letters M T W T F referring to the five business days in a week.  -
Select the News Box 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 be creating dynamic text fields in various areas of the stage. Once you've created a text field, you can edit the instance name from the Property inspector. -
Create a text field to the right of the weather icon by clicking on the stage. Embed the font by clicking the Character button on the Property inspector and then choosing the All Characters radio button. Adjust the width of this text field to approximately 150 pixels, and change the font of the text to _sans and the font size to 14. This text field will display info about the days' 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 (not Multilines) is displayed on the Property inspector. The Embed Fonts (All Characters) option should be set (by pressing the Character button on the Property inspector) when creating any of the text fields in this project. -
With the text field still selected, edit its instance name from the Property inspector to read weatherBlurb.  This text field is now complete. Whenever the value for weatherBlurb.text is set in the main timeline, the information displayed in this text field will be updated. -
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 stage. Change the current font to _typewriter and the font size to 20, and select the bold option. Using the Property inspector, choose the center option for the text. Give the text field the instance name headline. This text field will display the headline of an article with the Courier font. -
Click and drag to create another text field under the headline 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, and then select Word wrap. Assign the instance name article to this text field. This text field is where the actual article will be displayed. When the value for article.text is set in the main timeline, the information displayed in this text field will be 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 Property inspector so that Single Line is selected. Assign this text field the instance name author. Like the other text fields, the information displayed in this text field will be updated whenever the value for author.text is changed. -
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, bolded, with a font size of 14. Assign this text field the instance name date. This text field will display the date of the day that you select to view the news. -
Click and drag to create two text fields, one just to the left of the blue arrow and another just 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 to the left text field and high to the other one. These two text fields will display the low and high temperatures for the selected day. -
Save your work as newsFlash4.fla.  You have now 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. |
