打印本文 打印本文 关闭窗口 关闭窗口
平滑滚动原理及实例
作者:武汉SEO闵涛  文章来源:敏韬网  点击数907  更新时间:2004/3/14  文章录入:mintao  责任编辑:mintao

本文由FK授权蓝色理想转载
访问FK | 下载源文件(129K)

ShowS 平滑上下滚动条(版权规flashk.org所有):

技术资料

如何使用
电影剪辑scrollMC的onLoad事件:
 showHeight = 350;
 myHeight = 350;
 speed = 13;
 targetMovie = "show.testMC";

showHeight用来指定绑定的MC的显示高度,myHeight指定滚动条本身的高度。speed是滑动的速度,其值越大,滑动越慢。targetMovie指定绑定的MC的路径(相对)。

技术内幕
主要的ActionScript集中在一个空的电影剪辑中:onClipEvent (enterFrame) {
    mcMoved();
}
onClipEvent (load) {
    a = eval("_parent._parent."+_parent.targetMovie);
    function mcMoved() {
        whereY = -(a._height-_parent.showHeight)*(_parent.dragMC._y/(_parent.myHeight-38));
        var tempK = whereY-a._y;
        if (Math.abs(tempK)>1) {
            a._y += tempK/_parent.speed;
            nowY = _parent.dragMC._y;
        }
    }
}
a = eval("_parent._parent."+_parent.targetMovie); 用来将指定绑定的MC位置。以后就可以使用a._x、a._alpha来访问这个电影剪辑了,与此相类似的技术还有_parent["myMC"]。

whereY = -(a._height-_parent.showHeight)*(_parent.dragMC._y/(_parent.myHeight-38));主要用来计算绑定的MC应该滚动到的位置。

var tempK = whereY-a._y;
if (Math.abs(tempK)>1) {
    a._y += tempK/_parent.speed;
    nowY = _parent.dragMC._y;
}
这个比较重要,直接关系到对CPU的占用率。首先,if (Math.abs(tempK)>1)判断当前要滚动到的位置是否离当前位置有一个像素的差值。Math.abs()是计算绝对值的函数。如果不是,即已经滚动到了应该到达的位置,则不进行帧的重绘。(Flash绘制一个帧的图像要耗相当的CPU,事实上,CPU的大部份使用都花在显示上面。AS的执行只要很少的CPU,所以,进行必要的判断,去掉不必要的重新绘制。可以有效地降低CPU的使用率。至少在鼠标没有重新进行交互时可以很好地降低CPU的使用率)。如果其值大于1,则将绑定的MC位置重新计算。

a._y += tempK/_parent.speed;是一个很经常用的滑动公式,其实真正的公式是这样的:a._y += (whereY-a._y)/_parent.speed 这里只是在上一步进行了简化。

function goArea(a) {
        dragMC._y = (showHeight-38)*a;
}

函数对应三个按钮“滚动到1/3、滚动到1/2、滚动到2/3、”其原理想想应该不难明白。

本站相关文章:  运动缓冲效果解晰

打印本文 打印本文 关闭窗口 关闭窗口