用as3.0制作一個滾動條組件

本實例演示了實現一個滾動條基本功能的制作方法，沒有添加改變皮膚，修改滾動條視框大小等功能，有興趣的朋友可根據自己要求自行添加。使用時只需要通過以下一行代碼創建滾動條組件：

var myScrollbar:Scrollbar=new Scrollbar(mc);
addChild(myScrollbar);

 其中mc為需要添加滾動條功能的元件，如影片剪輯，文本等。

一、制作元件

滾動條由滑塊slider，向上向下滾動的按鈕，滾動條背景，遮擋內容的遮罩及存儲內容的contMc元素組成。當拖動滑塊slider或單擊上下按鈕時，contMc會上下滾動。制作元件並命名如下：

 

二、為滾動條的庫元件添加鏈接（如下圖所示）

 

三、鏈接的類代碼

全局變量說明：step為滾動步數，top為slider滑塊在最頂端的位置，buttom為滑塊在最低端的位置。

package  {
    
    import flash.display.MovieClip;
    import flash.display.DisplayObject;
    import flash.events.Event;
    import flash.events.MouseEvent;
    
    public class Scrollbar extends MovieClip {
        
        private var step:int=5;
        private var top:Number;
        private var buttom:Number;
        
        public function Scrollbar(mc:DisplayObject) {
            this.contMc.addChild(mc);
            mc.x=0;
            mc.y=0;
            this.addEventListener(Event.ADDED_TO_STAGE,init);
        }
        
        private function init(e:Event):void {
            top=this.slider.height/2;
            buttom=this.back.height-this.slider.height/2;
            this.downBtn.addEventListener(MouseEvent.CLICK,downHandler);
            this.upBtn.addEventListener(MouseEvent.CLICK,upHandler);
            this.slider.addEventListener(MouseEvent.MOUSE_DOWN,sliderDrag);
        }
        
        private function downHandler(e:MouseEvent):void {
            if(this.slider.y<buttom){
                this.slider.y+=step;
            }
            if(this.slider.y>buttom){
                this.slider.y=buttom;
            }
            moveContMc();
        }
        
        private function upHandler(e:MouseEvent):void {
            if(this.slider.y>top){
                this.slider.y-=step;
            }
            if(this.slider.y<top){
                this.slider.y=top;
            }
            moveContMc()
        }
        
        private function sliderDrag(e:MouseEvent):void {
            this.stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
            this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
        
        }
        
        private function mouseUpHandler(e:MouseEvent):void {
            this.removeEventListener(Event.ENTER_FRAME,enterFrameHandler);
        }
        
        private function enterFrameHandler(e:Event):void {
            this.slider.y=Math.min(buttom,Math.max(top,this.mouseY));
            moveContMc();
        }
        
        private function moveContMc():void {
            this.contMc.y=-(this.contMc.height-this.back.height)*(this.slider.y-top)/buttom;
        }
        
    }
}

 四、moveContMc函數解析：

如下圖左示意，當slider滑塊由最頂端（top位置）向下移動距離b時，contMc會向上移動距離a。如下圖右，當滑塊移動到最低端（buttom位置）時，contMc會移動到最頂端，距離為m（值為contMc的高度-遮罩層的高度），由a/b=m/n，可算出a值為m*b/n,即：

this.contMc.y=-(this.contMc.height-this.back.height)*(this.slider.y-top)/buttom;