用户名: 密码: 验证码: QQ--程序群:31736530 动画群:38836599
闪无忧
 
首 页 业界新闻 业界杂谈 Flash教程 Flash源码 Flash图书 Flash酷站 Flex & AIR 供求信息
   本栏目通告:   有意向写收费精品教程的朋友,请联系本站合作
当前位置 :首页>flash教程>Flash应用开发>列表

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和遮罩,如下图所示布局。


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

上一页 1 23 4 5 6 7 下一页
文章如果有错误或者缺少文件,请发邮件提交给我们
上一篇:自己-创建 Flash中.JSFL 文件,添各种命令,还可以扩展
下一篇:flash动态文本滚动条
Tags:     滚动 定义 实现 公式 超酷 function // var 代码 updateContentP
>>> 最新评论:(共有 0 位网友发表了评论)      查看所有评论
  发表评论
用户名: 新注册) 密码: 匿名评论
评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。
·本站发布内容均为客观表达作者观点,不代表闪无忧立场,请勿攻击和漫骂
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为
  教程分类
  基础操作   动画特效
  应用开发   组件学习
  As程序   动画教程
  Flash cs3   AS 3.0
  FCS/FMS教程   Loading教程
  Flash与Web   Flash教程连载
  相关文章
·Rectangle对象在flash游戏开发中
·Flash的Socket和AMF3的研究心得
·Flash的Socket和AMF3来开发web游
·制作有视角的迷宫游戏+碰撞
·项目外包, 诚要天下FLASH有能之
·flash小游戏制作:月饼消消看
·Flash Player10功能SaveBitmap直
·面向对象法制作贪吃蛇小游戏
·flash里键盘控制人物行走的另个
·flash中图形位置的半像素渲染问
  热门文章
·Flash进度条的制作详细讲解(组图)
·flash幻灯片网页效果
·Flex 3 AdvancedDataGrid的使用(第二
·全Flash动画网站实现的基础教学
·flash水影效果字
·Flash打造简单的飘雪动画视觉特效
·FLASH+XML相册(附源码)
·超酷flash光晕移动效果
·Flash旋转拖尾文字效果的制作教程
·Flash制作大雪纷飞效果动画
·flash春雷闪电效果
关于我们 - 免责声明 - 网站地图 - 商务服务 - 联系我们 - RSS地图
©CopyRight 2006-2008, 5UFlash.COM, Inc. All Rights Reserved
鲁ICP备06034971号