案例4：熟悉xml的運用
說明：一個簡單的相簿，先載入xml，然後載入xml列表裡的images縮圖，點擊縮圖出現大圖以及大圖的說明。這個案例較前面幾個複雜了一些，不過如果熟悉了AS3的文法，還是比較容易理解的。
示範：http://www.live-my-life-with-yuyi.com/as3_cases/gallery_tween/
代碼：
複製代碼 代碼如下:
import fl.transitions.Tween;
import fl.transitions.easing.*;
var imageText:TextField = new TextField();
var fadeTween:Tween;
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
跟之前的一樣，先匯入幾個包，這是為了實現圖片的漸入漸出效果。然後是定義幾個變數，這裡xmlList可能比較陌生，這個變數的作用主要是獲得xml的child列表，下面具體運用的時候，它的作用就一目瞭然了。
通過URLLoader載入xml，然後監聽xml，一旦載入完成，就觸發xmlLoaded函數。
複製代碼 代碼如下:
function xmlLoaded(event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
for(var i:int = 0; i < xmlList.length(); i++)
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
imageLoader.x = 25;
imageLoader.y = i * 150 + 25;
imageLoader.name = xmlList[i].attribute("source");
addChild(imageLoader);
imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
}
}
這裡有一些地方需要注意，比如第一句
xml = XML(event.target.data);
如果直接
xml = event.target.data
會報錯，因為兩個變數的類型不一樣。
這裡可以看到xmlList，它是取得xml的children，對於使用xml非常方便。
然後執行個體化imageLoader，並載入xmlList裡定義的縮圖，注意這裡的寫法。
調整一下座標，並給imageLoader添加了一個name屬性，這個屬性的值就是xml檔案裡的圖片地址，這有利於下面的showPicture函數。
然後將縮圖放到舞台上，並監聽它的滑鼠點擊事件。
複製代碼 代碼如下:
function showPicture(event:MouseEvent):void
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(event.target.name));
imageLoader.x = 200;
imageLoader.y = 25;
addChild(imageLoader);
imageText.x = imageLoader.x;
imageText.y = 351;
for(var j:int = 0; j < xmlList.length(); j++)
{
if(xmlList[j].attribute("source") == event.target.name)
{
imageText.text = xmlList[j];
}
}
fadeTween = new Tween(imageLoader,"alpha",None.easeNone,0,1,1,true);
}
imageText.autoSize = TextFieldAutoSize.LEFT;
addChild(imageText);
這個點擊後顯示大圖的函數，由於前面已經給name屬性添加了圖片地址，所以這裡直接拿來用就可以了。
大圖載入後分配一下座標，添加到舞台上，接下來就該顯示圖片的說明了。
這裡的做法是迴圈xmlList，然後比較xml裡source是否與這裡的name相等，是的話，將該xml的值賦予imageText，不過顯然有更簡單的做法，就是在上面的xmlLoaded函數中為imageLoader添加一個text屬性，然後在showPicture裡直接拿來用就可以了。
然後給圖片來一個漸入效果，這個之前已經講過了。
最後兩行是定義imageText的對齊，這裡是靠左對齊，然後放到舞台上。
整個案例到此結束。
打包檔案
