使用 ScrollPane 组件

与 ScrollPane 组件的用户交互
ScrollPane 组件参数
创建具有 ScrollPane 组件的应用程序
- 使用 ActionScript 创建 ScrollPane 实例

您可以使用 ScrollPane 组件显示相对于加载区域过大的内容。例如，如果您有一幅大图像，而在应用程序中只有很小的空间来显示它，则可以将它加载到 ScrollPane 中。ScrollPane 可以接受影片剪辑、JPEG、PNG、GIF 和 SWF 文件。

像 ScrollPane 和 UILoader 这样的组件具有 complete 事件，使用此事件可以确定内容何时完成加载。如果要对 ScrollPane 或 UILoader 组件的内容设置属性，可侦听 complete 事件，并在事件处理函数中设置属性。例如，下面的代码创建一个 Event.COMPLETE 事件的侦听器和一个将 ScrollPane 内容的 alpha 属性设置为 .5 的事件处理函数：

function spComplete(event:Event):void{ 
aSp.content.alpha = .5; 
} 
aSp.addEventListener(Event.COMPLETE, spComplete);

如果在将内容加载到 ScrollPane 时指定一个位置，则必须将该位置（X 和 Y 坐标）指定为 0,0。例如，以下代码可以正确加载 ScrollPane，原因是框在位置 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

有关详细信息，请参阅《用于 Adobe® Flash® Professional CS5 的 ActionScript® 3.0 参考》中的 ScrollPane 类。

与 ScrollPane 组件的用户交互

可以启用或禁用 ScrollPane。禁用的 ScrollPane 不接收鼠标或键盘输入。当 ScrollPane 具有焦点时，用户可以使用以下按键来控制它：

键	说明
向下箭头	内容向上移动一垂直滚动行。
向上箭头	内容向下移动一垂直滚动行。
End	将内容移到 ScrollPane 的底部。
向左箭头	将内容向右移动一水平滚动行。
向右箭头	将内容向左移动一水平滚动行。
Home	将内容移到 ScrollPane 的顶部。
End	将内容移到 ScrollPane 的底部。
PageDown	将内容向上移动一垂直滚动页。
PageUp	将内容向下移动一垂直滚动页。

用户可以使用鼠标在 ScrollPane 的内容以及垂直和水平滚动条上与 ScrollPane 进行交互。如果 scrollDrag 属性设置为 true，则用户可以使用鼠标拖动内容。如果内容上出现手形指针，则表明用户可以拖动此内容。与其它大多数控件不同，此时动作发生于按下鼠标按键时，并将持续到松开鼠标按键时。如果内容中包含有效的 Tab 停靠位，则必须将 scrollDrag 设置为 false。否则每次在内容上单击鼠标时都会调用滚动拖动。

ScrollPane 组件参数

您可以在“属性”检查器或“组件”检查器中为每个 ScrollPane 实例设置下列参数：horizontalLineScrollSize、horizontalPageScrollSize、horizontalScrollPolicy、scrollDrag、source、verticalLineScrollSize、verticalPageScrollSize 和 verticalScrollPolicy。其中每个参数都有对应的同名 ActionScript 属性。有关这些参数的可能值的信息，请参阅《用于 Adobe® Flash® Professional CS5 的 ActionScript® 3.0 参考》中的 ScrollPane 类。

您可以编写 ActionScript，通过利用 ScrollPane 组件的属性、方法和事件来控制该组件的这些选项以及其它选项。

创建具有 ScrollPane 组件的应用程序

以下过程解释了如何在创作时将 ScrollPane 组件添加到应用程序。在此示例中，ScrollPane 从 source 属性指定的路径加载一张图片。

创建一个新的 Flash (ActionScript 3.0) 文档。
将 ScrollPane 组件从“组件”面板拖到舞台上，并为其指定实例名称 aSp。

打开“动作”面板，在主时间轴中选择第 1 帧，然后输入以下 ActionScript 代码：

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";

选择“控制”>“测试影片”以运行此应用程序。

使用 ActionScript 创建 ScrollPane 实例

示例创建一个 ScrollPane、设置其大小并使用 source 属性向其中加载一个图像。它还创建两个侦听器。第一个侦听器在用户垂直或水平滚动时侦听 scroll 事件，并显示此图像的位置。第二个侦听器侦听 complete 事件，并在“输出”面板中显示说明图像已加载完成的消息。

下面的示例使用 ActionScript 创建一个 ScrollPane，并在其中放置一个宽 150 像素、高 300 像素的影片剪辑（红色的框）。

创建一个新的 Flash (ActionScript 3.0) 文档。
将 ScrollPane 组件从“组件”面板拖到“库”面板中。
将 DataGrid 组件从“组件”面板拖到“库”面板中。

打开“动作”面板，在主时间轴中选择第 1 帧，然后输入以下 ActionScript 代码：

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();         
}

选择“控制”>“测试影片”以运行此应用程序。