FW MX 2004教程(8):動態按鈕

按鈕|動態|教程 　在前面的幾章中我們已領略了Fireworks MX 2004在映像繪製上的出色表現。從本章開始，我們將來學習Fireworks MX 2004在在網頁支援上的強大功能。我們先從動態按鈕的製作開始。

　　1、設定滑鼠事件

　　先在畫布上隨便畫個藍色矩形的按鈕形狀，然後按F8鍵將該對象轉化為“按鈕”元件。此時該按鈕在畫布上的情況如圖8—01。

圖8—01

　　雙擊應該按鈕對象後，將退出鍵元件的滑鼠事件設定視窗，如圖8—02。

圖8—02

　　該視窗中前面的“釋放”、“滑過”、“按下”和“按下時滑過”是用來設定滑鼠在觸及按鈕時，按鈕所呈現的四種狀態。而“即時區域”則用來設定按鈕在響應滑鼠指標時的有效範圍。

　　如果我們現在開啟“幀”面板的話，就可以看到該面板下已自動為按鈕元件產生了四個幀，如圖8—03。但此時只有第1幀中有按鈕映像，其它三幀均還沒有任何內容。

圖8—03

　　點擊“匯入按鈕”則可以從Fireworks的按鈕元件庫中直接選取一種按鈕進行匯入，如圖8—04。

圖8—04

　　“釋放”選項卡是用來繪製按鈕的一般狀態。當我們把普通的繪圖物件直接轉換為按鈕元件時，Fireworks會自動將該對象作為按鈕的一般狀態，放在“釋放”選項卡中作為按鈕的第一幀。

　　“滑過”選項卡是繪製當滑鼠移動到按鈕上及按下時，按鈕所呈現的狀態。在這裡我們可點擊“複製彈起時的圖形”按鈕，將“釋放”選項卡中的按鈕圖形複製過來，然後只更改其色彩，以便區分。如圖8—05。或者你也可以在此繪製你想要的其它圖形。

圖8—05

　　“按下”選項卡是繪製滑鼠在按鈕上按過之後，按鈕所呈現的狀態。在該選項中只有選中了“包括導覽列按下狀態”時此幀中的內容才會生效，否則此幀中的內容將不會在網頁瀏覽中出現。我們同樣將上一幀的按鈕狀態通過“複製滑過時的圖形”按鈕複製過來，然後將按鈕色由綠色改為桔紅，如圖8—06。同樣，你也可以在這裡繪製任何一種你想要的按鈕圖形。

圖8—06

　　“按下時滑過”選項是設定按鈕在被按過之後滑鼠再次滑到按鈕上時，按鈕所呈現的形狀。該項同樣是在選中“包括導覽列按下狀態”後才會生效。我們點擊“複製按下時的圖形”後，把上一幀的按鈕色彩改為黑色，以便區別。

圖8—07

　　此時，按鈕的四個滑鼠事件都有了，點擊“完成”按鈕後回到工作區中的“原始”選項窗中。我們可以點擊緊挨“原始”選項窗右邊的“預覽”窗（或按F12鍵啟動瀏覽器）查看測試剛製作的按鈕，如圖8—08。

8—08

　　 回到“原始”選項視窗後雙擊該按鈕圖形，或在“庫”面板中雙擊該按鈕元件都可以對該按鈕進行重新編輯。

　　2、按鈕的連結地區

　　在“按鈕”元件的製作選項卡中，還有一個“即時區域”選項，如圖8—09。

圖8—09

在該選項中可以對按鈕的連結地區進行具體的設定。通過拖動四條紅色邊線，可以調整滑鼠在該按鈕內的有效連結範圍。而當要對圓形按鈕或不規則按鈕設定這樣的連結地區時，矩形的連結地區就會給按鈕造成一部分不必要的滑鼠響應區，如圖8—10。

圖8—10

　　這時，我們可以使用工具條中專門為網頁連結而設立的“Web”工具區，從中選擇“多邊形切片”工具，如圖8—11。

圖8—11

　　用該工具沿著圖形的邊緣進行依次單擊，每點擊一次，就會產生一個類似鋼筆路徑中的直線線段，直到該圖形圈選進去，如圖8—12。

圖8—12

　　 綠色地區內的就是該按鈕有效連結範圍。用“指標”或“部分選定”工具拖動連結範圍邊上的控制點，可以對該範圍進行修改或調整。

　　點選“自動化佈建即時區域”選框時，又可把連結範圍恢複到原來的矩形狀態。

　　在該多邊形按鈕連結切片的屬性框中，可以進一步為該按鈕設定連結目標和按鈕映像的色彩輸出模式等，如圖8—13。

（圖8—13 圖片較大，請拉動捲軸觀看）

　　Alt——在網頁瀏覽時，當滑鼠移到該按鈕上時將要顯示的提示內容；

　　目標——選擇是否在新的瀏覽視窗中開啟所連結的內容。

　　對於按鈕連結地區的設定還可以使用“Web”工具區中的“多邊形熱點”工具為按鈕或圖繪製連結地區，如圖8—14。

圖8—14

　　“多邊形熱點”工具的使用方法與“多邊形切片”工具是一樣的。

　　在為連結地區添加連結化物件時還也可以使用“UBL”面板，如圖8—15。

圖8—15

　　在該面板的第二個輸入欄中可直接輸入“切片”或“熱點”地區的連結地址，然後點擊“添加連結” 按鈕將地址添加到下面的連結視窗中。使用時只需在該視窗中點選當前“切片”或“熱點”地區所要用到的連結地址即可。在“UBL”面板右下角的“建立URL” 按鈕中，可以直接為連結視窗添加連結，或對連結視窗中已有的連結地址進行修改，如圖8—16。

圖8—16