flash超酷滚动公式实现自定义滚动条 |
| [来源:闪客无忧 | 作者:佚名 | 时间:2008-03-29 | 点击: | 收藏本文 【大 中 小】] |
|
down_btn.onPress = function() { onEnterFrame = function() { my_txt.scroll--; }; }; up_btn.onPress = function() { onEnterFrame = function() { my_txt.scroll++; }; };
|
| |
再深入一点,如果需要文本能够支持鼠标的滚轮操作,可你查看webstudio.com.cn上的教程,鼠标滚轮在Flash 7中的应用。
http://www.webstudio.com.cn/tutorial/show.php?id=18
2.超级滚动公式自定义滚动条 我们虽然比较熟悉滚动条,几乎是每天在使用它,但它的制作看上去并不是很简单,虽然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的位置,就已经会制作自定义的滚动条了。 那么下面就开始着手制作这个滚动条。 范例13 演示文件
范例13源文件 booksource/第8章/scrollbar/scrollbar.fla
(1)新建一个Flash文档。将其命名为scrollbar.fla。 (2)在主场景中分别创建上下按钮、滚动条背景、滚动内容的MovieClip和遮罩,如下图所示布局。
在主场景中层的布局如下。
|