Flash CS3入門製作下拉導航選單

當**中的資訊過多，導致導航欄目繁多時，可以將欄目歸類，採用二級欄目的形式放置在網頁導航選單中。但是由於每乙個選單欄目中的二級欄目個數不等，這裡採用了彈出式選單形式，將主欄目與二級欄目組合在一起，形成隱藏式選單。這樣能夠單獨選擇某個主欄目中的某個二級欄目，而不影響其它欄目。

練習要點

● 匯入psd檔案

● 影片剪輯元件

● 滑鼠事件語句

練習過程

（1）在新建的700×435畫素的空白檔案中，執行【檔案】|【匯入】|【匯入到庫】命令，將素材影象psd檔案匯入到【庫】面板中。然後將檔案中的「圖層1」影象拖入舞台中，利用【對齊】面板使之與舞台左側與垂直居中對齊，如圖59-1所示。

圖59-1 匯入psd檔案

（2）新建「圖層2」，將【庫】面板中的「圖層2」拖入舞台中。使用【文字工具】在該影象下方輸入文字「公司資訊」，其文字屬性如圖59-2所示。

圖59-2 輸入文字

（3）選中「圖層2」中的影象和文字，按快捷鍵f8轉換為影片剪輯元件「列表1」後，進入其編輯模式，按快捷鍵f6插入關鍵幀，將影象「圖層2」替換為「圖層4」，並且將文字分離，填充如圖59-3所示的漸變顏色。

圖59-3 分離文字

（4）新建「圖層2」，並且在第2幀處按快捷鍵f7處插入空白關鍵幀，選擇工具箱中的【矩形工具】，在【屬性】面板中設定工具選項如圖59-4所示，繪製100×120畫素的半透明白色矩形。

圖59-4 繪製半透明白色矩形

（5）新建「圖層3」並且在第2幀處按快捷鍵f7處插入空白關鍵幀，選擇工具箱中的【文字工具】依次輸入文字「公司簡介」、「公司榮譽」與「公司歷史」，其文字輸入如圖59-5所示，並且分別轉換為影片剪輯元件。

圖59-5 輸入文字並轉換元件

（6）新建「圖層4」，選中第1個空白關鍵幀後，按快捷鍵f9開啟【動作－幀】面板，輸入停止指令碼stop();，為影片剪輯元件中的動畫設定停止動作，如圖59-6所示。

圖59-6 新增停止指令碼

（7）新建「圖層5」並且將其放置在所有圖層下方，使用【矩形工具】繪製全透明矩形，其尺寸為覆蓋「圖層1」兩個關鍵幀中的影象與文字，如圖59-7所示。

圖59-7 繪製全透明矩形

（8）使用相同方式製作其他欄目按鈕動畫後返回場景，從【庫】面板中依次將影片剪輯元件「列表2」至「列表5」拖入場景中，其擺放位置如圖59-8所示，並且分別為其設定例項名稱。

圖59-8 為例項命名

（9）新建「圖層3」，選中第1個空白關鍵幀後，按快捷鍵f9開啟【動作－幀】面板，為第乙個例項「列表1」輸入滑鼠單擊與離開事件，如圖59-9所示。

圖59-9 新增滑鼠事件

（10）由於影片剪輯元件中的動畫相同，所以只要使用相同的滑鼠事件為其他例項新增滑鼠事件語句，如圖59-10所示，即可完成下拉導航選單的製作。

圖59-10 新增其他例項指令碼

（11）至此該導航選單製作完成，按快捷鍵ctrl＋s儲存文件後，按快捷鍵ctrl＋enter預覽選單動畫效果，如圖59-11所示。

圖59-11 下拉導航選單效果