Customize the TextArea component

Styles and the TextArea component
Use skins with the TextArea component

You can transform a TextArea component horizontally and vertically while authoring and at run time. While authoring, select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands. At run time, use the setSize() method or any applicable properties, such as height , width , scaleX and scaleY of the TextArea class.

When a TextArea component is resized, the border is resized to the new bounding box. Scroll bars are placed on the bottom and right edges if they are required. The text area is then resized within the remaining area; there are no fixed-size elements in a TextArea component. If the width of the TextArea component is too narrow to display the size of the text, the text is clipped.

Styles and the TextArea component

The TextArea component’s styles specify values for its skins, padding, and text format when the component is drawn. The texFormat and disabledTextFormat styles govern the style of the text that the TextArea displays. For more information about skin style properties, see Use skins with the TextArea component .

The following example sets the disabledTextFormat style to change the appearance of text when the TextArea is disabled but the same process applies to setting the textFormat style for an enabled TextArea.

Create a new Flash file.
Drag a TextArea component to the Stage and give it an instance name of myTa .

Add the following code to the Actions panel on Frame 1 of the main Timeline.

var tf:TextFormat = new TextFormat(); 
tf.color = 0xCC99FF; 
tf.font = "Arial Narrow"; 
tf.size = 24; 
myTa.setStyle("disabledTextFormat", tf); 
myTa.text = "Hello World"; 
myTa.setSize(120, 50); 
myTa.move(200, 50); 
myTa.enabled = false;

Select Control > Test Movie.

Use skins with the TextArea component

The TextArea component uses the following skins, which you can edit to change its appearance.

TextArea skins

Note: Changing the ScrollBar skin in one component will change it for all other components that use the ScrollBar.

The following procedure changes the border colors of the Focus Rect Skin, which appears when the TextArea has focus, and the Normal skin.

Create a new Flash file.
Drag a TextArea component to the stage and double-click it to open its panel of skin icons.
Double-click the Focus Rect Skin.
Click the border of the Focus Rect Skin to select it. When it’s selected its current color appears in the Fill color picker in the Property inspector.
Click the Fill color picker in the Property inspector to open it and select color #CC0000 to apply it to the border.
Click the Back button at the left side of the edit bar above the Stage to return to document-editing mode.
Double-click the TextArea component to open its panel of skin icons.
Double-click the Normal skin.
Select each edge of the Normal skin’s border, one at a time, and set its color to #990099.
Click the Back button at the left side of the edit bar above the Stage to return to document-editing mode.
Select Control > Test Movie.

When you select the TextArea to begin entering text, its border should appear as shown in the following illustration:

The outer border is the Focus Rect skin and the inner border is the border of the Normal skin.

For information about editing the UIScrollBar skin see Customize the UIScrollBar component .