|
在上一期的XML菜單的教程中，我們做了一個(gè)簡(jiǎn)單的縱向排列的XML文字菜單，并且在flash中附加了一個(gè)跟隨鼠標(biāo)的縮略圖�？s略圖的數(shù)據(jù)也是從XML中提取的。
在我們XML菜單教程的第二期，我們來(lái)解決另外一個(gè)問(wèn)題。
我們都知道XML的方便，隨意的更改，刪除和添加數(shù)據(jù)。請(qǐng)注意，更改和刪除還好，如果添加的話(huà)，這里就會(huì)有一個(gè)界面排版和用戶(hù)使用的問(wèn)題的。拿我們上一次的XML菜單來(lái)演示，我把我們的XML文件有添加了幾十條內(nèi)容，結(jié)果我們的XML菜單變成這樣了：
http://www.keyframe1.com/tute/xmlMenu2/index2.htm
下面的菜單看不到了，可能很多人馬上已經(jīng)想到了解決這種問(wèn)題的辦法。對(duì)！我們要讓我們的用戶(hù)可以滾動(dòng)瀏覽我們的XML菜單，就像這樣：
http://www.keyframe1.com/tute/xmlMenu2/
現(xiàn)在你可以看到所以XML文件里的幾十條記錄全部在舞臺(tái)上，并可以讓用戶(hù)來(lái)滾動(dòng)瀏覽。無(wú)論你如何修改XML文件，永遠(yuǎn)是鼠標(biāo)放在菜單頂端會(huì)停留在菜單的第一條，當(dāng)鼠標(biāo)滑動(dòng)至菜單的底端時(shí)會(huì)停留在菜單的最后一條，無(wú)論XML文件的紀(jì)錄條數(shù)，如果很短，滾動(dòng)會(huì)自然不存在，如果超出規(guī)定菜單高度，就會(huì)像剛才所說(shuō)的那樣的規(guī)律來(lái)滾動(dòng)，即便XML中有1000條記錄也如此。
由于是建立在上一期教程的基礎(chǔ)上的，一些在上一期中重復(fù)使用了的代碼就不再講解了。上一期XML菜單教程地址： XML動(dòng)態(tài)菜單 （一）
第一步， 分析項(xiàng)目：
> 組成部分
- XML文件；
- FLASH源文件；
- 縮略圖JPG文件，50px X 50px 存放在 thumb文件夾；
> 步驟
- 要使XML菜單可以滾動(dòng)，最簡(jiǎn)單的辦法就是把所有裝有XML菜單的影片剪輯都放在一個(gè)母影片剪輯中；
- 計(jì)算出正確的等式；
第二步，開(kāi)始建立我們需要的一些元素，并把它們擺到大概理想的位置：
> 一個(gè)放所有裝有XML菜單的影片剪輯的母影片剪輯，我們叫做mcontainer 150px寬，高340px；
> 兩個(gè)上下箭頭，只是為了美觀；
> 把mcontainer 影片剪輯在工作去擺到(310, 30)；
第三步，actionscripting
//這次我們添加了些新的變量由于計(jì)算方便需要
var menut:Number = 30;
var menul:Number = 300;
var menub:Number = 370; //菜單底部坐標(biāo)
var menuw:Number = 150; //菜單寬度
var menuh:Number = menub - menut; //菜單在舞臺(tái)顯示高度 （也就是遮罩高度）
var home:MovieClip = this;
var mlh:Number = 20;
var tlh:Number = 60;
var speed:Number = 2;
//關(guān)于XML的讀取我們就不再解釋了，請(qǐng)參考上一期教程。我們直接進(jìn)入本期教程的核心代碼：鼠標(biāo)滾動(dòng)計(jì)算等式：
mcontainer.onEnterFrame = function()
{
if(_root._xmouse > menul && _root._xmouse < (menul + menuw)) //當(dāng)鼠標(biāo)的滑動(dòng)至菜單的舞臺(tái)顯示區(qū)域時(shí)激活滑動(dòng)代碼，我們不希望鼠標(biāo)在舞臺(tái)上任何地方移動(dòng)時(shí)菜單都在滾動(dòng)
{
var per:Number = (_root._ymouse - menut) / menuh; //計(jì)算鼠標(biāo)從菜單頂部向下滑動(dòng)了多少？并處以菜單高度得出鼠標(biāo)移動(dòng)的百分比
var menuth:Number = mlh * numMenu; //利用菜單文字行距和XML記錄總條數(shù)算出菜單實(shí)際高度
//滾動(dòng)菜單原理是：鼠標(biāo)從菜單頂部向下滑動(dòng)了百分之多少，菜單就相應(yīng)的向上移動(dòng)自己實(shí)際高度的百分之多少，然后再加上鼠標(biāo)向下移動(dòng)的實(shí)際像素?cái)?shù)。呵呵，慢慢琢磨下應(yīng)該不難理解，實(shí)在是沒(méi)有更簡(jiǎn)單的解釋方法，本身就是那么個(gè)單純的事情
mcontaindy = menut - menuth * per + menuh * per;
mcontainoldy = this._y;
this._y += (mcontaindy - mcontainoldy) / speed;
if(_root._ymouse < menut)mcontainer._y = menut; //如果鼠標(biāo)小于菜單頂部坐標(biāo)，把菜單坐標(biāo)寫(xiě)死到頂部坐標(biāo)；
if(_root._ymouse > menub)mcontainer._y = menut - menuth + menuh; //同樣如果鼠標(biāo)大于菜單底部坐標(biāo)，把菜單坐標(biāo)寫(xiě)死到底部坐標(biāo)；
}
}
這個(gè)就是本期最主要的代碼了，其他的相信看過(guò)上一期教程的看看源文件的注解應(yīng)該可以搞明白的。
現(xiàn)在我們可以真正隨意修改，刪除，添加我們的XML文件了，我們的XML菜單都可以滿(mǎn)足用戶(hù)的正常瀏覽使用。試試添加它500條記錄。如果你在做一個(gè)相冊(cè)，里面有上百?gòu)堈掌�，這個(gè)可以是個(gè)不錯(cuò)的選擇，滾動(dòng)的簡(jiǎn)單文字標(biāo)題和縮略圖，使用起來(lái)應(yīng)該很友好的。
源碼下載：kf1_xmlMenu2.zip
下一期XML菜單教程希望盡快可以出來(lái)。 多謝閱讀！
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2707711-1-1.html
請(qǐng)繼續(xù)關(guān)注 陸續(xù)更新
本文鏈接：http://www.95time.cn/tech/multimedia/2007/4461.asp 
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁(yè) XML動(dòng)態(tài)菜單 [1] 下一頁(yè)
◎進(jìn)入論壇Flash專(zhuān)欄版塊參加討論
|
第 1 頁(yè) 
第 2 頁(yè) XML動(dòng)態(tài)菜單 [1]
