·您当前的位置:首页 > 技术教程 > AS2与AS3技术 >

[AS3]AS3运用XML加载多张图片代码示例

时间:2012-04-21 15:06rob_2010
[AS3]AS3运用XML加载多张图片代码示例 ,先加载XML文件,再加载所有图片,然后,通过几个按钮来显示单张图片。其中监听动态传参的方法,可以值得学习

 

 Load.as文件内容:

  1. package   
  2. {  
  3.   import flash.display.Loader;  
  4.   import flash.display.Sprite;  
  5.   import flash.display.MovieClip;  
  6.   import flash.net.URLLoader;  
  7.   import flash.net.URLRequest;  
  8.   import flash.events.*;  
  9.   import flash.text.TextField;  
  10.   import flash.display.LoaderInfo;  
  11.   import flash.text.TextFieldAutoSize;  
  12.   import flash.system.System;  
  13.   import flash.display.SimpleButton;  
  14.     
  15.   /**  
  16.   * ...  
  17.   * 先加载XML文件,再加载所有图片,然后,通过几个按钮来显示单张图片

    其中监听动态传参的方法,可以值得学习。  

  18.     本人:Nothing(在路上)  
  19.   */  
  20.   public class Load extends Sprite  
  21.   {  
  22.     //xml类  
  23.     private var my_xml:XML;  
  24.     //URLRequest类  
  25.     private var my_URLRequest:URLRequest;  
  26.     //URLLoader类  
  27.     private var my_URLLoader:URLLoader;  
  28.     //加载图片类  
  29.     private var my_Loader:Loader;  
  30.     //初始化暂存图片信息类  
  31.     private var my_pic_Arr:Array = [];  
  32.     //保存加载完成后得到的图片  
  33.     private var imgLoadArr:Array=new Array();  
  34.  
  35.     //初始化TextField  
  36.     private var _textField:TextField;  
  37.     //XML文件路径  
  38.     private var _xmllist:String="man.xml";  
  39.       
  40.     //声明存放动态图片的容器  
  41.     private var picContent:Sprite;  
  42.       
  43.       
  44.     public function Load()   
  45.     {  
  46.        
  47.      System.useCodePage=true;  
  48.  
  49.       var _xmllist:String="man.xml";  
  50.         
  51.       my_URLRequest = new URLRequest(_xmllist);  
  52.       my_URLLoader = new URLLoader();  
  53.       my_URLLoader.load(my_URLRequest)  
  54.       my_URLLoader.addEventListener(Event.COMPLETE,xmlLoaded)  
  55.       picContent=new Sprite();  
  56.         
  57.       _textField=new TextField();  
  58.       addChild(_textField);  
  59.       _textField.autoSize=TextFieldAutoSize.LEFT;  
  60.         
  61.     }  
  62.       
  63.       
  64.     private function createBtn(i:int):void//创建三个按钮  
  65.     {  
  66.         var spr:Sprite=new Sprite();  
  67.           
  68.         spr.graphics.beginFill(0xff0000);  
  69.         spr.graphics.drawRect(0, 0, 50, 20);  
  70.         spr.graphics.endFill();  
  71.         spr.x=(i)*60+40;  
  72.         spr.y=360;  
  73.         addChild(spr);  
  74.           
  75.         spr.addEventListener(MouseEvent.CLICK,showPic(i));  
  76.           
  77.           
  78.     }  
  79.       
  80.       
  81.     private function showPic(i:int):Function//在picContent中显示图片  
  82.     {  
  83.         var fun:Function=function(e:MouseEvent){  
  84.               
  85.             if(picContent.numChildren>0)  
  86.             {  
  87.                 picContent.removeChildAt(0);  
  88.             }  
  89.               
  90.             picContent.addChild(imgLoadArr[i]);  
  91.             picContent.x=210;  
  92.             picContent.y=50;  
  93.             addChild(picContent);  
  94.         }  
  95.         return fun;  
  96.     }  
  97.       
  98.  
  99.     //===加载XML文件,将XML信息写进数组中======  
  100.     private function xmlLoaded(e:Event):void   
  101.     {  
  102.       my_xml = new XML(my_URLLoader.data);  
  103.       for (var i:uint = 0; i < my_xml.img.length(); i++ )  
  104.       {  
  105.         var my_Obj:Object = new Object();  
  106.         my_Obj.imgsrc = my_xml.img[i].@src;  
  107.         my_Obj.swfsrc = my_xml.img[i].@swf;  
  108.         my_Obj.textsrc = my_xml.img[i];  
  109.         my_pic_Arr.push(my_Obj);  
  110.       }  
  111.        
  112.       imgLoaded(0)  
  113.     }  
  114.     //=========加载图片============  
  115.     private function imgLoaded(a:int):void  
  116.     {  
  117.        
  118.         var my_Loader:Loader = new Loader();  
  119.         my_Loader.load(new URLRequest(my_pic_Arr[a].imgsrc));  
  120.           
  121.         trace(my_pic_Arr[a].imgsrc);  
  122.          
  123.         my_Loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,onProgress(a));  
  124.         my_Loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaderComplete(a));  
  125.  
  126.  
  127.     }  
  128.       
  129.     private function onProgress(i:int):Function //进度监听处理  
  130.     {  
  131.         var fun=function(e:ProgressEvent)  
  132.         {  
  133.             var loadtotal:uint=e.bytesTotal;  
  134.             var loaded:uint=e.bytesLoaded;  
  135.             var perc:String=Math.round((loaded/loadtotal)*100)+"%";  
  136.        
  137.             _textField.htmlText=my_pic_Arr[i].textsrc+" 加载中…………"+perc;  
  138.         }  
  139.           
  140.         return fun;  
  141.  
  142.     }  
  143.       
  144.     private function onLoaderComplete(i:int):Function//加载完成监听处理  
  145.     {  
  146.         var fun:Function=function(e:Event)  
  147.         {  
  148.               
  149.             imgLoadArr[i]=e.target.content;  
  150.                           
  151.             if(i<my_pic_Arr.length-1)  
  152.             {  
  153.                 i++;  
  154.                 imgLoaded(i);  
  155.             }  
  156.             else  
  157.             {  
  158.                 for(var j:int=0;j<8;j++)  
  159.                 {  
  160.                     createBtn(j);  
  161.                 }  
  162.                   
  163.                 _textField.htmlText="加载完成--Nothing--单击红色按钮查看图片";  
  164.                   
  165.             }  
  166.         }  
  167.           
  168.         return fun;  
  169.     }  
  170.       
  171.       
  172.   }  
  173.     
  174. }  

先加载XML文件,再加载所有图片,然后,通过几个按钮来显示单张图片。其中监听动态传参的方法,可以值得学习。man.xml文件内容:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <man> 
  3.     <img src="MAN/1.png" mce_src="MAN/1.png">图片资源1</img> 
  4.     <img src="MAN/2.png" mce_src="MAN/2.png">图片资源2</img> 
  5.     <img src="MAN/3.png" mce_src="MAN/3.png">图片资源3</img> 
  6.     <img src="MAN/4.png" mce_src="MAN/4.png">图片资源4</img> 
  7.     <img src="MAN/5.png" mce_src="MAN/5.png">图片资源5</img> 
  8.     <img src="MAN/6.png" mce_src="MAN/6.png">图片资源6</img> 
  9.     <img src="MAN/7.png" mce_src="MAN/7.png">图片资源7</img> 
  10.     <img src="MAN/8.png" mce_src="MAN/8.png">图片资源8</img> 
  11. </man> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器