使用 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 Platform 的 ActionScript 3.0 參考中的 ScrollPane 類別。

與 ScrollPane 組件的使用者互動

您可以啟用或停用 ScrollPane。停用的 ScrollPane 不接受滑鼠或鍵盤輸入。當 ScrollPane 成為焦點時，使用者便可以用下列按鍵加以控制：

按鍵	說明
向下鍵	將內容向上垂直捲動一行。
向上鍵	將內容向下垂直捲動一行。
End	將內容移到 ScrollPane 底部。
向左鍵	將內容向右水平捲動一行。
向右鍵	將內容向左水平捲動一行。
首頁	將內容移到 ScrollPane 頂端。
End	將內容移到 ScrollPane 底部。
PageDown	將內容向上垂直捲動一頁。
PageUp	將內容向下垂直捲動一頁。

使用者可以利用滑鼠與 ScrollPane 的內容及垂直和水平捲軸進行互動。當 scrollDrag 屬性設定為 true 時，使用者便可以使用滑鼠拖曳內容。在內容上方出現手掌游標表示使用者可以拖曳該內容。和大部分其它控制項的不同之處在於，動作會在按下滑鼠按鈕時發生並一直持續，直到放開按鈕為止。如果內容包含有效的定位停駐點，您必須將 scrollDrag 設定為 false。否則，所有滑鼠點按內容的動作都會叫用捲軸拖曳作業。

ScrollPane 組件參數

您可以在「屬性」檢測器或「組件檢測器」中，為每個 ScrollPane 實體設定下列參數： horizontalLineScrollSize 、 horizontalPageScrollSize 、 horizontalScrollPolicy、scrollDrag、source、verticalLineScrollSize、verticalPageScrollSize 和 verticalScrollPolicy 。這些參數都具有相對應的 ActionScript 同名屬性。如需有關這些參數可能值的詳細資訊，請參閱適用於 Adobe Flash Platform 的 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 像素高的 MovieClip (紅色方塊)。

建立新的 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();         
}

選取「控制 > 測試影片」，執行應用程式。