HOME > Read Post

滚动公式实现自定义滚动条

Category : Web Devolop / Tags : / Date : 2008.10.27 / 1,893 views

滚动条—超级滚动数学公式如下:

滚动内容的位置=内容的起始位置－(滚动百分比×可滚动的区域);
为了方便说明问题，我们把它写成变量表达示如下。
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的位置，就已经会制作自定义的滚动条了。
那么下面就开始着手制作这个滚动条。
演示文件

（1）新建一个Flash文档。将其命名为scrollbar.fla。
（2）在主场景中分别创建上下按钮、滚动条背景、滚动内容的MovieClip和遮罩，如下图所示布局。


在主场景中层的布局如下。


（3）选中actionscript层的第1帧，在这个布局上添写代码，依照公式的原理，你可以试一下在了解了公式的情况下是否可以独立完成它。
代码如下:

function scrolling (){
    //滚动速度
    var moveSpeed = 1;
    var scrollHeight = scrollbg._height;
    //可滚动的区域
    var scrollable = contentMain._height - maskedView._height;
    var top_scroll = contentMain._y;
    //滑块可拖动的区域
    var left = scrollbg._x;
    var top = scrollbg._y;
    var right = scrollbg._x;
    var bottom = scrollbg._y+scrollbg._height-dragger._height;
    //在开始前检测滚动是否可行，如果内容高度不足
    则不执行滚动，隐藏dragger等，并返回
    if(scrollable <0){
        dragger._visible =false;
        btnup._alpha =50;
        btndown._alpha =50;
        scrollbg._alpha=50;
        btnup.enabled = false;
        btndown.enabled = false;
        return;
    }
    //更新滚动内容的位置，公式的应用
    function updateContentPos(){
        var percent_scrolled =(dragger._y-btnup._height)/(scrollHeight-dragger._height);
        contentMain._y = Math.round(top_scroll -(scrollable * percent_scrolled));
    }
    //拖动滑块
    dragger.onPress = function(){
        startDrag(this,false,left,top,right,bottom);
        this.onMouseMove = function(){
            updateContentPos();
        }
    }
    dragger.onRelease = function(){
        stopDrag();
        delete this.onEnterFrame;
    }
    btnup.onPress = function(){
        this.onEnterFrame = function(){
            //技巧
            dragger._y = Math.max(top,dragger._y-moveSpeed);
            updateContentPos();
        }
    }
    btnup.onRelease = function(){
        delete this.onEnterFrame;
    }
    btndown.onPress = function(){
        this.onEnterFrame = function(){
            dragger._y = Math.min(bottom,dragger._y+moveSpeed);
            updateContentPos();
        }
    }
    btndown.onRelease = function(){
        delete this.onEnterFrame;
    }
    updateContentPos();
}
//调用函数
scrolling();

这里面最为关键的是公式的应用，也就是updateContentPos()。整段代码在做的事情无非就是不断地更新updateContentPos()。

«
»

Comments

One Response to “滚动公式实现自定义滚动条”

Leave a Reply