艺虎动画 > Flash带缓冲的滚动条

Flash带缓冲的滚动条

翼虎动漫   2009-10-22

 

 

 

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

  总共只有两个元件和一个动态文本框(为了能使用遮罩把字体都嵌入了):

  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),这样看上去效果流畅。代码考虑了易用性,使用在其他地方的时候,只需要改一下滑块的范围,设好各个元件的实例名就可以了。