You
can use the ScrollPane component to display 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 ScrollPane. The ScrollPane can accept movie
clips, JPEG, PNG, GIF, and SWF files.
Components such as the ScrollPane and the UILoader have complete events that
allow you to determine when content has finished loading. If you
want to set properties on the content of a ScrollPane or UILoader
component, listen for the complete event and set
the property in the event handler. For example, the following code
creates a listener for the Event.COMPLETE event
and an event handler that sets the alpha property
of the ScrollPane’s content to .5:
function spComplete(event:Event):void{
aSp.content.alpha = .5;
}
aSp.addEventListener(Event.COMPLETE, spComplete);
If you specify a location when loading content to the ScrollPane,
you must specify the location (X and Y coordinates) as 0, 0. For
example, the following code loads the ScrollPane properly because
the box is drawn at location 0, 0:
var box:MovieClip = new MovieClip();
box.graphics.beginFill(0xFF0000, 1);
box.graphics.drawRect(0, 0, 150, 300);
box.graphics.endFill();
aSp.source = box; //load ScrollPane
For more information, see the ScrollPane class in the ActionScript 3.0 Reference for Flash Professional.
User interaction with the ScrollPane componentA
ScrollPane can be enabled or disabled. A disabled ScrollPane doesn’t
receive mouse or keyboard input. A user can use the following keys
to control a ScrollPane when it has focus:
Key
|
Description
|
Down Arrow
|
Content moves up one vertical line scroll.
|
Up Arrow
|
Content moves down one vertical line scroll.
|
End
|
Content moves to the bottom of the ScrollPane.
|
Left Arrow
|
Content moves to the right one horizontal
line scroll.
|
Right Arrow
|
Content moves to the left one horizontal
line scroll.
|
Home
|
Content moves to the top of the ScrollPane.
|
End
|
Content moves to the bottom of the ScrollPane.
|
PageDown
|
Content moves up one vertical scroll page.
|
PageUp
|
Content moves down one vertical scroll page.
|
A user can use the mouse to interact with the ScrollPane both
on its content and on the vertical and horizontal scroll bars. The
user can drag content by using the mouse when the scrollDrag property
is set to true. The appearance of a hand pointer
on the content indicates that the user can drag the content. Unlike most
other controls, actions occur when the mouse button is pressed and continue
until it is released. If the content has valid tab stops, you must
set scrollDrag to false. Otherwise all mouse hits
on the contents will invoke scroll dragging.
ScrollPane component parametersYou can set the following parameters
for each ScrollPane instance in the Property inspector or in the
Component inspector: horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize, and verticalScrollPolicy.
Each of these parameters has a corresponding ActionScript property
of the same name. For information on the possible values for these
parameters, see the ScrollPane class in the ActionScript 3.0 Reference for Flash Professional.
You can write ActionScript to control these and additional options
for a ScrollPane component using its properties, methods, and events.
Create an application with the ScrollPane componentThe 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.
Create a new Flash (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.
Create a ScrollPane instance using ActionScriptThe 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.
Create a new Flash (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.
|
|
|