使用 Slider 组件

Slider 组件允许用户选择值，方法是通过在对应于值范围的轨道的两个端点之间滑动图形“滑块”。例如，您可以使用滑块来让用户选择诸如数字或百分比之类的值。还可以使用 ActionScript 使滑块的值影响另一个对象的行为。例如，可以将滑块与图片关联，根据滑块的相对位置或值来缩小或放大图片。

Slider 的当前值由滑块在轨道端点之间或在此 Slider 的最小值与最大值之间的相对位置决定。

Slider 在其最小值与最大值之间的值范围可以是连续的，但您也可以通过设置 snapInterval 参数指定在最小值与最大值之间值与值之间的间隔。Slider 可以按照指定的间隔沿轨道显示刻度线，这些刻度线与分配给滑块的值无关。

默认情况下滑块为水平方向，但是，可以通过将 direction 参数的值设置为 vertical，将滑块指定为垂直方向。滑块轨道从一端延伸到另一端，刻度线从左至右紧贴在轨道上。

用户与 Slider 组件的交互

当 Slider 实例具有焦点时，可以使用以下按键来控制它：

键

说明

向右箭头

增大水平滑块的关联值。

向上箭头

增大垂直滑块的关联值。

向左箭头

减小水平滑块的关联值。

向下箭头

减小垂直滑块的关联值。

Shift+Tab

将焦点移到前一个对象。

Tab

将焦点移到下一个对象。

有关控制焦点的详细信息，请参阅 《用于 Adobe® Flash® Professional CS5 的 ActionScript® 3.0 参考》 中的 IFocusManager 接口和 FocusManager 类以及 使用 FocusManager 。

每个 Slider 实例的实时预览反映了创作期间在“属性”检查器或“组件”检查器中对参数所做的更改。

Slider 组件参数

您可以在“属性”检查器或“组件”检查器中为每个 Slider 组件实例设置下列创作参数： direction 、 liveDragging 、 maximum 、 minimum 、 snapInterval 、 tickInterval 和 value 。其中每个参数都有对应的同名 ActionScript 属性。有关这些参数的可能值的信息，请参阅 《用于 Adobe® Flash® Professional CS5 的 ActionScript® 3.0 参考》 中的 Slider 类。

创建具有 Slider 的应用程序

下面的示例创建一个 Slider 实例，以允许用户表达他或她对某一假设事件的满意程度。用户可向右或向左移动滑块，以指示较高或较低的满意度。

  1. 创建一个新的 Flash (ActionScript 3.0) 文档。

  2. 将一个 Label 组件从“组件”面板拖到舞台中央。

    • 为其指定实例名称 valueLabel 。

    • 将值 0 percent 赋给 text 参数。

  3. 将一个 Slider 组件从“组件”面板拖到 value_lbl 下方中央位置。

    • 为其指定实例名称 aSlider 。

    • 将其宽 (W:) 指定为 200 。

    • 将其高 (H:) 指定为 10 。

    • 将值 100 赋给 maximum 参数。

    • 将值 10 同时赋给 snapInterval 和 tickInterval 参数。

  4. 将另一个 Label 实例从“库”面板中拖到 aSlider 下方中央位置。

    • 为其指定实例名称 promptLabel 。

    • 将其宽 (W:) 指定为 250。

    • 将其高 (H:) 指定为 22。

    • 输入 Please indicate your level of satisfaction 作为 text 参数的值。

  5. 打开“动作”面板，在主时间轴中选择第 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";     
}

  6. 选择“控制”>“测试影片”。

    在此示例中，当您将滑块从一个间隔移到另一个间隔时， SliderEvent.CHANGE 事件的侦听器将更新 valueLabel 的 text 属性，以显示与滑块位置相对应的百分比。

使用 ActionScript 创建具有 Slider 组件的应用程序

下面的示例使用 ActionScript 创建一个 Slider。该示例下载一幅花朵的图像并使用此 Slider 让用户减淡或加亮此图像，它是通过更改此图像的 alpha 属性使之与此 Slider 的值相对应实现的。

  1. 创建一个新的 Flash (ActionScript 3.0) 文档。

  2. 将 Label 组件和 Slider 组件从“组件”面板拖到当前文档的“库”面板中。

    此操作将组件添加到库中，但不会在应用程序中显示它们。

  3. 打开“动作”面板，在主时间轴中选择第 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; 
}

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

  5. 将滑块向左移动可以减淡图像；将滑块向右移动可以加亮图像。