flash+xml 制作电子相册教程

FLASH加载XML相册
刚刚制作完简单的flash相册后在网上搜索下，又找到一个分页相册，目前还没全部弄明白，先转载上来，再学习吧。

关于FLASH加载XML相册，在网上百度一下。一大把源码。但大多都没给出完整教程。刚好最近在写一个相册，所以把完整过程记录一下。

下面讲解详细过程：

1、首先，新建一个文件夹，文件夹的名称随你怎么取都OK，用于存放本相册的所有文件。

2、然后在文件夹中新建imageda、imagexiao、image.xml、Taoshaw_Photos.fla文件。如图所示：



3、然后处理一些图片放进imageda与imagexiao目录中，imagexiao目录中的图片大小为50*50。即，小图片大小。在imageda目录中的图片大小为272*271。当然，这里是我的标准，大家可以自己定义大小的。

4、新建xml文件。写XML和格式标准，在此不再多说。内容如下：

5、新建FLASH中。建立六个图层，图层名称如下：



6、然后分别建立背景黑色条、大图片背景、加载进度条、按钮等元件。

7、有一个关键的步骤，新建一空影片剪辑。然后拖到场景中，并赋予实例名“pic_holder_mc”。

8、然后在as层中添加代码：



9、代码及详细讲解如下：

<?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>

//================版权声明开始================//

//★淘沙网：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;

};

}

}