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

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

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

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

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

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

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

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

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

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

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

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

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

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