关于FLASH加载XML相册，在网上百度一下。一大把源码。但大多都没给出完整教程。刚好最近在写一个相册，所以把完整过程记录一下。权当教程，以供其他朋友借鉴学习。欢迎拍砖。OK，先看下演示：
http://www.taoshaw.com/taoshaw/study/xml_list_photos/Taoshaw_Photos.swf
下面讲解详细过程：
1、首先，新建一个文件夹，文件夹的名称随你怎么取都OK，用于存放本相册的所有文件。
2、然后在文件夹中新建imageda、imagexiao、image.xml、Taoshaw_Photos.fla文件。如图所示：
3、然后处理一些图片放进imageda与imagexiao目录中，imagexiao目录中的图片大小为50*50。即，小图片大小。在imageda目录中的图片大小为272*271。当然，这里是我的标准，大家可以自己定义大小的。
4、新建xml文件。写XML和格式标准，在此不再多说。内容如下：
<?xml version="1.0" encoding="utf-8" ?> <imgtao> <img srcxiao="imagexiao/1.jpg" srcda="imageda/1.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/2.jpg" srcda="imageda/2.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/3.jpg" srcda="imageda/3.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/4.jpg" srcda="imageda/4.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/5.jpg" srcda="imageda/5.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/6.jpg" srcda="imageda/6.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/7.jpg" srcda="imageda/7.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/8.jpg" srcda="imageda/8.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/9.jpg" srcda="imageda/9.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/10.jpg" srcda="imageda/10.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/1.jpg" srcda="imageda/1.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/2.jpg" srcda="imageda/2.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/3.jpg" srcda="imageda/3.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/4.jpg" srcda="imageda/4.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/5.jpg" srcda="imageda/5.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/6.jpg" srcda="imageda/6.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/7.jpg" srcda="imageda/7.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/8.jpg" srcda="imageda/8.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/9.jpg" srcda="imageda/9.jpg" info="欢迎光临淘沙网"/> <img srcxiao="imagexiao/10.jpg" srcda="imageda/10.jpg" info="欢迎光临淘沙网"/> </imgtao>
6、然后分别建立背景黑色条、大图片背景、加载进度条、按钮等元件。
7、有一个关键的步骤，新建一空影片剪辑。然后拖到场景中，并赋予实例名“pic_holder_mc”。
8、然后在as层中添加代码：
9、代码及详细讲解如下：
//================版权声明开始================//
//★淘沙网：http://www.taoshaw.com
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//
this["loading_mc"]._visible = false;
//统一编码
System.useCodepage = true;
/*初始化类信息开始*/
//定义总数量
var _total:Number = 20;
//定义每页显示数量
var page_size:Number = 4;
//计算总页数
var pages:Number = Math.ceil(_total/page_size);
var cur_page:Number = 1;
//定义XML类
var my_xml:XML = new XML();
//定义用于接收小图片的数组
var my_small_arr:Array = new Array();
//定义用于接收大图片的数组
var my_big_arr:Array = new Array();
//定义用于接收文本信息的数组
var my_info_arr:Array = new Array();
/*初始化类信息结束*/
//设置加载路径
my_xml.load("image.xml");
//去掉空格
my_xml.ignoreWhite = true;
//定义用于加载小图的MovieClipLoader类
var my_smallClip:MovieClipLoader = new MovieClipLoader();
//定义用于显示加载小图信息的新项目
var my_smallObj:Object = new Object();
my_smallObj.onLoadInit = function(mc):Void {
//设置小图片的宽度
mc._width = 50;
//设置小图片的高度
mc._height = 50;
//设置小图片距离左侧注册点的距离(横向上的)
mc._x = 3;
//设置小图片距离左侧注册点的距离(纵向上的)
mc._y = 2;
};
//添加监听
my_smallClip.addListener(my_smallObj);
//定义用于加载小图片被点击后，加载的大图片的MovieClipLoader类
var my_bigClip:MovieClipLoader = new MovieClipLoader();
//定义用于显示大图片位置等信息的项目
var my_bigObj:Object = new Object();
my_bigObj.onLoadInit = function(mc):Void {
_root.loading_mc._visible = false;
//设置大图片的宽度
mc._width = 272;
//设置大图片的高度
mc._height = 271;
//设置大图片距离左侧注册点的距离(横向上的)
mc._x = 120;
//设置大图片距离左侧注册点的距离(纵向上的)
mc._y = 107;
};
//添加监听
my_bigClip.addListener(my_bigObj);
//设置加载成功代码
my_xml.onLoad = function(ok:Boolean):Void {
//如果加载成功，则运行如下代码
if (ok) {
//定义加载XML内容的数量
var my_pic_len:Number = my_xml.firstChild.childNodes.length;
for (var i:Number = 0; i<MY_PIC_LEN; {
//定义node变量，这样做的目的只是为了后面代码的简化
var node = my_xml.firstChild.childNodes;
//将加载的内容添加进前面定义的小图片、大图片、文字信息数组中
my_small_arr.push(node.attributes.srcxiao);
my_big_arr.push(node.attributes.srcda);
my_info_arr.push(node.attributes.info);
}
//以下用于显示加载的小图片
for (var i:Number = 0; i<5; i++) {
_root["press_btn"+i].img = my_big_arr;
//在按钮上面新建一个空的MC
var mc:MovieClip = _root["press_btn"+i].createEmptyMovieClip("mc", 100+i);
//加载图片
my_smallClip.loadClip(my_small_arr, mc);
//当按钮被点击的时候，就加载大图片
_root["press_btn"+i].onPress = function():Void {
//加载大图片对象
my_bigClip.loadClip(this.img, pic_holder_mc);
//根据XML信息，显示图片说明
info_txt.text = my_info_arr;
_root.loading_mc._visible = true;
};
//默认情况下加载一张大图片
my_bigClip.loadClip(my_big_arr[0], pic_holder_mc);
}
} else {
}
};
//上一页按钮代码
pre_mc.onRelease = function() {
load_images(_root.cur_page-1);
};
//下一页按钮代码
next_mc.onRelease = function() {
load_images(_root.cur_page+1);
};
//自定义加载分页时数据
function load_images(page:Number) {
//当总页数小于1时，显示第一页内容
if (page<1) {
page = 1;
} else if (page>_root.pages) {
page = _root.pages;
}
if (page == cur_page) {
return;
}
_root.cur_page = page;
var start_index = _root.page_size*(page-1);
for (var i:Number = 0; i<5; i++) {
if (i>=_total) {
break;
}
_root["press_btn"+i].img = my_big_arr[start_index+i];
//在按钮上面新建一个空的MC
var mc:MovieClip = _root["press_btn"+i].createEmptyMovieClip("mc", 100+i);
//加载图片
my_smallClip.loadClip(my_small_arr[start_index+i], mc);
//当按钮被点击的时候，就加载大图片
_root["press_btn"+i].onPress = function():Void {
my_bigClip.loadClip(this.img, pic_holder_mc);
_root.loading_mc._visible = true;
};
}
}
//================版权声明开始================//
//★淘沙网：http://www.taoshaw.com
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//
附件下载： 淘沙网简单相册.rar |
