Recipe 13.1. Adding a Form Control for Gathering Text Information

Problem

You want to add a form control to your Flash application for the purposes of gathering text-based information from the user (e.g., email address).

Solution

Use a TextInput or TextArea component, or use an input text field.

Discussion

You have several options available when you want to add a form control that allows the user to input text. There are two standard UI components that you can use: TextInput and TextArea. Additionally, if you prefer, you can opt for a standard dynamic text field. Which of these three options you prefer depends mainly on the context in which it will be used.

If you want to prompt the user for a single line of text (such as a zip code, an email address, or a one-or two-word response to a question), your choice is between the text input component and a single-line input text field. The text input component provides the following potential benefits:

• The component is designed to look much more like an HTML text input control, appearing to be slightly sunken into the screen.

• The component styles can be adjusted globally along with all the other components. Therefore, you can change the appearances of all the components in one location rather than having to change each instance's settings. (See Chapter 15 for more details on component styles.)

On the other hand, an input text field has the following potential benefits:

• A standard dynamic text field is much smaller in file size than the component equivalent.

• A text field doesn't have the standard artwork of the component, thus allowing you to quickly and easily add customized artwork behind the text field.

When you want to allow the user to input multiple lines of text, you have the choice between the text area component and a multiline input text field. The text area component provides the same potential benefits that the text input component does. In addition, consider that a text area component can automatically scroll when the user adds more text than can be displayed at one time.

After you've decided which type of text input form control you are going to use, the next step is to add that form control to your Flash application, give it an instance name (exp 3pod.com), and set the parameters for that form control.

You can add a text input or text area component by dragging an instance from the Components panel onto the stage just as if you were adding an instance of a movie clip symbol. If you don't already see the Components panel, you can open it by choosing Window Components or by pressing Ctrl-F7 or Command-F7. You can add an input text field instance by choosing the Text tool, making sure the text type is set to Input Text, and drawing the text field on the stage. (For more information regarding dynamic text fields, see Chapter 11.)

Regardless of which type of text form control you add, you should give it an instance name (exp 3pod.com). And you can accomplish that in the same way for each type. With the instance selected on the stage, enter a name (exp 3pod.com) in the instance name (exp 3pod.com) field within the Property inspector. The instance name (exp 3pod.com) is important for being able to retrieve the information from the form control later on. Without it, you won't have a way to reference the control.

Typically, the default settings for a TextInput or TextArea component should be fine as they are for standard text form control purposes. With a text field, you may want to change some of the settings depending on how you are using it. If you are using the text field to allow the user to input multiple lines of text, make sure to choose multiline as the line type. And if you want the text field to display a border, select the option for showing the border around the text. (You can read more about setting text field properties in Chapter 11.)

You can change the dimensions of a TextInput or TextArea component instance either by assigning new values for the width and height via the Property inspector or by using the tools to scale and transform the instances. Be aware, however, that TextInput components are designed to allow for only a single line of text to be input. So even if you change the height of the control, the user will still be able to input only a single line of text.

If you want to change the dimensions of an input text field, you should be sure to do so by choosing the Text tool, selecting the text field instance, and dragging the resize square in the lower-right corner of the instance. If you try to resize the instance using the Property inspector or the scale or transform tools, you will scale the text rather than changing the dimensions of the bounding box.