這個技巧來源于一個國外的實例,很實用,大家可以看看先http://www.dengjie.com/weblog/comment.asp?post_id=462
在線演示http://2mdc.com/resizableFlash/
這個技巧非常適合一些無極擴展菜單之類的特效,可以脫離HTML大小的限制,任意增加菜單的長度,下面就以蛋蛋的Flash+XML無極擴展菜單為例子,如何動態(tài)設定FLASH文件在Html頁面中的大小 最終效果演示: http://www.blackflasher.net/download/index.htm
首先我們來分析一下這個XML菜單的代碼:
//建立頂級菜單 function creatRootMenu() { _root.creatMyMenu(menuData.firstChild);
}
這個函數主要是調用了creatMyMenu()函數,搜索整個代碼,找到creatMyMenu()函數
//建立子菜單 function creatMyMenu(a, b) { for (var i = 0; i<a.childNodes.length; i++) { this.createEmptyMovieClip("item"+i, i); var myMenu = this["item"+i]; myMenu.creatMenu(a.childNodes[i], i, b); } }
creatMyMenu()引入了2個值,其中a是一個XML對象,那么我們如果要計算新的尺寸,就需要知道一共打開了多少個菜單,可以在函數中加一句trace("這個子菜單有"+a.childNodes.length),然后測試影片,返回結果為
這兩次返回的結果主要是第一次生成了3個主菜單,而主菜單的生成函數中嵌入了一個檢查菜單是否展開的函數,若展開則繼續(xù)生成子菜單,既第一個分類中的7個子菜單。 現在已經確定了菜單初始化時生成的數量,下一步確定菜單在打開和關閉時所生成的數量。 大概瀏覽一下整體代碼,可以看到有一個函數menuDrawBg()其中有好幾個鼠標事件,那么這個函數應該是決定鼠標事件出發(fā)以后所執(zhí)行命令的函數。我們主要看onRelease事件:
this.bg.onRelease = function() { getURL(this._parent.XMLData.attributes.url,this._parent.XMLData.attributes
.targetWindo); if (!(Number(this._parent.XMLData.attributes.open))) { this._parent.XMLData.attributes.open = 1; this._parent.creatMenu(this._parent.XMLData, this._parent.XMLIndex, 1); } else { if (Number(this._parent.XMLData.attributes.open)) { this._parent.item.removeMovieClip(); this._parent.XMLData.attributes.open = 0; } } };
這個事件中主要判斷XML對象中的OPEN屬性,控制開/關,首先判斷“!(Number(this._parent.XMLData.attributes.open)”條件既若菜單的open屬性為0則打開菜單,再往下看,先不要急著取得打開的菜單數目,可以看到里面調用了一個creatMenu()函數,搜索找到creatMenu()函數。最后找到這一句:“MovieClip.prototype.creatMenu = menuInit;”往下看,就是menuInit函數的定義,稍微看看你可以發(fā)現這個函數也調用了creatMyMenu()函數,我們之前已經修改過了creatMyMenu()函數,那么這里則可以省去這個步驟,下面看看關閉菜單的代碼,其中的XML對象為this._parent.XMLData,那么要取得關閉菜單的數目取得this._parent.XMLData的項數即可,增加一個trace("菜單關上"+this._parent.XMLData.childNodes.length)語句,然后測試。
測試無誤后,下面要開始計算新的高度。在代碼中加如下列語句:
function newSize(width,height){ _root.nowheight=height trace("新的寬度為"+width+",新的高度為"+height) }
這里先測試計算結果是否正確,然后在之前修改好的幾個函數中分別加入這樣的語句
_root.newSize(0,取得的菜單數量*(菜單寬度+菜單間隔))
測試一切正常以后,就可以把Flash和Html結合起來了
先把之前的加入的語句做點修改: function newSize(width,height){ getURL("javascript:newSize(550,"+height+")") _root.nowheight=height }
通過GetURL()函數來調用在HTML頁面中定義好的JavaScript函數,下面是newSize()函數的代碼:
<SCRIPT LANGUAGE="JavaScript"> <!-- function newSize(datoX,datoY) { if(document.all && !document.getElementById) { document.all['menu'].style.pixelWidth = datoX; document.all['menu'].style.pixelHeight = datoY; }else{ document.getElementById('menu').style.width = datoX; document.getElementById('menu').style.height = datoY; } } //--> </script>
這段代碼并不難理解,主要是設定ID為menu的對象的CSS中一些屬性,既width和height
在HTML頁面中,新建兩個表格,一個為2行2列,另外一個為單行單列,頁邊距均為0,插入幾幅漂亮的圖片,如圖:
然后在表格1里面的一個單元格插入一個Flash文件,并且參數設定如下:
最后,在代碼中給Flash文件加入這樣的屬性name="menu" style="width:1px;height:1px;
好了,現在就可以測試你的結果了。這個技巧主要是在于flash參數的傳遞和JavaScript函數的編寫上面,有興趣的朋友還可以再發(fā)揮發(fā)揮,看看能不能搞出什么新花樣來。
出處:藍色理想
責任編輯:藍色
上一頁 在HTML頁中讓Flash背景透明 下一頁 補充與源文件下載
◎進入論壇Flash專欄版塊參加討論
|