连续滚动的图片效果(扩展此效果,大家都来指点一下)

steamlin

思路是,把超出视觉范围的图片追加到最后一张图片的未尾或是在Stage的某个位置.只要能跟最后一张图片的位置后面就了.
for (i=1; i<7; i++) {
        this.createEmptyMovieClip("mc"+i, i);//创建一个空白影片(其实是是有I个,这样每个MC的运动才不会影响到其它MC的运动.)
        this["mc"+i]._x = 10;
        this["mc"+i]._y = (i-1)*100+20;//设置其X,Y的位置
        this["mc"+i].attachMovie("m"+i, "mc"+i, 7*i);//加载内部MC
        this["mc"+i].onEnterFrame = function() {//加个enterframe事件               
                                     this._y = this._y-2;//让每个加载有MC的影片都运动起来
                if (this._y<-128) {//判断影片的位置是否到达了指定的位置,如果到达了,就执行以下的语句.
                        this._y = Stage.height+80;//设置过了界限的MC的Y位置为stage高度
                }
        };
}

其实这个方法还可以用于屏幕的字条滚动的效果.大家可以多多发挥啊.
俺好久都没来发贴了.今天偷了个闲了.

[ 本帖最后由 steamlin 于 2006-9-13 09:43 编辑 ]

8765004

加个鼠标划过事件鼠标移出事件实现悬停效果更库

HBrO

传说中的卷屏?

steamlin

其实呢.加版主的效果是很容易的.我加上去,当然不难了.当是给新手想下如何加才行的啊.
只是想抛砖引玉作用.

tiger_0309

我有这么个设想，把这个效果做成flash+xml的相册，左边的小图形换成图片的缩略图，从库里加载，右边的空地方加载该小图的大图，通过xml文件从外部调用，再加些弹性的效果，我想不比最近网上流行的那些效果差吧，我这就下去做，楼主的这个效果确实给人能好多启发，顶一下

steamlin

其实各位可以在这个基础上再加以扩展.这才是学习的好方法.
现在我也再扩展一下这段代码的应用性些.
首先上面的那段代码只能用于图片一样高的才行.如果图片的高度不一样的话.那图片的的滚动就会出现问题了.
而我下面的那些代码呢也有一定的局限性,
要把图片大的跟大的一起排列在一起.小的跟小的排在一起.(明?)
var sheight:Number;//前面一类图片的大小,其实这里就是记录前十个小图片的总长度
var flag:Boolean;
var jianxi:Number;
var speed:Number;
var picNum:Number;
var totalHeight:Number;
//图片的总长度;可在总长度总要保持不变
flag = false;
//这个变量是用于标识是不是己经把全部图片加载完
jianxi = 20;
//每张图片的间隔的高度
speed = 10;
//图片滚动速度
picNum = 20;
//图片总数
for (i=1; i<21; i++) {
        this.createEmptyMovieClip("mc"+i, i);
        this["mc"+i].attachMovie("pic"+i, "picmc"+i, i);
        this["mc"+i]._x = 0;
        this["mc"+i].num = i;
        if (i<11) {//前十张图片与后十张的图片的高度不一样的.
                this["mc"+i]._y = (i-1)*(this["mc"+i]["picmc"+i]._height+jianxi);
                                            //设置图片的Y位置
                sheight = (i-1)*(this["mc"+i]["picmc"+i]._height+jianxi);
                                           //其实这里就是记录着第十张图片的Y位置
        } else {
                this["mc"+i]._y = sheight+(i-11)*(this["mc"+i]["picmc"+i]._height+jianxi);
                                          //设置图片的Y位置
        }
        if (i == picNum) {
                                           //当加载最后一张图片时
                flag = true;
                                          //把这个标识符设置为TRUE,就意味着,超过视觉范围的图片可以接在后面了
                totalHeight = this["mc"+i]._y+this["mc"+i]["picmc"+i]._height;
                                          //这是全部图片和间隙的长度总和.每张超过视觉范围的图片都会被加在这个后面.            
        }
               //每个被加载进来的pic中都有图片,图片上面放着一个透明按钮
        this["mc"+i]["picmc"+i].btn.useHandCursor = false;
        this["mc"+i]["picmc"+i].btn.onRollOver = function() {
                speed = 0;
                                          //当鼠标经过时,让速度为0
        };
        this["mc"+i]["picmc"+i].btn.onRollOut = function() {
                speed = 10;//当鼠标经过时,让速度为10
        };
        this["mc"+i]["picmc"+i].btn.onRelease = function() {
                                           //这是当鼠标点击图片上的按钮时触发的事件
                                          //loadBigPic,是我在主场景中定义的一个加载大图片的一个函数.这里就不贴出来了.
                this._parent._parent._parent._parent.loadBigPic(this._parent._parent.num);
        };
        this["mc"+i].onEnterFrame = function() {
                this._y = this._y-speed;//让图片滚动起来
                if (this._y<(-this["picmc"+this.num]._height)) {
                                             //当图片的运动到场景外了.就让这张图片接在全部图片长度的最后面.       
                                                //(不知道大家能不能明白我的这句话.我也表达不清楚了.)       
                                                          this._y = totalHeight-this._height+jianxi;
                       
                }
        };
}

----------------------------------------------------------------------
第二阶段的代码就是这样了.明天会加上加载大图片.
再加上loading.
如果哪位都可以在此扩展的啊.应用性强一点.
就像楼上说的.用XML来记录图片的外部信息.都是可以的.希望大家多想想.然后写出来.把思路写上来.分享一下.
*_*

wujian176

真是好东西，，加油，，

steamlin

没有人来．．．
伤心掉泪了．

8765004

一般大家在实际的网站应用和产品展示中比较经常用的还是横板的多,steamlin 在直板的滚动方面做了有益的探索,很有参考价值,至以开发成相册,没有用XML,直接用:rollOver{this.onEnterFrame=....//显示放大的图片},rollOut{delete this.onEnterFrame//删除已经图片}就可

tiger_0309

我做了一个相册，这个连续滚动的效果到是成了，只是我加载外面的图片时出了问题，只能加载一张，麻烦给看一下

steamlin

我跟你讲个小例子.你自己理解一下啊.
for(i=0;i<5;i++){
        this.createEmptyMovieClip("mc"+i, i);
        this["mc"+i].attachMovie("m"+i, "mc"+i, 7*i);
                     this["mc"+i].onRelease=function(){
                         trace(i)
//当你运行时.都会是4的.为什么会这样呢.这些代码中.的for是先执行.创建了影片MC.也让影片也了事件.当你要触发这个影片事件时.for语句都己执行完了.那就是I的值都是到了最后的一个极限了.也就是4了.那怎么当你点击时怎么也不可能是点哪个就能trace出它的i的值来啊.所以要用一个影片变量来记录自己的编号.这样才能点击哪个就取出自己的编号来trace.这样就能达到效果了.不知道明白与否.如果你还不明白.我再跟你说吧.
                         }
}

tiger_0309

ok了，谢谢你，我加了这么一句就好了this["mc+i].no=i;然后loadPic(this.no);

fanye123

需要贷款 信用贷款 专业贷款 免抵押、免担保！
    中安薪贷，随薪可贷！免担保、免抵押、申请简便、当日取现、传真申请、电话审核、还款渠道多、轻松便利、贷款额度高、月供低！！
    中安薪贷！月息仅为1.3%、每月管理费1%，合计2.3%（两分三），即贷款一千元，月利息费用23元，为急需资金周转的顾客提供最大便利！最大贷款额度达到10万元！
申请条件：
    适用对象：办理人在深圳本地。上班族、私营业主
    身份证明：年满二十岁，有效身份证
    收入证明：近四个月银行存折/清单或徼税凭证
    住址证明：水、电、燃气、电话或者其他徼费清单
准备文件：
    填写申请书、身份证、收入证明、住址证明
    申请审批后，请携带上述原件来店办理。
还款方式：
    约定帐户委托扣款、转帐到指定帐户、来店支付现金。
联系电话：范业国 13714189096（24小时）深圳华强北
http://fanny.blog.sznews.com/
http://hexun.com/fany123/messageboard.html

steamlin

原帖由 tiger_0309 于 2006-9-14 09:59 发表
ok了，谢谢你，我加了这么一句就好了this.no=i;然后loadPic(this.no);

哈哈..
对极了....
还有什么功能可加上去的啊.
要贴出来分享一下

tiger_0309

这是我又做的一个相册，本来是点小图，出现大图，因为用了好多图，所以对不上号，也没在订正，也用了这个连续滚动，不过还有个小毛病，就是点上几张后好象要跳一下

steamlin

挺不错的啊.那样弹出大图片啊.
有什么问题吗?

tiger_0309

那是你没有全部点，一张接一张的点，点到其中一张什么也不显示，不知道是刚好一个循环完了还是怎么回事

tiger_0309

问题已经解决，原来循环到场景2的最后一帧要停一下，我在最后一帧上有加了一句gotoAndPlay(1),但是又有了新问题，你要是在同一张上点，每点一次就出现不同的图片，我把源文件传上来

tiger_0309

原文件

ttbbtt

很好啊 只是楼上的还有一点问题,点小图片 出来的照片不一定是原来 点一下 可以变幻的啊 这样不好!还是改一下哪,我好喜欢

steamlin

怎么老是出现同样的错误呢?
        this["mc"+i].no = i+1;       
                     this["mc"+i].onRelease = function() {
                f = this.no;
                gotoAndStop("场景2", f);
        };

tiger_0309

原帖由 steamlin 于 2006-9-15 09:37 发表
怎么老是出现同样的错误呢?
        this.no = i+1;       
                     this.onRelease = function() {
                f = this.no;
                gotoAndStop("场景2", f);
        };

真苯，该死，:L

tiger_0309

我改过来了，我估计以后不会犯这样的错误了，把改过后的文件传上来，喜欢的可以下

steamlin

看了你的那个大图片上的代码.我觉得你把一段代码用了十次.
这样浪费资源耶.
其实你可以把你大图片上的代码整理一下.提高代码的利用率啊.
这样的对整个应用程序有很大的用处啊.
个人意见!*_*

tiger_0309

原帖由 steamlin 于 2006-9-15 10:15 发表
看了你的那个大图片上的代码.我觉得你把一段代码用了十次.
这样浪费资源耶.
其实你可以把你大图片上的代码整理一下.提高代码的利用率啊.
这样的对整个应用程序有很大的用处啊.
个人意见!*_*

把它写成一个函数，写在帧里，然后每个影片剪辑进入帧后调用一次？试一试看，我对构造函数不大熟练

steamlin

其实你可以把调用大图写成一个函数.
把大图片的效果语句也放到里面.
那么你根本就可以不用到两个场景了.
呵...

ttbbtt

谢谢你们, 这么快就改好了 不错 不错 ,,,,只是还有一个问题 怎么最后一张和开始第一张的小图片之间的距离还有一点问题的!

这下不会流下孤独的眼泪了啊,,,,好多人喜欢它哟!

steamlin

原帖由 ttbbtt 于 2006-9-15 11:20 发表
只是还有一个问题 怎么最后一张和开始第一张的小图片之间的距离还有一点问题的!

这个问题.你自己得好好研究一下.
一楼那里都有写注释了.
别人改好了.但你自己不一定能学到啊..呵呵

ttbbtt

if (this._x<-128) {
                        //判断影片的位置是否到达了指定的位置,如果到达了,就执行以下的语句.
                        this._x = Stage.width+80;
                        //设置过了界限的MC的Y位置为stage高度
                }
        };

小图片加载的位置还不好调整

ttbbtt

为什么场景2里的第10帧 要用这个代码,这样点击场景1的MC10,就会跑到第一帧 就不是第10帧的图片了!
也许说得不对!
stop();
gotoAndPlay(1);

说实话 这段脚本是很好的!