自制 flash slider滚动条

这段时间用flash做了一个项目，其中用到了flash slider滚动条的功能，本来想用官方的组件，无奈修改样式过于麻烦，也不好用，所以自己制作了一个，可以实现相类似的功能。

【实例演示】

代码结构如下：

mySlider是slider的主类，通过setMc(mc:ISlider);控制传入的操作接口，控制影片剪辑。rotateMc，Resize是操作方法，继承接口ISlider，以后要扩展各种功能，只要新建方法类继承ISlider就可以了。

其中用类updateAfterEvent（）强制刷新屏幕，虽然会对效率产生一些影响，但是对于提高用户体验是有必要的。下面示例是没有加updateAfterEvent的效果。主要差别在滑块拖动时候的反应上。

【示例演示】

【代码说明】

这里并没有完全按照官方slider组件的模式来开发，没有发送消息事件，而是通过setMc(mc:ISlider)来装载影片剪辑，内部发送数据到继承了ISlider接口的对象，这样的好处是按需订制功能。

【ISlider】

1	`共同方法：updateData，获取slider对象的滑块数据`

package com.babyzone.slider  {
     
    public interface ISlider {
        function updateData(num:Number):void;
    }
     
}

【mySlider】

package com.babyzone.slider  {
    import flash.display.MovieClip;
    import flash.geom.Rectangle;
    import flash.events.*;
    /*
    num:滚动条的最大刻度值，
    setMiddle方法，设置滑块为中间的情况
    reset 重置
    setMc 控制传入的Islider
    */
    public class mySlider extends MovieClip {
 
        //滑块可拖动区域
        private var drag_area:Rectangle;
        //滑块移动的刻度
        private var numBer:Number;
        //滑块的最大刻度
        private var maxNum:Number;
        //要处理的对象
        private var iObj:ISlider;
        //设置滑块参照的坐标
        private var relateX:Number;
        private var relateWidth:Number;
         
        public function mySlider(num:Number) {
            maxNum = num;
            drag_area = new Rectangle(this.scrollable_area.x,this.scrollable_area.y, this.scrollable_area.width - this.scroller.width,0);
            this.scroller.addEventListener( MouseEvent.MOUSE_DOWN, scroller_drag );
            relateX = drag_area.x;
            relateWidth = drag_area.width;
        }
    /*----------------------------滑块拖动效果--------------------------------*/
    private function scroller_drag( e:MouseEvent ):void {
            this.scroller.startDrag(false, drag_area);
            stage.addEventListener(MouseEvent.MOUSE_UP, up);
            //当移动滑块，强制重绘屏幕
            stage.addEventListener(MouseEvent.MOUSE_MOVE,updateScreen);
        }
    private function up( e:MouseEvent ):void {
            this.scroller.stopDrag();
            stage.removeEventListener(MouseEvent.MOUSE_UP, up);
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, updateScreen);
        }
    private function updateScreen(e:MouseEvent) {
            //当前刻度
            numBer = maxNum * (this.scroller.x - relateX) / drag_area.width;
            numBer = numBer < -0.8? -0.8:numBer;
            if (iObj) {
                deliveData(numBer);
            }
             
        }
    public function reset():void {
            this.scroller.x = this.scrollable_area.x;
            numBer = maxNum * (this.scroller.x - drag_area.x) /relateWidth ;
            deliveData(numBer);
        }
    public function setMiddle():void {
            this.scroller.x =drag_area.x+(this.scrollable_area.width - this.scroller.width) / 2;
            relateX =this.scroller.x;
            relateWidth = drag_area.width/2;
        }
    /*----------------------------滑块拖动效果 end----------------------------*/
     
    /*----------------------------对传入的MC，设置----------------------------*/
    public function setMc(mc:ISlider):void {
            iObj = mc;
        }
    private function deliveData(num:Number):void {
            iObj.updateData(num);
        }
    }
}

【rotateMc】

实现旋转+缓动功能的类。

package com.babyzone.slider  {
     
    /*
    mc:     重设角度的元件剪辑
    angle:  角度,1代表一圈
    speed   缓动的速度 0-1
    */
     
    import flash.display.MovieClip;
    import flash.events.Event;
    public class rotateMc extends MovieClip implements ISlider {
         
        private var this_mc:MovieClip;
        private var realNum:Number=0;
        private var mcSpeed:Number;
         
        public function rotateMc(mc:MovieClip,speed:Number) {
            this_mc = mc;
            mcSpeed = speed;
            this.addEventListener(Event.ENTER_FRAME, setRotate);
        }
        public function updateData(num:Number):void{
            realNum = num * 360;
        }
        public function setRotate(e:Event):void {
            var thisRotation = this_mc.rotation >= 0? this_mc.rotation:this_mc.rotation + 360;
            this_mc.rotation += (realNum - thisRotation) * mcSpeed;
        }
    }
     
}

【Resize】

实现扩大缩小的类

package com.babyzone.slider  {
    import flash.display.MovieClip;
    import flash.events.Event;
    /*
    mc:     重设大小的元件剪辑
    speed:  缓动状态：0-1，1是正常状态
    */
    public class Resize extends MovieClip implements ISlider {
         
        private var old_width:Number;//原始影片剪辑的属性
        private var old_height:Number;
        private var mcSpeed:Number;
        private var this_mc:MovieClip;
        private var scale:Number=1;
         
        public function Resize(mc:MovieClip,speed:Number) {
            old_width=mc.width;
            old_height=mc.height;
            this_mc = mc;
            mcSpeed = speed;
            this.addEventListener(Event.ENTER_FRAME, set_size);
        }
         
        public function updateData(num:Number):void{
            num++;
            scale = num;
        }
         
        private function set_size(e:Event):void {
            this_mc.scaleX+=(scale-this_mc.scaleX)*mcSpeed;
            this_mc.scaleY+=(scale-this_mc.scaleY)*mcSpeed;
        }
    }
}

【调用方法】

import com.babyzone.slider.*;
//参数2是指3倍
var mc1:mySlider = new mySlider(1);
mc1.x = 100;
mc1.y = 20;
stage.addChild(mc1);
//测试扩大缩小
var obj:sampleObj=new sampleObj();
obj.x = 200;
obj.y = 160;
stage.addChild(obj);
 
var resizeObj:Resize = new Resize(obj,0.3);
mc1.setMc(resizeObj);
//测试旋转
var mc2:mySlider = new mySlider(1);
mc2.x = 100;
mc2.y = 40;
stage.addChild(mc2);
 
var resizeObj1:rotateMc = new rotateMc(obj,0.3);
mc2.setMc(resizeObj1);