UIScrollBar Component

UIScrollBar Component

Flash CS4 ActionScript 3.0 Tutorial


How to Add Pre-Built UIScrollBar 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 UIScrollBar 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..

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, TextInput Component, TileList Component and UILoader Component.

Tutorial Elements

UIScrollBar Component

Dynamic text field with instance name text01_txt


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

Click the first frame of the Content layer, then select the Text tool and add a Dynamic text field to the stage.

Step Four

With the Dynamic text field selected, open the Properties panel and set the font Size to 36 points. Behavior should be set to Multiline.

Step Five

With the Dynamic text field still selected and the Properties panel open, change it's x and y settings to 20 and 10.

Step Six

Also change the Dynamic text field size in the Properties panel to 200 pixels (wide) and 200 pixels (height).

Step Seven

With the Dynamic text field still selected and the Properties panel open, assign it an instance name of text01_txt.

Step Eight

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

Step Nine

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

Step Ten

With the UIScrollBar selected open the Properties panel and change it's height (h) setting to 200. Change the x and y settings to 220 and 10 respectively.

Step Eleven

Select the UIScrollBar and open the Component Inspector (Window > Component Inspector).

Step Twelve

Click the area next to scrollTargetName in the Value column and add the following text, text01_txt, then press Enter.

Step Thirteen

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

Step Fourteen

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.UIScrollBar;

var uiScroll02_mc:UIScrollBar=new UIScrollBar();

var text02_txt:TextField=new TextField();

var text02Format:TextFormat=new TextFormat();








text02_txt.text="This is the text in text box number two";








text01_txt.text="This is the text in text box number one"

Step Fifteen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two text blocks appear on the stage. Click-drag the scroll bars to see the entire text.

Dissecting the Code

The first line of the code at Step Fourteen imports the code necessary to talk to the UIScrollBar class. Line two establishes a new UIScrollBar variable named uiScroll02_mc. This is the second UIScrollBar that we are adding to the stage with ActionScript.

The next few lines add two more variables, text02_txt is a TextField and text02Format stores the font family and size for the text.

Lines five through nine set the UIScrollBar location and size, then add it to the stage.

Lines ten and eleven format the TextFormat variable, text02Format.

The next two lines define the text and specify that wordWrap be turned on.

Lines fourteen through nineteen set the second text box's location, size and apply the formatting. The TextField is then added to the stage.

The final line fills the first text field with text.

More Component Options

In this example we showed how to change the UIScrollBar scrollTargetName. You can use this same method to change the other UIScrollBar values shown in the Component Inspector (i.e., direction and visible).


Contribute Ad