Text

Text

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add Text that can be Controlled with Flash ActionScript

 

 

Flash text comes in three varieties; Static, Input and Dynamic. Input and Dynamic text can be utilized by ActionScript. Input text is used to gather data from the user. The text is 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, Inputting Values and Displaying Results, Setting Text Color and Text Background Color, and Setting Text Font and Size.

In this example we will use both Input and Dynamic text fields. We will enter a value in the Input box, then display the square of that value in the Dynamic text field.

Tutorial Elements

Input Text box with instance name of inText_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 two text blocks to the stage. In the Properties panel, choose Input text for one and Dynamic text for the other.

Step Five

Using Static text, place labels 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 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 calc_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.

var inputValue:Number = 0

calc_btn.addEventListener(MouseEvent.CLICK, showTotal);

function showTotal(e:MouseEvent):void{

inputValue = Number(inText_txt.text);

inputValue = inputValue*inputValue;

outText_txt.text = String(inputValue);

}

Step Eleven

Click the Auto Format button to format the code

Step Twelve

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). Input a value in the Input text box (A=) and press the Calculate button.

Dissecting the Code

The first line of the code establishes a number variable named inputValue and sets its initial value to 0. The second 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 determines what the function will do. Line one interprets the String value from the inText_txt as a Number and changes the inputValue from zero to the new value.

The second line squares the inputValue. In the third line the inputValue is now 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.

 

Lynda.com career skills