讀入XML資料

2010-06-14
利用陣列方式去讀取外部檔,各位只要更改陣列的內容,就可以更改載入的外部檔案,是不是相當地方便?但是,要更改陣列內容勢必還是得開啟FLASH軟體才能修改,並重新發佈與上傳!!


所以,現在要教各位另一種方式來載入資料,那就是XML。目前各大網站中的一些廣告輪播都是採用XML當架構,再透過flash將相關的資訊呈現出來。透過XML的資訊,便可動態的更換FLASH中的內容,因此當下次要更換圖片、廣告、資訊時,只要修改XML檔,隨即畫面就會跟著一起變更了,完全不用動到FLASH,所以只要辛苦一次將FLASH的效果製作完畢後,日後更新只要修正XML檔就可以了,是不是很方便呢?
以下為XML的架構內容:
<?xml version="1.0" encoding="utf-8"?>
<data>
    <person>
        <name>呂布</name>
        <sex>男</sex>
        <age>20</age>
        <img>img1.jpg</img>
    </person>
    <person>
        <name>趙雲</name>
        <sex>男</sex>
        <age>15</age>
        <img>img2.jpg</img>
    </person>
    <person>
        <name>黃月英</name>
        <sex>女</sex>
        <age>30</age>
        <img>img3.jpg</img>
    </person>
    <person>
        <name>張飛</name>
        <sex>男</sex>
        <age>25</age>
        <img>img4.jpg</img>
    </person>
</data>

以下為FLASH中ActionScript的內容:
var xmlFile:URLRequest = new URLRequest("data.xml");
var xmlLoader:URLLoader=new URLLoader();
xmlLoader.load(xmlFile);
xmlLoader.addEventListener(Event.COMPLETE,showData);
function showData(event:Event):void
{
    var myXml:XML = XML(xmlLoader.data);
    var totalNum:int = myXml.person.length();
    for (var i=0; i<totalNum; i++)
    {
        trace(myXml.person[i]);
    }
}

解說:
建立抓取檔案與載入檔案之物件並指定給變數xmlFile與xmlLoader。
var xmlFile:URLRequest = new URLRequest("data.xml");
var xmlLoader:URLLoader=new URLLoader();

xmlLoader要載入xmlFile物件。
xmlLoader.load(xmlFile);
將xmlLoader加入監聽。
xmlLoader.addEventListener(Event.COMPLETE,showData);
以下為自訂函數範圍(showData):
建立XML物件並將xmlLoader物件所抓取到的資料指定給myXml變數。
var myXml:XML = XML(xmlLoader.data);
建立int物件並將xml檔案中,子節點(person)的資料長度指定給totalNum變數。
var totalNum:int = myXml.person.length();
再利用for迴圈來trace出XML的資料。
for (var i=0; i<totalNum; i++)
{
    trace(myXml.person[i]);
}

trace出來的結果可在「輸出」面板上觀察到,資料全部都進來了!!

xml01
如果需要抓取檔案名稱的資料,僅要稍微改寫一下程式碼即可。
trace(myXml.person.img[i]);
xml02
或許有人會問抓取檔案名稱幹啥?真無聊~
在這裡筆者為各位解答一下,只要能抓取到資料,就能將檔名的資料對應到圖片檔名上,這樣一來就可以抓圖囉!
所以啊~以上的教學是抓取XML的「根本」,如果就連基本的資料載入都無法達成,那後面的應用就更不用說了...至於圖片如何載入?筆者將會再用另一篇文章來解說!!敬請期待~

沒有留言 :

張貼留言

Related Posts Plugin for WordPress, Blogger...