PreviousNext

Using the ScrollPane component

You can use a scroll pane to display any content that is too large for the area into which it is loaded. For example, if you have a large image and only a small space for it in an application, you could load it into a scroll pane.

You can set up a scroll pane to allow users to drag the content within the pane by setting the scrollDrag parameter to true; a pointing hand appears on the content. Unlike most other components, events are broadcast when the mouse button is pressed and continue broadcasting until the button is released. If the contents of a scroll pane have valid tab stops, you must set scrollDrag to false otherwise each mouse interaction with the contents will invoke scroll dragging.

ScrollPane parameters

The following are authoring parameters that you can set for each ScrollPane component instance in the Property inspector or in the Component Inspector panel:

contentPath indicates the content to load into the scroll pane. This value can be a relative path to a local SWF or JPEG file, or a relative or absolute path to a file on the internet. It can also be the linkage identifier of a movie clip symbol in the library that is set to Export for ActionScript.

hLineScrollSize indicates the number of units a horizontal scroll bar moves each time an arrow button is pressed. The default value is 5.

hPageScrollSize indicates the number of units a horizontal scroll bar moves each time the track is pressed. The default value is 20.

hScrollPolicy displays the horizontal scroll bars. The value can be "on", "off", or "auto". The default value is "auto".

scrollDrag is a Boolean value that allows a user to scroll the content within the scroll pane (true) or not (false). The default value is false.

vLineScrollSize indicates the number of units a vertical scroll bar moves each time an arrow button is pressed. The default value is 5.

vPageScrollSize indicates the number of units a vertical scroll bar moves each time the track is pressed. The default value is 20.

vScrollPolicy displays the vertical scroll bars. The value can be "on", "off", or "auto". The default value is "auto".

You can write ActionScript to control these and additional options for ScrollPane components using its properties, methods, and events. For more information, see ScrollPane class.

Creating an application with the ScrollPane component

The following procedure explains how to add a ScrollPane component to an application while authoring. In this example, the scroll pane loads a SWF file that contains a logo.

To create an application with the ScrollPane component, do the following:

  1. Drag a ScrollPane component from the Components panel to the Stage.
  2. In the Property inspector, enter the instance name myScrollPane.
  3. In the Property inspector, enter logo.swf for the contentPath parameter.
  4. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code: 
    scrollListener = new Object();
scrollListener.scroll = function (evt){
  txtPosition.text = myScrollPane.vPosition;
}
myScrollPane.addEventListener("scroll", scrollListener);

completeListener = new Object;
completeListener.complete = function() {
  trace("logo.swf has completed loading."); 
}
myScrollPane.addEventListener("complete", completeListener);

    The first block of code is a scroll event handler on the myScrollPane instance that displays the value of the vPosition property in a TextField instance called txtPosition, that has already been placed on Stage. The second block of code creates an event handler for the complete event that sends a message to the Output panel.

PreviousNext