TextInput Component

TextInput Component

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add Pre-Built TextInput Component to Your Flash File

 

 

Flash ships with several Components. Components are pre-packaged objects that allow you to quickly add elements, such as scroll bars, text boxes and buttons.

Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript.

This example shows how to add a TextInput Component using the drag and drop method and with ActionScript. To talk to a Component with ActionScript, it must first be added to the Library.

Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.

For more information on the other Components, see topics, Button Component, CheckBox Component, ColorPicker Component, ComboBox Component, DataGrid Component, Label Component, List Component, NumericStepper Component, ProgressBar Component, RadioButton Component, ScrollPane Component, Slider Component, TextArea Component, TileList Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

TextInput Component with instance name text01_mc

 

Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

Select the first frame of the Content layer and open the Components panel (Window > Components).

Step Four

Double-click the TextInput Component icon to a add a TextInput to the center of the stage. The TextInput and it's assets are also added to the Library.

Step Five

With the TextInput selected open the Properties panel and change it's x and y settings to 50 and 50.

Step Six

With the TextInput still selected, open the Properties panel and assign it an instance name of text01_mc.

Step Seven

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.

Step Eight

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.TextInput;

var text02_mc:TextInput=new TextInput();

text02_mc.x=250;

text02_mc.y=50;

addChild(text02_mc);

text01_mc.addEventListener(Event.CHANGE, onNewText01);

function onNewText01(e:Event):void{

trace(e.target.text);

}

text02_mc.addEventListener(Event.CHANGE, onNewText02);

function onNewText02(e:Event):void{

trace(e.target.text);

}

Step Nine

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two TextInput fields appear on the stage. As you enter text in the fields, it is displayed in the Output panel.

Dissecting the Code

The first line of the code at Step Eight imports the code necessary to talk to the TextInput class. Line two establishes a new TextInput variable named text02_mc. This is the second TextInput object that we are adding to the stage with ActionScript. It's location is set with the next few lines of code.

Line five adds the text02_mc to the stage.

The next few blocks of code add event listeners to the TextInput objects. Whenever text is entered, the onNewText functions are run and the value displays in the Output panel.

 

Contribute Ad