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

lzyy 楼主

添加了分页效果

查看效果

源文件也已经更新。

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

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
修正了翻页后链接实效的问题，不好意思了，：）

源文件 have already updated。


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

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

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

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

基本思路：

先给id赋值1，然后通过判断id与总图片数的大小，来决定是否加载下一张图片就像这样：

1. myObj.onLoadComplete = function() {
   
2.         if (id<=nums) {//一个图片加载完成后，判断id与nums的值，如果小于nums继续加载
   
3.                 id++;
   
4.                 loadpic(id);
   
5.         }
   
6. };

复制代码

然后在loadpic(id)函数里执行

1. myCL.loadClip(imgurl, loadpic_mc);

复制代码

就可以继续加载了。

最后是与XML结合的问题，其实也满简单的，当加载完外部xml时，执行相应的函数就行了，就像这样：

1. myXML.onLoad = function(suc) {
   
2.         if (suc) {
   
3.                 loadStart();//载入完成后执行loadStart函数
   
4.         }
   
5. };

复制代码

基本思路就是这样，贴上源码：

1. var id = 1;
   
2. var myXML:XML = new XML();
   
3. myXML.ignoreWhite = true;
   
4. myXML.load("list.xml");//载入xml
   
5. myXML.onLoad = function(suc) {
   
6.         if (suc) {
   
7.                 loadStart();//载入完成后执行loadStart函数
   
8.         }
   
9. };
   
10. var myObj:Object = new Object();
    
11. myObj.onLoadComplete = function() {
    
12.         if (id<=nums) {//一个图片加载完成后，判断id与nums的值，如果小于nums继续加载
    
13.                 id++;
    
14.                 loadpic(id);
    
15.         }
    
16. };
    
17. myObj.onLoadInit = function(tar) {//加载完成后，设置图片大小
    
18.         tar._width = 85;
    
19.         tar._height = 53;
    
20.         tid = id-1;
    
21.         //将loading和灰色背景设为不可见，并给按钮加上事件
    
22.         //这里有个小技巧就是将tid赋予_btn.pid；方便将来调用
    
23.         _root["loader"+tid+"_mc"].loading_mc._visible = false;
    
24.         _root["loader"+tid+"_mc"].bg1_mc._visible = false;
    
25.         _root["loader"+tid+"_mc"]._btn.pid = tid;
    
26.         _root["loader"+tid+"_mc"]._btn.onRelease = function() {
    
27.                 ttid = this.pid;
    
28.                 url = myList[ttid].childNodes[0];//取得xml文件对应的url
    
29.                 getURL(url);
    
30.         };
    
31. };
    
32. var myCL:MovieClipLoader = new MovieClipLoader();
    
33. function loadStart() {
    
34.         myList = myXML.firstChild.childNodes;
    
35.         nums = myList.length;//得到图片数
    
36.         for (var i = 1; i<=nums; i++) {//复制库里的mc，并将其置于舞台上，分配好各自的坐标
    
37.                 _root.attachMovie("bg_loader", "loader"+i+"_mc", 100+i);
    
38.                 _root["loader"+i+"_mc"]._x = (i%5 == 0) ? 450 : (10*(i%5)+100*(i%5-1));
    
39.                 ty=i%5 == 0 ? (Math.floor(i/5-1)*80) : (Math.floor(i/5)*80);
    
40.                 _root["loader"+i+"_mc"]._y = 10+ty
    
41.         }
    
42.         myCL.addListener(myObj);//设置监听
    
43.         myCL.loadClip("imgs/small01.jpg", _root.loader1_mc.loadpic_mc);//加载第一副图片
    
44. }
    
45. function loadpic(id) {
    
46.         //取得xml文件里相应的图片地址
    
47.         imgurl = myList[id-1].attributes.path;
    
48.         myCL.loadClip(imgurl, _root["loader"+id+"_mc"].loadpic_mc);
    
49. }

复制代码

[ 本帖最后由 lzyy 于 2007-2-6 11:46 编辑 ]

SuperDasher

太棒了.你不早发出来!!!

stts3

顶了！

antz

又学习了,谢过楼主////

wolf2999

分配位置坐标的算法不错.受教了.

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

schiy

厉害阿，学习：）

flashveteran

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

lzyy 楼主

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

to flashveteran ：恩，确实如果图片比较大的画同时加载更节省时间，希望你能做个demo出来，让我们share一下，:-)

SuperDasher

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

wolf2999

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

SuperDasher

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

HBrO

原帖由 SuperDasher 于 2006-8-24 17:50 发表
请楼主解决分页没链接的问题!!!

好像还可以用,不过就是有时看不到手形.

SuperDasher

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

好像还可以用,不过就是有时看不到手形.

我说的是分页后,载入图片没有链接.只有小手!

HBrO

怎么会完全相反的啊?

lzyy 楼主

不好意思啦，bug已经清除了，：）

to wolf2999：俺还是个学生哩，嘿嘿

SuperDasher

好!现在没问题了!

Digi

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

ycccc8202

希望考虑下loadError的情况

lzyy 楼主

to Digi:sorry 啦：）
to ycccc8202:恩，确实应该考虑一下，这个就不用我再更新了吧

ghpsyn

感谢啦~~

HBrO

原帖由 Digi 于 2006-8-24 22:49 发表
阿..靠啊.BS楼主.我都写完了才发出来...

你还有个小的没写.

APLee

因为偶看不懂不会用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的不相等(麻烦)。因为楼主有些地方偶看不懂，所以就自己写了。

APLee

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

wolf2999

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

kenjor01

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

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

[ 本帖最后由 kenjor01 于 2006-10-10 22:51 编辑 ]

kenjor01

楼主：图片有时真现象纵横比例！要在movieClipLoader的init事件中比较一下在定值，是吧？

airfar

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

kolou

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

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

这个牛啊....  确实做得不错  就是很慢很慢

mytom

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

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

kenjor01

已作商业用途，不便公开。