Developing Flash Lite 2.x and 3.0 Applications

Create a text field sample application

This simple application gets text input from the user, and then formats and displays that text in an HTML-enabled dynamic text field. The application also uses the SetFocusRectColor command to change the focus rectangle color from the default color (yellow) to black.

For a completed sample application (textfield_example.fla) that uses this technique, see www.adobe.com/go/learn_flt_samples_and_tutorials. Locate the ZIP file for your version of ActionScript, download and decompress the ZIP file, and then navigate to the Samples folder to access the sample.

  1. In Flash, create a new document from the Flash Lite 2.0 template that you created earlier in "Creating a Flash Lite document template (Flash Professional only)" in Getting Started with Flash Lite 2.x and 3.0, and save it as textfield.fla.
  2. Using the Text tool in the Tools panel, create a single-line text field across the top of the Stage.
  3. With the text field still selected, in the Property inspector, select Input Text from the Text Type pop-up menu, select Use Device Fonts from the Font Rendering Method pop-up menu, and type inputTxt in the Instance Name text box.
  4. Create another text field below the first that is several times taller than the first one, as shown below:

  5. With the second text field selected, in the Property inspector, select Dynamic Text from the Text Type pop-up menu, select Multiline from the Line Type pop-up menu, select the Render Text As HTML option, select Use Device Fonts from the Font Rendering Method pop-up menu, and type messageTxt in the Instance Name text box.
  6. In the Timeline, select Frame 1 on Layer 1.
  7. Open the Actions panel (Window > Actions) and enter the following code:
    Selection.setFocus(inputTxt);
    fscommand2("SetFocusRectColor", 0, 0, 0);
    inputTxt.onChanged = function() {
        messageTxt.htmlText = "You entered: <i>" + this.text + "</i>";
    }
    
    

    The Selection.setFocus() method sets the initial focus to the input text field (inputTxt). Next, the fscommand2() function call specifies a custom focus rectangle color. Last, the input text field's onChanged event handler, called whenever the contents of the input text field changes, formats and displays the text that the user entered in the messageTxt text field.

  8. Save your changes and start the application in the emulator (Control > Test Movie).
  9. To use the application, press the emulator's select key to open the text input dialog box and enter some text using your computer's keyboard. Then click OK to close the dialog box. The text that you entered appears in the messageTxt text field in italics.