使用 Slider 組件

與 Slider 組件的使用者互動
Slider 組件參數
建立具有 Slider 的應用程式
使用 ActionScript 建立具有 Slider 組件的應用程式

此 Slider 組件可以讓使用者在滑動軌道（對應到值範圍）的兩端點之間滑動圖像「縮圖」，藉以選取某個值。例如，您可以使用滑動軸讓使用者選擇如數字或百分比這類的值。您也可以使用 ActionScript 讓滑動軸的值影響另一個物件的行為。例如，您可以讓滑動軸與圖片產生關聯，並根據滑動軸縮圖的相對位置 (或值) 縮放該圖片。

Slider 的目前值是由介於滑動軌道兩端點之間的縮圖相對位置，或者是 Slider 的最大值與最小值來決定。

Slider 允許在其最大值與最小值之間的連續範圍值，但是您也可以設定 snapInterval 參數，以指定最大值與最小值之間的間隔。Slider 可以沿著軌道於指定的間隔顯示刻度標記，這些標記都與滑動軸的指定值無關。

根據預設，滑動軸具有水平方向，但是您可以將 direction 參數的值設定為 vertical，為其指定垂直方向。滑動軸軌道會從一端延展至另一端，而且這些刻度標記會從左至右放置於軌道上方。

與 Slider 組件的使用者互動

當 Slider 實體成為焦點時，您可以使用下列按鍵加以控制：

按鍵	說明
向右鍵	增加水平滑動軸的相關聯值。
向上鍵	增加垂直滑動軸的相關聯值。
向左鍵	減少水平滑動軸的相關聯值。
向下鍵	減少垂直滑動軸的相關聯值。
Shift+Tab	將焦點移到上一個物件。
Tab 鍵	將焦點移到下一個物件。

如需有關控制焦點的詳細資訊，請參閱 Flash Professional 的 ActionScript 3.0 參考中的「IFocusManager 介面」和「FocusManager 類別」，以及使用 FocusManager 。

進行編寫時，每個 Slider 實體的即時預覽會反映您在「屬性」檢測器或「組件檢測器」中對參數的變更。

Slider 組件參數

您可以在「屬性」檢測器或「組件檢測器」中，為每個 Slider 組件實體設定下列編寫參數： direction 、 liveDragging 、 maximum 、 minimum 、 snapInterval 、 tickInterval 和 value 。這些參數都具有相對應的 ActionScript 同名屬性。如需有關這些參數可能值的詳細資訊，請參閱適用於 Adobe Flash Platform 的 ActionScript 3.0 參考中的 Slider 類別。

建立具有 Slider 的應用程式

下列範例會建立 Slider 實體，讓使用者可以表達自己對於某些假設性事件的滿意程度。使用者可以將 Slider 往右移或往左移，指定較高或較低的滿意程度。

建立新的 Flash (ActionScript 3.0) 文件。
將 Label 組件從「組件」面板拖曳到「舞台」中央。
- 賦予實體名稱 valueLabel 。
- 指定 0 percent 做為 text 參數的值。
將 Slider 組件從「組件」面板拖曳到 value_lbl 下方中間處。
- 賦予實體名稱 aSlider 。
- 將其「寬度」(W:) 指定為 200 。
- 將其「高度」(H:) 指定為 10 。
- 指定 100 做為 maximum 參數的值。
- 指定 10 做為 snapInterval 和 tickInterval 參數的值。
將另一個 Label 實體從「元件庫」面板拖曳到 aSlider 下方中間處。
- 賦予實體名稱 promptLabel 。
- 將其「寬度」(W:) 指定為 250。
- 將其「高度」(H:) 指定為 22。
- 輸入 Please indicate your level of satisfaction 做為 text 參數的值。

開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列 ActionScript 程式碼：

import fl.controls.Slider; 
import fl.events.SliderEvent; 
import fl.controls.Label; 
 
aSlider.addEventListener(SliderEvent.CHANGE, changeHandler); 
 
function changeHandler(event:SliderEvent):void { 
    valueLabel.text = event.value + "percent";     
}

選取「控制 > 測試影片」。

在此範例中，隨著您將滑動軸的縮圖從某個間隔移動到另一個間隔， SliderEvent.CHANGE 事件的偵聽程式會持續更新 valueLabel 的 text 屬性，以顯示對應到縮圖位置的百分比。

使用 ActionScript 建立具有 Slider 組件的應用程式

下列範例使用 ActionScript 建立 Slider。此範例會下載一朵花的影像，並使用 Slider 藉由將該影像的 alpha 屬性變更為對應到 Slider 的值，讓使用者可使影像淡出或變亮。

建立新的 Flash (ActionScript 3.0) 文件。
將 Label 組件和 Slider 組件從「組件」面板拖曳到目前文件的「元件庫」面板。

此舉會將這兩個組件加入元件庫中，但不會使其在應用程式中顯示。

開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列程式碼以建立並放置組件實體：

import fl.controls.Slider; 
import fl.events.SliderEvent; 
import fl.controls.Label; 
import fl.containers.UILoader; 
 
var sliderLabel:Label = new Label(); 
sliderLabel.width = 120; 
sliderLabel.text = "< Fade - Brighten >"; 
sliderLabel.move(170, 350); 
 
var aSlider:Slider = new Slider(); 
aSlider.width = 200; 
aSlider.snapInterval = 10; 
aSlider.tickInterval = 10; 
aSlider.maximum = 100; 
aSlider.value = 100; 
aSlider.move(120, 330); 
 
var aLoader:UILoader = new UILoader(); 
aLoader.source = "http://www.flash-mx.com/images/image1.jpg"; 
aLoader.scaleContent = false; 
 
addChild(sliderLabel); 
addChild(aSlider); 
addChild(aLoader); 
 
aLoader.addEventListener(Event.COMPLETE, completeHandler); 
 
function completeHandler(event:Event) { 
    trace("Number of bytes loaded: " + aLoader.bytesLoaded); 
} 
 
aSlider.addEventListener(SliderEvent.CHANGE, changeHandler); 
 
function changeHandler(event:SliderEvent):void { 
        aLoader.alpha = event.value * .01; 
}

選取「控制 > 測試影片」，執行應用程式。
將 Slider 的縮圖移到左邊可讓影像變暗，移到右邊則可讓影像變亮。