Creating an application with TextInput

The following procedure explains how to add a TextInput component to an application. The example uses two TextInput fields to receive and confirm a password. It uses an event listener to see that a minimum of eight characters have been entered and that the text for the two fields matches.

To create an application with the TextInput component:

Create a new Flash file (ActionScript 3.0) document.

Drag a Label component from the Components panel to the Stage and give it the following values in the Property inspector:

Enter the instance name pwdLabel.
Enter a value for W of 100.
Enter a value for X of 50.
Enter a value for Y of 150.
In the Parameters section, enter a value of Password: for the text parameter.

Drag a second Label component from the Components panel to the Stage and give it the following values:

Enter the instance name confirmLabel.
Enter a value for W of 100.
Enter a value for X of 50.
Enter a value for Y of 200.
In the Parameters section, enter a value of Confirm Password: for the text parameter.

Drag a TextInput component from the Components panel to the Stage and give it the following values:

Enter the instance name pwdTi.
Enter a value for W of 150.
Enter a value for X of 190.
Enter a value for Y of 150.
In the Parameters section, double-click the value for the displayAsPassword parameter and select true. This causes the value entered in the text field to be masked with asterisks.

Drag a second TextInput field from the Components panel to the Stage and give it the following values:

Enter the instance name confirmTi.
Enter a value for W of 150.
Enter a value for X of 190.
Enter a value for Y of 200.
In the Parameters section, double-click the value for the displayAsPassword parameter and select true. This causes the value entered in the text field to be masked with asterisks.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

function tiListener(evt_obj:Event){
  if(confirmTi.text != pwdTi.text || confirmTi.length < 8)
  {
       trace("Password is incorrect. Please reenter it.");
  } 
  else {
       trace("Your password is: " + confirmTi.text);
  }
}
confirmTi.addEventListener("enter", tiListener);

This code sets up an enter event handler on the TextInput instance called confirmTi. If the two passwords don't match or the user types fewer than eight characters, the example displays the message: "Password is incorrect. Please reenter it." If the passwords are eight characters or more and they match, the example displays the value entered in the Output panel.

Select Control > Test Movie.

The following example creates a TextInput component using ActionScript. The example also creates a Label that it uses to prompt a user to enter his or her name. The example sets the component's restrict property to allow only uppercase and lowercase letters, a period, and a space. It also creates a TextFormat object that it uses to format the text in both the Label and TextInput components.

To create a TextInput instance using ActionScript:

Create a new Flash file (ActionScript 3.0) document.

Drag a TextInput component from the Components panel to the Library panel.

Drag a Label component from the Components panel to the Library panel.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.controls.Label;
import fl.controls.TextInput;

var nameLabel:Label = new Label();
var nameTi:TextInput = new TextInput();
var tf:TextFormat = new TextFormat();

addChild(nameLabel);
addChild(nameTi);

nameTi.restrict = "A-Z .a-z";

tf.font = "Georgia";
tf.color = 0x0000CC;
tf.size = 16;

nameLabel.text = "Name: "
nameLabel.setSize(50, 25);
nameLabel.move(100,100);
nameLabel.setStyle("textFormat", tf);
nameTi.move(160, 100);
nameTi.setSize(200, 25);
nameTi.setStyle("textFormat", tf);

Select Control > Test Movie to run the application.

Flash CS3