Inputting Values and Displaying Results
Flash CS4 ActionScript 3.0 Tutorial
How to Input Text to be Used by ActionScript to Calculate and Display a Result
Input text is used to gather data from the user. The text is then analyzed by ActionScript and feedback is sent back to the user via a Dynamic text field.
In this example we will use both Input and Dynamic text fields to enter a height and width, then have ActionScript calculate the total area. The calculated area is then displayed in the Dynamic text field.
Input Text box with instance name of inTextH_txt
Input Text box with instance name of inTextW_txt
Dynamic Text box with instance name of outText_txt
Button Symbol with instance name of calc_btn
Open a new Flash document and add a new layer.
Name the upper layer Actions and the lower layer Content.
Click the keyframe for the Content layer.
Add three empty text blocks to the stage. In the Properties panel, choose Dynamic text for one and Input text for the other two.
Using Static text, place labels, Height, Width and Area next to your Dynamic and Input text boxes.
Click the Dynamic text box and assign it an instance name of outText_txt in the Properties panel.
Click the left Input text box and assign it an instance name of inTextH_txt in the Properties panel.
Click the right Input text box and assign it an instance name of inTextW_txt in the Properties panel.
Select the Input text boxes one at a time and activate Show border around text in the Properties panel. This lets the user know where to click the box to enter a value.
Add a button symbol to the Content layer and assign it an instance name of calc_btn in the Properties panel. For more information on creating buttons, see topic, Button Symbol Basics.
Option double-click (PC - Alt double-click) the keyframe of the Actions layer to open the ActionScript panel.
Copy/Paste the following code to the ActionScript panel.
var inputValueH:Number = 0;
var inputValueW:Number = 0;
var calcValue:Number = 0;
inputValueH = Number(inTextH_txt.text);
inputValueW = Number(inTextW_txt.text);
calcValue = inputValueH*inputValueW;
outText_txt.text = String(calcValue);
Click the Auto Format button to format the code
Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). Input values in the Height and Width boxes and press the Calculate button.
Dissecting the Code
The first line of the code establishes three number variables named inputValueH, inputValueW, and calcValue and sets the initial value to zero for all three variables. The next 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 showTotal is told to run.
The code inside the curly braces of the function determines what the function will do. Line one interprets the String value from the inTextH_txt as a Number and changes the inputValueH from zero to the new value. The second line interprets the String value from the inTextW_txt as a Number and changes the inputValueW from zero to the new value.
The following line multiplies inputValueH times inputValueW and assigns that value to calcValue. The variable calcValue is then interpreted as a String and assigned to the Dynamic text field named outText_txt.
Why the String to Number Conversion?
Dynamic and Input text fields contain strings of information. If you attempt to send a Number value instead of a String, you will see an Implicit Coercion error. In other words, it is looking for a String and you sent it a Number. Be aware that when you include code like String(inputValue), the inputValue variable is still a number. The value is simply interpreted by the outText_txt variable as a String so it can be understood.
Don't Forget the Design
When working on this type of project it is easy to focus on the code and forget about the design. Remember that with text you can set the fields to be left, center or right justified. You can also choose a different font or text color. Functionality and Design must both be considered when working on a Flash project.