flash教材配套PPT第10章-網(wǎng)站Flash導(dǎo)航條制作

1Part10第10章網(wǎng)站Flash導(dǎo)航條制作2目標(biāo)概述案例效果學(xué)習(xí)目標(biāo)

網(wǎng)站導(dǎo)航條一般分為圖像式導(dǎo)航條和動畫式導(dǎo)航條兩種，圖像式導(dǎo)航條指利用圖像設(shè)置鏈接而成，這種導(dǎo)航條用戶可以直接在Dreamweaver中制作；動畫式導(dǎo)航條指使用具有交互功能的動畫作為導(dǎo)航對象，這種導(dǎo)航條就需要在Flash中制作。動畫式導(dǎo)航條因效果絢麗應(yīng)用的越來越多，本項(xiàng)目就是為常州工程職業(yè)技術(shù)學(xué)院學(xué)院網(wǎng)站制作導(dǎo)航條。項(xiàng)目完成的效果如圖設(shè)計(jì)思路10.14本項(xiàng)目將利用Flash軟件，制作用于常州工程職業(yè)技術(shù)學(xué)院網(wǎng)站上的導(dǎo)航條動畫。該導(dǎo)航條的制作思路如下：1.動畫的初始狀態(tài)顯示一級菜單，如圖所示效果；2.當(dāng)瀏覽者將光標(biāo)移到一級導(dǎo)航條按鈕上，該按鈕會有黃色矩形背景閃爍，并從按鈕下方彈出該按鈕的二級菜單，如圖所示；3.當(dāng)光標(biāo)移到其他按鈕上，那么原來按鈕的二級菜單就會消失，而光標(biāo)所在按鈕的二級菜單將從下方彈出，如圖所示。導(dǎo)航條初始狀態(tài)5光標(biāo)移到按鈕的狀態(tài)光標(biāo)移到其他按鈕的狀態(tài)項(xiàng)目實(shí)施10.27任務(wù)說明制作導(dǎo)航條按鈕，實(shí)現(xiàn)導(dǎo)航條初始效果（1）制作導(dǎo)航條按鈕（2）制作按鈕動畫影片剪輯，實(shí)現(xiàn)背景閃爍效果效果展示任務(wù)1制作導(dǎo)航條按鈕初始動畫效果8任務(wù)2制作光標(biāo)移到按鈕狀態(tài)的動畫效果任務(wù)說明實(shí)現(xiàn)光標(biāo)移到按鈕上的動畫效果。（1）制作按鈕的二級菜單；（2）制作二級菜單向上移動動畫；效果展示9任務(wù)3制作鼠標(biāo)移到其他按鈕的動畫效果任務(wù)說明實(shí)現(xiàn)鼠標(biāo)移到其他按鈕的動畫效果。（1）為按鈕添加行為；（2）設(shè)置二級菜單的鏈接。效果展示經(jīng)驗(yàn)指導(dǎo)10.311相關(guān)知識1.導(dǎo)航菜單制作說明導(dǎo)航菜單是網(wǎng)頁元素中非常重要的部分，其主要作用就好像是網(wǎng)站內(nèi)容的目錄，通過導(dǎo)航菜單可以讓用戶在瀏覽網(wǎng)頁時很容易地到達(dá)不同的頁面。其次導(dǎo)航欄還提供了鏈接的關(guān)鍵字。通過導(dǎo)航欄可以讓用戶清晰地找到要瀏覽的網(wǎng)站內(nèi)容。12相關(guān)知識2.導(dǎo)航菜單設(shè)計(jì)技術(shù)概述

根據(jù)不同的需要，可以使用多種技術(shù)來進(jìn)行導(dǎo)航菜單的制作。

1.使用HTML制作簡單的圖片和文字鏈接式導(dǎo)航菜單簡單的文字獲圖片導(dǎo)航，只使用HTML代碼就可以了。這種導(dǎo)航菜單只是網(wǎng)站主要頁面的文字或圖片鏈接的堆積，實(shí)用性較強(qiáng)，下載速度快，但視覺效果差。

圖片和文字導(dǎo)航菜單132.導(dǎo)航菜單設(shè)計(jì)技術(shù)概述

2.使用腳本和樣式表制作的導(dǎo)航菜單

在HTML網(wǎng)頁中，使用腳本代碼（如JavaScript）和樣式表（CSS）可以做出不錯的導(dǎo)航菜單效果。菜單項(xiàng)不再只是堆積在一起的鏈接，而是將其分類，當(dāng)鼠標(biāo)移動到相應(yīng)位置，會顯示該欄目的子類，菜單的互動效果也較好。使用腳本和樣式表制作的動態(tài)導(dǎo)航菜單相關(guān)知識14拓展訓(xùn)練

3.使用Flash制作的動感導(dǎo)航菜單

Flash由于具有獨(dú)特的多媒體交互方式?？梢灾谱鞒鲆曈X與互動效果極佳的導(dǎo)航菜單，這是其他方法無法做到的。

視覺與互動效果極佳的Flash導(dǎo)航菜單由于Flash在制作動感導(dǎo)航菜單上具有得天獨(dú)厚的優(yōu)勢，使用按鈕元件和影片剪輯元件可以很容易地實(shí)現(xiàn)視覺效果極佳的交互式導(dǎo)航菜單，即使是傳統(tǒng)的HTML靜態(tài)網(wǎng)站，也有很多采用Flash來制作導(dǎo)航菜單部分的內(nèi)容。15相關(guān)知識3.

影片與網(wǎng)頁的加載和卸載

導(dǎo)航菜單的用途是快速第定位到瀏覽的頁面，這就需要用到影片或網(wǎng)頁的調(diào)用函數(shù)來加載瀏覽的影片或頁面。在影片中，如果加載的影片過多，則會大量占用系統(tǒng)資源，對于不再使用的影片?？梢酝ㄟ^卸載命令，將加載的影片進(jìn)行卸載，釋放其所占用的資源。用于影片與網(wǎng)頁的加載和卸載的函數(shù)包括loadMovieloadMovieNum()getURL()unloadMovie()unloadMovieNum()

16相關(guān)知識1.影片與網(wǎng)頁的加載

loadMovie()、loadMovieNum()和getURL()函數(shù)課用于影片或網(wǎng)頁的加載。（1）loadMovie()函數(shù)loadMovie()函數(shù)用來從當(dāng)前動畫的外部加載影片或圖像到指定的位置。（2）loadMovieNum()函數(shù)loadMovieNum()函數(shù)與loadMovie()函數(shù)功能相似，用于從當(dāng)前播放的動畫外部，加載SWF動畫到指定的位置。（3）getURL()函數(shù)getURL()函數(shù)用于調(diào)用網(wǎng)頁或郵件。17相關(guān)知識

2.影片的卸載（1）unloadMovie()函數(shù)unloadMovie()函數(shù)用于刪除通過loadMovie()加載的影片或圖像。（2）unloadMovieNum()函數(shù)unloadMovieNum()函數(shù)用于刪除通過loadMovieNum()加載的影片。拓展訓(xùn)練10.419制作商業(yè)網(wǎng)站導(dǎo)航條項(xiàng)目說明項(xiàng)目名稱商業(yè)網(wǎng)站導(dǎo)航條色彩清新，設(shè)計(jì)樣式活，添加flash動態(tài)效果使導(dǎo)航條更加有活力。設(shè)計(jì)提示（1）應(yīng)用矩形工具設(shè)計(jì)背景；（2）制作菜單按鈕；（3）應(yīng)用移動工具設(shè)置光標(biāo)放在按鈕上按鈕移動少許；（4）添加腳本語言實(shí)現(xiàn)動畫效果效果展示1.制