Using Text Fields to Store and Display Data

Before we can discuss sending and receiving data with Flash movies, you need to know the basic mechanisms of input and output. You may find that, most of the time, your data in Flash will be text-based, which means that you will gather information from the user and display new and updated information with text. In ActionScript, Input text fields gather data from the user, while Dynamic text fields can be used to display live and updated text to the user.

Input Text Fields

Input text fields can be created with the Text tool. In the Property inspector, the top-left drop-down menu must be set to Input Text for the selected text field. In Flash 8, a text field can be a scriptable object with an instance name. However, an Input text field has a variable name (designated by Var in the Property inspector) to remain backward-compatible with Flash Player 5 or 4 movies. The text typed inside of an Input text field is the value of that variable (specified by the Var name), and it is the value of the text property of the text field's instance name. For example, if you create an Input text field and assign it the Var name sVisitorInput, anything that is typed into that text field during run time will become the value of sVisitorInput. If you assigned an instance name of tVisitor to the text field, you would access the contents of the text field with the text property. To test this, let's create a simple Input text field.

Tip 

If you are developing Flash Player 6 or higher movies (that is, Flash Player 6, 7, or 8 is the version listed in the Flash tab of the Publish Settings dialog box), we strongly recommend that you use the instance name of the text field to access the contents of the field.

1. Using the Text tool, create a text field on the Main Timeline of a Flash document. Make the box long enough to hold 20 characters. You can type a temporary word or phrase into the text field, but delete these characters before proceeding to the next step.

2. In the Property inspector, select Input Text in the top-left menu. In the <Instance Name> field, type tVisitor. In the Var field, enter the text sVisitorInput. Click the Show Border option as well. Refer to Figure 29-1 for these settings.

   Caution 

   Remember that Flash Player 7 and higher ActionScript is case-sensitive. Make sure you type tVisitor with a capital "V" so that the ActionScript code you add later in this section works properly.

3. Save your Flash document as input_text.fla and test the movie (Ctrl+Enter or z+Return). In the Test Movie window, click the text field and type your first name into the field.

4. Choose Debug ð List Variables, and the sVisitorInput variable will display the value you typed in Step 3. In addition, you will see the tVisitor text field object display along with several properties of the TextField object. In our example, we entered the name Charlie. Therefore, the Output panel displays (among other text):

    Variable _level0.sVisitorInput = "Charlie" Edit Text: Target="_level0.tVisitor"     variable = "sVisitorInput", 

   Note 

   The List Variables command always shows the $version variable and value, indicating the Flash Player version currently playing the movie.

5. If you change the text in the tVisitor text field, the value will automatically update for the tVisitor.text value or the sVisitorInput variable. You need to choose List Variables from the Debug menu to see the updated value.

   Input text fields not only accept input from the user, but they can also be set to an initial value or updated with a new value with ActionScript code. You can test this with the preceding Flash movie example.

6. If you are viewing the input_text.swf file from Step 5, close the Test Movie window to return to the Flash 8 authoring environment. Create a new layer, and rename it actions. Select the first frame of the actions layer and press F9 (or Option+F9 on Mac) to open the Actions panel. Add the following code to the Script pane:

    var tVisitor:TextField; tVisitor.text = "enter your name here"; 

   Tip 

   By typing your variables in ActionScript, you'll see code hints for that variable whenever you use the variable's name in subsequent lines of code.

7. Save your Flash document and test it. You should see the text "enter your name here" in the tVisitor text field.

Figure 29-1: The Property inspector controls the settings for text fields.

On the CD-ROM 

You can find the input_text.fla document in the ch29 folder of this book's CD-ROM.

As you can see, Input text fields can accept text input from the user, just like an HTML form. Later in this chapter, you use Input text fields to create a fully functional Flash form that can send and receive information with a server-side script.

While you should use the Var name attribute of text fields for Flash movies that require compatibility with Flash Player 5 or 4, we strongly recommend that you leave the Var name blank in the Property inspector for any Flash Player 6 or higher movies.

Dynamic Text Fields

If you want to display text information to people viewing Flash movies, you have two options: (A) create Static text blocks whose contents cannot be updated with ActionScript, or (B) create Dynamic text fields that can be filled with internal Flash data or external text data.

Caution 

Do not use Input or Dynamic text fields unless you need to accept or display live data to the user. Static text is perfectly fine for text used for graphical purposes, where the text does not need to be changed during the presentation.

Dynamic text fields are also objects with instance names, just as Input text fields. The only difference between Input and Dynamic text fields is that you can type into Input text fields. Dynamic text fields are most useful for displaying text information that will be changed by the movie (via ActionScript), rather than the user. Using Dynamic text fields, you can display news articles that change on a daily (or hourly) basis, a player's score during a Flash game, and the system time and date, just to name a few.

Tip 

Both Input and Dynamic text fields can use HTML text formatting tags to change the display of text. We discuss HTML use within text fields in Chapter 30, "Applying HTML and Text Field Formatting."

In the following steps, you create a Dynamic text field updated with an ActionScript variable action. You can also load external variables for use in Dynamic text fields, which we discuss in the next section. To insert text into a Dynamic text field:

1. Create a new Flash document (File ð New), and save the document as dynamic_text.fla.

2. Rename Layer 1 to tOutput.

3. Using the Text tool, create a text field on the Main Timeline of a Flash document. Make a field large enough to accommodate multiple lines of text, as shown in Figure 29-2. Choose a normal font size, such as 12.

4. In the Property inspector, select Dynamic Text in the top-left menu. Select Multiline from the Line type menu. In the <Instance Name> field, enter the text tOutput. Click the Selectable and Show Border options. Refer to Figure 29-2 for these settings.

5. Add a new layer and name it actions. Select the first keyframe of the actions layer and press F9 to open the Actions panel. Enter the second line of the following code on one single line in the Script pane. (You can enable word wrapping in the options menu if you wish.)

    var tOutput:TextField; tOutput.text = "WANTED: Flash Input & Output\r\rA start-up   dotcom company is looking for a qualified Web   technology that will present text input and output to   Web visitors in a more compelling animated and visually   stunning environment than that possible with HTML.   Please call:\r\r1-800-555-CODE"; 

   In this code, you specify string values (denoted with quotes) for the actual text you want to insert into the tOutput Dynamic text field instance. To insert a carriage return in the text, the \r character entity is inserted between string values.

6. Save the Flash document as dynamic_text.fla.

7. Test the movie (Ctrl+Enter or z+Enter). The tOutput Dynamic text field updates with the value assigned to the text property of the tOutput instance in ActionScript.

Figure 29-2: The Dynamic text field settings in the Property inspector

On the CD-ROM 

You can find the dynamic_text.fla document in the ch29 folder of this book's CD-ROM.

You can also load text data into Input and Dynamic text fields. This data can be returned from a simple text file (.txt file) or from an application that resides on your Web server. In the next section, you learn how to send and receive text from a Flash movie.