如何通過XML加載外部圖片

2024-08-19

4125

今天要實現(xiàn)的效果是，從外部的XML中讀取四張圖片，分別放到舞臺上建立好的四個容器中，并改變大小適應(yīng)容器的大小。首先我們新建一個空白的Flash文件。接著我們新建4個注冊點在左上角的影片剪輯，填

今天要實現(xiàn)的效果是，從外部的XML中讀取四張圖片，分別放到舞臺上建立好的四個容器中，并改變大小適應(yīng)容器的大小。

首先我們新建一個空白的Flash文件。

接著我們新建4個注冊點在左上角的影片剪輯，填充色未50%黑色，最好大小都不相同，給四個容器分別取名字為mc0、mc1、mc2、mc3，并且寫出他們要加載的圖片內(nèi)容名字，以便于我們明顯地觀察加載是否按照既定的順序進行。如圖所示，我們打算加載四張動物圖片進來，所以要先找四張動物圖片到硬盤某個位置存好。為了方便起見，我就放在fla本地目錄下，這個過程自己完成，大小不限。

下面我們寫一個XML文件，用來保存四張圖片信息。我們將通過讀取這個XML文件，解析其中的圖片數(shù)據(jù)，然后通過其中的圖片路徑加載進來到四個容器中。XML如下：

lt;?xml version"1.0" encoding"utf-8"?gt;
lt;datagt;
  lt;pictures amount"4"gt;
    lt;pathgt;;/pathgt;
    lt;pathgt;;/pathgt;
    lt;pathgt;;/pathgt;
    lt;pathgt;;/pathgt;
  lt;/picturesgt;
lt;/datagt;

我們把圖片保存在FLA文件所在位置的pic目錄下。

接下來我們放一個按鈕在舞臺上，上面有“加載”兩個字，取實例名為btnLoad。

然后我們寫一個加載函數(shù)：loadPic(path:String, cup:Sprite, index:int):void。這個函數(shù)的功能是把path路徑的圖片加載到cup容器中去，index是加載順序編號，在連續(xù)的加載過程中，這個編號往往是很有用的。

//加載圖片到容器中
function loadPic(path:String, cup:Sprite, index:int):void {
  var mLoader:Loader  new Loader();
    "loader_"   index;
  mLoader.load(new URLRequest(path));
  (, completeLoad);
}
function completeLoad(e:Event):void {
  var targetLoader:Loader   as Loader;
  var index:int  int((7));
  var getPic:Bitmap  Bitmap();
  var currentCup:Sprite  this["mc"   index] as Sprite;
  getPic.width  currentCup.width;
  getPic.height  currentCup.height;
  (getPic);
}

我們給mLoader一個name屬性，作用是在后面判斷到底加載的是哪個容器。

然后我們寫加載解析XML文件數(shù)據(jù)的函數(shù)：

//加載XML數(shù)據(jù)
function loadXMLData(path:String):void {
  var xLoader:URLLoader  new URLLoader();
  (, completeLoadData);
  xLoader.load(new URLRequest(path));
}
function completeLoadData(e:Event):void {
  var mXML:XML  XML();
  var len:int  int(@amount);
  for(var i:int  0; i < len; i  ) {
    var mPath:String  [i];
    loadPic(mPath, this["mc"   i], i);
  }
}

四個圖片的路徑在讀取出來的時候便同時加載了圖片。

最后我們給按鈕btnLoad加上加載圖片的功能，按鈕來銜接完成讀取XML數(shù)據(jù)和圖片加載的功能。

addMouseEvent();
function addMouseEvent():void {
  (, loadPicInfo);
}
function loadPicInfo(e:MouseEvent):void {
  loadXMLData("picData.xml");
}

單擊按鈕，便發(fā)現(xiàn)四張圖加載進來，并且充滿了四個容器。制作完畢！

相關(guān)推薦