XML動态菜單

大(dà)家都喜歡XML，因爲它省事，我(wǒ)(wǒ)平時做東西也盡可能的用XML，因爲實在是日後更新修改太方便了，都不用動fla源文件。
本XML系列教程将分(fēn)三部分(fēn)發布，到最後一(yī)期我(wǒ)(wǒ)們将擁有一(yī)個功能全面，更加友好的XML菜單。本教程這個第一(yī)期涉及到了一(yī)些XML的基礎知(zhī)識。
這裏我(wǒ)(wǒ)們要做的效果是一(yī)個縱向排列的動态XML的菜單，并且當鼠标滑動到菜單上顯示相應的縮略圖，這個我(wǒ)(wǒ)們在很多攝影作品展示flash網站經常見到的。在線展示：http://www.keyframe1.com/tute/xmlMenu/
第一(yī)步， 分(fēn)析項目：
組成部分(fēn)：
- XML文件；
- FLASH源文件；
- 縮略圖JPG文件，50px X 50px 存放(fàng)在 thumb文件夾；
步驟：
- 先寫XML文件 （這個很簡單，我(wǒ)(wǒ)們将不再講怎麽寫XML文件）；
- 在FLASH中(zhōng)建立所需元素；
- actionscripting
第二步，開(kāi)始建立我(wǒ)(wǒ)們需要的一(yī)些元素，并把它們擺到大(dà)概理想的位置：
一(yī)個放(fàng)所有縮略圖的母影片剪輯，我(wǒ)(wǒ)們叫做container 50px寬，高盡量大(dà)些；
一(yī)個遮罩影片剪輯，叫做mask 50px X 50 px；
一(yī)個外(wài)框影片剪輯，隻是爲了美觀，叫做br，尺寸比mask大(dà)一(yī)圈就可以了；
把這三個影片剪輯在工(gōng)作去(qù)擺到大(dà)概理想的位置，确定它們的X坐标，Y坐标無所謂因爲下(xià)面我(wǒ)(wǒ)們要用AS來控制它們的Y坐标的；
（好了，主時間工(gōng)作區的事情就是這些，現在我(wǒ)(wǒ)們建立一(yī)個代碼的圖層，把剩下(xià)所有的工(gōng)作交給actionscript）
第三步，actionscripting
//先聲明一(yī)些變量
var menut:Number = 30; //菜單頂部Y坐标
var menul:Number = 300; //菜單左側X坐标
var home:MovieClip = this;
var mlh:Number = 20; //菜單文字行距
var tlh:Number = 60; //縮略圖行距
var speed:Number = 3; //緩動速度
//建立XML對象，提取XML數據，建立菜單的鼠标滑動觸發的縮略圖，遮罩影片剪輯的代碼... 内容較多，盡量解釋
var myx:XML = new XML();
myx.ignoreWhite = true;
myx.onLoad = function()
{
var nodes = this.firstChild.childNodes; //提取XML數據
numMenu = nodes.length; //使用XML的關鍵，這個變量自動儲存XML數據的節數，這樣日後我(wǒ)(wǒ)們就可以隻更新（添加／減少）XML文件 Flash就會自動更新
for(var i=0; i<numMenu; i++)
{
//建立子影片剪輯載入縮略圖
var holder:MovieClip = container.createEmptyMovieClip("holder" + i, i); //在母影片剪輯裏建立相等數量的字影片剪輯以載入縮略圖
container["holder" + i]._x = 0; //定位
container["holder" + i]._y = tlh * i;
container["holder" + i].loadMovie(nodes[i].attributes.thumb); //載入縮略圖

//建立遮罩
container.setMask(mask);

//建立菜單
var menu = home.createEmptyMovieClip("menu" + i, i+40); //建立相等數量的空影片剪輯以存放(fàng)菜單文字
menu._x = menul;
menu._y = menut + (mlh * i);
menu.moveTo(menul, menut);
menu.createTextField("btxt", 0, 0, 0, 150, 20); //建立動态文本存放(fàng)文字
menu.btxt.html = true;
menu.btxt.wordWrap = true;
menu.btxt.text = (nodes[i].attributes.nav); //載入文字

//菜單文字樣式
btntf = new TextFormat();
btntf.color = 0x666666;
btntf.font = "verdana";
btntf.leading = 10;
btntf.size = 10;
menu.btxt.setTextFormat(btntf);

//儲存i的值，這一(yī)步非常重要
menu.i = i;

//菜單鼠标滑入，滑出，點擊時的代碼
menu.onRollOver = function()
{
var who:Number = this.i; //提取當前 i
maskdy = menut + (mlh * who) - 15; //遮罩位置根據當前 i，即當前菜單按鈕來計算
containdy = maskdy - (tlh * who); //遮罩中(zhōng)縮略圖的位置根據在遮罩位置的基礎上再根據當前 i 計算出來
speed = 3; //當鼠标滑入菜單是把速度提高 （speed值越小(xiǎo)，速度越高，因爲緩動函數中(zhōng)y的位移根speed是相除關系，這裏我(wǒ)(wǒ)們的設置将使鼠标滑入菜單按鈕時提高遮罩和縮略圖的緩動速度，當然随便您啦，您當然也可以相反讓他們變得更慢(màn)，完全是個人喜好
menutf = new TextFormat();
menutf.underline = true; //鼠标滑入時菜單上文字加下(xià)劃線
this.btxt.setTextFormat(menutf);
}
menu.onRollOut = function()
{
var who:Number = this.i; //提取當前 i
var offy = Stage.height + 50;
maskdy = offy; //當鼠标滑出菜單時把遮罩和縮略圖移出舞台，我(wǒ)(wǒ)們選擇移到舞台下(xià)方，當然您也可以把它們移到上方看不到的地方，或者自己編寫透明度的緩動函數讓它們的透明度緩動淡出
containdy = offy - (tlh * who); //同樣縮略圖的緩動位置也相對其當前位置相應的移出舞台
speed = 10; //設置緩動速度，使移出時速度變慢(màn)
menutf = new TextFormat();
menutf.underline = false;
this.btxt.setTextFormat(menutf);
}
menu.onRelease = function()
{
var who:Number = this.i; //提取當前 i
var link:String = nodes[who].attributes.url; //把XML中(zhōng)url儲存到變量link中(zhōng)
getURL(link, "_blank");
}
}
}
myx.load("xmlMenu.xml")
//到這裏基本上完成了，下(xià)面隻需要把用到一(yī)些緩動函數加上就可以了；
//遮罩影片剪輯的緩動函數
mask.onEnterFrame = function()
{
maskoldy = this._y;
this._y += (maskdy - maskoldy) / 7;
}
//縮略圖母影片剪輯的緩動函數
container.onEnterFrame = function()
{
containoldy = this._y;
this._y += (containdy - containoldy) / 7;
}
//縮略圖外(wài)框的緩動函數
br.onEnterFrame = function()
{
brdy = maskdy;
broldy = this._y;
this._y += (brdy - broldy) / 7;
}
//初始化遮罩縮略圖位置
maskdy = menut + (mlh * 0) - 15;
containdy = maskdy - (tlh * 0);
// 這個是這裏我(wǒ)(wǒ)們用到的XML文件
<?xml version="1.0" encoding="ISO-8859-1"?>
<xmeMenu>
<menu nav="Volkswagen Phaeton" url="http://www.keyframe1.com/kf1/work/phaeton/" thumb="thumb/1.jpg" />
<menu nav="Volkswagen Touareg" url="http://www.keyframe1.com/kf1/work/touareg/" thumb="thumb/2.jpg" />
<menu nav="KeyFrame1 Digital" url="http://www.keyframe1.com" thumb="thumb/3.jpg" />
<menu nav="I-Jar Layout" url="http://www.keyframe1.com" thumb="thumb/4.jpg" />
<menu nav="CGRN e-Learning" url="http://www.cgrn.cn" thumb="thumb/5.jpg" />
<menu nav="Wild Product" url="http://www.keyframe1.com" thumb="thumb/6.jpg" />
<menu nav="Chinese Made Easy" url="http://www.chinesemadeeasy.net" thumb="thumb/7.jpg" />
<menu nav="Jin Shun Jin Da" url="http://www.keyframe1.com/kf1/work/jinshun/" thumb="thumb/8.jpg" />
<menu nav="KeyFrame1 Flash beta" url="http://beta.keyframe1.com" thumb="thumb/9.jpg" />
<menu nav="Volkswagen New Beetle" url="http://www.keyframe1.com/kf1/work/nb/" thumb="thumb/10.jpg" />
<menu nav="Volkswagen Revamp" url="http://www.volkswagen.com.cn" thumb="thumb/11.jpg" />
<menu nav="VW New Beetle Cabriolet" url="http://www.keyframe1.com/kf1/work/nbc/" thumb="thumb/12.jpg" />
<menu nav="KeyFrame1 Flash beta" url="http://beta.keyframe1.com" thumb="thumb/9.jpg" />
<menu nav="Volkswagen New Beetle" url="http://www.keyframe1.com/kf1/work/nb/" thumb="thumb/10.jpg" />
<menu nav="Volkswagen Revamp" url="http://www.volkswagen.com.cn" thumb="thumb/11.jpg" />
<menu nav="VW New Beetle Cabriolet" url="http://www.keyframe1.com/kf1/work/nbc/" thumb="thumb/12.jpg" />
</xmeMenu>
現在可以試着修改，删除或者添加我(wǒ)(wǒ)們的XML，你會發現我(wǒ)(wǒ)們的swf文件自動更新數據了。在未來的XML菜單系列教程中(zhōng)，我(wǒ)(wǒ)們會在這個教程的基礎上繼續豐富這個XML菜單的功能。
源碼下(xià)載：http://www.blueidea.com/articleimg/2007/01/4461/kf1_xmlMenu.zip