Inputting Values and Displaying Results

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.

For more information about Dynamic text and Input text, see topics, Dynamic Text, Input Text, Setting Text Color and Background Color and Setting Text Font and Size.

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.

Tutorial Elements

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

 

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 three empty text blocks to the stage. In the Properties panel, choose Dynamic text for one and Input text for the other two.

Step Five

Using Static text, place labels, Height, Width and Area next to your Dynamic and Input text boxes.

Step Six

Click the Dynamic text box and assign it an instance name of outText_txt in the Properties panel.

Step Seven

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

Step Eight

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

Step Nine

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.

Step Ten

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.

Step Eleven

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

Step Twelve

Copy/Paste the following code to the ActionScript panel.

var inputValueH:Number = 0;

var inputValueW:Number = 0;

var calcValue:Number = 0;

calc_btn.addEventListener(MouseEvent.CLICK, showTotal);

function showTotal(e:MouseEvent):void{

inputValueH = Number(inTextH_txt.text);

inputValueW = Number(inTextW_txt.text);

calcValue = inputValueH*inputValueW;

outText_txt.text = String(calcValue);

}

Step Thirteen

Click the Auto Format button to format the code

Step Fourteen

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.

 

Stock Photos from 123RF