FLASH下载

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

首页 | FLASH动画 | FLASH专辑 | FLASH短片 | FLASH游戏 | FLASH歌曲 | FLASH教程 | Flash播放器代码
您当前的位置:flash下载 -> FLASH教程 -> AS教程 -> 文章内容  
栏目导航 相关文章
· FLASH基础 · FLASH实例教程
· FLASH技巧 · AS教程


可动态添加图片的循环滚动效果

作者:转载  来源:[闪客]  发布时间:2007-3-17 1:15:50  编辑人:[FLASH教程]

减小字体 增大字体


  网页上经常会用到无限循环滚动的图片这种效果,在flash当中来做的话,常规的方法是图片放在一个MC或graphic,再把要展示的多幅图片依次相邻排好(假设它们总长为N,然后按同样的顺序再放一组,和前面的首尾相接),然后用AS移动它并且判断当它移过的距离大于等于N时,就将坐标向相反方向移动N个像素的距离。具体见源文件marquee_a.zip

  但是这样做出来的源文件用过一次之后基本就没用了,下次再用到的时候得重新做,而且一旦做好,想改变一下图片的数目就不是那么方便,有没有解决的办法呢,有,我们按照上面的思路写如下AS(源文件marquee_b.zip):

//图片总数目,为提高速度,图片按1.jpg,2.jpg这样的规则依次命名,大小100*40_global.i=6;//100是图片的宽度,leng是i张图片的总长度_global.leng = i*100;//产生一个总的MC snow_root.createEmptyMovieClip("snow", 0);//snow内部的MC_root.snow.createEmptyMovieClip("a", 0);_root.snow.createEmptyMovieClip("b", 1);//排列a和b_root.snow.a._x = 0;_root.snow.b._x = _roob.snow.a._x+leng;//create and load jpg//在mc a和b内部产生数目为i的空MC并依次加载图片进去for (j=1; j<=i; j++) {    _root.snow.a.createEmptyMovieClip("mc"+j, j);    _root.snow.b.createEmptyMovieClip("mc"+j, j);    _root.snow.a["mc"+j].loadMovie("image/"+j+".jpg");    _root.snow.b["mc"+j].loadMovie("image/"+j+".jpg");//设置MC的坐标,让它们依次排开    _root.snow.a["mc"+j]._x = (j-1)*100;    _root.snow.b["mc"+j]._x = (j-1)*100;}//let me move_root.snow.onEnterFrame = function() {//向左移动总的MC snow    _root.snow._x -= 1;//当snow向左移动的距离大于等于leng时,将它向右移动leng个像素的长度    if ((-_root.snow._x)>=leng) {        _root.snow._x += leng;    }}

  在源文件marquee_a.fla中,要想实现在某个图片上点击,跳转到相应的地址非常简单,就不多说了,但上面这种因为是通过AS生成的,且使用了循环语句,再想添加同样的效果似乎不那么容易,真的没办法了吗?我靠我不信,经过喝饮料散步等准备工作之后,得到灵感,放弃了添加复杂的判断语句的办法,下面我们来看代码:

margin = _root._xmouse-_root.snow._x;if(margin>=i*100){    margin-=leng;}id = Math.ceil(margin/100);this.onMouseDown = function() {    getURL("http://localhost/url.php?id="+id, "_blank");};

  上述代码的意思就是通过判断点击时鼠标和MC snow的x坐标的差来计算出鼠标现在空间点击在了哪个图片上,然后就搞定了。当然,在实际运用的时候,可以修饰一下,比如鼠标下面放一个按钮,这样当鼠标移动到动画上方时指针会变形,给访客以提示,好让他们知道是可以点击的。

  其实这个例子最妙的用处还不是在这儿,试着再进一步想,假设我们把实现这个效果的图片放在一个单独的image目录下,再用后台程序获取里面的图片数目传递给变量i,就可以任意改变image目录下的图片而不用再去做新的动画了。

效果演示:

(完)

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