Flash制作带缓冲的滚动条

效果如下:

点击这里下载源文件

  普通的滚动条在内容移动的时候看上去很生硬,怎么让它看上去舒服一点呢?加上缓冲!这样看上去会非常流畅舒服。 

  总共只有两个元件和一个动态文本框(为了能使用遮罩把字体都嵌入了):
  1,滑块,实例名move_bar;
  2,一个遮罩元件,用来控制显示内容区域的大小,实例名mask;
  3,动态文本实例名为txt。
  下面是代码,写在桢上就行了。

//首先定义滑块的移动范围 
barUp = 67; 
barDown = 204; 
barPos = 446;  
//然后是缓冲的程度,速度值越大缓冲越明显 
speed = 6; 
//然后这个是计算比例,也就是滑槽和内容的可移动长度之比 
prop = (txt._height-mask._height)/(barDown-barUp); 
//记录下内容的最初位置 
txtOrigin = txt._y; 
//在滑块上按下的时候开始拖动,down用来判断是否处在拖动中 
move_bar.onPress = function() { 
 move_bar.startDrag(0, barPos, barUp, barPos, barDown); 
 down = 1; 
}; 
//鼠标松开的时候停止拖动,down变为0 
move_bar.onMouseUp = function() { 
 move_bar.stopDrag(); 
 down = 0; 
}; 
//这个是关键,enterFrame加上if(down),也就是在拖动的时候不停地执行if里面的程序 
this.onEnterFrame = function() { 
 if (down) { 
  //将此时滑块的y值减去滑块上限,计算出滑块向下移动的距离,乘以之前算出的比例,就得到了文本内容应该向上移动的距离 
  txtMove = (move_bar._y-barUp)*prop; 
//原来的位置减去距离,得到文本内容现在应该在的位置,也就是目标位置 
  txt.m_y = txtOrigin-txtMove; 
 } 
//文本内容y值的每一次变化量=(目标位置-当前位置)除以缓冲速度。注意这一句不能放在if循环里面,否则鼠标一松开缓冲就停止了 
 txt._y += (txt.m_y-txt._y)/speed; 
};   OK, 测试一下,别忘记把桢数设高一点(我用的是48),这样看上去效果流畅。代码考虑了易用性,使用在其他地方的时候,只需要改一下滑块的范围,设好各个元件的实例名就可以了。

时间: 2024-10-10 15:38:02

Flash制作带缓冲的滚动条的相关文章

带缓冲的滚动条-教程

普通的滚动条在内容移动的时候看上去很生硬,怎么让它看上去舒服一点呢?加上缓冲!这样看上去会非常流畅舒服. 总共只有两个元件和一个动态文本框(为了能使用遮罩把字体都嵌入了): 1,滑块,实例名move_bar: 2,一个遮罩元件,用来控制显示内容区域的大小,实例名mask: 3,动态文本实例名为txt. 下面是代码,写在桢上就行了 首先定义滑块的移动范围 barUp = 67; barDown = 204; barPos = 446; //然后是缓冲的程度,速度值越大缓冲越明显 speed = 6

Flash制作简单的缓冲菜单

 [步骤] 第一步:制作几个按钮,放在主场景中,实例名分别为_btn0._btn1._btn2._btn3._btn4._btn5._btn6 第二步:创建影片剪辑,在里面画一个小三角形,在三角形旁边拉一个动态文本,实例名为my_txt:把该影片剪辑放在主场景中,实例名为zhisi_mc 第三步:把按钮做些动画效果 第四步:在最后一帧上写如下代码:   stop(); zhisi_mc._x=_btn0._x; varmy_array:Array=newArray("首页","

如何利用FLASH制作留言板

如何利用FLASH制作留言板? 解决思路 我们可以通过FLASH  MX中自带的组建来实现一个简单的留言板实例.使用FLASH中的组件非常方便.本例只是涉及到了制作,留言板在具体的应用中还有很多FLASH以外的知识,在这里就不向大家介绍了. 具体步骤 1,  运行FLASH MX,文档属性默认. 2,  导入一幅壁纸图片留言板的背景.朋友们也可以自己设置FLASH文档背景或者建立一个图层作为背景.如图1所示. 图1    导入背景图片 3,  新建一个图层,利用文本工具,输入静态文本.并设置它们

用Flash制作个性化的QQ表情

现在大多数聊天工具都可以发送一些动态表情,这些生动有趣的表情本质就是一个小的GIF动画,使用动画制作软件就可以轻松制作出个性化表情,这绝对是获取MM芳心的一大绝招!本文将以Flash Mx 2004为例,向大家介绍一下如何制作个性化的QQ表情.相信通过本文的学习,不但可以制作出一枚独一无二的表情,还能够在轻松地阅读中掌握Flash动画制作基础. 小提示 QQ表情动画的格式是GIF(绝大多数聊天软件的表情动画都是此格式),所以将Flash制作的动画输出为Gif格式即可作为QQ表情. 第一步:启动F

用FLASH制作课件的优势和缺陷

    Flash的前身是Future Splash公司推出的一个矢量动画插件,Macromedia公司收购了Future Splash以后将其改为独立的Flash软件,到现在最新的Flash50,可以说Flash已经成为交互式矢量技术的标准.未来网页制作的一大主流.我在用Flash制作课件的实践中感到,用Flash来制作课件主要有以下几方面的优势: "身材"纤细 Flash采用的是流行的矢量技术,用它创作的作品,不但交互功能强大,动画效果丰富多彩,无级放大的矢量图永远不会产生令人讨

Excel怎么制作带控件的动态图表

  Excel怎么制作带控件的动态图表          先看效果: 图表中始终显示5天的PM2.5数据,当调整滚动条时,图表会自动更新结果. 首先是数据源,为某地一个时期的PM2.5数据. 步骤一 先插入一个滚动条控件. 右键单击控件,设置控件格式. 最小值选择1 最大值可以根据数据情况来决定 单元格链接选择一个空白单元格,如D6. 步骤二 按Ctrl+F3,打开名称管理器,新建两个自定义名称: 日期 =OFFSET(Sheet1!$A$1,Sheet1!$D$6,,5) 数据 =OFFSET

随屏幕滚动的带缓冲效果的右下角广告

一个随屏幕自动滚动的右下角广告代码,这里请注意几个参数: id 你要滚动的内容的id r 放在左边还是右边 默认是右边 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 f 1表示固定 不写或者0表示滚动(ie6固定无效) 是不是很实用呢,这个版本经过作者二次修正,兼容性还不错 . Java代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

js实现随屏幕滚动的带缓冲效果的右下角广告代码_javascript技巧

本文实例讲述了js实现随屏幕滚动的带缓冲效果的右下角广告代码.分享给大家供大家参考.具体如下: 一个随屏幕自动滚动的右下角广告代码,这里请注意几个参数: id 你要滚动的内容的id r 放在左边还是右边 默认是右边 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 f 1表示固定 不写或者0表示滚动(ie6固定无效) 是不是很实用呢,这个版本经过作者二次修正,兼容性还不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-

JavaScript实现带缓冲效果的随屏滚动漂浮广告代码_javascript技巧

本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html