| 网站首页 | 文章中心 | 电子书下载 | 矢量图库 | 视频教程 | 素材下载 | 程序代码下载 | JS代码 | 论坛 | 
常用软件类:
|杀毒安全 |联络聊天 |网络软件 |多媒体类 |系统工具 |图形图像 |系统工具 |应用软件 |行业软件
开发设计类:
|动画制作 |图像处理 |3D设计 |操作系统 |站长学院 |网络相关 |WEB设计 |数据库类 |程序开发
flash制作循环滚动图片效果
  滚动效果简析:
图片的滚动速度与鼠标所在的位置有关,鼠标越靠近(远离)某一位置,图片滚动就越慢(越快)。鼠标靠左,图片向右滚动,反之,图片向左滚动。要实现这些效果,可以先设置某一位置为中心点,鼠标与这中心点的距离与鼠标的位置决定图片的滚动速率与方向;判断当图片离开场景后如何让它再返回继续滚动,这是实现循环滚动的关键。

制作过程简述:
把图片导入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;
这也是常用的一种设置方式。

  • 上一篇文章:

  • 下一篇文章: 没有了
  • 相关文章