打印

[应用] XML+MovieClipLoader实现多图动态载入【添加分页】

本主题由 lzyy 于 2008-6-13 15:44 关闭
添加了分页效果

查看效果

源文件也已经更新。

在做分页的时候,遇到了一些问题,包括变量的传递,程序的流程等等,确实有些头大,昨天晚上躺在吊床上,还想了一段时间呢,嘿嘿,不过总算是出来了。谢谢大家的支持!

---------------------------------------------------
修正了翻页后链接实效的问题,不好意思了,:)

源文件 have already updated。


---------------------------------------------------

本以为网上这样的教程多的是,随便一抓就是一大把,结果不甚理想,不过也看到了一些有用的文章。

还是自己动手丰衣足食吧,我们知道MovieClipLoader载入单图,还是比较简单的,但如果是多图呢,如何建立监听?如何在一副图片加载完后load下一张图片?如何与XML结合?

让我们一个一个来,首先是监听的问题,这么多图,不能新建n个object,然后分别对这几个object监听,效率太低,所以只能建立一个监听,余下的任务就是如何实现多图载入了。

基本思路:

先给id赋值1,然后通过判断id与总图片数的大小,来决定是否加载下一张图片就像这样:
复制内容到剪贴板
代码:
myObj.onLoadComplete = function() {
    if (id<=nums) {//一个图片加载完成后,判断id与nums的值,如果小于nums继续加载
        id++;
        loadpic(id);
    }
};
然后在loadpic(id)函数里执行
复制内容到剪贴板
代码:
myCL.loadClip(imgurl, loadpic_mc);
就可以继续加载了。

最后是与XML结合的问题,其实也满简单的,当加载完外部xml时,执行相应的函数就行了,就像这样:
复制内容到剪贴板
代码:
myXML.onLoad = function(suc) {
    if (suc) {
        loadStart();//载入完成后执行loadStart函数
    }
};
基本思路就是这样,贴上源码:
复制内容到剪贴板
代码:
var id = 1;
var myXML:XML = new XML();
myXML.ignoreWhite = true;
myXML.load("list.xml");//载入xml
myXML.onLoad = function(suc) {
    if (suc) {
        loadStart();//载入完成后执行loadStart函数
    }
};
var myObj:Object = new Object();
myObj.onLoadComplete = function() {
    if (id<=nums) {//一个图片加载完成后,判断id与nums的值,如果小于nums继续加载
        id++;
        loadpic(id);
    }
};
myObj.onLoadInit = function(tar) {//加载完成后,设置图片大小
    tar._width = 85;
    tar._height = 53;
    tid = id-1;
    //将loading和灰色背景设为不可见,并给按钮加上事件
    //这里有个小技巧就是将tid赋予_btn.pid;方便将来调用
    _root["loader"+tid+"_mc"].loading_mc._visible = false;
    _root["loader"+tid+"_mc"].bg1_mc._visible = false;
    _root["loader"+tid+"_mc"]._btn.pid = tid;
    _root["loader"+tid+"_mc"]._btn.onRelease = function() {
        ttid = this.pid;
        url = myList[ttid].childNodes[0];//取得xml文件对应的url
        getURL(url);
    };
};
var myCL:MovieClipLoader = new MovieClipLoader();
function loadStart() {
    myList = myXML.firstChild.childNodes;
    nums = myList.length;//得到图片数
    for (var i = 1; i<=nums; i++) {//复制库里的mc,并将其置于舞台上,分配好各自的坐标
        _root.attachMovie("bg_loader", "loader"+i+"_mc", 100+i);
        _root["loader"+i+"_mc"]._x = (i%5 == 0) ? 450 : (10*(i%5)+100*(i%5-1));
        ty=i%5 == 0 ? (Math.floor(i/5-1)*80) : (Math.floor(i/5)*80);
        _root["loader"+i+"_mc"]._y = 10+ty
    }
    myCL.addListener(myObj);//设置监听
    myCL.loadClip("imgs/small01.jpg", _root.loader1_mc.loadpic_mc);//加载第一副图片
}
function loadpic(id) {
    //取得xml文件里相应的图片地址
    imgurl = myList[id-1].attributes.path;
    myCL.loadClip(imgurl, _root["loader"+id+"_mc"].loadpic_mc);
}
[ 本帖最后由 lzyy 于 2007-2-6 11:46 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
本帖最近评分记录
  • HBrO 威望 +2 精品文章 2006-8-23 16:51
you will never know what you can do till you try
太棒了.你不早发出来!!!

回复 #2 SuperDasher 的帖子

顶了!
又学习了,谢过楼主////
antflash.com  蚂蚁-博客

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
分配位置坐标的算法不错.受教了.

原来帮经典上的人做过一个外XML的分页.楼主索性把页也分了吧..

TOP

厉害阿,学习:)

TOP

恩,不错!但是我觉得如果是像这样来排列图片的话就没有必要逐个假载了,同时加载比较好!如果图片较大的话,这样会影响打开的速度。
www.toswf.com

TOP

to wolf2999:在坐标分配那,我卡了一段时间,还走了点弯路,当时一直拿i对6求余来判断,结果自然是fail了,:)

to flashveteran :恩,确实如果图片比较大的画同时加载更节省时间,希望你能做个demo出来,让我们share一下,:-)
you will never know what you can do till you try

TOP

翻页后,图片失去链接!!!

TOP

楼主真的闲啊.不用上班吗???

TOP

请楼主解决分页没链接的问题!!!

TOP

引用:
原帖由 SuperDasher 于 2006-8-24 17:50 发表
请楼主解决分页没链接的问题!!!
好像还可以用,不过就是有时看不到手形.

TOP

引用:
原帖由 HBrO 于 2006-8-24 17:59 发表

好像还可以用,不过就是有时看不到手形.
我说的是分页后,载入图片没有链接.只有小手!

TOP

怎么会完全相反的啊?

TOP

不好意思啦,bug已经清除了,:)

to wolf2999:俺还是个学生哩,嘿嘿
you will never know what you can do till you try

TOP

好!现在没问题了!

TOP

阿..靠啊.BS楼主.我都写完了才发出来...

TOP

希望考虑下loadError的情况
我要威望....>

TOP

to Digi:sorry 啦:)
to ycccc8202:恩,确实应该考虑一下,这个就不用我再更新了吧
you will never know what you can do till you try

TOP

感谢啦~~
人一天一天的老,心一天一天的碎!
继续学习,直到。。。。。

TOP

引用:
原帖由 Digi 于 2006-8-24 22:49 发表
阿..靠啊.BS楼主.我都写完了才发出来...
你还有个小的没写.

TOP

因为偶看不懂不会用XML,所以跟楼主的思路自己写了一个,评评。主要是跟据判断 i 与 ii 与 iii 是否相等来加载下一张图;

i = 1;
ii = 1; //加载完成后不变,用来对比值
iii = 1; //加载完成后改变的值
//定义MC为一个块,为调用图片的过程
function MC() {
       var myMC:MovieClipLoader = new MovieClipLoader();
       var myLS:Object = new Object();
       myLS.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
              this["t"+i] = "Loading"+Math.floor(loadedBytes/totalBytes*100)+"%";
              mytxt = this["t"+i];//mytxt 为动态文本,ti是变量
       };
       myLS.onLoadComplete = function() {
              iii++;
       };
       myMC.addListener(myLS);
       myMC.loadClip("main/p0"+i+".jpg", this["myMC"+i]);
}
mytxt = "loading..."; //初始值
MC();
onEnterFrame = function () {
               //把发生变化的值iii赋给i
       i = iii;
               //把发生改变的i值与ii进行对比,如果不等,再次执MC块
       if (i != ii && ) {
              ii++;
              MC();
       }                              
};
主要是在onEnterFrame上,如何去判断加裁完成,让下一张图片加载;  当onLoadComplete加载完成时,我直接用  i++ ,结果没反应,于是就多定义了一个变量iii,加载完成时改变 iii,到后面再赋值给i,来造成与ii的不相等(麻烦)。因为楼主有些地方偶看不懂,所以就自己写了。

TOP

if(i !=ii && i<图片总数)
后面少了一个,不好意思!

TOP

晕..没这么快啊.这么快就链接失效了啊

TOP

我做的用asp返回的xml支持分页等功能

http://www.kenjor.com/up/view.html

按“全部“后,右上角多“刷新“几下,服务器比较慢!别的功能自己找吧?嗬嗬
编码格式utf-8

[ 本帖最后由 kenjor01 于 2006-10-10 22:51 编辑 ]
快乐每一天!

TOP

楼主:图片有时真现象纵横比例!要在movieClipLoader的init事件中比较一下在定值,是吧?

TOP

回复 #25 kenjor01 的帖子

可以提供些代码来研究下吗,多谢哈

TOP

引用:
原帖由 kenjor01 于 2006-10-10 22:00 发表
http://www.kenjor.com/up/view.html

按“全部“后,右上角多“刷新“几下,服务器比较慢!别的功能自己找吧?嗬嗬
编码格式utf-8
这个牛啊....  确实做得不错  就是很慢很慢

TOP

http://www.kenjor.com/up/view.html

有没有这个网站的源码啊!真牛啊!!!!!!

TOP

已作商业用途,不便公开。
快乐每一天!

TOP