AS3.0自定义滚动条（滚动内容可以为Sprite或MovieClip等）

AS3.0实现自定义滚动条（滚动内容可以为Sprite或MovieClip等），修改属性类型即可！

效果演示：

源码：

Scrollbar.as

 

  1  package  ui
  2  {
  3       import  flash.display.Sprite;
  4       import  flash.events.MouseEvent;
  5       import  flash.events.Event;
  6       import  ui.ListenManager;
  7       import  flash.geom.Rectangle;
  8 
  9       public   class  Scrollbar  extends  Sprite
 10      {
 11           public  var obj:Sprite; // 需进行滚动的对象
 12           public  var scrollmask:Sprite; // 遮罩对象
 13           public  var scrollheight:Number; // 滚动条高度
 14           public  var scrolltextnum: int ; // 文本显示行数
 15           public  var textspeed: int ; // 文本滚动速度（行/像素）
 16           public  var Scroll:Sprite; // 自定义滚动条对象
 17           public  var bar:Sprite; // 滑块
 18           public  var up:Sprite; // 向上按钮
 19           public  var down:Sprite; // 向下按钮
 20           public  var bg:Sprite; // 滑槽
 21           public  var displayobject: * ; // 接受stage，必须传入
 22           public  var num: int ; // 计算滑块高度所用
 23 
 24           private  var bars:Number; // 滑块可滑动距离
 25           private  var rect:Rectangle; // 滑块可拖动范围
 26           private  var i: int   =   0 ;
 27           private  var n:Number;
 28           private  var listenmanager:ListenManager  =   new  ListenManager(); // /监听管理器
 29           //// 构造器函数 //// /
 30           public  function Scrollbar(): void
 31          {
 32          }
 33           //// /初始化函数 //// /
 34           public  function init(): void
 35          {
 36               if  (checkhide())
 37              {
 38                  addEventListeners();
 39              }
 40               else
 41              {
 42                  bar.visible  =   false ;
 43              }
 44              setxy();
 45          }
 46           // /判断是否显示滚动条等 // /
 47           private  function checkhide():Boolean
 48          {
 49               if  (Scroll  !=   null )
 50              {
 51                   if  (obj.height  <=  scrollmask.height)
 52                  {
 53                       return   false ;
 54                  }
 55                   return   true ;
 56              }
 57               return   false ;
 58          }
 59           // /设置滚动条高度，对象遮罩等 ////
 60           private  function setxy(): void
 61          {
 62              up.y  =   1 ;
 63              bg.y  =  up.height;
 64              bar.x  =   1.2 ;
 65              bar.y  =  bg.y;
 66               if  (bar.height  >=   10 )
 67              {
 68                  n  =  (obj.height  -  scrollmask.height) / (num + 20 );
 69                  bar.height  =  scrollmask.height  -  (obj.height  -  scrollmask.height) / n;
 70              }
 71              bg.height  =  scrollheight;
 72              down.y  =  bg.y  +  bg.height;
 73              bars  =  bg.height  -  bar.height;
 74              obj.mask  =  scrollmask;
 75              rect  =   new  Rectangle(bar.x,bg.y, 0 ,bg.height  -  bar.height);
 76          }
 77           // /当被滚动对象更新时，而需要改变滚动条状态，调用此方法 // /
 78           public  function update(num: int ): void
 79          {
 80               if  (checkhide())
 81              {
 82                  i ++ ;
 83                   if  (bar.height  >=   10 )
 84                  {
 85                      n  =  (obj.height  -  scrollmask.height) / (num + 20 );
 86                      bar.height  =  scrollmask.height  -  (obj.height  -  scrollmask.height) / n;
 87                  }
 88                  bar.y  =  bg.y  +  bg.height  -  bar.height;
 89                  bar.y  +=   bars  *  textspeed  / (obj.height  -  scrollmask.height);
 90                  obj.y  =  scrollmask.y  -  obj.height  +  scrollmask.height;
 91                  objrun(textspeed);
 92                  updatebar();
 93                  bars  =  bg.height  -  bar.height;
 94                  rect  =   new  Rectangle(bar.x,bg.y, 0 ,bg.height  -  bar.height);
 95                   if  (i  ==   1 )
 96                  {
 97                      bar.visible  =   true ;
 98                      addEventListeners();
 99                  }
100              }
101          }
102           // /为滚动条添加监听事件 ////
103           private  function addEventListeners(): void
104          {
105              listenmanager.fcn_add(bar,MouseEvent.MOUSE_DOWN,barclick);
106              listenmanager.fcn_add(bar,MouseEvent.MOUSE_UP,barup);
107              listenmanager.fcn_add(displayobject,MouseEvent.MOUSE_UP,barup);
108              listenmanager.fcn_add(up,MouseEvent.MOUSE_DOWN,upclick);
109              listenmanager.fcn_add(down,MouseEvent.MOUSE_DOWN,downclick);
110              listenmanager.fcn_add(Scroll,MouseEvent.MOUSE_WHEEL,mousewheel);
111              listenmanager.fcn_add(obj,MouseEvent.MOUSE_WHEEL,mousewheel);
112          }
113           // /鼠标点击滑块方法 // /;
114           private  function barclick(evt:MouseEvent): void
115          {
116              bar.startDrag( false ,rect);
117              listenmanager.fcn_add(bar,Event.ENTER_FRAME,bar_enter_frame);
118          }
119           // /鼠标点击滑块释放方法 // /;
120           private  function barup(evt:MouseEvent): void
121          {
122              bar.stopDrag();
123              delevent();
124          }
125           // /鼠标点击向上按钮方法 // /
126           private  function upclick(evt:MouseEvent): void
127          {
128               if  (checkbar())
129              {
130                  bar.y  -=  bars  *  textspeed  / (obj.height - scrollmask.height); // 滑块移动的距离=滚动对象滚动的像素*滑块可移动的总距离/(被滚动对象的高度-遮罩的高度（即显示范围的高度))
131                  objrun( 0 - textspeed);
132                   // 调用方法移动对象;
133                  updatebar(); // 校正滑块位置
134              }
135          }
136           // /鼠标点击向下按钮方法 // /
137           private  function downclick(evt:MouseEvent): void
138          {
139               if  (checkbar())
140              {
141                  bar.y  +=   bars  *  textspeed  / (obj.height  -  scrollmask.height);
142                  objrun(textspeed);
143                  updatebar();
144              }
145          }
146           // /鼠标滑轮事件 // /
147           private  function mousewheel(evt:MouseEvent): void
148          {
149               if  (evt.delta  >   0 )
150              {
151                   if  (checkbar())
152                  {
153                      bar.y  -=   bars  *  textspeed  / (obj.height  -  scrollmask.height);
154                      objrun( - textspeed);
155                      updatebar();
156                  }
157              }
158               else
159              {
160                   if  (checkbar())
161                  {
162                      bar.y  +=   bars  *  textspeed  / (obj.height  -  scrollmask.height);
163                      objrun(textspeed);
164                      updatebar();
165                  }
166              }
167          }
168           private  function bar_enter_frame(evt:Event): void
169          {
170              obj.y  =  scrollmask.y  -  (bar.y  -  bg.y) * (obj.height  -  scrollmask.height) / bars;
171               if  (obj.y  >  scrollmask.y)
172              {
173                  obj.y  =  scrollmask.y;
174              }
175               else   if  (obj.y  <  (scrollmask.y  -  obj.height  +  scrollmask.height))
176              {
177                  obj.y  =  scrollmask.y  -  obj.height  +  scrollmask.height;
178              }
179          }
180           private  function objrun(i:Number): void
181          {
182              obj.y  -=   i;
183               if  (obj.y  >  scrollmask.y)
184              {
185                  obj.y  =  scrollmask.y;
186              }
187               else   if  (obj.y  <  (scrollmask.y  -  obj.height  +  scrollmask.height))
188              {
189                  obj.y  =  scrollmask.y  -  obj.height  +  scrollmask.height;
190              }
191          }
192           private  function checkbar():Boolean
193          {
194               if  (bar.y  >=  bg.y  &&  bar.y  <=  (bars  +  bg.y))
195              {
196                   return   true ;
197              }
198               return   false ;
199          }
200           // /删除卸载事件侦听 // /
201           private  function updatebar(): void
202          {
203               if  (bar.y  <  bg.y)
204              {
205                  bar.y  =  bg.y;
206              }
207               else   if  (bar.y  > (bg.y  +  bg.height  -  bar.height))
208              {
209                  bar.y  =  bg.y  +  bg.height  -  bar.height;
210              }
211          }
212           private  function delevent(): void
213          {
214              listenmanager.fcn_del(bar,Event.ENTER_FRAME,bar_enter_frame);
215          }
216      }
217  }

ListenManager.as

 

 1  package  ui
 2  {
 3       import  flash.display.Sprite;
 4       public   class  ListenManager  extends  Sprite
 5      {
 6           public  function ListenManager()
 7          {
 8 
 9          }
10           public  function fcn_add(obj: * ,_type:String,fcn:Function): void
11          {
12              obj.addEventListener(_type,fcn);
13          }
14           public  function fcn_del(obj: * ,_type:String,fcn:Function): void
15          {
16              obj.removeEventListener(_type,fcn);
17          }
18      }
19  }

 

loader.as

 

 1  package  ui
 2  {
 3       import  flash.display.Loader;
 4       public   class  loader  extends  Loader
 5      {
 6           private  var Name:String;
 7           public  function loader(): void
 8          {
 9          }
10           public  function get Names():String
11          {
12               return  Name;
13          }
14           public  function set Names(myname:String): void
15          {
16              Name  =  myname;
17          }
18      }
19  }

 

simple.as

 

  1  package  ui
  2  {
  3       import  flash.display.Sprite;
  4       import  flash.display.SimpleButton;
  5       import  flash.text.TextField;
  6       import  flash.text.TextFormat;
  7       import  flash.text.TextFieldAutoSize;
  8 
  9       public   class  simple  extends  Sprite
 10      {
 11           private  var btnw:Number;
 12           private  var btnh:Number;
 13           private  var downcolor:uint;
 14           private  var upcolor:uint;
 15           private  var overcolor:uint;
 16           private  var lineStly:Boolean;
 17           public  function simple(): void
 18          {
 19 
 20          }
 21           public  function getsimplebtn(str:String,btnw:Number  =   50 ,btnh:Number  =   30 ,downcolor:uint  =   0x990066 ,upcolor:uint  =   0xffffff ,overcolor:uint  =   0x666666 ,lineStly:Boolean  =   false ):SimpleButton
 22          {
 23               this .name  =  str;
 24               this .btnw  =  btnw;
 25               this .btnh  =  btnh;
 26               this .downcolor  =  downcolor;
 27               this .upcolor  =  upcolor;
 28               this .overcolor  =  overcolor;
 29               this .lineStly  =  lineStly;
 30              var btn:SimpleButton  =   new  SimpleButton();
 31              btn.downState  =  downbtn();
 32              btn.upState  =  upbtn();
 33              btn.overState  =  overbtn();
 34              btn.hitTestState  =  hitbtn();
 35               return  btn;
 36          }
 37           private  function hitbtn():Sprite
 38          {
 39              var sprite:Sprite  =   new  Sprite();
 40              sprite.graphics.beginFill(upcolor);
 41              sprite.graphics.drawRect( 0 , 0 ,btnw,btnh);
 42              sprite.graphics.endFill();
 43               return  sprite;
 44          }
 45           private  function downbtn():Sprite
 46          {
 47              var txt:TextField  =  txtstr( this .name);
 48              var sprite:Sprite  =  DrawSprite( 1 );
 49              sprite.addChild(txt);
 50               return  sprite;
 51          }
 52           private  function upbtn():Sprite
 53          {
 54              var txt:TextField  =  txtstr( this .name);
 55              var sprite:Sprite  =  DrawSprite( 0 );
 56              sprite.addChild(txt);
 57               return  sprite;
 58          }
 59           private  function overbtn():Sprite
 60          {
 61              var txt:TextField  =  txtstr( this .name);
 62              var sprite:Sprite  =  DrawSprite( 2 );
 63              sprite.addChild(txt);
 64               return  sprite;
 65          }
 66           private  function txtstr(str:String):TextField
 67          {
 68              var txt:TextField  =   new  TextField();
 69              var format:TextFormat  =   new  TextFormat();
 70              format.font  =   " Verdana " ;
 71              format.size  =   12 ;
 72              txt.autoSize  =  TextFieldAutoSize.LEFT;
 73              txt.text  =  str;
 74              txt.setTextFormat(format);
 75               return  txt;
 76          }
 77           private  function DrawSprite(n: int ):Sprite
 78          {
 79              var sprite:Sprite  =   new  Sprite();
 80               if  (n  ==   0 )
 81              {
 82                  sprite.graphics.beginFill(upcolor);
 83              }
 84               else   if  (n  ==   1 )
 85              {
 86                  sprite.graphics.beginFill(downcolor);
 87              }
 88               else   if  (n  ==   2 )
 89              {
 90                  sprite.graphics.beginFill(overcolor);
 91              }
 92               if (lineStly)
 93              {
 94                  sprite.graphics.lineStyle( 1 , 0x660099 );
 95              }
 96              sprite.graphics.drawRect( 0 , 0 ,btnw,btnh);
 97              sprite.graphics.endFill();
 98               return  sprite;
 99          }
100      }
101  }

文档类:Main.as

 

  1  package  
  2  {
  3       import  flash.display.Sprite;
  4       import  ui.simple;
  5       import  ui.Scrollbar;
  6       import  flash.display.SimpleButton;
  7       import  flash.events.MouseEvent;
  8       import  flash.display.Shape;
  9       import  flash.net.URLLoader;
 10       import  flash.events.Event;
 11       import  flash.net.URLRequest;
 12       import  ui.loader;
 13       import  flash.display.Bitmap;
 14       import  flash.text.TextField;
 15 
 16       public   class  Main  extends  Sprite
 17      {
 18           private  var backbox:Sprite  =   new  Sprite();
 19           private  var sprite:Sprite  =   new  Sprite();
 20           private  var scrollcont:Sprite  =   new  Sprite();
 21           private  var i: int   =   0 ;
 22           private  var j: int   =   - 1 ;
 23           private  var num: int ;
 24           private  var bg:Sprite  =   new  Sprite();
 25           private  var bar:Sprite  =   new  Sprite();
 26           private  var up:Sprite  =   new  Sprite();
 27           private  var down:Sprite  =   new  Sprite();
 28           private  var listscroll:Scrollbar  =   new  Scrollbar();
 29           public  function Main(): void
 30          {
 31              init();
 32          }
 33           private  function init(): void
 34          {
 35              var urlloader:URLLoader  =   new  URLLoader();
 36              urlloader.addEventListener(Event.COMPLETE,com);
 37              urlloader.load( new  URLRequest( " http://files.cnblogs.com/zhoujunfeng2011/Pictures/data.xml " ));
 38          }
 39           private  function com(evt:Event): void
 40          {
 41              var myxml:XML  =   new  XML(evt.target.data);
 42              num  =  myxml.child( " pic " ).length();
 43               for  (var i: int   = 0 ; i < num; i ++ )
 44              {
 45                  var myloader:loader  =   new  loader();
 46                  myloader.contentLoaderInfo.addEventListener(Event.COMPLETE,piccom);
 47                  myloader.load( new  URLRequest(myxml.child( " pic " )[i].@url));
 48                  myloader.Names  =  myxml.child( " pic " )[i]. @ name;
 49              }
 50          }
 51           private  function piccom(evt:Event): void
 52          {
 53              j ++ ;
 54              var myloader:loader  =  loader(evt.target.loader);
 55              var bitmap:Bitmap  =  Bitmap(myloader.content);
 56              var sprite:Sprite  =   new  Sprite();
 57              sprite.addChild(bitmap);
 58               switch  (myloader.Names)
 59              {
 60                   case   " 滑块 "  :
 61                      bar  =  sprite;
 62                       break ;
 63                   case   " 滑槽 "  :
 64                      bg  =  sprite;
 65                       break ;
 66                   case   " 向上 "  :
 67                      up  =  sprite;
 68                       break ;
 69                   case   " 向下 "  :
 70                      down  =  sprite;
 71                       break ;
 72              }
 73               if  (j  ==  num - 1 )
 74              {
 75                  uiinit();
 76              }
 77          }
 78           private  function uiinit(): void
 79          {
 80              var btn:simple  =   new  simple();
 81              var spmask:Sprite  =   new  Sprite();
 82              var Test_btn:SimpleButton;
 83              backbox.graphics.beginFill( 0xffffff );
 84              backbox.graphics.lineStyle( 1 , 0x660099 );
 85              backbox.graphics.drawRect( 0 , 0 , 200 , 241 );
 86              backbox.graphics.endFill();
 87              backbox.y  =   10 ;
 88              addChild(backbox);
 89              scrollcont.x  =  backbox.width  -   14 ;
 90              scrollcont.y  =  backbox.y;
 91              addChild(scrollcont);
 92              down.y  =  scrollcont.y;
 93              scrollcont.addChild(down);
 94              scrollcont.addChild(bg);
 95              scrollcont.addChild(up);
 96              scrollcont.addChild(bar);
 97              spmask.graphics.beginFill( 0x000000 );
 98              spmask.graphics.drawRect( 0 , 0 ,backbox.width,backbox.height);
 99              spmask.graphics.endFill();
100              backbox.addChild(sprite);
101              backbox.addChild(spmask);
102              Test_btn  =  btn.getsimplebtn( " 点击添加 " , 60 , 30 , 0xff00cc , 0xcc00cc , 0x9900cc );
103              Test_btn.x  =   65 ;
104              Test_btn.y  =  backbox.height  +   15 ;
105               this .addChild(Test_btn);
106               for  (i; i <   120 ; i ++ )
107              {
108                  var sbtn:simple  =   new  simple();
109                  var sp:SimpleButton;
110                  var str:String  =  i  +   1   +   "  this is Testing! " ;
111                  sp  =  sbtn.getsimplebtn(str, 185 , 20 , 0x990099 , 0x66ffff , 0x99ffff , true );
112                  sp.x  =   1 ;
113                  sp.y  =  i  *   20 ;
114                  sprite.addChild(sp);
115              }
116              listscroll.displayobject  =   this .stage;
117              listscroll.obj  =  sprite;
118              listscroll.scrollmask  =  spmask;
119              listscroll.textspeed  =   20 ;
120              listscroll.Scroll  =  scrollcont;
121              listscroll.scrollheight  =   212 ;
122              listscroll.up  =  up;
123              listscroll.down  =  down;
124              listscroll.bg  =  bg;
125              listscroll.bar  =  bar;
126              listscroll.num  =  i;
127              listscroll.init();
128              Test_btn.addEventListener(MouseEvent.CLICK,Testbtn_click);
129          }
130           private  function Testbtn_click(evt:MouseEvent): void
131          {
132              var sbtn:simple  =   new  simple();
133              var sp:SimpleButton;
134              var str:String  =  i  +   1   +   "  this is Testing! " ;
135              sp  =  sbtn.getsimplebtn(str, 185 , 20 , 0x990099 , 0x66ffff , 0x99ffff , true );
136              sp.x  =   1 ;
137              sp.y  =  i  *   20 ;
138              sprite.addChild(sp);
139              listscroll.update(i);
140              i ++ ;
141          }
142      }
143  }

为图方便所以使用了SimpleButton类型作为列表中的内容，，有些算法都是从网上收集起来的，不过稍改了下，希望会对你有帮助，代码有点乱，看了后希望点评下，谢谢！最后加上XML内容：

 

1  <? xml version="1.0" encoding="utf-8" ?>
2  < data >
3       < pic  name ="滑槽"  url ="http://files.cnblogs.com/zhoujunfeng2011/Pictures/bg.png" />
4       < pic  name ="向上"  url ="http://files.cnblogs.com/zhoujunfeng2011/Pictures/up.png" />
5       < pic  name ="向下"  url ="http://files.cnblogs.com/zhoujunfeng2011/Pictures/down.png" />
6       < pic  name ="滑块"  url ="http://files.cnblogs.com/zhoujunfeng2011/Pictures/bar.png" />
7  </ data >