分享一个带滚动条的Sprite

最近在一个项目中要做一个内容滚动的功能。

就像这样的：

于是把滚动功能提出来写了一个通用类。

代码如下：

 

package lml.common.ui
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;
    
    /**
     *带上下滚动条的Sprite
     * by limaolin
     */ 
    public class ScrollBarSprite extends Sprite
    {
        //滚动条的条
        private var mcScrollLine:Sprite;
        //滚动条的拖动按钮
        private var mcScrollButton:Sprite;
        //用来遮罩的Sprite
        private var mcMask:Sprite;
        //包含显示内容的sprite
        private var mcContent:Sprite;
        //要显示内容的宽度
        private var showWidth:int;
        //要显示内容的高度
        private var showHeight:int;
        //拖动按钮的x坐标
        private var buttonX:int=0;
        
        /**
         * 构造函数
         * @param line 滚动条的条
         * @param btn 滚动条的拖动按钮
         * @param content 包含显示内容的sprite
         * @param w 要显示内容的宽度
         * @param h 要显示内容的高度
         * @param btnYOffset 拖动按钮的y坐标针对w的偏移像素
         * @param lineYOffset 滚动条的条的y坐标针对w的偏移像素
         */ 
        public function ScrollBarSprite(line:Sprite,btn:Sprite,content:Sprite,w:int,h:int,btnYOffset:Number=0,lineYOffset:Number=0)
        {
            super();
            
            //给内部对象赋值
            this.showWidth=w;
            this.showHeight=h;
            this.mcScrollLine=line;
            this.mcScrollButton=btn;
            this.mcContent=content;
            //初始化遮罩
            this.mcMask=new Sprite();
            this.mcMask.graphics.beginFill(0x000000);
            this.mcMask.graphics.drawRect(0,0,w,h);
            this.mcMask.graphics.endFill();
            this.addChild(this.mcContent);
            this.addChild(this.mcMask);
            this.mcContent.mask=this.mcMask;
            
            if(this.mcContent.height>h)
            {
                //设置滚动条
                this.mcScrollLine.x=(w-this.mcScrollLine.width)+lineYOffset;
                this.mcScrollButton.x=(w-this.mcScrollButton.width)+btnYOffset;
                buttonX=this.mcScrollButton.x;
                this.addChild(this.mcScrollLine);
                this.addChild(this.mcScrollButton);
                
                mcScrollButton.addEventListener(MouseEvent.MOUSE_OUT,ButtonMouseOutHandler);
                mcScrollButton.addEventListener(MouseEvent.MOUSE_DOWN,ButtonMouseDownHandler);
                mcScrollButton.addEventListener(MouseEvent.MOUSE_UP,ButtonMouseUpHandler);
                this.addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
            }
        }
        
        private function ButtonMouseOutHandler(e:MouseEvent):void 
        {
            mcScrollButton.stopDrag();
        }
        private function ButtonMouseDownHandler(e:MouseEvent):void 
        {
            var Rect:Rectangle = new Rectangle(buttonX,0,0,mcScrollLine.height-mcScrollButton.height);
            mcScrollButton.startDrag(false,Rect);
        }
        private function ButtonMouseUpHandler(e:MouseEvent):void 
        {
            mcScrollButton.stopDrag();
        }
        private function EnterFrameHandler(e:Event):void 
        {
            var per:Number=this.mcScrollButton.y*100/(this.mcScrollLine.height-mcScrollButton.height);
            this.mcContent.y=-(this.mcContent.height-this.mcMask.height)*per/100;
        }
    }
}

只需将要显示的sprite以及滚动条的样式元件和宽高等参数传进去实例化此类，然后添加到舞台即可。

小生不才，欢迎拍砖。。。