FLASH下载

设为首页
繁體中文
闪客留言

 首页 | FLASH动画 | FLASH专辑 | FLASH短片 | FLASH游戏 | FLASH歌曲 | FLASH教程 | Flash播放器代码
您当前的位置:flash下载 -> FLASH教程 -> AS教程 -> 文章内容  
栏目导航 相关文章
· FLASH基础 · FLASH实例教程
· FLASH技巧 · AS教程
·[组图]Flash MX一步步跟我...
·[组图]Flash遮罩特效实例-...
·[组图]Flash遮罩特效实例-...
·FLASH游戏制作精选实...
·[组图]用Flash打造迷你Win...
·[图文]Flash8 Blendmode—...
·Flash9.0播放器
·[图文]Flash 5 绘制螺旋图...
·[图文]Flash 5 精确下载制...
·[图文]用 Flash 5 编程制作...


FLASHMX2004制作缓冲滚动条效果

作者:转载  来源:[闪客]  发布时间:2006-5-22 21:24:13  编辑人:[FLASH教程]

减小字体 增大字体


一、效果预览

二、建立对象

三、填写AS

四、AS详解

第1帧:

show_scroll.onPress=function(){scroll_lock="no"}           //滚动条被按下 锁被打开  show_scroll.onRelease=function(){scroll_lock="yes"}//滚动条被放松  锁被关闭 show_scrollbg.onPress=function(){scroll_lock="no"} //滚动条空白区域被点击   锁被打开show_scrollbg.onMouseUp=function(){scroll_lock="yes"}//鼠标提升   锁被关闭//这里是有原因的 当你鼠标按下 放开的时候不是在滚动条背景 scrollbg的时候// 锁就永远不会关闭,整个图片将一直随着鼠标缓缓飘逸于你的显示器上

第2帧:

if (scroll_lock=="no") {  show_scroll._y+=(_ymouse-show_scroll._y-15)/2}show_image._y+=(-(show_image._height-300)*(show_scroll._y*300/270)/300-show_image._y)/20

详细解释:

show_scroll._y+=(_ymouse-show_scroll._y-15)/2:其中的“15”代表滚动条长度的一半,“2”代表滚动条缓冲常数,注意:这个常数不要设置太大,以免鼠标下来了,滚动条还在上面。

show_image._y+=(-(show_image._height-300)*(show_scroll._y/270)-show_image._y)/20:show_image._y+=(-(show_image._height-[滚动显示区域的高度])*(show_scroll._y/[滚动显示区域的高度-滚动条高度])-show_image._y)/[被滚动影片缓冲常数,这里不要设置太大 以免 鼠标下来了 滚动条还在上面]

下面先讲按住滚动条滚动。当没上锁的时候,也就是滚动条scroll或者背景scrollbg被按下的时候,show_scroll._y也就是滚动条的垂直位置,缓冲移动到鼠标当前位置的上15个象素,然后被滚动影片以缓冲移动到一个指定位置。

主要的地方来了: show_image._height-300 意思就是 _ymouse-show_scroll._y-[滚动条长度的一半],show_image被移动的最大范围。然后下面就是要让 show_image滚动到的位置所占总滚动位置的比例,和滚动条移动到的y占总移动范围的比例一样。所以有了 show_image+=([极限位置]-show_image._y)/20这个是缓冲的算法,向极限每次循环以当前距离的1/20靠近。

[极限位置] =-(show_image._height-300)*(show_scroll._y/270),(show_scroll._y/270)是滚动条的 _y 占滚动范围的比例

然后用 show_image._height-300 乘 (show_scroll._y/270) 就得到 show_image,占总滚动比例与滚动条占滚动总范围的比例一样。_y的值前面加"-"号是要达到滚动条向下,被滚动mc向上的效果。然后当你点击滚动条,可移动范围空白区域的时候,锁打开,得到鼠标当前位置,滚动条马上缓冲移动到这个位置,然后,相当于拖动滚动条移动一样,向下执行步骤。

图例:

源文件下载

[参加讨论]

(完)

[] [返回上一页] [打 印]
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [查看评论>>>]