|
■ 用FLASH打造多彩下拉菜單
在如今這個(gè)網(wǎng)絡(luò)技術(shù)日新月異的時(shí)代，新技術(shù)，新工具層出不窮，不知不覺(jué)之間flash已是如此貼近我們，從動(dòng)畫短片到MTV，從趣味游戲到網(wǎng)站片頭，大有一統(tǒng)網(wǎng)絡(luò)動(dòng)畫界的趨勢(shì)。各大門戶網(wǎng)站也紛紛采用flash技術(shù)以加強(qiáng)頁(yè)面效果，看著這些讓人目眩神迷的動(dòng)畫效果，做為網(wǎng)蟲的你心中是不是也有閃一下的沖動(dòng)呢？別急，下面我們就來(lái)學(xué)習(xí)一種用flash制作下拉菜單的制作方法。
顯而易見，與傳統(tǒng)下拉菜單相比，使用了flash技術(shù)的下拉菜單無(wú)論在外觀上功能上都有著無(wú)與倫比的優(yōu)勢(shì)，我們可以輕松制作出流暢的動(dòng)畫效果，讓你的網(wǎng)站披上迷人的面紗。并且由于flash使用了矢量技術(shù)，生成的動(dòng)畫不但自然流暢，而且文件很小，可以無(wú)限放大而不失真。下載速度也很快，大大節(jié)省了瀏覽者的上網(wǎng)費(fèi)用。傳統(tǒng)菜單在更新時(shí)要更換大量圖片，更改網(wǎng)頁(yè)代碼，真是費(fèi)時(shí)又費(fèi)力，還很容易出錯(cuò)。而flash下拉菜單維護(hù)更新十分方便，當(dāng)你想要更換菜單內(nèi)容時(shí)，只需在 flash中修改文字與鏈接，再將這一個(gè)swf動(dòng)畫文件上傳即可。但是flash 菜單也有一個(gè)致命的缺點(diǎn)，那就是并不是所有的網(wǎng)頁(yè)瀏覽器都支持flash動(dòng)畫的swf文件格式，而需要下載插件方能正常瀏覽。這就給瀏覽者帶來(lái)了不便，這也是 制約flash技術(shù)在更大的范圍內(nèi)一展身手的主要原因。但是相信隨著微軟ie6.0的發(fā)布，其內(nèi)建的flash插件功能將把flash的發(fā)展帶向一個(gè)新的高峰。
下面，我們正式開始flash下拉菜單的學(xué)習(xí)，這個(gè)實(shí)例的原理是利用按鈕響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)幀間跳轉(zhuǎn)。響應(yīng)鼠標(biāo)事件利用on，跳轉(zhuǎn)利用gotoandstop完成。
先看看將使用到的as的語(yǔ)法：
telltarget
語(yǔ)法：
telltarget(target);{
statement;
}
target:指定時(shí)間軸線的目標(biāo)路徑字符串
statement:目標(biāo)時(shí)間軸線代碼
on 的語(yǔ)法是：
on(mouseevent){
statement;
}
statement: 鼠標(biāo)事件發(fā)生時(shí)執(zhí)行的代碼
mouseevent是鼠標(biāo)事件，包括有：
press: 鼠標(biāo)指針在按鈕上并單擊
release: 鼠標(biāo)指針在按鈕上被釋放
releaseoutside: 鼠標(biāo)指針在按鈕外被釋放
rollover: 鼠標(biāo)指針移進(jìn)按鈕區(qū)域內(nèi)
rollout: 鼠標(biāo)指針移出按鈕區(qū)域內(nèi)
dragover: 鼠標(biāo)指針在按鈕上被按下，移出按鈕再移回
keypress: 鼠標(biāo)指針在按鈕上，然后鼠標(biāo)按下，再移出按鈕區(qū)域
為了便于閱讀，我們將類似"點(diǎn)擊windows菜單，在彈出的下拉菜單中點(diǎn)擊panels，在彈出的panels子菜單中單擊align選項(xiàng)"這樣的動(dòng)作定義為windows----panels---align。打開你的 flash,新建一個(gè)文件寬300，高200，（如圖）。
Insert---new symbol新建一個(gè)元件，類型為"button",命名為"主按鈕"，在工具欄上選擇rectangle tool，設(shè)置stroke color為黑色，fill color為深藍(lán)色，畫一個(gè)矩形，edit ---select all，modify ---group,將所有的線條與色塊群組起來(lái)。windows---panels---info,在彈出的info面板中調(diào)整這個(gè)矩形的大小，寬為140，高為27。Windows---panels---align，在align面板上設(shè)置居中對(duì)齊，使此矩形恰好位于舞臺(tái)正中央。選擇text tool,輸入文字"藍(lán)色理想"，windows---panels---character,在這里可以調(diào)整文字的大小，字體，顏色等。將調(diào)整好的文字放在矩形中央。你還可以給按鈕加上箭頭用以修飾，在此不在贅述。
鼠標(biāo)右鍵單擊over幀選擇insert keyframe新建關(guān)鍵幀。點(diǎn)選矩形，modify---ungroup解散群組，點(diǎn)選藍(lán)色色塊，改變填充色為橘黃。
Insert---new symbol新建一個(gè)元件，類型為"button",命名為"菜單"，在工具欄上選擇rectangle tool，設(shè)置stroke color為none填充色為淺黃色，畫一個(gè)矩形，edit ---select all，modify ---group,將所有的線條與色塊群組起來(lái)。windows---panels---info,在彈出的info面板中調(diào)整這個(gè)矩形的大小，寬為110高為27。輸入文字"內(nèi)容一"。
調(diào)整文字大小后將文字放置在矩形中央，鼠標(biāo)右鍵單擊over幀選擇insert keyframe新建關(guān)鍵幀。點(diǎn)選矩形，modify---ungroup解散群組，點(diǎn)選淺黃色塊，改變填充色為橘黃。
鼠標(biāo)右鍵單擊down幀選擇insert keyframe新建關(guān)鍵幀。點(diǎn)選橘黃色塊，改變填充色為紅色。
Windows---library,在library中右鍵單擊菜單元件，選擇duplicate,復(fù)制出元件：菜單 copy,右鍵單擊"菜單 copy"元件，選擇rename,將其改名為"菜單2"，并重復(fù)以上操作，復(fù)制出"菜單3"，"菜單4"。在library中雙擊"菜單2"元件，進(jìn)入編輯狀態(tài)。分別在up,over,down幀中雙擊文字"內(nèi)容一"改為"內(nèi)容二"。重復(fù)如上操作，分別將"菜單3"、"菜單4"中的文字改為"內(nèi)容三"，"內(nèi)容四"。Insert---new symbol新建一個(gè)元件，類型為"button",命名為"大按鈕"，鼠標(biāo)右鍵單擊hit幀，insert keyframe新建關(guān)鍵幀。選擇rectangle tool畫一矩形，不用去管它的填充色，因?yàn)樵?hit幀中的內(nèi)容是不會(huì)顯現(xiàn)在發(fā)布后的動(dòng)畫中的，也就是說(shuō)它們是透明的。windows---panels---info，在info面板中設(shè)置矩型寬為300，高為200。
�。ㄗ⒁猓捍颂幘褪俏覀兂Ｕf(shuō)的隱形按鈕的制作方法，你可試著將此按鈕拖拽到scene中，并ctrl+enter進(jìn)行預(yù)覽，就會(huì)發(fā)現(xiàn)雖然我們看不到這個(gè)按鈕，但到鼠標(biāo)移動(dòng)到此按鈕的區(qū)域內(nèi)時(shí)卻會(huì)有反應(yīng)。這種技巧有著極廣泛的應(yīng)用，希望大家好好掌握。）
Insert---new symbol新建一個(gè)元件，類型為"movie clip"命名為"背景"。用rectangle tool畫一矩形，設(shè)置stroke color為黑色，fill color為黃色。在info面板設(shè)置寬為120高為120。再用rectangle tool畫一矩形，設(shè)置stroke color為none，fill color為黑色。在info面板設(shè)置寬為120高為20。并使其與前一個(gè)矩形頂部對(duì)齊，輸入文字："歡迎光臨'藍(lán)色理想'"，在character面板調(diào)整大小，顏色后放置在黑色矩形中央。
Insert---new symbol新建一個(gè)元件，類型為"movie clip"命名為"默認(rèn)內(nèi)容"。從library 中拖拽"背景"元件到layer1,并在第2，3，4，5幀建立關(guān)鍵幀。雙擊第一幀，在彈出的frame actions面板中選擇stop();同樣在第2,3,4,5幀上加入actionscript:"stop();"
回到第一幀，輸入文字："首頁(yè)"，在character面板調(diào)整顏色與大小后將其如圖放置。
分別在第2，3，4，5幀輸入文字"內(nèi)容一"，"內(nèi)容二"，"內(nèi)容三"，"內(nèi)容四"，調(diào)整好位置與大小。（位置、大小應(yīng)參照第一幀文字）單擊第2幀，windows---panels---frame,在彈出的 frame面板上設(shè)定此幀的幀標(biāo)簽（即frame lable）為1。同樣將第3，4，5幀的幀標(biāo)簽依次設(shè)為2，3，4 。
Insert---new symbol新建一個(gè)元件，類型為"movie clip"命名為"按鈕組"。從library 中拖拽"主按鈕"元件到layer1，調(diào)整它的位置使其最右端與舞臺(tái)中心點(diǎn)對(duì)齊，中心軸與舞臺(tái)中心軸重合，
在第二幀新建關(guān)鍵幀并且在這兩幀上都加上stop();的actionscript�；氐降谝粠�，右鍵單擊"主按鈕"元件，在彈出菜單中選擇actions，
輸入如下as:
on (rollOver) {
gotoAndStop (2);
}
///當(dāng)鼠標(biāo)移動(dòng)到按鈕上時(shí)開始播放第二幀
從library 中拖拽"菜單" 、"菜單2"、"菜單3"、"菜單4"元件到layer2，并如圖排列
選中"菜單"元件，windows---panels---instance,在instance面板上的options下拉菜單中選擇track as button,用同樣的方法設(shè)置"菜單2"、"菜單3"、"菜單4"元件。右鍵單擊"菜單"元件，在彈出菜單中選擇actions，輸入如下as:
on (release) {
tellTarget ("_root.info") {
gotoAndStop ("1");
}
}
///當(dāng)鼠標(biāo)按下時(shí)， name屬性為info的mc跳轉(zhuǎn)并停止在frame lable為1的那一幀
用相同的方法依次在"菜單2"、"菜單3"、"菜單4"元件上輸入如下as:
菜單2
on (release) {
tellTarget ("_root.info") {
gotoAndStop ("2);
}
}
菜單3
on (release) {
tellTarget ("_root.info") {
gotoAndStop ("3);
}
}
菜單4
on (release) {
tellTarget ("_root.info") {
gotoAndStop ("4);
}
}
insert---layer新建一層layer2，并使layer2的位置位于layer1之下，你可以用鼠標(biāo)拖拽layer來(lái)完成這次操作。在第二幀新建關(guān)鍵幀，從library中拖拽"大按鈕"元件到layer2,調(diào)整位置使其居中。右鍵單擊"菜單大按鈕"元件，在彈出菜單中選擇actions，輸入如下as:
on (rollOver) {
gotoAndStop (1);
}
///當(dāng)鼠標(biāo)移動(dòng)到按鈕上時(shí)，跳轉(zhuǎn)并停止在第一幀。
insert---layer新建一層layer3，使之位于最上方，在第二幀新建關(guān)鍵幀，選擇pencil tool,stroke color為黑色，stroke height為1，開始為按鈕描邊，具體效果如圖（你可以按住shift再開始描，這樣你可以輕松畫出水平或垂直的直線）
回到scene1，library中拖拽"按鈕組" 與"默認(rèn)內(nèi)容"元件到layer1，如圖
調(diào)整其位置，并可適當(dāng)?shù)恼{(diào)整大小，我們前面說(shuō)過(guò)flash采用矢量技術(shù)，可以無(wú)限的等比例縮放，因此你不必?fù)?dān)心會(huì)有失真。選中"默認(rèn)內(nèi)容"元件，windows---panels---instance,在instance面板中設(shè)置其name屬性為：info。
到此為止，我們完成了flash的下拉菜單的制作，在這個(gè)實(shí)例中你應(yīng)該對(duì)于flash的基本操作有了一定的認(rèn)識(shí)，了解了按鈕元件up,over,down,hit四種狀態(tài)各代表什么含義，還應(yīng)當(dāng)掌握：telltarget，gotoandstop，on等as命令。好！最后讓我們預(yù)覽一下效果，還不錯(cuò)吧？查看一下輸出的swf文件，只有4.6kb，flash的優(yōu)點(diǎn)再次得到體現(xiàn)！還猶豫什么？開始動(dòng)手吧！
出處：
責(zé)任編輯：藍(lán)色
上一頁(yè) Fireworks篇 下一頁(yè) Javascript篇
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 
第 3 頁(yè) Flash篇
