·您当前的位置:首页 > 技术教程 > AS2与AS3技术 >

[AS3]as3.0滚动条类很酷的很好用

时间:2014-01-03 11:12zpointer.iteye.com
ZScrollBar.as,[AS3]as3.0滚动条类很酷的好用

[AS3]as3.0滚动条类很酷的,很好用

  1. package zkl.controls 
  2. { 
  3.     import com.greensock.TweenLite; 
  4.     import com.greensock.easing.Back; 
  5.     import flash.display.DisplayObject; 
  6.     import flash.display.DisplayObjectContainer; 
  7.     import flash.display.Sprite; 
  8.     import flash.display.Stage; 
  9.     import flash.events.Event; 
  10.     import flash.events.MouseEvent; 
  11.     import flash.geom.Rectangle; 
  12.      
  13.     /** 
  14.      * 滚动条 
  15.      * 约定滚动的控制的焦点都在左上角 
  16.      * 滑块:可以被拖动的 
  17.      * 滑道:滑块所在的拖动范围 
  18.      * 内容:拖动滑块要触动的对象 
  19.      * 使用实例: 
  20.      * import zkl.controls.ZScrollBar; 
  21.      * import zkl.controls.ZScrollBarDirection; 
  22.      * var bar:ZScrollBar = new ZScrollBar(); 
  23.      * bar._stage = this.stage; 
  24.      * bar._target = _target; 
  25.      * bar._slideBar = slideBarV; 
  26.      * bar._scrollBar = scrollBar; 
  27.      * bar._targetScrollLength = _target.height - mask.height; 
  28.      * bar.init(); 
  29.      * @author zkl 
  30.      */ 
  31.     public class ZScrollBar extends Sprite  
  32.     { 
  33.         //所在舞台 
  34.         public var _stage:Stage; 
  35.         //被滚动的内容 
  36.         public var _target:DisplayObject; 
  37.         //内容滚动的距离 
  38.         public var _targetScrollLength:Number; 
  39.         //滚动条的滚动方向 
  40.         public var _direction:String = ZScrollBarDirection.VERTICAL; 
  41.          
  42.         //滑块 
  43.         public var _scrollBar:Sprite; 
  44.         //滑道 
  45.         public var _slideBar:Sprite; 
  46.         //四个方向的滑块 
  47.         public var _upBar:Sprite; 
  48.         public var _downBar:Sprite; 
  49.         public var _leftBar:Sprite; 
  50.         public var _rightBar:Sprite; 
  51.         //滑块滚动的速度(只有设置的方向按钮,此值才有作用) 
  52.         public var _barSpeed:Number = 5; 
  53.          
  54.          
  55.          
  56.         //滑块可以滑动的长度(有效的滑道) 
  57.         private var slideLength:Number; 
  58.         //滑块的滚动范围 
  59.         private var barDragRect:Rectangle; 
  60.         //对象的初始化坐标 
  61.         private var targetXY:Number = 0; 
  62.          
  63.         //对象滚动的方向 
  64.         private var scrollDir:int; 
  65.         private static const UP:int = 0; 
  66.         private static const DOWN:int = 1; 
  67.         private static const LEFT:int = 2; 
  68.         private static const RIGHT:int = 3; 
  69.          
  70.         public function ZScrollBar() { 
  71.              
  72.         } 
  73.          
  74.         /** 
  75.          * 初始化 
  76.          */ 
  77.         public function init():void { 
  78.             if (_stage == null)_stage = _target.stage; 
  79.             if (_direction == ZScrollBarDirection.VERTICAL) {//垂直 
  80.                 //滑块的初始位置 
  81.                 _scrollBar.x = _slideBar.x + (_slideBar.width - _scrollBar.width) / 2; 
  82.                 _scrollBar.y = _slideBar.y; 
  83.                 //有效的滑道长度 
  84.                 slideLength = _slideBar.height - _scrollBar.height; 
  85.                 //滑块的可拖动范围 
  86.                 barDragRect = new Rectangle(_slideBar.x + (_slideBar.width - _scrollBar.width) / 2, _slideBar.y, 0, slideLength); 
  87.                 // 
  88.                 targetXY = _target.y; 
  89.                  
  90.             }else if (_direction == ZScrollBarDirection.HORIZONTAL) {//水平 
  91.                 //滑块的初始位置 
  92.                 _scrollBar.x = _slideBar.x; 
  93.                 _scrollBar.y = _slideBar.y + (_slideBar.height - _scrollBar.height) / 2; 
  94.                 //有效的滑道长度 
  95.                 slideLength = _slideBar.width - _scrollBar.width; 
  96.                 //滑块的可拖动范围 
  97.                 barDragRect = new Rectangle(_slideBar.x, _slideBar.y + (_slideBar.height - _scrollBar.height) / 2, slideLength, 0); 
  98.                  
  99.                 targetXY = _target.x; 
  100.                  
  101.             }else { 
  102.                 throw new Error("direction的值设置有误,请参考ZScrollBarDirection.as"); 
  103.                 return; 
  104.             } 
  105.              
  106.             setListener(); 
  107.              
  108.         } 
  109.          
  110.         //设置监听 
  111.         private var tempBar:Sprite; 
  112.         private function setListener():void { 
  113.             //scrollBar 
  114.             _scrollBar.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); 
  115.             //dir bar 
  116.             if (_upBar != null) { 
  117.                 _upBar.addEventListener(MouseEvent.MOUSE_DOWN, dirDownHandler); 
  118.             } 
  119.             if (_downBar != null) { 
  120.                 _downBar.addEventListener(MouseEvent.MOUSE_DOWN, dirDownHandler); 
  121.             } 
  122.             if (_leftBar != null) { 
  123.                 _leftBar.addEventListener(MouseEvent.MOUSE_DOWN, dirDownHandler); 
  124.             } 
  125.             if (_rightBar != null) { 
  126.                 _rightBar.addEventListener(MouseEvent.MOUSE_DOWN, dirDownHandler); 
  127.             } 
  128.         } 
  129.         //dir bar 
  130.         private function dirDownHandler(e:MouseEvent):void { 
  131.             tempBar = e.currentTarget as Sprite; 
  132.             switch(tempBar) { 
  133.                 case _upBar: 
  134.                 scrollDir = UP; 
  135.                 break; 
  136.                 case _downBar: 
  137.                 scrollDir = DOWN; 
  138.                 break; 
  139.                 case _leftBar: 
  140.                 scrollDir = LEFT; 
  141.                 break; 
  142.                 case _rightBar: 
  143.                 scrollDir = RIGHT; 
  144.                 break; 
  145.             } 
  146.             tempBar.addEventListener(Event.ENTER_FRAME, dirEnterFrame); 
  147.             tempBar.addEventListener(MouseEvent.MOUSE_UP, dirUpHandler); 
  148.             tempBar.addEventListener(MouseEvent.MOUSE_OUT, dirUpHandler); 
  149.         } 
  150.         private function dirUpHandler(e:MouseEvent):void { 
  151.             tempBar.removeEventListener(Event.ENTER_FRAME, dirEnterFrame); 
  152.             tempBar.removeEventListener(MouseEvent.MOUSE_UP, dirUpHandler); 
  153.             tempBar.removeEventListener(MouseEvent.MOUSE_OUT, dirUpHandler); 
  154.         } 
  155.         private function dirEnterFrame(e:Event):void { 
  156.             switch(scrollDir) { 
  157.                 case UP: 
  158.                 _scrollBar.y = Math.max(_slideBar.y, _scrollBar.y - _barSpeed); 
  159.                 break; 
  160.                 case DOWN: 
  161.                 _scrollBar.y = Math.min(_slideBar.y + slideLength, _scrollBar.y + _barSpeed); 
  162.                 break; 
  163.                 case LEFT: 
  164.                 _scrollBar.x = Math.max(_slideBar.x, _scrollBar.x - _barSpeed); 
  165.                 break; 
  166.                 case RIGHT: 
  167.                 _scrollBar.x = Math.min(_slideBar.x + slideLength, _scrollBar.x + _barSpeed); 
  168.                 break; 
  169.             } 
  170.             updateTargetPos(); 
  171.         } 
  172.         //dir bar end 
  173.          
  174.         //scrollBar 
  175.         private function mouseDownHandler(e:MouseEvent):void { 
  176.             _stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 
  177.             _scrollBar.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 
  178.         } 
  179.         private function mouseMoveHandler(e:MouseEvent):void { 
  180.             _scrollBar.startDrag(false, barDragRect); 
  181.             _scrollBar.addEventListener(Event.ENTER_FRAME, scrollEnterFrameHandler); 
  182.         } 
  183.         private function mouseUpHandler(e:MouseEvent):void { 
  184.             _scrollBar.stopDrag(); 
  185.             _scrollBar.removeEventListener(Event.ENTER_FRAME, scrollEnterFrameHandler); 
  186.             _scrollBar.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 
  187.             _stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); 
  188.         } 
  189.         private function scrollEnterFrameHandler(e:Event):void { 
  190.             updateTargetPos(); 
  191.         } 
  192.         //scrollBar end 
  193.          
  194.         //update 
  195.         private var percent:Number = 0; 
  196.         private function updateTargetPos():void { 
  197.             if (_direction == ZScrollBarDirection.VERTICAL) { 
  198.                 percent = (_scrollBar.y - _slideBar.y) / slideLength; 
  199.                 //_target.y = Math.round(targetXY - _targetScrollLength * percent); 
  200.                 TweenLite.to(_target, 0.5, { y:Math.round(targetXY - _targetScrollLength * percent), ease:Back.easeOut } ); 
  201.             }else if (_direction == ZScrollBarDirection.HORIZONTAL) { 
  202.                 percent = (_scrollBar.x - _slideBar.x) / slideLength; 
  203.                 //_target.x = Math.round(targetXY - _targetScrollLength * percent); 
  204.                 TweenLite.to(_target, 0.5, { x:Math.round(targetXY - _targetScrollLength * percent), ease:Back.easeOut } ); 
  205.             } 
  206.         } 
  207.         //////////////////////////////////////////////////////// 
  208.   
  209.         /// 
  210.     } 
  211.      
  212. } 

[AS3]as3.0滚动条类很酷的很好用

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器