图片循环滚动效果简析

作者佚名技术来源服务器技术浏览发布时间 2012-07-13

图片的循环滚动效果在网站上的应用已经非常泛滥，相信很多朋友已经掌握了这种效果的制作方法，但是，之所以要写下这篇教程，是因为我觉得其中的思想有些是值得借鉴的，毕竟方法是死的，而思想却是活的，这才是创作的灵魂。在本教程中，首先对图片循环效果的制作方法进行简单的讲述以及这种效果的核心代码简析，然后结合这种效果来制作一个酷酷的菜单。
Take a look at the effect
说明：这个效果是逛国外网站时下载下来的，但其完成这个效果的方法繁琐，不够简明，所以我重新写了代码。

滚动效果简析：
图片的滚动速度与鼠标所在的位置有关，鼠标越靠近（远离）某一位置，图片滚动就越慢（越快）。鼠标靠左，图片向右滚动，反之，图片向左滚动。要实现这些效果，可以先设置某一位置为中心点，鼠标与这中心点的距离与鼠标的位置决定图片的滚动速率与方向；判断当图片离开场景后如何让它再返回继续滚动，这是实现循环滚动的关键。

制作过程简述：
把图片导入Flash，建一MC，从库中把图片都拖入，排好，把这些图片都选上，Ctrl+D复制，把这两排图片首尾相接（要注意）。选中所有图片，按Q键，然后用鼠标把中心点拖到图片的最左端，接着把图片的x坐标设置为零。如果图片过长不好全选可考虑群组。把长图片从库中拖入主场景，并把其x坐标设置为0。instance name ：mc
在帧上加代码：
MovieClip.prototype.movie = function (){
this._x-=(_root._xmouse-375)*.1;
if(this._x>0){
this._x=-1079;
}
if(this._x<-1079){
this._x=0;
}
}
mc.onEnterFrame =movie;
如果你对prototype不熟悉，建议你看看help文件或者看看这方面的有关资料(下一个教程我将用这种方法进行有关代码的设置，所以让你熟悉一下）。你也可以直接在图片（MC）上加代码：
/*-------------------------------------------------------------------------------------------------
onClipEvent (load) {
xcenter=375;
//设置中心点位置，(这个影片size:750x500)这个你可以根据具体情况而变。
speed=1/10;
}
onClipEvent (enterFrame) {
var distance=_root._xmouse-xcenter;
//鼠标与中心点的距离
_x-=(distance*speed);
//滚动的速度设置，很显然它与鼠标的的位置有关，当distance不变时，图片的滚动速度是不变的
//这方面的知识请参看我的上一篇教程。
//如果改成_x+=(distance*speed); 会是什么效果呢？你可以自己测试一下。
----------------------------------------------------------------------------------------*\
//这是实现循环滚动的关键。1079这个数字不是随便写上去的，具体请看图解。
　
以上代码，个人觉得是实现这种效果的最简单代码，基本上可以当公式使用，在使用过程中，根据自己的具体情况，稍微改一下数据就可以。
看到这里，我想，如果你只想让图片往一方向（x or y)自行滚动，那么现在完成这个效果对你来说应该是水到渠成的事。
为了整体效果更好一些，这里加了一个效果：当鼠标放在图片上时，图片有_alpha的变化，其代码为：
/*-------------------------------------------------------------------------------------------------
MovieClip.prototype.blend = function (obj,faktor){
if (obj.hitTest(_root._xmouse, _root._ymouse, true)) {
obj._alpha = obj._alpha+(100-obj._alpha)/faktor;
}else{
obj._alpha = obj._alpha+(50-obj._alpha)/faktor;
}
}
/*-------------------------------------------------------------------------------------------------
这代码加在帧上，然后在MC中设置该MC秉承该类的属性即可。另外，如果你看了我上一篇教程，那么对这一段代码应该不会茫然：
obj._alpha = obj._alpha+(100-obj._alpha)/faktor;
这也是常用的一种设置方式。
其实完成这种_alpha的变化效果，你也可以采用其它的方式，比如直接用组件，但我希望你能从这种写法中学到一些东西，我想你也希望如此，不是吗？
至此，教程的上半部分算是完成了，其它的旁枝末节这里不再赘述，请自行参看原文件。关键词：

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 由浅入深学FLASH遮罩（Mask）下一篇: Flash MX实战精选：放大镜效果

关于图片循环滚动效果简析的所有评论

随机推荐