XML動(dòng)態(tài)菜單 (二)flash
更新時(shí)間:2006年12月27日 00:00:00 作者:
在上一期的XML菜單的教程中,我們做了一個(gè)簡(jiǎn)單的縱向排列的XML文字菜單,并且在flash中附加了一個(gè)跟隨鼠標(biāo)的縮略圖??s略圖的數(shù)據(jù)也是從XML中提取的。
在我們XML菜單教程的第二期,我們來解決另外一個(gè)問題。
我們都知道XML的方便,隨意的更改,刪除和添加數(shù)據(jù)。請(qǐng)注意,更改和刪除還好,如果添加的話,這里就會(huì)有一個(gè)界面排版和用戶使用的問題的。拿我們上一次的XML菜單來演示,我把我們的XML文件有添加了幾十條內(nèi)容,結(jié)果我們的XML菜單變成這樣了:
http://www.keyframe1.com/tute/xmlMenu2/index2.htm
下面的菜單看不到了,可能很多人馬上已經(jīng)想到了解決這種問題的辦法。對(duì)!我們要讓我們的用戶可以滾動(dòng)瀏覽我們的XML菜單,就像這樣:
http://www.keyframe1.com/tute/xmlMenu2/
現(xiàn)在你可以看到所以XML文件里的幾十條記錄全部在舞臺(tái)上,并可以讓用戶來滾動(dòng)瀏覽。無論你如何修改XML文件,永遠(yuǎn)是鼠標(biāo)放在菜單頂端會(huì)停留在菜單的第一條,當(dāng)鼠標(biāo)滑動(dòng)至菜單的底端時(shí)會(huì)停留在菜單的最后一條,無論XML文件的紀(jì)錄條數(shù),如果很短,滾動(dòng)會(huì)自然不存在,如果超出規(guī)定菜單高度,就會(huì)像剛才所說的那樣的規(guī)律來滾動(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ì)算出正確的等式;
第二步,開始建立我們需要的一些元素,并把它們擺到大概理想的位置:
> 一個(gè)放所有裝有XML菜單的影片剪輯的母影片剪輯,我們叫做mcontainer 150px寬,高340px;
> 兩個(gè)上下箭頭,只是為了美觀;
> 把mcontainer 影片剪輯在工作去擺到(310, 30);
第三步,actionscripting
這個(gè)就是本期最主要的代碼了,其他的相信看過上一期教程的看看源文件的注解應(yīng)該可以搞明白的。
現(xiàn)在我們可以真正隨意修改,刪除,添加我們的XML文件了,我們的XML菜單都可以滿足用戶的正常瀏覽使用。試試添加它500條記錄。如果你在做一個(gè)相冊(cè),里面有上百張照片,這個(gè)可以是個(gè)不錯(cuò)的選擇,滾動(dòng)的簡(jiǎn)單文字標(biāo)題和縮略圖,使用起來應(yīng)該很友好的。
下一期XML菜單教程希望盡快可以出來。 多謝閱讀!
在我們XML菜單教程的第二期,我們來解決另外一個(gè)問題。
我們都知道XML的方便,隨意的更改,刪除和添加數(shù)據(jù)。請(qǐng)注意,更改和刪除還好,如果添加的話,這里就會(huì)有一個(gè)界面排版和用戶使用的問題的。拿我們上一次的XML菜單來演示,我把我們的XML文件有添加了幾十條內(nèi)容,結(jié)果我們的XML菜單變成這樣了:
http://www.keyframe1.com/tute/xmlMenu2/index2.htm
下面的菜單看不到了,可能很多人馬上已經(jīng)想到了解決這種問題的辦法。對(duì)!我們要讓我們的用戶可以滾動(dòng)瀏覽我們的XML菜單,就像這樣:
http://www.keyframe1.com/tute/xmlMenu2/
現(xiàn)在你可以看到所以XML文件里的幾十條記錄全部在舞臺(tái)上,并可以讓用戶來滾動(dòng)瀏覽。無論你如何修改XML文件,永遠(yuǎn)是鼠標(biāo)放在菜單頂端會(huì)停留在菜單的第一條,當(dāng)鼠標(biāo)滑動(dòng)至菜單的底端時(shí)會(huì)停留在菜單的最后一條,無論XML文件的紀(jì)錄條數(shù),如果很短,滾動(dòng)會(huì)自然不存在,如果超出規(guī)定菜單高度,就會(huì)像剛才所說的那樣的規(guī)律來滾動(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ì)算出正確的等式;
第二步,開始建立我們需要的一些元素,并把它們擺到大概理想的位置:
> 一個(gè)放所有裝有XML菜單的影片剪輯的母影片剪輯,我們叫做mcontainer 150px寬,高340px;
> 兩個(gè)上下箭頭,只是為了美觀;
> 把mcontainer 影片剪輯在工作去擺到(310, 30);
第三步,actionscripting
復(fù)制代碼 代碼如下:
//這次我們添加了些新的變量由于計(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í)在是沒有更簡(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)寫死到頂部坐標(biāo);
if(_root._ymouse > menub)mcontainer._y = menut - menuth + menuh; //同樣如果鼠標(biāo)大于菜單底部坐標(biāo),把菜單坐標(biāo)寫死到底部坐標(biāo);
}
}
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í)在是沒有更簡(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)寫死到頂部坐標(biāo);
if(_root._ymouse > menub)mcontainer._y = menut - menuth + menuh; //同樣如果鼠標(biāo)大于菜單底部坐標(biāo),把菜單坐標(biāo)寫死到底部坐標(biāo);
}
}
這個(gè)就是本期最主要的代碼了,其他的相信看過上一期教程的看看源文件的注解應(yīng)該可以搞明白的。
現(xiàn)在我們可以真正隨意修改,刪除,添加我們的XML文件了,我們的XML菜單都可以滿足用戶的正常瀏覽使用。試試添加它500條記錄。如果你在做一個(gè)相冊(cè),里面有上百張照片,這個(gè)可以是個(gè)不錯(cuò)的選擇,滾動(dòng)的簡(jiǎn)單文字標(biāo)題和縮略圖,使用起來應(yīng)該很友好的。
下一期XML菜單教程希望盡快可以出來。 多謝閱讀!
相關(guān)文章
AS3.0 實(shí)例學(xué)習(xí) 熟悉addChild和removeChild在不同的swf之間的運(yùn)用,以及l(fā)oader的用法
這篇文章通過實(shí)例給大家介紹了AS3.0 實(shí)例學(xué)習(xí) 熟悉addChild和removeChild在不同的swf之間的運(yùn)用,以及l(fā)oader的用法,非常不錯(cuò),需要的朋友參考下吧2007-12-12可控制Flash Player的Javascript方法總結(jié)
可控制Flash Player的Javascript方法總結(jié)...2007-03-03