Input Text

Input Text

Flash CS4 ActionScript 3.0 Tutorial

 

How to Input Text to be Used by ActionScript

 

 

Input text is used to gather data from the user. The text is then sent to ActionScript to use in the additional lines code.

For more information about other text objects, see topics, Dynamic Text, Inputting Values and Displaying Results, Setting Text Color and Text Background Color, and Setting Text Font and Size.

In this example we will use an Input text field for the user to enter his/her age, then ActionScript will display the age in the Output panel.

Tutorial Elements

Input Text box with instance name of inText_txt

Static Text box with text, How old are you?

Button Symbol with instance name of submit_btn

 

Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower layer Content.

Step Three

Click the keyframe for the Content layer.

Step Four

Add a block of Input text. Choose Input text In the Properties panel.

Step Five

With the Input text selected, activate Show border around text in the Properties panel.

Step Six

Using Static text, add the phrase, How old are you?

Step Seven

Click the Input text box and assign it an instance name of inText_txt in the Properties panel.

Step Eight

Add a button symbol to the Content layer and assign it an instance name of submit_btn in the Properties panel. For more information on creating buttons, see topic, Button Symbol Basics.

Step Nine

Option double-click (PC - Alt double-click) the keyframe of the Actions layer to open the ActionScript panel.

Step Ten

Copy/Paste the following code to the ActionScript panel.

submit_btn.addEventListener(MouseEvent.CLICK, showAge);

function showAge(e:MouseEvent):void{

trace("You are " + inText_txt.text);

}

Step Eleven

Click the Auto Format button to format the code

Step Twelve

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The input age value appears in the Output panel once you press the Submit button.

Dissecting the Code

The first line adds an Event Listener to the button. It needs to know if the button has been clicked. Once the user clicks the button, the function showAge is told to run.

The code inside the curly braces of the function determines what the function will do. The trace line tells the program to display the string "You are " plus the text field value in the Output panel.