本文是一篇基於XML的FLASH網站製作教程，利用XML最基本的語言描述方式，加上FLASH製作的動態介面，能快速、簡便的開發FLASH網站，最重要是以後再更新FLASH網站時就非常方便，只許修改一下XML檔案即可。如果想開發一個不支援資料庫空間上的的FLASH網站，或是說資料量太小，使用資料庫顯得太笨拙的話，使用XML將是最方便的方法。Over，先看教程。
本教程執行個體網站 http://www.flashempire.com/exdesign/
本執行個體的目的是想用FLASH製作一個設計作品集(portfilio)，就是個人首頁及設計公司中常用的那種工作展示。由於天天工作，每隔幾天總會有些新作品可以放進作品集中，總不能隔三差五的去修改FLASH源檔案再輸出吧，用資料庫做這麼小的資料存取又顯得太笨拙，這個時候就得用到XML了，不需要資料庫，不需要空間支援，只要有FLASH和XMl檔案即可......。先看看個人作品的簡單資料表設計：
| 欄位 |
內容 |
| name |
設計作品名稱 |
| src |
設計作品的連結 |
| intro |
簡單描述 |
| cate |
作品所屬分類(網站/動畫/遊戲/多媒體..) |
這樣一個資料庫，加個主鍵ID，有點像資料庫表 ，不過現在不能使用資料庫，必須以XML的方式來記錄這些資料，那麼我們再建立一個data.xml檔案，並寫入一個類似於此的資料描述結構
//第一段代碼START
<?xml version='1.0' encoding='UTF-8'?>
<data>
<web>
<project name="SONYERICSSON T630 PROMOTION" src="sony.swf" intro="這是我去年的項目"/>
<project name="MATRIX" src="matrix.swf" intro="駭客帝國"/>
<project name="PHILIPS TECH STATION" src="philips.swf" intro="科技感受"/>
</web>
<animation>
<project name="MTONE GAME" src="mtone.swf" intro="這是個老作品了"/>
</animation>
<game>
<project name="MIONICA GAMES" src="mionica.swf" intro=""/>
<project name="EC ONLINE GAME" src="ec.swf" intro="線上遊戲"/>
</game>
</data>
//第一段代碼END
這裡有幾個小問題：
首先，我使用的是 encoding='UTF-8'，表示資料編碼方式是UTF-8，採用此方式的主要好處是便於在FLASH中讀取資料，並且在任何語言平台(如日文或其它國家作業系統)上，都能正存的顯示出我的中文字或其它文字。那當然，也可以採用encoding='GB2312-80'的中文編碼方式，不過那樣的話，FLASH中就得加上文法來標記一下了。
由於XML是一種樹狀的資料結構，所以他的文法方式與我們傳統的資料表不一樣，我們的XML檔案中定義了<web>...</web>及<game>..</game>這樣的標記，表示的是我在前面資料表設計中的cate分類，在此標識塊中的部分，即為屬於這一分類的項目。然後再在<web>...</web>這樣的塊中定義每一條記錄，如
<project name="EC ONLINE GAME" src="ec.swf" intro="線上遊戲"/>
一條資料的內容。
好了，現在看看FLASH介面的準備情況
OK！介面上的內容基本上如此了，如果需要更多功能，就自己再增加各種MC之類的了
我們在FLASH的第一幀寫上關鍵的文法部分
//第二段代碼START
stop();
//將data.xml檔案載入
infoDefault = "";
showSrc = "";
nowBtnName = "no";
nowNum = 0;
xmlObj = new XML();
xmlObj.ignoreWhite = true;
xmlObj.load("data.xml");
//XML檔案所在地址
xmlObj.onLoad = function(success) {
if (success) {
trace("XML載入成功！");
parseXML();
//分析XML檔案的函數
} else {
trace("XML載入失敗！");
}
};
//建立三個數組以便裝載XML中的資料
arr_web = new Array();
arr_animation = new Array();
arr_game = new Array();
//分析XML檔案
function parseXML() {
//分別將web,animation,game的資料，裝入arr_web,arr_animation,arr_game三個數組
web = xmlObj.firstChild.childNodes[0].childNodes;
for (var i = 0; i<web.length; i++) {
arr_web[i] = new Object();
arr_web[i].info = web[i].attributes.name;
arr_web[i].src = web[i].attributes.src;
}
animation = xmlObj.firstChild.childNodes[1].childNodes;
for (var i = 0; ianimation.length; i++) {
arr_animation[i] = new Object();
arr_animation[i].info = animation[i].attributes.name;
arr_animation[i].src = animation[i].attributes.src;
}
game = xmlObj.firstChild.childNodes[2].childNodes;
for (var i = 0; igame.length; i++) {
arr_game[i] = new Object();
arr_game[i].info = game[i].attributes.name;
arr_game[i].src = game[i].attributes.src;
}
//處理完畢，跳入顯示頁
gotoAndPlay(2);
}
//顯示表徵圖函數，點擊介面上的一個分類，通過此函數將分類下的內容作為表徵圖繪製在畫面中
function showIcon(cate) {
nowNum = eval("arr_"+_root.currCate).length;
if (nowNum != 0) {
//清除上一組表徵圖
clearIco(nowNum);
}
fileIconX = 435;
fileIconY = 150;
//---此部分放進MC中
for (var i = 0; ieval("arr_"+cate).length; i++) {
fileIcon.duplicateMovieClip("ico"+i, i);
temp = eval("ico"+i);
temp._x = fileIconX;
temp._y = fileIconY;
temp_name = eval("arr_"+cate);
temp.vari = temp_name[i].info;
temp.src = temp_name[i].src;
//設定每個圖 標的RollOver,RollOut,及Release事件
temp.onRollOver = function() {
//RollOver時，將此表徵圖表示的項目名稱顯示在文字框中
proinfo.text = this.vari;
};
temp.onRollOut = function() {
proinfo.text = infoDefault;
};
temp.onPress = function() {
//按下按鈕，在左邊將此項目的swf檔案loadmovie進來
infoDefault = this.vari;
showSrc = this.src;
loadContent.loadMovie(showSrc);
};
fileIconX += 27;
//設定每個表徵圖的位置，超過8個，換一行畫表徵圖
if (i%9==8) {
fileIconX = 435;
fileIconY += 28;
}
}
}
//清除上一組表徵圖的函數
function clearIco(nowNum) {
for (var i = 0; i=nowNum; i++) {
eval("ico"+i).removeMovieClip();
}
}
//第二段代碼END
OK，功能的代碼都編寫完成了，現在將他應用到我們的三個分類按鈕web,animation,game上面
在web按鈕的action中寫上： //第三段代碼START
on (release) {
showIcon("web");
_root.currCate="WEB";
}
//第三段代碼END
以此類推寫出其它2個按鈕的release事件。
到此為止我們就設定完整個FLASH了，可以測試一下看是否能把XML檔案載入，並轉換成相同數量的表徵圖按鈕顯示出來，使用者點擊相應的表徵圖，就能將此作品的相關swf檔案loadmovie進情境中瀏覽了。
以後如果要增加web分類下的新作品，就可以直接在xml中加一條資料就行，flash檔案本身就可以不做任何修改了，應該說相當方便了。XML的資料描述功能在此發揮了最大的作業，他自訂標籤，樹狀的資料群組織形式直接能被flash作為XMl對象進行讀取，相當方便易用。不過flash目前還不支援直接修改xml檔案（如果要實現通過flash修改xml檔案，必須通過別的asp或php類似指令碼），否則的就可以直接用flash做基於xml的小型資料庫網站或應用程式了。
本例的源檔案中並沒有完成全部的功能，只做到XML讀入並根據XML的內容柏拉圖標及文字，其它XML中的欄位及讀詳細作品的功能大家可以根據此例內容自行開發，相信一定能做出更好的FLASH+XML動態網站。
源檔案下載
