注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

FLASH加载XML制作可分页相册  

2014-04-14 00:49:53|  分类: 【flash教程】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
详细过程。
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中。建立六个图层,图层名称如下:
从下到上:顶部黑色条、大图片背景、加载进度条、按钮、info、as.
6、然后分别建立背景黑色条、大图片背景、加载进度条、按钮等元件。
7、新建一空MC。然后拖到场景中,实例名“pic_holder_mc”。
8、然后在as层中添加代码:
9、代码及详细讲解如下:

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; i++) {
      //定义node变量,这样做的目的只是为了后面代码的简化
      var node = my_xml.firstChild.childNodes[i];
      //将加载的内容添加进前面定义的小图片、大图片、文字信息数组中
      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[i];
      //在按钮上面新建一个空的MC
      var mc:MovieClip = _root["press_btn"+i].createEmptyMovieClip("mc", 100+i);
      //加载图片
      my_smallClip.loadClip(my_small_arr[i], mc);
      //当按钮被点击的时候,就加载大图片
      _root["press_btn"+i].onPress = function():Void {
        //加载大图片对象
        my_bigClip.loadClip(this.img, pic_holder_mc);
        //根据XML信息,显示图片说明
        info_txt.text = my_info_arr[i];
        _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/taoshaw/study/xml_list_photos/Taoshaw_Photos.swf
把点击事件的代码改成:
_root["press_btn1"].onPress = function():Void {
        //加载大图片对象
        my_bigClip.loadClip(this.img, pic_holder_mc);
        //根据XML信息,显示图片说明
        _root.info_txt.text = my_info_arr[0];
           
      };
      //当按钮被点击的时候,就加载大图片
      _root["press_btn2"].onPress = function():Void {
        //加载大图片对象
        my_bigClip.loadClip(this.img, pic_holder_mc);
        //根据XML信息,显示图片说明
        _root.info_txt.text = my_info_arr[1];
              
      };
      _root["press_btn3"].onPress = function():Void {
        //加载大图片对象
        my_bigClip.loadClip(this.img, pic_holder_mc);
        //根据XML信息,显示图片说明
        _root.info_txt.text = my_info_arr[2];
                
      };
      _root["press_btn4"].onPress = function():Void {
        //加载大图片对象
        my_bigClip.loadClip(this.img, pic_holder_mc);
        //根据XML信息,显示图片说明
        _root.info_txt.text = my_info_arr[3];
              
      };

  评论这张
 
阅读(121)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017