網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)-05利用FLASH CS5美化網(wǎng)頁(yè)

《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》

第5章利用FlashCS5美化網(wǎng)頁(yè)5.25.35.45.1Flashcs5簡(jiǎn)介Flash的基本功能Flash

CS5設(shè)計(jì)動(dòng)畫(huà)的應(yīng)用基礎(chǔ)利用FlashCS5設(shè)計(jì)網(wǎng)站起始頁(yè)本章主要講解了利用Flash可以制作導(dǎo)航按鈕、具有聲音效果的動(dòng)畫(huà)、MTV及整個(gè)Flash站點(diǎn)。[本章學(xué)習(xí)目的]通過(guò)本章學(xué)習(xí)，讀者能夠：1.了解Flash的工作界面和基本操作2.掌握Flash中繪圖技巧、位圖操作與文本的處理3.掌握Flash中場(chǎng)景、元件與實(shí)例操作以及圖層的管理4.了解Flash動(dòng)畫(huà)的類(lèi)型5.掌握如何創(chuàng)建動(dòng)畫(huà)，實(shí)現(xiàn)動(dòng)畫(huà)的交互控制6.學(xué)會(huì)Flash作品的設(shè)計(jì)與制作案例導(dǎo)入：

Flash是當(dāng)前最流行的交互式矢量制作軟件，用它制作出來(lái)的Flash動(dòng)畫(huà)具有極豐富的表現(xiàn)力，F(xiàn)lash可以制作導(dǎo)航按鈕、具有聲音效果的動(dòng)畫(huà)、MTV及整個(gè)Flash站點(diǎn)。利用FLASH技術(shù)制作西京食府網(wǎng)站（名稱(chēng)為虛擬）動(dòng)畫(huà)效果的起始頁(yè)。本例主要涉及以下知識(shí)點(diǎn)：進(jìn)行畫(huà)面布局、補(bǔ)間動(dòng)畫(huà)和按鈕的制作、簡(jiǎn)單的ActionScript腳本語(yǔ)言創(chuàng)建交互界面和集成Flash影片。5.1Flashcs5簡(jiǎn)介5.1.1Flash的工作界面1．“啟動(dòng)”界面在啟動(dòng)Flashcs5時(shí)，出現(xiàn)“啟動(dòng)”界面，使用“啟動(dòng)”界面用戶可以快速完成最常用的操作，如圖所示。2．操作界面主要由“菜單”欄、工具箱、時(shí)間軸、舞臺(tái)、“屬性”面板、集成工作面板等構(gòu)成。5.1.2Flash的基本操作1．新建文檔方法一：選擇“文件”菜單→“新建”命令，或按下快捷鍵Ctrl+N，彈出一個(gè)對(duì)話框，單擊常規(guī)選項(xiàng)或是模板選項(xiàng)，選擇其中一項(xiàng)后，單擊“確定”按鈕，即創(chuàng)建一個(gè)文件，如圖所示，右側(cè)出現(xiàn)文檔的屬性，寬度和高度的尺寸，幀頻，設(shè)置背景顏色等。方法二：?jiǎn)螕簟皢?dòng)”界面中“新建”選項(xiàng)中的某一項(xiàng)，或是“從模板創(chuàng)建”選項(xiàng)中的某一項(xiàng)，如圖所示，例如選擇“新建”選項(xiàng)→“ActionScript2.0”，即創(chuàng)建了一個(gè)新的FLASH文檔。2．打開(kāi)文檔選擇“文件”菜單→“打開(kāi)”命令，或使用快捷鍵Ctrl+O，或單擊啟動(dòng)界面中打開(kāi)最近項(xiàng)目中的某個(gè)文檔或“打開(kāi)”項(xiàng)。3．保存文檔選擇“文件”菜單→“保存”命令，或使用快捷鍵Ctrl+S。文檔在編輯過(guò)程中要及時(shí)保存，F(xiàn)lash文檔的擴(kuò)展名為.fla。4．發(fā)布影片制作好的Flash動(dòng)畫(huà)最終要發(fā)布出來(lái)或者嵌入到網(wǎng)頁(yè)中。Flash軟件支持多種能夠在網(wǎng)頁(yè)中播放的文件格式。發(fā)布和測(cè)試Flash文檔時(shí)，常用的方法有以下二種。方法一：選擇“文件”菜單→“導(dǎo)出”選項(xiàng)→“導(dǎo)出影片”命令，出現(xiàn)“導(dǎo)出影片”對(duì)話框，選擇存儲(chǔ)路徑，單擊保存類(lèi)型下拉列表，選擇文件格式，命名文件，單擊“保存”按鈕，如圖所示。方法二：選擇“文件”菜單→“發(fā)布設(shè)置”命令，選擇發(fā)布文件的格式及存儲(chǔ)路徑，然后單擊“發(fā)布”按鈕，如圖所示。5.1.3FlashCS5的新功能FLASHCS5在以前版本的基礎(chǔ)上，增加了一些十分實(shí)用的新功能，下面將進(jìn)行簡(jiǎn)單介紹。1.基于對(duì)象的動(dòng)畫(huà)2.3D變形3.使用“骨骼”工具進(jìn)行反向運(yùn)動(dòng)4.使用“Deco”工具裝飾性繪畫(huà)5.“動(dòng)畫(huà)編輯器”面板6.補(bǔ)間動(dòng)畫(huà)預(yù)設(shè)5.2Flash的基本功能5.2.1繪圖和填充Flash提供了多種繪圖和填充工具，可以用來(lái)繪制直線、形狀和路徑及編輯操作。1．筆觸與填充：“油漆桶”工具、“墨水瓶”工具2．繪制基本幾何形狀3．繪制曲線4．用“鉛筆”工具繪圖5．用“刷子”工具繪圖6．對(duì)象的操作7．縮放和旋轉(zhuǎn)對(duì)象8．輔助工具的使用9．排列、對(duì)齊、組合和取消組合5.2.2

位圖操作1.導(dǎo)入位圖

Flash不僅可以繪制各種形狀的矢量圖形，也可以導(dǎo)入多種格式的位圖，如：JPG、GIF、PNG格式等。選擇“文件”菜單｜“導(dǎo)入”｜“導(dǎo)入到舞臺(tái)”命令，直接將位圖導(dǎo)入到舞臺(tái)中，選擇“導(dǎo)入到庫(kù)”命令，則將位圖導(dǎo)入到“庫(kù)”面板中，舞臺(tái)中并沒(méi)有出現(xiàn)。

2.使用位圖填充使用已導(dǎo)入的位圖可以對(duì)繪制好的圖形進(jìn)行填充，在“混色器”面板中，單擊“類(lèi)型”下拉框，選擇位圖填充時(shí)，已導(dǎo)入的位圖將顯示在下方的列表區(qū)域中，選擇某個(gè)位圖。如果列表區(qū)域中沒(méi)有所需的位圖，單擊“導(dǎo)入”按鈕，彈出“導(dǎo)入到庫(kù)”對(duì)話框，選擇本地計(jì)算機(jī)上的位圖圖像，并將其添加到庫(kù)中。

3.分離位圖在舞臺(tái)中導(dǎo)入一幅位圖后，不能直接進(jìn)行編輯，例如用“套索”工具去除位圖的背景是無(wú)法操作的，只有分離位圖后才能操作。

4.將位圖轉(zhuǎn)換為矢量圖將位圖轉(zhuǎn)換為矢量圖后，就可以將圖像當(dāng)作矢量進(jìn)行處理。與位圖相比，一般矢量圖文件較小，因此有利于減少Flash文件的大小。5.2.3

處理文本

在Flash中，文本和矢量圖形一樣是必不可少的。Flash文本的特效設(shè)計(jì)會(huì)為Flash動(dòng)畫(huà)增色不少。

Flash文本的類(lèi)型分為三種：靜態(tài)文本字段、動(dòng)態(tài)文本字段和輸入文本字段。在Flash動(dòng)畫(huà)即可創(chuàng)建包含靜態(tài)文本的文本塊，即在創(chuàng)作文檔時(shí)確定其內(nèi)容和外觀的文本；也可創(chuàng)建動(dòng)態(tài)或輸入文本字段。動(dòng)態(tài)文本字段顯示動(dòng)態(tài)更新的文本，如體育得分或股票報(bào)價(jià)等；另外還可創(chuàng)建輸入文本字段允許用戶為表單、調(diào)查表或其他目的輸入文本。本小節(jié)內(nèi)容主要介紹靜態(tài)文本的處理。

1. 輸入文本單擊“文本”工具，在“屬性”面板中設(shè)置文本屬性，將鼠標(biāo)移動(dòng)到舞臺(tái)上單擊，出現(xiàn)一個(gè)文本框，光標(biāo)在文本框中閃爍，輸入文本，如果換行，按回車(chē)鍵。文本輸入完成，將鼠標(biāo)在文本框以外任意處單擊，完成文本輸入。

2.設(shè)置文本屬性在輸入文本前，單擊“文本”工具，在“屬性”面板中設(shè)置文本屬性，然后再輸入文本，或輸入文本后，單擊“選擇”工具，選中文本，在“屬性”面板中設(shè)置文本屬性?？稍O(shè)置文本的字體、字號(hào)、樣式、顏色以及段落的對(duì)齊方式、邊距、縮進(jìn)和行間距，還可為橫排文本添加鏈接路徑。

3．將文本轉(zhuǎn)換為矢量圖形在文本框中輸入文本后，文本是一個(gè)整體的文本塊，要想對(duì)單個(gè)文字進(jìn)行處理，可以將文本塊中的文本分離成單獨(dú)的文本塊，并可以將這些單獨(dú)的文本塊分布到各個(gè)獨(dú)立的層中，從而輕松地為每個(gè)單獨(dú)的文本塊創(chuàng)建動(dòng)畫(huà)。要重新調(diào)整文字的形狀，必須將其轉(zhuǎn)換為相應(yīng)的線條和填充，即分離文本。5.3FlashCS5設(shè)計(jì)動(dòng)畫(huà)的應(yīng)用基礎(chǔ)使用Flash制作動(dòng)畫(huà)影片的流程一般是先制作動(dòng)畫(huà)中所需要的各種元件，然后在舞臺(tái)中使用（被稱(chēng)為實(shí)例），進(jìn)行適當(dāng)?shù)慕M織編排，在這個(gè)過(guò)程中可以添加聲音，可以使用動(dòng)作使Flash影片能夠響應(yīng)特定事件，從而獲得交互效果。影片制作完成后，將其導(dǎo)出為一個(gè)可嵌入網(wǎng)頁(yè)的SWF格式的文件。因此，元件是Flash中用得最多的對(duì)象。本節(jié)將通過(guò)一系列的實(shí)例介紹Flash動(dòng)畫(huà)的制作方法和技巧，能夠掌握Flash動(dòng)畫(huà)制作的原理和方法，最主要的是培養(yǎng)創(chuàng)造性的設(shè)計(jì)能力。5.3.1 場(chǎng)景、元件與實(shí)例

1. 使用場(chǎng)景當(dāng)Flash文件很復(fù)雜時(shí)，需要很多場(chǎng)景，并且每個(gè)場(chǎng)景中的對(duì)象可能都不同，F(xiàn)lash可以將多個(gè)場(chǎng)景中的動(dòng)作組合成一個(gè)連貫的電影。swf文件中的場(chǎng)景將按照電影在場(chǎng)景檢查器中所列出順序依次播放。添加場(chǎng)景：“插入”菜單｜“場(chǎng)景”命令。刪除場(chǎng)景：“插入”菜單｜“刪除場(chǎng)景”命令。

2. 元件和實(shí)例元件是存放在庫(kù)中的可反復(fù)取用的圖形、動(dòng)畫(huà)、按鈕和音頻。當(dāng)用戶創(chuàng)建一個(gè)元件時(shí)，元件就存儲(chǔ)在文件的“庫(kù)”面板中，“庫(kù)”面板對(duì)元件進(jìn)行有效地組織和管理，還可建立文件夾，將元件分類(lèi)存放在文件夾中。將元件從庫(kù)拖入舞臺(tái)，就生成了一個(gè)實(shí)例。元件的類(lèi)型：圖形、影片、按鈕三種。圖形：可反復(fù)取用的圖片，用于構(gòu)建動(dòng)畫(huà)主時(shí)間軸上的內(nèi)容。一般只含有一幀靜止圖片。不能對(duì)它添加交互行為和聲音控制。影片剪輯：代表可反復(fù)取用的一段小動(dòng)畫(huà)。可獨(dú)立于主時(shí)間軸進(jìn)行播放。不能添加相互控制。按鈕；用于創(chuàng)建動(dòng)畫(huà)的交互控制按鈕?？身憫?yīng)事件，添加交互動(dòng)作。3.創(chuàng)建元件創(chuàng)建元件的方法比較多，下面介紹常用的三種方法。方法一：選中場(chǎng)景中的對(duì)象，選擇“修改”菜單｜“轉(zhuǎn)換為元件”命令，或按下快捷鍵F8，彈出“轉(zhuǎn)換為元件”對(duì)話框，輸入名稱(chēng)，選擇類(lèi)型，單擊“確定”按鈕。方法二：選擇“插入”菜單｜“新建元件”命令，或單擊“庫(kù)”面板下方的“新建元件”按鈕，彈出“新建元件”對(duì)話框，輸入名稱(chēng)和選擇類(lèi)型，單擊“確定”按鈕，進(jìn)入到元件的編輯界面。方法三：Flash有一個(gè)公用庫(kù)。選擇“窗口”菜單｜“公用庫(kù)”選項(xiàng)｜“學(xué)習(xí)交互或按鈕或類(lèi)”命令，打開(kāi)“公用庫(kù)”面板后，選中元件，拖入到當(dāng)前文檔的“庫(kù)”面板中。4.編輯和使用元件

編輯元件：打開(kāi)“庫(kù)”面板，選中某個(gè)元件，雙擊鼠標(biāo)左鍵，進(jìn)入到元件的編輯狀態(tài)，或在舞臺(tái)上雙擊實(shí)例，進(jìn)入到元件的編輯狀態(tài)。

使用元件：創(chuàng)建元件后，就會(huì)保存在“庫(kù)”面板中，選擇“窗口”菜單｜“庫(kù)”命令，或按下Ctrl+L組合鍵或F11鍵，打開(kāi)“庫(kù)”面板，選中元件拖至舞臺(tái)中。實(shí)例的應(yīng)用：元件拖放到舞臺(tái)中，即稱(chēng)為實(shí)例，在“屬性”面板中，可對(duì)實(shí)例進(jìn)行相應(yīng)的屬性設(shè)置，例如：實(shí)例行為、大小、名稱(chēng)、動(dòng)畫(huà)播放方式、顏色等，如圖所示。5.3.2 幀與關(guān)鍵幀F(xiàn)lash動(dòng)畫(huà)是由多幀組成的。幀就是動(dòng)畫(huà)在播放過(guò)程中，不同時(shí)間內(nèi)動(dòng)畫(huà)內(nèi)容的載體。幀分為普通幀、關(guān)鍵幀、空白關(guān)鍵幀。如圖所示。關(guān)鍵幀：定義了動(dòng)畫(huà)變化的幀，也可以說(shuō)是包含了幀動(dòng)作的幀。在時(shí)間軸中是一個(gè)實(shí)心的小黑點(diǎn)?？瞻钻P(guān)鍵幀：沒(méi)有內(nèi)容的關(guān)鍵幀。在時(shí)間軸上是一個(gè)空心的小圓圈。普通幀：又稱(chēng)為相同幀，與前一個(gè)關(guān)鍵幀的內(nèi)容相同，是灰色的幀。相同幀空白關(guān)鍵幀關(guān)鍵幀過(guò)渡幀過(guò)渡幀：兩個(gè)關(guān)鍵幀之間定義了動(dòng)畫(huà)的紫藍(lán)色的幀，它使得動(dòng)畫(huà)過(guò)程更流暢。5.3.3 圖層

圖層用于有效地組織電影元素，使元素之間不至于相互干擾，如圖所示。

1.圖層的分類(lèi)普通層：當(dāng)創(chuàng)建一個(gè)新的Flash文檔后，它就包含一個(gè)普通層，它是Flash中應(yīng)用最多的圖層。引導(dǎo)層：利用引導(dǎo)層可以制作沿路徑運(yùn)動(dòng)的動(dòng)畫(huà)。遮罩層：遮住下面層的內(nèi)容，透過(guò)建立的矢量圖形可以看見(jiàn)下面圖層的內(nèi)容。2.圖層的操作插入圖層：在時(shí)間軸左下方單擊“插入圖層”按鈕，就添加了一個(gè)普通層，單擊添加引導(dǎo)層則添加一個(gè)引導(dǎo)層。改變圖層的屬性：選中圖層，單擊鼠標(biāo)右鍵，在彈出菜單中選擇“屬性”命令，彈出“屬性”對(duì)話框，設(shè)置圖層的屬性。插入圖文件夾：將圖層分類(lèi)放在文件夾進(jìn)行組織管理。刪除圖層：不需要的圖層時(shí)，單擊“刪除圖層”按鈕。圖層的顯示或隱藏，單擊層，單擊眼睛圖標(biāo)位置，出現(xiàn)紅叉，表示隱藏，黑色圓點(diǎn)表示顯示。圖層的鎖定：?jiǎn)螕魧?，單擊鎖定層下方，出現(xiàn)鎖的標(biāo)志，表示鎖定層，黑色圓點(diǎn)表示解鎖。5.3.4

創(chuàng)建動(dòng)畫(huà)

用戶通過(guò)改變連續(xù)幀的內(nèi)容來(lái)實(shí)現(xiàn)動(dòng)畫(huà)，例如穿梭移動(dòng)、放大或縮小、旋轉(zhuǎn)、變色、淡入淡出以及改變形狀等。有三種方法可以在Flash中創(chuàng)建動(dòng)畫(huà)序列，分別是創(chuàng)建補(bǔ)間動(dòng)畫(huà)、創(chuàng)建補(bǔ)間形狀、創(chuàng)建傳統(tǒng)補(bǔ)間。1．創(chuàng)建遮照動(dòng)畫(huà)遮罩層就是將下面的層全部遮住，通過(guò)在遮罩層中添加形狀，形狀類(lèi)似于洞，透過(guò)洞看到下面層的內(nèi)容，鏈接到遮罩層的普通層就是被遮罩層。利用“遮罩”效果，可以制作許多特效，如水波、萬(wàn)花筒、放大鏡、望遠(yuǎn)鏡、探照燈等。2.動(dòng)畫(huà)按鈕的制作按鈕可以顯示為圖像或動(dòng)畫(huà)，分別響應(yīng)不同的鼠標(biāo)狀態(tài)，當(dāng)用戶使用鼠標(biāo)時(shí)產(chǎn)生單擊、按下或懸停在按鈕之上等動(dòng)作時(shí)，按鈕都會(huì)有不同的顯示效果。要使按鈕在電影中產(chǎn)生交互，可將按鈕符號(hào)的實(shí)例放置在舞臺(tái)上，然后給實(shí)例分配相應(yīng)的動(dòng)作。

3．為動(dòng)畫(huà)添加聲音在Flash中有兩種類(lèi)型的聲音：事件聲音和音頻流。事件聲音必須完全下載后才能開(kāi)始播放，除非明確停止，它將一直連續(xù)播放。音頻流在前幾幀下載了足夠的數(shù)據(jù)后就開(kāi)始播放；音頻流可以通過(guò)和時(shí)間軸同步以便在Web站點(diǎn)上播放。事件聲音一般用于按鈕或者是固定動(dòng)作中的聲音。而音頻流一般應(yīng)用于背景音樂(lè)、MTV的制作。導(dǎo)入聲音文件的格式一般有：WAV（僅限Windows）、Mid、AIFF（僅限Macintosh）、MP3（Windows或Macintosh）等，還可設(shè)置聲音的效果屬性創(chuàng)造更優(yōu)美的音效。4．Flash動(dòng)畫(huà)中的交互控制在FlashCS5中，借助于ActionScript來(lái)實(shí)現(xiàn)程序化的交互動(dòng)畫(huà)，如網(wǎng)站廣告、網(wǎng)絡(luò)游戲、FlashMtv等。5．動(dòng)作面板介紹用ActionScript進(jìn)行編程需要用到“動(dòng)作”面板，“動(dòng)作”面板是專(zhuān)業(yè)編寫(xiě)腳本程序的開(kāi)發(fā)環(huán)境（本教材講解actionscript2.0的“動(dòng)作”面板）。選擇“窗口”菜單→“動(dòng)作”命令，或單擊快捷鍵F9，打開(kāi)“動(dòng)作”面板，動(dòng)作面板由三部分組成：動(dòng)作工具箱（按類(lèi)別對(duì)ActionScript元素進(jìn)行分組）、腳本導(dǎo)航器（可以快速地在Flash文檔中的腳本間導(dǎo)航）和腳本窗格（可以在其中輸入ActionScript代碼），如圖所示。單擊左側(cè)下方的箭頭，顯