论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash教程
Tag:flash cs,flash 8,鼠绘,as,手绘,工具,文字,loading,入门,初学,mc,影片剪辑,声音,mtv,游戏,引导,遮罩,菜单,补间,广告条,时钟,视频教程

FLASH加载XML:可分页相册的制作

文章类别:Flash | 发表日期:2008-9-21 20:10:26

  关于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>
5、新建FLASH中。建立六个图层,图层名称如下:

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

欢迎进入闪吧论坛和作者讨论学习:http://space.flash8.net/bbs/thread-356742-1-2.html
视频教程列表
文章教程搜索
 
Flash推荐教程
Flash热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058