Flash CS3 新增组件——Slider

上一次我们简单讲解了ColorPicker组件,这回我们来谈一谈Slider组件。

在Flex 2中也有Slider组件,不过它被分成了两个组件:HSlider和VSlider。该组件与NumericStepper相似,它允许用户在滑轨两端之间拖动滑块 而选择一个数值。该组件的当前值取决于滑轨两端之间滑块的相对位置,这两个端点分别对应Slider组件的最小值和最大值。

一、属性

  • direction:设置Slider组件的方向,有SliderDirection.HORIZONTAL和SliderDirection.VERTICAL两个值;
  • liveDragging:设置或获取当滑块移动时,是否持续广播SliderEvent.CHANGE事件。默认值为false;
  • maximum:设置或获取Slider 组件实例允许的最大值,默认值为10;
  • minimum:设置或获取Slider 组件实例允许的最小值,默认值为0;
  • snapInterval:设置或获取滑块移动时的步进值,默认值为0;
  • tickInterval:设定滑条的标尺刻度的步进值,默认值为0;
  • vallue:设置或获取Slider 组件的当前值,默认值为0。

二、方法

方法很简单,除了构造方法都是些继承的方法,请参考UIComponent 。

三、事件

  • change:滑块的位置改变时广播。
  • thumbDrag:按住滑块后拖动鼠标时广播。
  • thumbPress:按下滑块时广播。
  • thumbRelease:按下滑块再松开时广播。

在下面这个简单实例中,我们用一个自定义类在舞台动态添加了一个动态文本和一个滑条。当按住滑块后拖动鼠标,将动态改变动态文本的字号。代码加下:

package com.riafan.tutorials{ 
    import flash.display.Sprite; 
    import fl.controls.Slider; 
    import flash.text.TextField; 
    import flash.text.TextFieldAutoSize; 
    import flash.text.TextFormat; 
    import flash.events.*; 
    public class SliderDemo extends Sprite { 
        private var tf:TextField; 
        private var format:TextFormat; 
        private var slider:Slider=new Slider();      
        public function SliderDemo() { 
            configureTextField(); 
            configureSlider(); 
            slider.addEventListener(Event.CHANGE, onChange); 
        } 
        private function configureTextField():void { 
            tf = new TextField(); 
            tf.text = "F"; 
            tf.autoSize = TextFieldAutoSize.CENTER; 
            tf.background = true; 
            tf.border = true; 
            tf.x=100; 
            tf.y=50; 
            addChild(tf); 
        } 
        private function configureSlider():void { 
            //设定最小值 
            slider.minimum=8; 
            //设定最大值 
            slider.maximum=64; 
            //设定滑块移动时的步进值为2 
            slider.snapInterval=2; 
            //设定滑条的标尺刻度的步进值为8 
            slider.tickInterval=8; 
            //当滑块移动时,持续广播SliderEvent.CHANGE事件 
            slider.liveDragging=true; 
            slider.move(50,150); 
            slider.width=100; 
            addChild(slider); 
        } 
        //自定义侦听器方法 
        private function onChange(e:Event):void { 
            var s:Slider = e.target as Slider; 
            format=new TextFormat(); 
            //设置动态文本的样式字号为Slider组件的当前值 
            format.size=s.value; 
            tf.setTextFormat(format); 
        } 
    } 
}

点击此处查看效果。

发表评论