Section 11.2. Input Text | Flash Fox and Bono Bear (Chimps) (Chimps Series)

11.2. Input Text

You're familiar with input text if you've ever bought anything online: Chances are you had to type your name , address, and credit card information into input text fields created in either HTML or Flash. The input text fields you create in Flash let you gather information from your audience and then process it, either inside Flash (using ActionScript) or by sending it to a server-side program for processing.

Note: The steps you need to take to exchange, or integrate , data with other programs is so program-and computer-dependent that they can't be covered here. Instead, this section shows you how to create input text elements and access the data your audience types in. For more on how to get that data to your server, check out Flash Help and the other resources discussed in the Appendix.

You create an input text field in Flash using the Text tool, similar to the way you create static and dynamic text. Then, by setting a few options in the Property Inspector, you can let your audience type their own text. You access that text using ActionScript. The following steps show how.

Note: The InputText and InputTextArea components that Flash offers are similar in some ways to the input text element, or field, you create using the Text tool, but the components are a bit more powerful and a bit more difficult to use. Check out Chapter 12 for details on these (and other) components .

Open the file input_text.fla .

You can find all the files you need for this exampleunfinished (input_text.fla) and finished (input_text_working.fla)on the "Missing CD" page.

If you don't see the Property Inspector, choose Window Properties Properties to display it.

DESIGN TIME
Controlling Dynamic and Input Text Appearance

Normally, when you add static text to your animation, the text looks to your audience the same way it looks to you, no matter what Flash Player or operating system they're running. (That's because Flash automatically embeds all the font information it needs for static text right in the .fla file.)

But there are two exceptions to this rule:

Static text with a device font . If you choose a device font such as _sans, _serif, or _typewriter in the Property Inspector (scroll all the way up to the top of the list to see them), Flash doesn't embed font information. Instead, it picks the closest font it can on the person's computer and uses that font to display the static text. You can find out more about static text on Section 5.3.
Dynamic and input text elements . When you load text from an external file or let your audience type text, Flash can only guess at how you want that dynamic (or input) text to appear, even if you specified in the Property Inspector how you want it to look . In other words, if your audience happens to have the font you selected in the Property Inspector installed on their computer, that's the font Flash uses to display your dynamic or input text. If your audience doesn't happen to have that font installed, however, Flash uses the closest device font it can find installed on that computer (which may or may not be close to what you intended).

This lack of display control may be fine with you. (Every Flash form doesn't have to be a masterpiece of detail, after all.) But if it's not OK with you, you can take a couple of extra steps to make sure Flash shows your audience dynamic and input text exactly the way you want it to.

To control the appearance of dynamic and input text, you need to add font outlines to your animation. Here's how:

On the Stage, select the dynamic or input text element whose display you want to control.
In the Property Inspector, click the Font rendering method and choose either the Bitmap (as-is) option or one of the Anti-Alias (smoothing) options.
Click the Embed button.
In the Character Embedding dialog box that appears, select the character sets you expect your audience to type (or that you expect Flash to pull in). If you're creating a numeric input field, for example, select Numerals. If you're creating an input field you know you'll be constraining to the letters S, M, L, and XL, click in the "Include these characters field", and then type SMLX to tell Flash to display only the uppercase letters S, M, L, and X.
When you finish, click OK.

Adding font outlines kicks up your animation file size , so if you don't much care how Flash displays input and dynamic text, you may want to skip this process. (You'll find more on the topic of optimization in Chapter 14.)

Using the Text tool, add a text element to the Stage as shown in Figure 11-5. Then, with the text element still selected, choose Input Text from the Text type drop-down box in the Property Inspector .

Flash redisplays the Property Inspector to include input textrelated properties (Figure 11-5).

Figure 11-5. These input textrelated properties let you tell Flash how you want to accept and deal with the text your audience types in. (If you like the button in this example, you'll want to check out Window Common Libraries Buttons. There youll find this and more realistic-looking button symbols, all courtesy of Flash.)
Click in the "Instance name" field and then type myInputTextInstance . In the Variable field, type stuffPeopleTypeIn .

You'll be referencing this variable name in the action you create next .

Note: As you're clicking around the Property Inspector, make sure you don't accidentally click the "Render as HTML" button (Figure 11-5). This button must be turned off for the input text element to work properly. If you turn it on, your audience won't be able to click in the text boxmuch less type anything.
Click the Selection tool and then, on the Stage, click the button (that big one in the middle) to select it. Then choose Window Actions .

In the Actions panel that appears, you see the title ActionsButton.
Click the Actions panel and type the following ActionScript code as shown in Figure 11-6 :
```
 on (release, keyPress "<Enter>" ) {     if (stuffPeopleTypeIn != undefined && stuffPeopleTypeIn != "") {         trace("You typed :" + stuffPeopleTypeIn + ":");     }     else {         trace("No text was typed in.");     } } 
```
Here's what the above ActionScript code tells Flash:

When someone clicks and releases this button (or presses the Enter key after typing in some text, which a lot of folks do instead of clicking the button), check to see what if anythinghe typed into the input text element. If you find text, log it in the Output panel. If you don't find any text, log the message "No text was typed in" instead .

Next, you'll test your input text field.

Figure 11-6. This ActionScript code shows you how to get to the text your audience types in. In most cases, you'll probably want to write your own custom action that scrubs the input data (makes sure someone didn't type numbers instead of a last name, for example) or an action that transfers the data to a server-side database or program for scrubbing and storage.
Select Control Test Movie .

In the Flash Player that appears, you see your button and input text field.
Click the button .

Flash displays the Output panel and logs the "No text was typed in" message, as shown in Figure 11-7 (top).
Type text into the input text field and either click the button again or press Enter .

This time, Flash logs your typed-in text in the Output panel (see Figure 11-7, bottom).

Figure 11-7. Top: Working as designed: Clicking the button without having typed in any text shows this result.
Bottom: Surrounding input values with colons, as shown here, is an old programmer's trick. As far as programming languages go, a space is a value; using colons reminds you of this nonintuitive fact.