[AS3程式設計教學]如何通過xml載入外部圖片?

今天要實現的效果是，從外部的xml中讀取四張圖片，分別放到舞臺上實現建立好的四個容器中，並改變大小適應容
器的大小。

工具/原料

FlashCS3（及其以上版本），xml檔案，4張圖片

步驟/方法

首先我們新建一個空白的Flash檔案。

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

下面我們寫一個xml檔案，用來儲存四張圖片資訊，我們稍後就是通過讀取這個xml檔案，解析得到其中的圖片資料，然後通過其中的圖片路徑載入進來到四個容器中。xml如下：



pic/1.jpg
pic/2.jpg
pic/3.jpg
pic/4.jpg


我們把圖片儲存在fla檔案所在位置的pic目錄下。

接下來我們放一個按鈕在舞臺上，上面有“載入”兩個字，取例項名未btnLoad:

接下來我們寫一個載入函式：loadPic(path:String,cup:Sprite,index:int):void,就如這個函式名和引數所示，功能就是把path路徑的圖片載入到cup容器中去,index是載入順序編號，在連續的載入過程中，這個編號往往是很有用的：
//載入圖片到容器中
function loadPic(path:String,cup:Sprite,index:int):void
{
var mLoader:Loader = new Loader();
mLoader.name = "loader" + index;
mLoader.load(new URLRequest(path));
mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeLoad);
}
function completeLoad(e:Event):void {
var targetLoader:Loader = e.target.loader as Loader;
var index:int =int(targetLoader.name.slice(6));
var getPic:Bitmap = Bitmap(targetLoader.content);
var curentCup:Sprite = this["mc" + index] as Sprite;
getPic.width = curentCup.width;
getPic.height = curentCup.height;
curentCup.addChild(getPic);
}
我們給mLoader一個name屬性，作用是在後面判斷到底載入的是哪個容器。

然後我們寫載入解析xml檔案資料的函式如下：
//載入xml資料
function loadXMLData(path:String):void
{
var xLoader:URLLoader = new URLLoader();
xLoader.addEventListener(Event.COMPLETE,completeLoadData);
xLoader.load(new URLRequest(path));
}
function completeLoadData(e:Event):void
{
var mXML:XML = XML(e.target.data);
var len:int = int([email protected]);
for(var i:int = 0;i {
var mPath:String = mXML.pic.path[i];
loadPic(mPath,this["mc"+i],i);
}
}
4個圖片的路徑在讀取出來的時候便同時載入了圖片

最後我們給按鈕btnLoad加上載入圖片的功能，按鈕來銜接完成讀取xml資料和圖片載入的功能。
addMouseEvent();
function addMouseEvent():void
{
btnLoad.addEventListener(MouseEvent.CLICK,loadPicInfo);
}
function loadPicInfo(e:MouseEvent):void
{
loadXMLData("picData.xml");
}
單擊按鈕，便發現四張圖載入進來，並且充滿了四個容器:)
製作完畢！

注意事項

容器不要只做一個，然後在舞臺上覆制四個出來，這樣雖然能完成載入工作，但是比例縮放並不能改變元件的width和height值，這樣你設定載入進來圖片後設置尺寸時會發現總是設不對。