精通 Fireworks MX 彈出菜單
說起彈出菜單大家都不陌生,談及實(shí)現(xiàn)制作方法,也有好多種,幾乎Mcromedia的三劍客都可以輕松實(shí)現(xiàn)。不過我們在這里既不是要用DW也不是要用FLASH。沒有為什么,說多了挨罵-_!!!
Fireworks 從4.0版本開始有了制作彈出菜單這一功能,到了MX版本,功能有了一些完善,不過不是很大,好了下面我們進(jìn)入正題.
開始之前必須先確定您擁有以下相關(guān)知識(沒有不要緊,可以去論壇查找相關(guān)的基礎(chǔ)知識)您必須能夠使用FWMX創(chuàng)建一個(gè)彈出菜單,并可以將其導(dǎo)出并倒入到DW中.
章Fireworks MX雖然能夠很方便的幫助我們實(shí)現(xiàn)彈出菜單的功能,可是大多時(shí)候,他實(shí)現(xiàn)的一些效果很難滿足我們追求個(gè)性的需要.如果我們要實(shí)現(xiàn)一些理想中的效果,可能要對他生成的js代碼做些手腳了.做手腳歸做手腳,前提你必須明白那些生成的代碼都代表了什么,下面我們來對代碼的一些參數(shù)做詳盡的講解.
創(chuàng)建彈出菜單并導(dǎo)出之后在mm_menu這個(gè)js文件的首行有這樣一行function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh, halgn,
valgn, pad, space, to, sx, sy, srel, opq, vert, idt, aw, ah) 括號內(nèi)包含的這些參數(shù)名是你所創(chuàng)建的彈出菜單所使用到的參數(shù).在你倒入到HTML文件中的JavaScript文件中是類似于這種的只顯示參數(shù)值function mmLoadMenus() {
if (window.mm_menu_0604164722_0) return;
window.mm_menu_0604164722_0_1_1_1_1 =
new Menu("WholeNote",57,18,
"Arial, Helvetica, sans-serif",12,
"#ffffff","#000099","#000099","#ffcc66","left","middle",
3,0,1000,-79,18,true,true,false,0,true,true);
而并不顯示參數(shù)名,他在這里直接定義了一些相關(guān)的參數(shù)值,而JavaScript腳本為客戶端來讀取js的.
上面的示例代碼中對菜單的編號命名同4.0版本不同,MX的規(guī)則是全部以mm_menu開頭后部跟隨為10位的數(shù)字,之間用下劃線"_"連接后面用0作為結(jié)束,0代表為一級彈出菜單的編號,用來定義一級彈出菜單的屬性,從一級菜單中繼續(xù)再往下細(xì)分為二級,按照示例代碼第三行mm_menu_0604164722_0_1_1_1_1為例,mm_menu_0604164722_0后面_1帶表二級以此類推,我們可以知道,這個(gè)示例代碼最終菜單共有四級子菜單. (沒有試驗(yàn)過,最多可以有多少級菜單)
以上面代碼為例,下面為這些參數(shù)名的示意,舉一反三相互對照.
label 菜單項(xiàng)名字 WholeNote mw 菜單寬度 57 mh 菜單高度 18 fnt 菜單項(xiàng)字體 Arial, Helvetica, sans-serif fs 菜單項(xiàng)字體大小 12 fclr 菜單項(xiàng)字體顏色 "#ffffff" fhclr 滑過狀態(tài)文本顏色 "#000099" bg 單元格背景顏色 "#000099" bgh 鼠標(biāo)經(jīng)過hover狀態(tài)背景顏色 "ffcc66" halgn 菜單橫向?qū)傩?"left" valgn 菜單縱向?qū)傩?"middle" pad 菜單單元格邊距 3 space 菜單單元格間距 0 to 彈出菜單延遲時(shí)間 (1000毫秒=1秒) 1000 sx 子菜單水平位置 -79 sy 子菜單垂直位置 18 srel 子菜單位置屬性(如果為false,既表示放在同一位置)默認(rèn)為 true true opq 菜單邊框是否可見 true vert 菜單是否為垂直菜單 (true為是)false(否,不是) false idt 菜單項(xiàng)目縮進(jìn)(這個(gè)數(shù)值是以像素作為單位的) 0 aw 自動設(shè)置寬度(菜單寬度是自動還是手動設(shè)置寬度數(shù)值的,像素為單位默認(rèn) true 自動設(shè)置) true ah 自動設(shè)置高度(菜單高度是自動還是手動設(shè)置寬度數(shù)值的,像素為單位默認(rèn) true 自動設(shè)置) true
上一章中我們主要給大家介紹了彈出菜單生成的代碼部分。那只是用到了一部分的功能,也只能實(shí)現(xiàn)基礎(chǔ)的表格形式的菜單?墒菍τ谧非蟮膫(gè)性的我們,那似乎滿足不了我們的需求,這時(shí)候我們可以用到另一個(gè)功能如圖。
生成圖形格式的彈出菜單。但是大家可能發(fā)現(xiàn)了生成的這個(gè)圖形菜單只能應(yīng)用基本的FWMX樣式,怎么辦?不要問我,一切設(shè)置完畢導(dǎo)出菜單之后,你有沒有發(fā)現(xiàn)都生成了哪些圖片呢?是不是有類似于mmmenu1_21x26_over.gif和mmmenu1_21x26_up.gif這樣命名的圖片呢?找到之后打開他們看看是不是是你在FWMX里面設(shè)置的菜單樣式的圖片呢,然后你可以用你自己制作的圖形來替換掉他們,注意文件名一個(gè)下劃線后面的over和up,up是沒有選中時(shí)候的菜單樣式,over是鼠標(biāo)經(jīng)過時(shí)候的樣式。恩對于圖形化的彈出菜單呢,有幾個(gè)地方我需要說明一下,其實(shí)不是只有這樣一種辦法可以做出個(gè)性化可以定制的圖形彈出菜單,只是我上面所提到的辦法比較不容易出錯(cuò),只要作之前心里有個(gè)大概的樣式,明確好菜單文字在圖形中所處的位置,事先在FWMX或生成的原碼里改變彈出菜單的高,寬,文字邊距大小縮進(jìn),這樣做出來之后能適應(yīng)更個(gè)性化的圖形。