flash 滚动条,缓冲滚动制作。

/Files/skmtpsh/shuoming.swf

 

 
  var _txt:TextField = new TextField(); 
  
function txt() { 
  
    my_txt.visible =  
  false; 
  
    addChild(_txt); 
  
    _txt.text = ""; 
  
    _txt.appendText("Scrollbar即滚动条，对我们来说再熟悉不过了，从我们开始使用Windows操作系统那一天开始就已经知道滚动条了，它可以帮助我们在较小的区域内显示更多的内容，这也是它非常实用的主要原因。在我们创建Flash站点时，总会或多或少的用到它。下面将研究滚动条的应用我们虽然比较熟悉滚动条，几乎是每天在使用它，但它的制作看上去并不是很简单，虽然Macromedia已在Flash中提供了滚动条组件，但一方面由于通用性的原因，它的体积大小比较大，另一方面，对于设计师来讲它可能并不适合，通常情况下我们都希望能自已定义一个适合自已设计特点的滚动条。 下面我们就准备来制作一个自定义的滚动条，我做过多个版本的滚动条，经过多次的实验，发现可以将它总结为一个公式来操作，这样无论遇到什么样的滚动条，只要掌握了这个公式，滚动条的制作就自然不是问题了，下面首先分析一下滚动的原理。 滚动条---超级滚动数学公式如下: 滚动内容的位置=内容的起始位置－(滚动百分比×可滚动的区域); 为了方便说明问题，我们把它写成变量表达示如下。 content_position = top_scroll - (percent_scrolled * scrollable) 下面根据上图所示来分析一下这个公式。 首先需要把要滚动的内容放置在一个MovieClip当中，我们需要用滚动内容的位置，也就是_y来作为滚动的依据，在可视区域，实际上是在滚动内容上加入了一个遮罩，它就是我们的可视区域。 content_position = top_scroll - (percent_scrolled * scrollable) top_scroll  在上图中我们看到的两条红线的交点就是场景的原点(0,0)，那么这里的topscroll就是滚动内容的初始位置，换句话说就是可视区域的位置。如果可视区域在原点位置，那么这个topscroll就是0。 Percent_scrolled 滚动百分比，这个百分比是指在滚动条上dragger所在滚条上位置的百分比，那么如果想求出它的百分比位置是不难的。 Percent_scrolled = (dragger._y-btnup._height)/(scrollbg._height-dragger._height); Scrollable 可滚动的区域，是指除了用遮罩遮住的区域之外的区域，那么计算出它也很容易。 Scrollable = contentMain._height –maskedView._heigh 也就是使用滚动内容的高度减去遮罩的高度即可。 公式中的各个值已经计算出来了，那么也就得出了conten_position的位置，它实际上就是用滚动条的百分比换算成可滚动区域的位置的百分比，如果现在你理解了这个公式，那其他的工作就简单了，你只要会更新content_position的位置，就已经会制作自定义的滚动条了。 那么下面就开始着手制作这个滚动条"); 
  

    _txt.wordWrap =  
  true; 
  
    _txt.x = 11; 
  
    _txt.y = 32; 
  /**/ 
  
    _txt.width = 330; 
  
    _txt.height = 180; 
  
     
  var txtf:TextFormat = new TextFormat(); 
  
    txtf.bold =  
  true; 
  
    txtf.leftMargin =4; 
  
    txtf.rightMargin = 4; 
  
    txtf.size = 14; 
  
    txtf.color = 0xffffff; 
  
    _txt.setTextFormat(txtf); 
  

    _txt.mask = mask_view; 
  
    down_btn.addEventListener(MouseEvent.MOUSE_DOWN,downDOWNhandle); 
  
    down_btn.addEventListener(MouseEvent.MOUSE_UP,downUPhandle); 
  

    up_btn.addEventListener(MouseEvent.MOUSE_DOWN,upDOWNhandle); 
  
    up_btn.addEventListener(MouseEvent.MOUSE_UP,upUPhandle); 
  

} 
  

function downDOWNhandle(evt:MouseEvent):void { 
  
    _txt.scrollV++; 
  
    down_btn.addEventListener(Event.ENTER_FRAME,moveUPhandle); 
  
} 
  
// 
  /////////////////////////////////////////////////////////////// 
  
 
  function downUPhandle(evt:MouseEvent):void { 
  
    down_btn.removeEventListener(Event.ENTER_FRAME,moveUPhandle); 
  
} 
  
// 
  /////////////////////////////////////////////////////////////// 
  
 
  function moveUPhandle(evt:Event):void { 
  
    _txt.scrollV++; 
  
} 
  
// 
  /////////////////////////向下///////////////////////////////////////// 
  
// 
  /////////////////////////////////////////////////////////////// 
  
 
  function upDOWNhandle(evt:MouseEvent):void { 
  
    _txt.scrollV--; 
  
    up_btn.addEventListener(Event.ENTER_FRAME,moveDOWNhandle); 
  
} 
  
// 
  /////////////////////////////////////////////////////////////// 
  
 
  function upUPhandle(evt:MouseEvent):void { 
  
    up_btn.removeEventListener(Event.ENTER_FRAME,moveDOWNhandle); 
  
} 
  

function moveDOWNhandle(evt:Event):void { 
  
    _txt.scrollV--; 
  
} 
  
// 
  txt(); 
  
// 
  第二种 
  
 
  function scrolling() { 
  
     
  var _speed:uint =1; 
  // 
  移动速度 
  
     
  var _easingSpeed: 
  Number = 10; 
  // 
  缓动系数 
  
     
  var _newY: 
  Number; 
  // 
  新坐标 
  
     
  var _scrollHeight: 
  Number = scrollbg_mc.height; 
  
     
  
     
  // 
  可滚动区域 
  
     
  var _scrollableBar: 
  Number = _scrollHeight - dragger_btn.height; 
  
     
  var _scrollalbeContent: 
  Number = my_txt.height - mask_view.height; 
  
     
  var _topScroll: 
  Number = my_txt.y; 
  // 
  原来位置的Y 
  
     
  // 
  滑块可拖动区域 
  
     
  var _left: 
  Number = scrollbg_mc.x; 
  
     
  var _right: 
  Number = scrollbg_mc.y; 
  
     
  var _top: 
  Number = 0; 
  
     
  var _bottom: 
  Number = scrollbg_mc.height - dragger_btn.height; 
  
     
  // 
  判断 
  
     
  if(_scrollalbeContent<=0)  
  
    { 
  
        dragger_btn.visible =  
  false; 
  
        btn_up.alpha = 0.5; 
  
        btn_down.alpha = 0.5; 
  
        btn_down.enabled =  
  false; 
  
        btn_up.enabled =  
  false; 
  
         
  
         
  return; 
  
    } 
  

     
  function updateMove() 
  
    { 
  
         
  // 
  公式:(滚动条的Y位置-上边的边距-按钮的高度)/滚动区域的高度  
  
         
  var _percent: 
  Number = (dragger_btn.y - _topScroll - btn_up.height)/_scrollableBar; 
  
         
  // 
  my_txt.y = _topScroll - _percent*_scrollalbeContent; 
  
        _newY = _topScroll - _percent*_scrollalbeContent; 
  
        my_txt.addEventListener(Event.ENTER_FRAME,moveMytxt); 
  
    } 
  
     
  // 
  缓动公式 
  
     
  // 
  my_txt.addEventListener(Event.ENTER_FRAME,moveMytxt); 
  
     
  function moveMytxt(evt:Event):void 
  
    { 
  
         
  if(Math.abs(my_txt.y - _newY)<0.5) 
  
        { 
  
            my_txt.y = _newY; 
  
            my_txt.removeEventListener(Event.ENTER_FRAME,moveMytxt); 
  
             
  // 
  stage.removeEventListener(MouseEvent.MOUSE_WHEEL,scrollHandle); 
  
        } 
  
        my_txt.y += (_newY - my_txt.y)/_easingSpeed; 
  
    }         
  
     
  // 
  拖动条     
  
    dragger_btn.addEventListener(MouseEvent.MOUSE_DOWN,downGraggerHandle); 
  
    dragger_btn.addEventListener(MouseEvent.MOUSE_UP,upGraggerHandle); 
  
    stage.addEventListener(MouseEvent.MOUSE_UP,upGraggerHandle); 
  
     
  function downGraggerHandle(evt:MouseEvent):void 
  
    { 
  
        dragger_btn.startDrag( 
  false,new Rectangle(scrollbg_mc.x+1,scrollbg_mc.y,0,_bottom)); 
  
        dragger_btn.addEventListener(MouseEvent.MOUSE_MOVE,moveGraggerHandle); 
  
    } 
  
     
  function moveGraggerHandle(evt:MouseEvent):void 
  
    { 
  
        updateMove(); 
  
    } 
  
     
  function upGraggerHandle(evt:MouseEvent):void 
  
    { 
  
        dragger_btn.stopDrag(); 
  
        dragger_btn.removeEventListener(MouseEvent.MOUSE_MOVE,moveGraggerHandle); 
  
    }     
  
     
  // 
  上按钮 
  
    btn_up.addEventListener(MouseEvent.MOUSE_DOWN,_btnDownHandle); 
  
    btn_up.addEventListener(MouseEvent.MOUSE_UP,_btnUpHandle); 
  
    stage.addEventListener(MouseEvent.MOUSE_UP,_btnUpHandle); 
  
     
  function _btnDownHandle(evt:MouseEvent):void 
  
    { 
  
        btn_up.addEventListener(Event.ENTER_FRAME,draggerMoveUpHandle); 
  
    } 
  
     
  function _btnUpHandle(evt:MouseEvent):void 
  
    { 
  
        btn_up.removeEventListener(Event.ENTER_FRAME,draggerMoveUpHandle); 
  
    }         
  
     
  function draggerMoveUpHandle(evt:Event):void 
  
    { 
  
        dragger_btn.y = Math.max(scrollbg_mc.y,dragger_btn.y-_speed); 
  
        updateMove(); 
  
    } 
  
     
  // 
  /下按钮 
  
    btn_down.addEventListener(MouseEvent.MOUSE_DOWN,btnDownHandle); 
  
    btn_down.addEventListener(MouseEvent.MOUSE_UP,btnUpHandle); 
  
    stage.addEventListener(MouseEvent.MOUSE_UP,btnUpHandle); 
  
     
  function btnDownHandle(evt:MouseEvent):void 
  
    { 
  
        btn_down.addEventListener(Event.ENTER_FRAME,draggerMoveDownHandle); 
  
    } 
  
     
  function btnUpHandle(evt:MouseEvent):void 
  
    { 
  
        btn_down.removeEventListener(Event.ENTER_FRAME,draggerMoveDownHandle); 
  
    }         
  
     
  function draggerMoveDownHandle(evt:Event):void 
  
    { 
  
        dragger_btn.y = Math.min(scrollbg_mc.y+_scrollableBar,dragger_btn.y+_speed); 
  
        updateMove(); 
  
    } 
  
     
  // 
  滚轮 
  
    stage.addEventListener(MouseEvent.MOUSE_WHEEL,scrollHandle); 
  
     
  function scrollHandle(evt:MouseEvent):void 
  
    { 
  
         
  if(evt.delta<0) 
  
        { 
  
            dragger_btn.y = Math.min(scrollbg_mc.y+_scrollableBar,dragger_btn.y+Math.abs(evt.delta)); 
  
        } 
  
         
  else 
  
        { 
  
            dragger_btn.y = Math.max(scrollbg_mc.y,dragger_btn.y-Math.abs(evt.delta)); 
  
        } 
  
        updateMove(); 
  
    } 
  
     
  // 
  updateMove(); 
  
} 
  
scrolling(); 
  
// 
  txt();