Creating an application with the UIScrollBar component

The following procedure explains how to add a UIScrollBar component to an application while authoring.

To create an application with the UIScrollBar component:

  1. Select File > New and choose Flash File (ActionScript 2.0).
  2. Create a dynamic text field and give it an instance name myText in the Property inspector.
  3. In the Property inspector, set the Line Type of the text input field to Multiline or to Multiline No Wrap if you plan to use the scroll bar horizontally.
  4. In Frame 1, use ActionScript to add enough text to the field so that users have to scroll to view it all. You could write the following code:
    myText.text="When the moon is in the seventh house and Jupiter aligns with Mars, then peace will guide the planet and love will rule the stars."
    

    NOTE

    Make sure that the text field on the Stage is small enough that you need to scroll it to see all the text. If it isn't, the scroll bar does not appear or may appear simply as two lines with no thumb grip (the part you drag to scroll the content).

  5. Verify that object snapping is turned on (View > Snapping > Snap to Objects).
  6. Drag a UIScrollBar instance from the Components panel onto the text input field near the side you want to attach it to. The component must overlap with the text field when you release the mouse in order for it to be properly bound to the field.

    The _targetInstanceName property of the component is automatically populated with the text field instance name in the Property and Component inspectors. If it does not appear in the Parameters tab, you may not have overlapped the UIScrollBar instance enough.

  7. Select Control > Test Movie.

    The application runs, and the scroll bar scrolls the contents of the text field.

You can also create a UIScrollBar component instance and associate it with a text field at runtime with ActionScript.

The following code creates a vertically oriented UIScrollBar instance and attaches it to the right side of a text field instance named my_txt and sets the size of the scroll bar to match the size of the text field:

/**
 Requires:
  - UIScrollBar component in library
*/
// Create text field.
this.createTextField("my_txt", 10, 10, 20, 200, 100);
my_txt.wordWrap = true;

this.createClassObject(mx.controls.UIScrollBar, "my_sb", 20);

// Set the target text field for the scroll bar.
my_sb.setScrollTarget(my_txt);

// Size it to match the text field.
my_sb.setSize(16, my_txt._height); 

// Move it next to the text field.
my_sb.move(my_txt._x + my_txt._width, my_txt._y);

// Load text to display and define onData handler.
var my_lv:LoadVars = new LoadVars();
my_lv.onData = function(src:String) {
    if (src != undefined) {
        my_txt.text = src;
    } else {
        my_txt.text = "Error loading text.";
    }
};
my_lv.load("http://www.helpexamples.com/flash/lorem.txt");