请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 43326|回复: 49

[服务器端交互] XML+MovieClipLoader实现多图动态载入【添加分页】  关闭 [复制链接]

lzyy 楼主

无网不剩

荣誉管理 手机认证 

帖子
1781
体力
7608
威望
65
发表于 2006-8-23 16:34:14 |显示全部楼层
添加了分页效果

查看效果

源文件也已经更新。

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

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

源文件 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 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号?注册
已有 1 人评分威望 收起 理由
HBrO + 2 精品文章

总评分: 威望 + 2   查看全部评分

西部数码顶级域名注册商39元抢注!

高大威猛

银牌会员

帖子
1352
体力
2610
威望
7
发表于 2006-8-23 17:57:36 |显示全部楼层
太棒了.你不早发出来!!!
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

stts3 

早安世纪

禁止发言

帖子
98
体力
288
威望
0
居住地
河南省 郑州市
发表于 2006-8-24 00:32:13 |显示全部楼层

回复 #2 SuperDasher 的帖子

顶了!
早安,21世纪活在网络中的人!www.zaonn.com

使用道具 举报

antz 
帖子
259
体力
1036
威望
3
发表于 2006-8-24 00:57:24 |显示全部楼层
又学习了,谢过楼主////
99ria.com/blog  蚂蚁-博客

使用道具 举报

帖子
1912
体力
7180
威望
4
居住地
广东省 广州市
发表于 2006-8-24 00:58:39 |显示全部楼层
分配位置坐标的算法不错.受教了.

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

使用道具 举报

schiy 

我是MT

版主 手机认证 

帖子
679
体力
8810
威望
5
居住地
广东省 深圳市
发表于 2006-8-24 07:57:55 |显示全部楼层
厉害阿,学习:)

使用道具 举报

沉默之鼓

中级会员

帖子
236
体力
251
威望
0
发表于 2006-8-24 08:42:29 |显示全部楼层
恩,不错!但是我觉得如果是像这样来排列图片的话就没有必要逐个假载了,同时加载比较好!如果图片较大的话,这样会影响打开的速度。
www.toswf.com

使用道具 举报

lzyy 楼主

无网不剩

荣誉管理 手机认证 

帖子
1781
体力
7608
威望
65
发表于 2006-8-24 08:59:29 |显示全部楼层
to wolf2999:在坐标分配那,我卡了一段时间,还走了点弯路,当时一直拿i对6求余来判断,结果自然是fail了,:)

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

使用道具 举报

高大威猛

银牌会员

帖子
1352
体力
2610
威望
7
发表于 2006-8-24 16:42:00 |显示全部楼层
翻页后,图片失去链接!!!

使用道具 举报

帖子
1912
体力
7180
威望
4
居住地
广东省 广州市
发表于 2006-8-24 16:45:54 |显示全部楼层
楼主真的闲啊.不用上班吗???

使用道具 举报

高大威猛

银牌会员

帖子
1352
体力
2610
威望
7
发表于 2006-8-24 17:50:48 |显示全部楼层
请楼主解决分页没链接的问题!!!

使用道具 举报

HBrO 
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-24 17:59:22 |显示全部楼层
原帖由 SuperDasher 于 2006-8-24 17:50 发表
请楼主解决分页没链接的问题!!!

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

使用道具 举报

高大威猛

银牌会员

帖子
1352
体力
2610
威望
7
发表于 2006-8-24 18:06:33 |显示全部楼层
原帖由 HBrO 于 2006-8-24 17:59 发表

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



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

使用道具 举报

HBrO 
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-24 18:10:29 |显示全部楼层
怎么会完全相反的啊?

使用道具 举报

lzyy 楼主

无网不剩

荣誉管理 手机认证 

帖子
1781
体力
7608
威望
65
发表于 2006-8-24 22:01:14 |显示全部楼层
不好意思啦,bug已经清除了,:)

to wolf2999:俺还是个学生哩,嘿嘿

使用道具 举报

高大威猛

银牌会员

帖子
1352
体力
2610
威望
7
发表于 2006-8-24 22:21:33 |显示全部楼层
好!现在没问题了!

使用道具 举报

Digi 

星光

禁止访问

帖子
2237
体力
9404
威望
7
发表于 2006-8-24 22:49:59 |显示全部楼层
阿..靠啊.BS楼主.我都写完了才发出来...

使用道具 举报

春叶飘零

高级会员

帖子
473
体力
864
威望
1
发表于 2006-8-25 02:00:04 |显示全部楼层
希望考虑下loadError的情况
我要威望....>

使用道具 举报

lzyy 楼主

无网不剩

荣誉管理 手机认证 

帖子
1781
体力
7608
威望
65
发表于 2006-8-25 08:10:17 |显示全部楼层
to Digi:sorry 啦:)
to ycccc8202:恩,确实应该考虑一下,这个就不用我再更新了吧

使用道具 举报

ghpsyn 

双月鸟

中级会员

帖子
157
体力
812
威望
0
居住地
广东省 东莞市
发表于 2006-8-25 11:17:12 |显示全部楼层
感谢啦~~
人一天一天的老,心一天一天的碎!
继续学习,直到。。。。。

使用道具 举报

HBrO 
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-25 12:08:08 |显示全部楼层
原帖由 Digi 于 2006-8-24 22:49 发表
阿..靠啊.BS楼主.我都写完了才发出来...


你还有个小的没写.

使用道具 举报

APLee 
帖子
44
体力
288
威望
0
发表于 2006-9-4 17:01:10 |显示全部楼层
因为偶看不懂不会用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 
帖子
44
体力
288
威望
0
发表于 2006-9-4 17:07:41 |显示全部楼层
if(i !=ii && i<图片总数)
后面少了一个,不好意思!

使用道具 举报

帖子
1912
体力
7180
威望
4
居住地
广东省 广州市
发表于 2006-10-10 21:51:31 |显示全部楼层
晕..没这么快啊.这么快就链接失效了啊

使用道具 举报

寒绪

中级会员

帖子
272
体力
963
威望
8
居住地
江苏省 无锡市
发表于 2006-10-10 22:00:25 |显示全部楼层

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

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

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

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

使用道具 举报

寒绪

中级会员

帖子
272
体力
963
威望
8
居住地
江苏省 无锡市
发表于 2006-10-10 22:57:34 |显示全部楼层
楼主:图片有时真现象纵横比例!要在movieClipLoader的init事件中比较一下在定值,是吧?

使用道具 举报

airfar 

7thPark

银牌会员 手机认证 

帖子
106
体力
2096
威望
0
发表于 2006-10-12 21:52:41 |显示全部楼层

回复 #25 kenjor01 的帖子

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

使用道具 举报

kolou 

死神

银牌会员

帖子
3936
体力
1576
威望
15
居住地
上海市 卢湾区
发表于 2006-10-25 10:28:55 |显示全部楼层
原帖由 kenjor01 于 2006-10-10 22:00 发表
http://www.kenjor.com/up/view.html

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



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

使用道具 举报

mytom 
帖子
558
体力
2336
威望
0
发表于 2006-10-25 13:41:16 |显示全部楼层
http://www.kenjor.com/up/view.html

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

使用道具 举报

寒绪

中级会员

帖子
272
体力
963
威望
8
居住地
江苏省 无锡市
发表于 2006-12-14 10:32:35 |显示全部楼层
已作商业用途,不便公开。
快乐每一天!

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 07:14 , Processed in 0.158782 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部