《網頁設計與網站建設》

第5章利用FlashCS5美化網頁5.25.35.45.1Flashcs5簡介Flash的基本功能Flash

CS5設計動畫的應用基礎利用FlashCS5設計網站起始頁本章主要講解了利用Flash可以制作導航按鈕、具有聲音效果的動畫、MTV及整個Flash站點。[本章學習目的]通過本章學習，讀者能夠：1.了解Flash的工作界面和基本操作2.掌握Flash中繪圖技巧、位圖操作與文本的處理3.掌握Flash中場景、元件與實例操作以及圖層的管理4.了解Flash動畫的類型5.掌握如何創建動畫，實現動畫的交互控制6.學會Flash作品的設計與制作案例導入：

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

位圖操作1.導入位圖

Flash不僅可以繪制各種形狀的矢量圖形，也可以導入多種格式的位圖，如：JPG、GIF、PNG格式等。選擇“文件”菜單｜“導入”｜“導入到舞臺”命令，直接將位圖導入到舞臺中，選擇“導入到庫”命令，則將位圖導入到“庫”面板中，舞臺中并沒有出現。

2.使用位圖填充使用已導入的位圖可以對繪制好的圖形進行填充，在“混色器”面板中，單擊“類型”下拉框，選擇位圖填充時，已導入的位圖將顯示在下方的列表區域中，選擇某個位圖。如果列表區域中沒有所需的位圖，單擊“導入”按鈕，彈出“導入到庫”對話框，選擇本地計算機上的位圖圖像，并將其添加到庫中。

3.分離位圖在舞臺中導入一幅位圖后，不能直接進行編輯，例如用“套索”工具去除位圖的背景是無法操作的，只有分離位圖后才能操作。

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

處理文本

在Flash中，文本和矢量圖形一樣是必不可少的。Flash文本的特效設計會為Flash動畫增色不少。

Flash文本的類型分為三種：靜態文本字段、動態文本字段和輸入文本字段。在Flash動畫即可創建包含靜態文本的文本塊，即在創作文檔時確定其內容和外觀的文本；也可創建動態或輸入文本字段。動態文本字段顯示動態更新的文本，如體育得分或股票報價等；另外還可創建輸入文本字段允許用戶為表單、調查表或其他目的輸入文本。本小節內容主要介紹靜態文本的處理。

1. 輸入文本單擊“文本”工具，在“屬性”面板中設置文本屬性，將鼠標移動到舞臺上單擊，出現一個文本框，光標在文本框中閃爍，輸入文本，如果換行，按回車鍵。文本輸入完成，將鼠標在文本框以外任意處單擊，完成文本輸入。

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

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

1. 使用場景當Flash文件很復雜時，需要很多場景，并且每個場景中的對象可能都不同，Flash可以將多個場景中的動作組合成一個連貫的電影。swf文件中的場景將按照電影在場景檢查器中所列出順序依次播放。添加場景：“插入”菜單｜“場景”命令。刪除場景：“插入”菜單｜“刪除場景”命令。

2. 元件和實例元件是存放在庫中的可反復取用的圖形、動畫、按鈕和音頻。當用戶創建一個元件時，元件就存儲在文件的“庫”面板中，“庫”面板對元件進行有效地組織和管理，還可建立文件夾，將元件分類存放在文件夾中。將元件從庫拖入舞臺，就生成了一個實例。元件的類型：圖形、影片、按鈕三種。圖形：可反復取用的圖片，用于構建動畫主時間軸上的內容。一般只含有一幀靜止圖片。不能對它添加交互行為和聲音控制。影片剪輯：代表可反復取用的一段小動畫?？瑟毩⒂谥鲿r間軸進行播放。不能添加相互控制。按鈕；用于創建動畫的交互控制按鈕。可響應事件，添加交互動作。3.創建元件創建元件的方法比較多，下面介紹常用的三種方法。方法一：選中場景中的對象，選擇“修改”菜單｜“轉換為元件”命令，或按下快捷鍵F8，彈出“轉換為元件”對話框，輸入名稱，選擇類型，單擊“確定”按鈕。方法二：選擇“插入”菜單｜“新建元件”命令，或單擊“庫”面板下方的“新建元件”按鈕，彈出“新建元件”對話框，輸入名稱和選擇類型，單擊“確定”按鈕，進入到元件的編輯界面。方法三：Flash有一個公用庫。選擇“窗口”菜單｜“公用庫”選項｜“學習交互或按鈕或類”命令，打開“公用庫”面板后，選中元件，拖入到當前文檔的“庫”面板中。4.編輯和使用元件

編輯元件：打開“庫”面板，選中某個元件，雙擊鼠標左鍵，進入到元件的編輯狀態，或在舞臺上雙擊實例，進入到元件的編輯狀態。

使用元件：創建元件后，就會保存在“庫”面板中，選擇“窗口”菜單｜“庫”命令，或按下Ctrl+L組合鍵或F11鍵，打開“庫”面板，選中元件拖至舞臺中。實例的應用：元件拖放到舞臺中，即稱為實例，在“屬性”面板中，可對實例進行相應的屬性設置，例如：實例行為、大小、名稱、動畫播放方式、顏色等，如圖所示。5.3.2 幀與關鍵幀Flash動畫是由多幀組成的。幀就是動畫在播放過程中，不同時間內動畫內容的載體。幀分為普通幀、關鍵幀、空白關鍵幀。如圖所示。關鍵幀：定義了動畫變化的幀，也可以說是包含了幀動作的幀。在時間軸中是一個實心的小黑點?？瞻钻P鍵幀：沒有內容的關鍵幀。在時間軸上是一個空心的小圓圈。普通幀：又稱為相同幀，與前一個關鍵幀的內容相同，是灰色的幀。相同幀空白關鍵幀關鍵幀過渡幀過渡幀：兩個關鍵幀之間定義了動畫的紫藍色的幀，它使得動畫過程更流暢。5.3.3 圖層

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

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

創建動畫

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

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