Creating an application with the ScrollPane

The following procedure explains how to add a ScrollPane component to an application while authoring. In this example, the ScrollPane loads a picture from a path specified by the source property.

To create an application with the ScrollPane component:

Create a new Flash file (ActionScript 3.0) document.
Drag the ScrollPane component from the Components panel to the Stage and give it an instance name of aSp.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.events.ScrollEvent;

aSp.setSize(300, 200);

function scrollListener(event:ScrollEvent):void {
 trace("horizontalScPosition: " + aSp.horizontalScrollPosition + 
       ", verticalScrollPosition = " + aSp.verticalScrollPosition);
};
aSp.addEventListener(ScrollEvent.SCROLL, scrollListener);

function completeListener(event:Event):void {
 trace(event.target.source + " has completed loading.");
};
// Add listener.
aSp.addEventListener(Event.COMPLETE, completeListener);

aSp.source = "http://www.helpexamples.com/flash/images/image1.jpg";

Select Control > Test Movie to run the application.

The example creates a ScrollPane, sets its size, and loads an image to it using the source property. It also creates two listeners. The first one listens for a scroll event and displays the image's position as the user scrolls vertically or horizontally. The second one listens for a complete event and displays a message in the Output panel that says the image has completed loading.

This example creates a ScrollPane using ActionScript and places a MovieClip (a red box) in it that is 150 pixels wide by 300 pixels tall.

To create a ScrollPane instance using ActionScript:

Create a new Flash file (ActionScript 3.0) document.
Drag the ScrollPane component from the Components panel to the Library panel.
Drag the DataGrid component from the Components panel to the Library panel.

Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:

import fl.containers.ScrollPane;
import fl.controls.ScrollPolicy;
import fl.controls.DataGrid;
import fl.data.DataProvider;

var aSp:ScrollPane = new ScrollPane();
var aBox:MovieClip = new MovieClip();
drawBox(aBox, 0xFF0000);    //draw a red box

aSp.source = aBox;
aSp.setSize(150, 200);
aSp.move(100, 100);

addChild(aSp);

function drawBox(box:MovieClip,color:uint):void {
            box.graphics.beginFill(color, 1);
            box.graphics.drawRect(0, 0, 150, 300);
            box.graphics.endFill();        
}

Select Control > Test Movie to run the application.