■ 用FLASH打造多彩下拉菜單

　　在如今這個網(wǎng)絡(luò)技術(shù)日新月異的時代，新技術(shù)，新工具層出不窮，不知不覺之間flash已是如此貼近我們，從動畫短片到MTV，從趣味游戲到網(wǎng)站片頭，大有一統(tǒng)網(wǎng)絡(luò)動畫界的趨勢。各大門戶網(wǎng)站也紛紛采用flash技術(shù)以加強頁面效果，看著這些讓人目眩神迷的動畫效果，做為網(wǎng)蟲的你心中是不是也有閃一下的沖動呢？別急，下面我們就來學(xué)習(xí)一種用flash制作下拉菜單的制作方法。

　　顯而易見，與傳統(tǒng)下拉菜單相比，使用了flash技術(shù)的下拉菜單無論在外觀上功能上都有著無與倫比的優(yōu)勢，我們可以輕松制作出流暢的動畫效果，讓你的網(wǎng)站披上迷人的面紗。并且由于flash使用了矢量技術(shù)，生成的動畫不但自然流暢，而且文件很小，可以無限放大而不失真。下載速度也很快，大大節(jié)省了瀏覽者的上網(wǎng)費用。傳統(tǒng)菜單在更新時要更換大量圖片，更改網(wǎng)頁代碼，真是費時又費力，還很容易出錯。而flash下拉菜單維護更新十分方便，當(dāng)你想要更換菜單內(nèi)容時，只需在 flash中修改文字與鏈接，再將這一個swf動畫文件上傳即可。但是flash 菜單也有一個致命的缺點，那就是并不是所有的網(wǎng)頁瀏覽器都支持flash動畫的swf文件格式，而需要下載插件方能正常瀏覽。這就給瀏覽者帶來了不便，這也是 制約flash技術(shù)在更大的范圍內(nèi)一展身手的主要原因。但是相信隨著微軟ie6.0的發(fā)布，其內(nèi)建的flash插件功能將把flash的發(fā)展帶向一個新的高峰。

　　下面，我們正式開始flash下拉菜單的學(xué)習(xí)，這個實例的原理是利用按鈕響應(yīng)鼠標(biāo)事件實現(xiàn)幀間跳轉(zhuǎn)。響應(yīng)鼠標(biāo)事件利用on，跳轉(zhuǎn)利用gotoandstop完成。
先看看將使用到的as的語法：

telltarget
語法：
telltarget(target);{
statement;
}
target:指定時間軸線的目標(biāo)路徑字符串
statement:目標(biāo)時間軸線代碼

on 的語法是：

on(mouseevent){
statement;
}
statement: 鼠標(biāo)事件發(fā)生時執(zhí)行的代碼
mouseevent是鼠標(biāo)事件，包括有：
press: 鼠標(biāo)指針在按鈕上并單擊
release: 鼠標(biāo)指針在按鈕上被釋放
releaseoutside: 鼠標(biāo)指針在按鈕外被釋放
rollover: 鼠標(biāo)指針移進按鈕區(qū)域內(nèi)
rollout: 鼠標(biāo)指針移出按鈕區(qū)域內(nèi)
dragover: 鼠標(biāo)指針在按鈕上被按下，移出按鈕再移回
keypress: 鼠標(biāo)指針在按鈕上，然后鼠標(biāo)按下，再移出按鈕區(qū)域

　　為了便于閱讀，我們將類似"點擊windows菜單，在彈出的下拉菜單中點擊panels，在彈出的panels子菜單中單擊align選項"這樣的動作定義為windows----panels---align。打開你的 flash,新建一個文件寬300，高200，（如圖）。

　　Insert---new symbol新建一個元件，類型為"button",命名為"主按鈕"，在工具欄上選擇rectangle tool，設(shè)置stroke color為黑色，fill color為深藍色，畫一個矩形，edit ---select all，modify ---group,將所有的線條與色塊群組起來。windows---panels---info,在彈出的info面板中調(diào)整這個矩形的大小，寬為140，高為27。Windows---panels---align，在align面板上設(shè)置居中對齊，使此矩形恰好位于舞臺正中央。選擇text tool,輸入文字"藍色理想"，windows---panels---character,在這里可以調(diào)整文字的大小，字體，顏色等。將調(diào)整好的文字放在矩形中央。你還可以給按鈕加上箭頭用以修飾，在此不在贅述。

　　鼠標(biāo)右鍵單擊over幀選擇insert keyframe新建關(guān)鍵幀。點選矩形，modify---ungroup解散群組，點選藍色色塊，改變填充色為橘黃。

　　Insert---new symbol新建一個元件，類型為"button",命名為"菜單"，在工具欄上選擇rectangle tool，設(shè)置stroke color為none填充色為淺黃色，畫一個矩形，edit ---select all，modify ---group,將所有的線條與色塊群組起來。windows---panels---info,在彈出的info面板中調(diào)整這個矩形的大小，寬為110高為27。輸入文字"內(nèi)容一"。

　　調(diào)整文字大小后將文字放置在矩形中央，鼠標(biāo)右鍵單擊over幀選擇insert keyframe新建關(guān)鍵幀。點選矩形，modify---ungroup解散群組，點選淺黃色塊，改變填充色為橘黃。

　　鼠標(biāo)右鍵單擊down幀選擇insert keyframe新建關(guān)鍵幀。點選橘黃色塊，改變填充色為紅色。

　　Windows---library,在library中右鍵單擊菜單元件，選擇duplicate,復(fù)制出元件：菜單 copy,右鍵單擊"菜單 copy"元件，選擇rename,將其改名為"菜單2"，并重復(fù)以上操作，復(fù)制出"菜單3"，"菜單4"。在library中雙擊"菜單2"元件，進入編輯狀態(tài)。分別在up,over,down幀中雙擊文字"內(nèi)容一"改為"內(nèi)容二"。重復(fù)如上操作，分別將"菜單3"、"菜單4"中的文字改為"內(nèi)容三"，"內(nèi)容四"。Insert---new symbol新建一個元件，類型為"button",命名為"大按鈕"，鼠標(biāo)右鍵單擊hit幀，insert keyframe新建關(guān)鍵幀。選擇rectangle tool畫一矩形，不用去管它的填充色，因為在 hit幀中的內(nèi)容是不會顯現(xiàn)在發(fā)布后的動畫中的，也就是說它們是透明的。windows---panels---info，在info面板中設(shè)置矩型寬為300，高為200。

　?。ㄗ⒁猓捍颂幘褪俏覀兂Ｕf的隱形按鈕的制作方法，你可試著將此按鈕拖拽到scene中，并ctrl+enter進行預(yù)覽，就會發(fā)現(xiàn)雖然我們看不到這個按鈕，但到鼠標(biāo)移動到此按鈕的區(qū)域內(nèi)時卻會有反應(yīng)。這種技巧有著極廣泛的應(yīng)用，希望大家好好掌握。）

　　Insert---new symbol新建一個元件，類型為"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。并使其與前一個矩形頂部對齊，輸入文字："歡迎光臨'藍色理想'"，在character面板調(diào)整大小，顏色后放置在黑色矩形中央。

　　Insert---new symbol新建一個元件，類型為"movie clip"命名為"默認內(nèi)容"。從library 中拖拽"背景"元件到layer1,并在第2，3，4，5幀建立關(guān)鍵幀。雙擊第一幀，在彈出的frame actions面板中選擇stop();同樣在第2,3,4,5幀上加入actionscript:"stop();"

　　回到第一幀，輸入文字："首頁"，在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新建一個元件，類型為"movie clip"命名為"按鈕組"。從library 中拖拽"主按鈕"元件到layer1，調(diào)整它的位置使其最右端與舞臺中心點對齊，中心軸與舞臺中心軸重合，

在第二幀新建關(guān)鍵幀并且在這兩幀上都加上stop();的actionscript?；氐降谝粠?，右鍵單擊"主按鈕"元件，在彈出菜單中選擇actions，

　　輸入如下as:

on (rollOver) {
gotoAndStop (2);
}
///當(dāng)鼠標(biāo)移動到按鈕上時開始播放第二幀

　　從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)按下時， 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來完成這次操作。在第二幀新建關(guān)鍵幀，從library中拖拽"大按鈕"元件到layer2,調(diào)整位置使其居中。右鍵單擊"菜單大按鈕"元件，在彈出菜單中選擇actions，輸入如下as:

on (rollOver) {
gotoAndStop (1);
}
///當(dāng)鼠標(biāo)移動到按鈕上時，跳轉(zhuǎn)并停止在第一幀。

　　insert---layer新建一層layer3，使之位于最上方，在第二幀新建關(guān)鍵幀，選擇pencil tool,stroke color為黑色，stroke height為1，開始為按鈕描邊，具體效果如圖（你可以按住shift再開始描，這樣你可以輕松畫出水平或垂直的直線）

　　回到scene1，library中拖拽"按鈕組" 與"默認內(nèi)容"元件到layer1，如圖

　　調(diào)整其位置，并可適當(dāng)?shù)恼{(diào)整大小，我們前面說過flash采用矢量技術(shù)，可以無限的等比例縮放，因此你不必擔(dān)心會有失真。選中"默認內(nèi)容"元件，windows---panels---instance,在instance面板中設(shè)置其name屬性為：info。

　　到此為止，我們完成了flash的下拉菜單的制作，在這個實例中你應(yīng)該對于flash的基本操作有了一定的認識，了解了按鈕元件up,over,down,hit四種狀態(tài)各代表什么含義，還應(yīng)當(dāng)掌握：telltarget，gotoandstop，on等as命令。好！最后讓我們預(yù)覽一下效果，還不錯吧？查看一下輸出的swf文件，只有4.6kb，flash的優(yōu)點再次得到體現(xiàn)！還猶豫什么？開始動手吧！