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

　　本文作者:egoldy

　　文章出处:http://www.webstuido.com.cn

　　此教程是webstudio的预计将在11月底出版的新书<<Flash网站建设技术精粹>>第八章最后一节中的内容,以此用作示范。本文出现的演示文件，源文件均在此文件里，

　　Scrollbar即滚动条，对我们来说再熟悉不过了，从我们开始使用Windows操作系统那一天开始就已经知道滚动条了，它可以帮助我们在较小的区域内显示更多的内容，这也是它非常实用的主要原因。在我们创建Flash站点时，总会或多或少的用到它。下面将研究滚动条的应用。

　　1．文本滚动

　　首先来看一个简单的文本滚动，最简单的滚动就是我们常见的上下箭头，它同样可以达到滚动的效果，如下图所示。

　　当然你可以任意对它的位置进行变换，它的应用是比较简单的，只是TextField.scroll方法的应用而已。

　　范例11 演示文件

　　（1）重新创建好了一个FLA文档，将它存为scroll_external_text.fla。

　　（2）准备两个按钮，例如一个向上和一个向下的MovieClip，这里准备使用的是MovieClip，当然你可以使用按钮。将它们放在第一层上，摆好位置，并在属性面板上分别为其命名为down_btn和up_btn。

　　（3）选中场景中上的第1帧，按下F9键，打开ActionScript面板，在其中写入如下脚本。

　　代码:

//载入外部文本
var my_lv = new LoadVars();
my_lv.onLoad　= function(success){
　　if(success){
　　　　my_txt.text = this.mytext;
　　　　my_txt.setTextFormat(my_fmt);
　　}else{
　　　　trace("error load the external files");
　　}
}
my_lv.load("hello.txt");
//创建各式实例对象
var my_fmt = new TextFormat();
my_fmt.bullet = true;
my_fmt.bold = true;
my_fmt.color ="0x669933";
//创建动态文本并指定文本格式
this.createTextField("my_txt",this.getNextHighestDepth(),10,10,530,120);
my_txt.wordWrap = true;
my_txt.multiline = true;
my_txt.border = true;
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//滚动
//向上滚动
down_btn.onRelease = function(){
　　my_txt.scroll--;
}
//向下滚动
up_btn.onRelease = function(){
　　my_txt.scroll++;
}
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

　　前面的一大段代码都是介绍过的内容，最后一段是应用的滚动方式，如my_txt.scroll--和my_txt.scroll++，这两句中的scroll是TextField的滚动方法，至于++和--实际上相当于my_txt.scroll =my_txt.scroll+1和my_txt.scroll = my_txt.scroll-1。

　　（4）测试影片，点击按钮MovieClip，文本就可以上下滚动了。

　　（5）可能你还希望两个滚动按钮能够在被按下去不放时一直让内容不停地滚动，那么只要找一种方法让scroll不断地循环执行就可以了，首选当然是onEnterFrame。

　　只需要将滚动代码改写如下即可。

　　范例12 演示文件

　　2．超级滚动公式自定义滚动条

　　我们虽然比较熟悉滚动条，几乎是每天在使用它，但它的制作看上去并不是很简单，虽然Macromedia已在Flash中提供了滚动条组件，但一方面由于通用性的原因，它的体积大小比较大，另一方面，对于师来讲它可能并不适合，通常情况下我们都希望能自已定义一个适合自已设计特点的滚动条。

　　下面我们就准备来制作一个自定义的滚动条，我做过多个版本的滚动条，经过多次的实验，发现可以将它总结为一个公式来操作，这样无论遇到什么样的滚动条，只要掌握了这个公式，滚动条的制作就自然不是问题了，下面首先分析一下滚动的原理。

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

　　滚动内容的位置=内容的起始位置－(滚动百分比×可滚动的区域);

　　为了方便说明问题，我们把它写成变量表达示如下。