TextArea Component

TextArea Component

Flash CS4 ActionScript 3.0 Tutorial


How to Add Pre-Built TextArea 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. The Component parameters are altered with the Component Inspector or ActionScript.

This example shows how to add a TextArea Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library. When the TextArea is added to your project, TextArea and UIScrollBar symbols are 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, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

TextArea 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 TextArea Component icon to a add a TextArea to the center of the stage. The TextArea and it's assets are also added to the Library.

Step Five

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

Step Six

Also change the TextArea size in the Properties panel to 200 pixels (wide) and 300 pixels (height).

Step Seven

With the TextArea still selected, open the Component Inspector (Window > Component Inspector).

Step Eight

Click the area next to the word word text in the Value column and add the following text. There are several ways to add text in Flash., then press Enter. The textArea contents updates.

Step Nine

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

Step Ten

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

Step Eleven

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.TextArea;

var text02_mc:TextArea=new TextArea();

text02_mc.text="There are several ways to add text in Flash";






Step Twelve

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two TextAreas appear on the stage. If the content extends beyond the text box, scroll bars are added.

Dissecting the Code

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

Line eight adds the text02_mc to the stage.

More Component Options

In this example we showed how to change the TextArea text. You can use this same method to change the other TextArea values shown in the Component Inspector (i.e., condenseWhite, editable, enabled, horizontalScrollPolicy, htmlText, maxChars, restrict, verticalScrollPolicy, visible and wordWrap).