夏日博客

A-A+

flash缓冲滚动条制作

2015年09月17日 前端设计 暂无评论 阅读 12 views 次

在使用 flash 制作的滚动条上，如果是普通的滚动条，哪么看起来挺生硬的，如果可以加个缓冲上去，就会显得很流畅舒服了，其实这种效果不一定非要加上缓冲的效果，只不过添加上这种缓冲滚动条可能会更美观一些，体验更好一点，主要应用在整站 flash 上面，下面也仅仅是一个制作的思路，有需要的童鞋可以看一下.

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

1，滑块，实例名move_bar；

2，一个遮罩元件，用来控制显示内容区域的大小，实例名mask；

3，动态文本实例名为txt。

下面是代码，写在桢上就行了，首先定义滑块的移动范围:

  1. barUp = 67;  
  2. barDown = 204;  
  3. barPos = 446;   
  4. //然后是缓冲的程度，速度值越大缓冲越明显  
  5. speed = 6;   
  6. //然后这个是计算比例，也就是滑槽和内容的可移动长度之比  
  7. prop = (txt._height-mask._height)/(barDown-barUp);   
  8. //记录下内容的最初位置  
  9. txttxtOrigin = txt._y;   
  10. //在滑块上按下的时候开始拖动，down用来判断是否处在拖动中  
  11. move_bar.onPress = function() {  
  12. move_bar.startDrag(0, barPos, barUp, barPos, barDown);  
  13. down = 1;  
  14. };   
  15. //鼠标松开的时候停止拖动，down变为0  
  16. move_bar.onMouseUp = function() {  
  17. move_bar.stopDrag();  
  18. down = 0;  
  19. };   
  20. //这个是关键，enterFrame加上if(down)，也就是在拖动的时候不停地执行if里面的程序  
  21. this.onEnterFrame = function() {  
  22. if (down) {   
  23. //将此时滑块的y值减去滑块上限，计算出滑块向下移动的距离，乘以之前算出的比例，  
  24. 就得到了文本内容应该向上移动的距离  
  25. txtMove = (move_bar._y-barUp)*prop;   
  26. //原来的位置减去距离，得到文本内容现在应该在的位置，也就是目标位置  
  27. txt.m_y = txtOrigin-txtMove;  
  28. }   
  29. //文本内容y值的每一次变化量=（目标位置-当前位置）除以缓冲速度。注意这一句不  
  30. 能放在if循环里面，否则鼠标一松开缓冲就停止了  
  31. txt._y += (txt.m_y-txt._y)/speed;  
  32. };  
标签：

给我留言