Flash CS3 Documentation

Using ActionScript 3.0 Components > Using the UI Components > Using the UIScrollBar > Creating an application with the UIScrollBar

Creating an application with the UIScrollBar

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

To create an application with the UIScrollBar component:

1. Create a new Flash file (ActionScript 3.0) document.
2. Create a dynamic text field that is tall enough to hold one or two lines of text 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. Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code to fill the text property so that a user will need to scroll it to view it all:

   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. Give it an instance name of mySb.

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

7. Select Control > Test Movie.

You can also create a UIScrollBar instance with ActionScript and associate it with a text field at run time. The following example creates a horizontally oriented UIScrollBar instance and attaches it to the bottom of a text field instance named myTxt, which is loaded with text from a URL. The example also sets the size of the scroll bar to match the size of the text field:

To create a UIScrollBar component instance using ActionScript:

1. Create a new Flash file (ActionScript 3.0) document.
2. Drag the ScrollBar component to the Library panel.
3. Open the Actions panel, select Frame 1 of the main Timeline, and enter the following ActionScript code:

   import flash.net.URLLoader;
   import fl.controls.UIScrollBar;
   import flash.events.Event;
   
   var myTxt:TextField = new TextField();
   myTxt.border = true;
   myTxt.width = 200;
   myTxt.height = 16;
   myTxt.x = 200;
   myTxt.y = 150;
   
   var mySb:UIScrollBar = new UIScrollBar();
   mySb.direction = "horizontal";
   // Size it to match the text field.
   mySb.setSize(myTxt.width, myTxt.height); 
   
   // Move it immediately below the text field.
   mySb.move(myTxt.x, myTxt.height + myTxt.y);
   
   // put them on the Stage
   addChild(myTxt);
   addChild(mySb);
   // load text
   var loader:URLLoader = new URLLoader();
   var request:URLRequest = new URLRequest("http://www.helpexamples.com/flash/lorem.txt");
   loader.load(request);
   loader.addEventListener(Event.COMPLETE, loadcomplete);
   
   function loadcomplete(event:Event) {
       // move loaded text to text field
       myTxt.text = loader.data;
       // Set myTxt as target for scroll bar.
       mySb.scrollTarget = myTxt;
   }
   

4. Select Control > Test Movie.

Flash CS3