FlashCS6動畫制作Flash制作基本功項目1項目1Flash制作基本功│

項目分析制作Flash動畫，需要從簡單的入門開始，了解Flash的制作環境，掌握基本的制作工具，以及逐幀動畫、補間動畫、遮罩動畫和引導層動畫等基本動畫的制作，為后續制作復雜及應用型動畫奠定基礎。任務1熟識Flash的特點、應用、制作環境與基本操作Flash是一款矢量動畫編輯軟件，因其動畫作品文件容量小、通用性強，同時可以實現用戶與動畫的交互，而成為當前網頁動畫設計非常流行的軟件。由于Flash的操作簡單易學，因此其不僅適合專業動畫制作人員使用，還深受廣大業余動畫愛好者的喜愛。本任務將介紹Flash的基本功能，使讀者對Flash從陌生變為熟悉。任務目標（1）了解Flash的特點與應用。（2）掌握Flash的制作環境。（3）熟悉Flash的基本操作。項目1Flash制作基本功熟悉Flash的基本操作1．新建文檔創建新文檔是制作Flash動畫的第一步，新建文檔的方法有很多種，常用的有以下兩種。方法一：啟動Flash，在歡迎界面中選擇“新建”→“ActionScript2.0”選項，即可創建一個新的Flash文檔。方法二：在已打開的Flash窗口的菜單欄中選擇“文件”→“新建”命令，或者按“Ctrl+N”組合鍵，在彈出的“新建文檔”對話框中選擇“常規”→“ActionScript2.0”選項，即可創建一個新的Flash文檔，如圖所示。項目1Flash制作基本功熟悉Flash的基本操作2．打開文件如果已經創建了Flash文檔，操作完成且關閉文檔后需要重新打開，則可以通過選擇“打開”命令來實現。方法一：啟動FlashCS6，在歡迎界面的“打開最近的項目”選項組中選擇要打開的文件，或者選擇“打開”選項，找到Flash文檔并打開即可。方法二：在菜單欄中選擇“文件”→“打開”命令，或者按“Ctrl+O”組合鍵，在彈出的“打開”對話框中選擇需要打開的文件即可。項目1Flash制作基本功熟悉Flash的基本操作3．保存文件在完成Flash文檔的編輯后，需要對文件進行保存。可以在菜單欄中選擇“文件”→“保存”命令，或者按“Ctrl+S”組合鍵，在彈出的“另存為”對話框中選擇存放文件的路徑，輸入文件的名稱，如“向日葵”，并將“保存類型”設置為“FlashCS6文檔(*.fla)”，如圖所示。項目1Flash制作基本功熟悉Flash的基本操作4．發布文件除了可以保存為FLA源文件格式，Flash文檔還可以發布SWF動畫格式或其他文件格式，包括HTML、GIF、JPG、PNG等。（1）在菜單欄中選擇“文件”→“發布設置”命令，或者按“Ctrl+Shift+F12”組合鍵，在彈出的“發布設置”對話框中選擇所需要保存的文件格式，如圖所示。（2）在“發布”選項組中勾選所需要發布的文件格式的復選框，單擊“發布”按鈕，即可在相應的文件夾中發布生成的目標文件。項目1Flash制作基本功項目1Flash制作基本功模擬實訓一、實訓目的（1）掌握創建Flash文檔的方法。（2）掌握常用面板的使用方法。（3）掌握保存源文件及發布動畫的方法。二、實訓內容制作“卡通頭像”Flash文檔，將文檔的尺寸設置為400px×400px，背景顏色為黑色，幀頻為12fps，修改圖片大小，使其與舞臺大小一致，并將圖片放在舞臺中央。其效果如圖所示。（提示：在“屬性”面板中設置文檔屬性，通過“對齊”面板修改圖片的位置。）項目1Flash制作基本功任務2掌握常用工具的使用與角色繪制在設計與制作Flash動畫的過程中，使用繪圖工具繪制各類動畫對象是動畫設計的基礎。如何利用Flash軟件中的工具欄來繪制各種各樣的圖形和動畫對象？本任務將介紹常用工具的使用和角色繪制。任務目標（1）了解位圖與矢量圖的基本概念。（2）掌握繪圖工具的使用。（3）熟悉顏色填充方法。（4）理解圖層的基本概念。項目1Flash制作基本功了解位圖與矢量圖的基本概念位圖與矢量圖都是計算機存儲圖像文件的方式，常用的圖像文件格式大多屬于這兩種類型。1．位圖位圖也可稱為像素圖或點陣圖，是由一個個帶有顏色信息的小方格組成的。當這些帶有不同顏色信息的小方格緊密排列在一起時，就組成了位圖圖像，這些小方格也稱為像素。單位面積上像素的多少決定了位圖圖像質量的好壞和文件的大小，每平方英寸上所包含的像素越多，圖像就越清晰，顏色之間的混合就越平滑，文件所占的空間也就越大。位圖圖像不僅可以更好地表現色彩的層次感，還可以很容易地模擬照片的真實效果。常見的位圖編輯軟件有Photoshop和Painter等。項目1Flash制作基本功了解位圖與矢量圖的基本概念2．矢量圖矢量圖也可稱為向量圖，通過一系列的直線和曲線來描述圖像。矢量圖所存儲的是對象的形狀、線條和色彩等，圖形中的每個部分都是獨立存在的。因此，矢量圖的清晰度與分辨率無關，在縮放圖像時不會出現圖像失真的情況，且矢量圖文件所占的空間很小，非常適合用于設計標志、圖案和文字等。常見的矢量圖編輯軟件有Illustrator、CorelDRAW、Flash和AutoCAD等。項目1Flash制作基本功了解位圖與矢量圖的基本概念3．位圖與矢量圖的區別位圖與矢量圖的最大區別如下：位圖的圖像受像素和分辨率的限制，在放大后會出現馬賽克的情況；矢量圖的圖像則與分辨率無關，可以任意放大或縮小，圖像清晰度不會受到影響。項目1Flash制作基本功模擬實訓一、實訓目的（1）掌握基本繪圖工具的使用。（2）掌握填充顏色的方法。（3）掌握圖層順序的調整。（4）能夠繪制較為簡單的圖形。項目1Flash制作基本功模擬實訓二、實訓內容（1）繪制“卡通雪人”圖形，其效果如圖所示。（提示：使用繪圖工具繪制外形，需要注意漸變顏色的設置和圖層的順序。）（2）制作“卡通向日葵”圖形，其效果如圖所示。（提示：先使用繪圖工具繪制向日葵的外形，再使用“顏料桶工具”和“漸變變形工具”填充顏色。在制作過程中，需要注意調整圖層的前后順序，并將不同的圖形放在不同的圖層上，以方便繪制或修改。）項目1Flash制作基本功模擬實訓二、實訓內容（3）繪制“小獅子”圖形，其效果如圖所示。（提示：先使用“多角星形工具”繪制“小獅子”的頭，再使用各種形狀工具繪制“小獅子”身體的各個部分，并使用“選擇工具”及“部分選取工具”對繪制的圖形進行修改。）（4）繪制“太空飛船”圖形，其效果如圖所示。（提示：先使用“鋼筆工具”繪制“太空飛船”的輪廓，并使用“顏料桶工具”填充圖形顏色，使用“任意變形工具”，旋轉圖形的角度，再使用“多角星形工具”和“橢圓工具”分別繪制五角星和圓形的裝飾圖形。）項目1Flash制作基本功任務3學會逐幀動畫和補間動畫的制作逐幀動畫和補間動畫是Flash動畫的兩大重要組成部分。人們制作的動畫之所以能夠動起來，就是依靠逐幀動畫和補間動畫來實現的。那么，逐幀動畫和補間動畫是如何制作的呢？本任務將詳細講解這兩種動畫的制作方法和技巧。任務目標（1）了解關鍵幀、空白關鍵幀和普通幀的概念。（2）熟悉逐幀動畫的制作方法。（3）熟悉補間形狀動畫的制作方法。（4）熟悉補間動畫的制作方法。項目1Flash制作基本功熟悉逐幀動畫的制作方法1．逐幀動畫的概念逐幀動畫是一種常見的動畫形式，是指在每一幀上繪制不同的舞臺內容，這些幀在時間軸上連續排列起來，按順序播放就形成了動畫效果。逐幀動畫形式源于傳統的動畫繪制，非常適合表現細膩、動作復雜的動畫。2．普通幀、關鍵幀和空白關鍵幀幀是Flash動畫的基本單位，包括普通幀、關鍵幀和空白關鍵幀這3種類型，在制作動畫時，應根據不同的需求選擇不同的幀。普通幀：用來延長顯示左邊離它最近的關鍵幀或空白關鍵幀的動畫內容，但是不能對動畫內容進行編輯。在“時間軸”面板中右擊，在彈出的快捷菜單中選擇“插入幀”命令，或者按“F5”鍵，即可插入普通幀。關鍵幀：制作Flash動畫過程中最重要的幀，用來放置動畫內容，并且其所包含的內容可以編輯。它可以用來定義動畫對象的變化，更改動畫對象的開始和結束。在“時間軸”面板中右擊，在彈出的快捷菜單中選擇“插入關鍵幀”命令，或者按“F6”鍵，即可插入關鍵幀。空白關鍵幀：是指沒有添加動畫內容的關鍵幀。在空白關鍵幀中添加內容，即可將空白關鍵幀自動轉換為關鍵幀；反之，刪除關鍵幀中的內容，關鍵幀就轉換為空白關鍵幀。是否有動畫內容，是關鍵幀和空白關鍵幀最大的區別。在“時間軸”面板中右擊，在彈出的快捷菜單中選擇“插入空白關鍵幀”命令，或者按“F7”鍵，即可插入空白關鍵幀。項目1Flash制作基本功熟悉逐幀動畫的制作方法3．逐幀動畫的類型逐幀動畫一般分為以下4種類型。（1）使用圖片制作的逐幀動畫。給連續多個幀分別導入多張靜態圖片，即可制作一個逐幀動畫，導入圖片的格式一般為JPG、PNG等。（2）使用繪制的矢量圖制作的逐幀動畫。使用工具欄中的工具在舞臺中給每一幀繪制動畫內容，連續播放這些幀，就是一個逐幀動畫。（3）使用文字制作的逐幀動畫。文字也可以作為制作逐幀動畫的素材元素，在舞臺中輸入文字，將這些文字添加到各個幀中即可，文字逐幀動畫可以實現文字的旋轉、跳躍等效果。（4）使用序列圖片制作的逐幀動畫。將GIF圖片、SWF動畫文件等素材導入Flash，按動畫順序把這些成序列的圖片逐個放在不同的幀上，就可以制作成一個逐幀動畫。項目1Flash制作基本功熟悉補間形狀動畫的制作方法補間形狀動畫用來表現動畫對象從一種物體狀態到另一種物體狀態的變化，如動畫對象之間顏色、大小、形狀和位置的改變。它的操作對象必須是像素，對于文字或從外部導入的圖形，可以通過Flash提供的“分離”命令，將其分離為像素。制作補間形狀動畫，只需要制作動畫變形前和變形后的畫面，中間的變化過程由計算機自動完成。制作補間形狀動畫時，先在開始關鍵幀和結束關鍵幀中添加動畫內容，再在兩個關鍵幀之間添加補間形狀即可。下面通過具體的操作來介紹補間形狀動畫的制作。項目1Flash制作基本功模擬實訓一、實訓目的（1）掌握逐幀動畫的制作方法。（2）學會制作補間形狀動畫和補間動畫。二、實訓內容（1）制作“行走的鴨子”動畫，其效果如圖所示。（提示：先將GIF格式的圖片導入“庫”面板中，添加若干關鍵幀，然后將每張圖片依次添加到各個關鍵幀中。）項目1Flash制作基本功模擬實訓二、實訓內容（2）制作變化的文字，即從一組文字逐漸變化為另一組文字，如圖所示。（提示：分別在開始關鍵幀和結束關鍵幀中輸入不同的文字，“分離”文字后，創建補間形狀。“分離”操作要執行兩次，第一次是把一組文字打散成單個的文字，第二次是把文字轉換成像素。）項目1Flash制作基本功模擬實訓二、實訓內容（3）制作“海底世界”4個文字逐個顯示的動畫，其效果如圖所示。（提示：導入素材，把文字制作成元件，分別放在不同的圖層中，設置元件的透明度，創建傳統補間動畫，注意添加普通幀以延長各個圖層的顯示時間。）任務4掌握元件制作與庫的運用在本項目的任務3中，制作補間動畫時使用了元件，元件是制作動畫的重要元素。那么，元件到底有什么用途呢？Flash動畫中有哪些元件？不同類型的元件又有什么特性？存放元件的庫有什么特異之處？讀者可以通過本任務來詳細了解。任務目標（1）了解元件的概念與分類。（2）熟悉各類元件的制作方法。（3）掌握庫的概念及運用。項目1Flash制作基本功項目1Flash制作基本功熟悉圖形元件與影片剪輯元件的制作方法所謂元件，就是在制作動畫的過程中可以反復使用或編輯的一種部件，存放在“庫”面板中。在Flash中，元件可以被多次重復使用，這便于動畫的修改，而重復使用不會增大動畫所占的空間，更便于網絡傳輸。元件分為3種類型：圖形元件、按鈕元件和影片剪輯元件。1．圖形元件圖形元件主要用于創建靜態的動畫使用對象，不能用作交互。2．按鈕元件按鈕元件是Flash影片中創建互動功能的重要組成部分，它只對鼠標動作做出響應，用于建立交互按鈕。按鈕元件的制作與應用將在后續進行介紹。3．影片剪輯元件影片剪輯元件就是包含可以獨立播放動畫的元件。影片剪輯是包含在Flash影片中的影片片段，有其時間軸和屬性，具有交互性，是用途最廣、功能最多的部分。影片剪輯元件既可以包含交互控制、聲音及其他影片剪輯的實例，又可以放置在按鈕元件的時間軸上用來制作動畫按鈕。較為復雜的動畫經常用多個影片剪輯元件來簡化動畫的制作過程。項目1Flash制作基本功熟悉按鈕元件的制作與庫的運用1．按鈕元件按鈕元件用于實現動畫的交互功能，可以響應鼠標單擊、滑過或其他動作。使用按鈕可以控制動畫播放，與動畫進行交互。按鈕元件可以是一個圖形、一張圖片，甚至可以是透明的按鈕。按鈕元件的時間軸與其他元件不同，其由4幀組成，分別是“彈起”幀、“指針經過”幀、“按下”幀和“點擊”幀，每一幀表示了一種鼠標狀態，對應4種響應鼠標的操作狀態，如圖所示。項目1Flash制作基本功熟悉按鈕元件的制作與庫的運用2．庫的運用庫就相當于Flash中的倉庫，用來存放制作動畫所需的元件及導入的各類素材，如位圖、聲音文件和視頻剪輯等。“庫”面板是制作動畫時使用頻率非常高的面板之一，可以方便用戶靈活地調用元件及素材。“庫”面板如圖所示。項目1Flash制作基本功熟悉按鈕元件的制作與庫的運用3．公用庫Flash中自帶了一個公用庫，其中存放了很多樣式精美的按鈕。在制作動畫時，可以直接使用公用庫中的按鈕。公用庫的操作步驟如下。在菜單欄中選擇“窗口”→“公用庫”→“按鈕”命令，打開“庫-Buttons”面板，如圖所示。雙擊按鈕名稱的文件夾圖標就會顯示該文件中的所有按鈕。根據需要，若使用公用庫中的按鈕，則可以將按鈕拖到舞臺中，如圖所示。項目1Flash制作基本功模擬實訓一、實訓目的（1）掌握圖形元件的操作方法。（2）掌握按鈕元件的操作方法。（3）掌握影片剪輯元件的操作方法。（4）使用元件的嵌套制作較為復雜的動畫效果。二、實訓內容（1）制作“水波蕩漾”動畫，地面上水波蕩漾，好像人站在水面上一樣，如圖所示。（提示：創建影片剪輯元件，制作水波效果，將元件多次拖到舞臺中，分別調整各實例的大小。）項目1Flash制作基本功模擬實訓二、實訓內容（2）制作“動態小魚”按鈕，按鈕正常時顯示為靜態小魚，當鼠標指針經過按鈕時，小魚開始吐泡泡，如圖所示。（提示：將小魚的靜態圖片放在按鈕元件的“彈起”幀和“按下”幀上，將小魚的影片剪輯元件放在按鈕元件的“指針經過”幀上。）項目1Flash制作基本功任務5掌握遮罩動畫的制作遮罩動畫是Flash中的一個很重要的動畫類型，很多炫目神奇的效果都是通過遮罩動畫來實現的。那么，遮罩動畫是如何產生這些特效的呢？本任務除了介紹遮罩動畫的基本知識，還會結合實際案例講解遮罩動畫的制作方法和技巧。任務目標（1）了解遮罩的原理及概念。（2）熟練掌握遮罩動畫的制作方法。項目1Flash制作基本功了解什么是遮罩1．構成遮罩層和被遮罩層的元素遮罩層中的圖形對象在播放時是看不到的，遮罩層中的內容可以是按鈕、影片剪輯、圖形、位圖和文字等，但不能是線條，如果一定要使用線條，則可以使用“修改”→“形狀”→“將線條轉換為填充”命令，將線條轉換為填充即可。被遮罩層中的對象只能透過遮罩層中的對象被看到。在被遮罩層中，可以使用按鈕、影片剪輯、圖形、位圖、文字和線條。2．遮罩中可以使用的動畫形式可以在遮罩層、被遮罩層中分別或同時使用補間形狀動畫、補間動畫、逐幀動畫等，從而使遮罩動畫變成一個可以施展無限想象力的創作空間。項目1Flash制作基本功模擬實訓一、實訓目的（1）掌握遮罩動畫的制作方法。（2）掌握遮罩層動畫和被遮罩層動畫的制作方法。（3）能夠運用遮罩來制作各種動畫效果。二、實訓內容（1）制作文字從左到右的“滾動字幕”動畫，其效果如圖所示。（提示：將矩形框作為遮罩層，文字作為被遮罩層，通過被遮罩層中文字的運動展現出文字的滾動效果。）項目1Flash制作基本功模擬實訓（2）制作百葉窗。當百葉窗關閉時，顯示一幅美景圖；當百葉窗拉開時，顯示一幅山水風景畫，效果如圖所示。（提示：先導入兩張圖片，一張作為背景層，另一張作為被遮罩層；然后制作“窗葉”影片剪輯元件；最后用制作的“窗葉”影片剪輯元件排列組合成的窗簾作為遮罩層。）項目1Flash制作基本功任務6掌握引導層動畫的制作前面使用補間動畫讓動畫對象運動起來，但其運動路徑都是直線形式的。在日常生活中，大多數物體的運動路徑是曲線或不規則的，如飄落的雪花、拋出的籃球、飛翔的小鳥等。使用引導層動畫就可以實現對象不規則運動的動畫效果。本任務將介紹引導層動畫的基本知識及制作方法和技巧。任務目標（1）了解引導層動畫的概念。（2）掌握引導層動畫的制作方法。項目1Flash制作基本功了解引導層動畫的概念引導層動畫是指一個或多個對象沿著設計好的路徑運動。引導層動畫由引導層和被引導層兩個部分組成，二者缺一不可。1．引導線引導線是引導層動畫最主要的部分，對象的運動路徑就是通過引導線來設定的。引導線也就是運動對象的運動路徑，既可以是圓形、矩形、多邊形，也可以是弧線、不規則的直線或曲線等。2．引導層和被引導層用于繪制引導線的圖層稱為引導層。運動對象所在的圖層稱為被引導層。在制作引導層動畫時，必須是引導層在上，被引導層在下。項目1Flash制作基本功模擬實訓一、實訓目的（1）掌握創建引導層和被引導層的方法。（2）掌握引導層動畫的基本操作。（3）能夠制作簡單的引導層動畫。二、實訓內容（1）制作一只美麗的蝴蝶在花叢中飛舞的場景，效果如圖所示。（提示：繪制蝴蝶飛舞引導線，制作蝴蝶運動動畫，使其沿著引導線運動。）項目1Flash制作基本功模擬實訓（2）制作雪花在空中自由飄動的“下雪”的動畫，效果如圖所示。（提示：插入背景圖片后，新建圖形元件制作“雪花”，制作“雪花”沿引導線自由飄動下落的影片剪輯元件，在影片剪輯元件中使用引導層動畫。完成影片剪輯元件的制作后，返回場景中，多拖動幾個影片剪輯元件到場景舞臺的各個位置，并根據遠近使用“自由變形工具”改變影片剪輯元件實例的大小，即可形成“漫天大雪”的場景。）項目1Flash制作基本功任務7熟識ActionScript語法與應用Flash動畫的一個重要特點是交互性強，交互性需要通過內置編程語言來實現。Flash通過內置編程語言ActionScript（動作腳本）實現各種精彩紛呈的動畫特效，以及人機交互和網絡交互功能，使Flash可以廣泛地應用在游戲、課件制作、產品演示和互動網站制作等方面。任務目標（1）了解ActionScript。（2）掌握“動作”面板的使用。（3）熟悉ActionScript命令的分類及應用。（4）掌握ActionScript的綜合應用。項目1Flash制作基本功了解ActionScriptActionScript是Flash自帶的編程語言。ActionScript采用的是面向對象的編程思想，它是以關鍵幀、按鈕和影片剪輯為對象，通過響應某些事件來定義和編寫動作命令的。ActionScript擁有自己的語法、變量、函數及表達式。與JavaScript相似，ActionScript也是由許多行的代碼組成的。每行中的語句由指令、操作符等組成。ActionScript是Flash的腳本描述語言，使用它可以在動畫中響應事件，如單擊、移動鼠標指針和按下鍵盤上的某個鍵等，增加了動畫的交互性。在Flash中，ActionScript編寫簡單方便，讀者既可以直接從“動作”面板中調用某個動作，也可以直接輸入代碼，或者使用腳本助手，對于輸入的代碼，系統會自動檢查語法是否有錯誤，并提示用戶進行修改。隨著技術的發展與用戶需求的不斷提高，ActionScript也在不斷發展更新，ActionScript的版本號已由原來的1.0更新到3.0，功能也有了明顯的變化。ActionScript3.0是針對Flash更高層次的程序開發人員設計的，ActionScript2.0操作簡便，不需要掌握很多的編程語言，深受Flash用戶的喜愛。本書使用的腳本命令均采用ActionScript2.0進行講解。項目1Flash制作基本功熟悉ActionScript命令的分類及應用在Flash中，根據選擇對象的不同，可以在動畫中加載的動作腳本分為時間軸上加載的幀動作（即幀動作）、按鈕上加載的事件動作（即按鈕動作）和影片剪輯加載的事件動作（即影片剪輯動作）。

幀動作就是當影片或影片剪輯播放到某一幀時所執行的動作。在Flash中，可以添加控制幀動作的代碼有兩處：一處在時間軸的關鍵幀上，另一處在對象的事件中。添加控制幀動作的方法如下：在時間軸上選擇要添加動作的關鍵幀，打開“動作-幀”面板，選擇動作函數即可。2．按鈕動作要控制動畫的播放，以及用戶與動畫的交互，就必須通過按鈕來實現，給按鈕添加動作的語法如下。其中，Event（事件）是指鼠標的各種事件動作。當鼠標執行某種動作后，才開始執行大括號中的程序代碼。項目1Flash制作基本功模擬實訓一、實訓目的（1）學會使用“動作”面板。（2）掌握ActionScript的使用。（3）能夠制作簡單的交互式動畫。二、實訓內容（1）制作“升降旗”動畫，通過按鈕控制“紅旗”的升降，其效果如圖所示。（提示：制作“紅旗”動畫，創建箭頭樣式的向上和向下按鈕，分別放在“升旗”和“降旗”兩個動畫的開始關鍵幀，在放按鈕的時間軸關鍵幀上分別添加控制腳本“stop()”，再在向上和向下按鈕上分別添加按鈕動作控制命令“play()”，通過按鈕來控制“紅旗”的上升、下降。）項目1Flash制作基本功模擬實訓（2）制作“移動的棋子”動畫，其效果如圖所示。當單擊“上”按鈕時，“棋子”向上移動；當單擊“下”按鈕時，“棋子”向下移動；當單擊“左”按鈕時，“棋子”向左移動；當單擊“右”按鈕時，“棋子”向右移動。項目1Flash制作基本功任務8掌握音頻的導入與編輯在Flash動畫中，經常會聽到各種聲音，如按下按鈕的聲音、MTV的音樂、配合播放的獨白、各式各樣的卡通音效等。正是這些聲音賦予了動畫無限的生命力，一個精彩的Flash動畫，往往是動畫和配樂配合默契，相得益彰。本任務將詳細講解Flash中音頻的導入與編輯。任務目標（1）掌握聲音文件的導入與設置。（2）熟練掌握聲音的編輯與壓縮。項目1Flash制作基本功掌握聲音文件的導入與設置1．Flash支持的聲音文件Flash可以導入多種格式的音頻文件，常用的音頻格式是WAV和MP3。當文件被導入Flash中時，將會被存放在“庫”面板中。WAV：默認的聲音文件格式，無壓縮，可以直接保存聲音數據，音質效果一流，缺點是占用的空間較大。MP3：使用最廣泛的音頻格式，體積小，音質好，較清晰，傳輸快，跨平臺性能好。2．Flash中的聲音設置類型（1）事件聲音。事件聲音必須在播放之前完全下載，可以連續播放，必須有明確的停止命令才會停止，適用于制作很短的聲響，如單擊按鈕的聲音。（2）數據流聲音。數據流聲音是與時間軸上的動畫同步播放的，僅需要下載影片開始的幾幀即可開始播放，特別適合在網絡中傳輸，可以實現播放與下載同步，縮短了用戶的等待時間。因此，Flash動畫中的背景音樂多為數據流聲音。項目1Flash制作基本功模擬實訓一、實訓目的（1）掌握導入和添加聲音的方法。（2）掌握聲音特效的設置和編輯。二、實訓內容（1）為“滾動字幕”動畫添加背景音樂，如圖所示。（提示：將聲音文件“梁祝.mp3”添加到時間軸上，使用“編輯封套”對話框編輯音樂特效。）項目1Flash制作基本功模擬實訓（（2）為“蜜蜂采蜜”文檔添加“蜜蜂”飛行時的聲音，如圖所示。（提示：將聲音文件導入時間軸上，將“聲音”選項組中的“效果”設置為“淡入”，并且對聲音文件進行輸出設置。）FlashCS6動畫制作電子工業出版社Banner的設計與制作項目2項目2Banner的設計與制作│

項目分析本項目主要從介紹Banner的設計與制作的相關知識入手，讓讀者了解Banner的應用領域、Banner設計的重要性、構圖的概念和樣式，并掌握Banner圖片、Banner文字、Banner主題和軟文的設計與制作。任務1熟識Banner在網絡營銷術語中，Banner作為一種網絡廣告形式，一般放置在網頁的不同位置，在用戶瀏覽網頁信息的同時，吸引用戶關注廣告信息。本任務主要介紹Banner的應用領域、Banner設計的重要性、構圖的概念和法則、構圖的樣式和結構等相關知識。任務目標（1）了解Banner的應用領域。（2）熟悉構圖的概念和法則。（3）掌握構圖的樣式和結構。項目2Banner的設計與制作了解Banner的應用領域Banner的核心使命就是吸引用戶的注意力，是大多數新產品、新事物、各種優惠活動呈現給用戶的最主要的途徑，所以Banner的主題要明確，關鍵內容要突出，要能夠有效地抓住用戶的眼球。Banner的應用領域也越來越廣泛，常見的應用有網幅廣告、旗幟廣告、橫幅廣告、網站Banner、手機Banner、淘寶Banner、微信Banner和微博Banner。認識Banner設計的重要性Banner設計的初衷就是“被點擊”。所有的設計和創意都是圍繞吸引用戶來進行的。一個好的設計，主題要明確。在有效吸引用戶的前提下，能夠很自然地融合到不同的頁面中是Banner設計的宗旨。當用戶訪問一個網站時，第一屏的信息展示是非常重要的，因為第一屏的信息可以在很大程度上影響用戶是否決定停留。若只是大面積堆積文字，則很難直觀而快速地告訴用戶會獲得哪些有用的信息。因此，Banner設計在這里會起到至關重要的展示作用，特別是對于首頁Banner而言，有效的信息傳達可以使用戶和文字之間的互動變得生動而有趣。下面通過兩個應用實例來對比說明Banner設計的重要性。項目2Banner的設計與制作熟悉構圖的概念和法則1．構圖的概念構圖是指創作者在一定的空間范圍內，對自己要表現的形象進行組織安排，形成形象的部分與整體之間，形象空間之間的特定的結構、形式。簡單來說，構圖是對畫面的內容和組織形式進行整體設計。任何構圖都離不開點、線、面這3個元素，以點成線，以線構面，它們是視覺構成的基本元素，具有不同的情感特征，因此，要善于采用不同的組合，呈現不同的Banner構圖。1）點的聚合點的排列會引起視覺流動，如果引入時間因素，同時利用點的大小、形狀及距離的變化，則可以設計出富有節奏韻律的畫面。如圖所示，點的連續排列構成線，點與點之間的距離越近，線的特性就越顯著；同樣，點的密集排列構成面，點的距離越近，面的特性就越顯著。項目2Banner的設計與制作熟悉構圖的概念和法則2）線的流動線是點移動的軌跡，可在頁面上起到強調、分割、引導視線的作用。在設計中，利用線對頁面空間進行分割的方法也很普遍，不同方向、長度、寬度、形態的線會給人不同的感受。垂直線顯得平穩、挺拔，弧線顯得流暢、輕盈，水平線給人一種平靜、開闊、安逸的感受，曲線給人一種動感、活力的感受，粗線條給人一種粗獷、勇敢、陽剛的感受，細線條給人一種銳利、敏感的感受。圖1所示為曲線的流動示例。圖2所示為直線的流動示例，圖中利用嚴謹的線條流動來展示產品信息，使頁面穩重而富有理性。項目2Banner的設計與制作熟悉構圖的概念和法則3）面的分割面在設計領域中可以理解為點的放大、點的密集或線的重復。Banner元素在大小不同的色塊元素的風格對比下，能獲得清晰且有條理的秩序，同時在整體上也顯得和諧統一。如圖1所示，清晰、突出的圖片是吸引用戶關注的第一視覺點。而圖2中則通過色塊與線條之間不同的比例來分割畫面，這樣頁面在表現形式上更具有藝術表現力。項目2Banner的設計與制作2．構圖的形式美法則在Banner設計中采用特殊的形式結構，不僅可以使畫面變得個性十足，還能更好地與其他同類產品進行區分，讓人印象深刻。1）有機形的柔和與美有機形是由一定數量的曲線組合而成的，是自然物外力與內力相抗衡而形成的形態。有機形富有內在的張力，給人以純樸、溫暖而富有生命力的感覺。如圖所示為有機形構圖法則示例，其曲線與個性化的插圖形成強烈的對比。項目2Banner的設計與制作2．構圖的形式美法則2）偶然形的獨特魅力偶然形是在力的作用下隨機形成的圖形，它具有天然成趣的效果，利用偶然因素提煉美的方法，讓Banner設計更加與眾不同。圖2-1-10所示為偶然形構圖法則示例，使頁面產生趣味性。項目2Banner的設計與制作掌握構圖的樣式和結構1．垂直構圖垂直構圖能夠表現景物的高度和深度，常用于表現險峻的山石、摩天大樓及由豎直形狀組成的其他畫面。在產品Banner設計方面，豎版切割的延伸和量化能增加沖擊力，表現統一感和陣列感。如圖所示為垂直構圖示例。項目2Banner的設計與制作掌握構圖的樣式和結構2．平衡式構圖平衡式構圖能夠給人以滿足感，畫面結構完美無缺，安排巧妙，對應而平衡，常用于表現月夜、水面、夜景等畫面。在設計方面，平衡式構圖常用于地產設計、開水瓶等穩定類產品的Banner設計。如圖所示為平衡式構圖示例。項目2Banner的設計與制作掌握構圖的樣式和結構2．平衡式構圖平衡式構圖能夠給人以滿足感，畫面結構完美無缺，安排巧妙，對應而平衡，常用于表現月夜、水面、夜景等畫面。在設計方面，平衡式構圖常用于地產設計、開水瓶等穩定類產品的Banner設計。如圖所示為平衡式構圖示例。項目2Banner的設計與制作掌握構圖的樣式和結構3．斜線構圖斜線構圖可以分為立式斜線和平式斜橫線兩種，常用于表現運動、傾斜、動蕩、失衡、緊張和危險等畫面。有的畫面利用斜線指出特定的物體，起固定導向的作用。在設計方面，斜線構圖常用于表現運動鞋和運動服，以及細長的鉛筆、牙刷和燈管等產品。如圖所示為斜線構圖示例。項目2Banner的設計與制作掌握構圖的樣式和結構4．放射線構圖放射線構圖以主體為中心向四周擴散，元素呈放射狀，用于突出主體元素，場景變化微妙而富有張力。例如，在多產品、多狀態的情況下，或者在產品較多而單個產品和畫面比例嚴重失調的情況下，可以采用此種構圖形式。如圖所示為放射線構圖示例。項目2Banner的設計與制作掌握構圖的樣式和結構5．對角線構圖對角線構圖把主體安排在對角線上，能有效地利用對角線的長度延伸畫面，富有動感，顯得活潑，容易產生線條的匯聚趨勢，以吸引人的視線，達到主體突出、視覺均衡的效果。如圖所示為對角線構圖示例。項目2Banner的設計與制作掌握構圖的樣式和結構6．三角形構圖三角形是最穩定的圖形，三角形構圖方式中正三角形有安全感，倒三角形則具有不安定的動感效果。三角形構圖以3個視覺中心來安排景物的位置，或者以三點成一面的幾何形狀來安排景物的位置，形成一個穩定的三角形。構圖的三角形既可以是正三角形，也可以是斜三角形或倒三角形。其中，斜三角形較為常用。三角形構圖的特點是穩定、均衡、靈活。如圖所示為三角形構圖示例。項目2Banner的設計與制作掌握構圖的樣式和結構7．框架式構圖框架式構圖用景物的框架作為前景，能增加畫面的縱向對比和裝飾效果，使圖片產生縱深感。在設計方面，框架式構圖用主體元素在左右兩側填充，中間的空白放置廣告詞。如圖所示為框架式構圖示例。項目2Banner的設計與制作掌握構圖的樣式和結構8．九宮格構圖九宮格構圖將主體或重要元素放在“九宮格”交叉點的位置上，“井”字的4個交叉點就是主體的最佳位置。一般認為，最理想的是右上方的交叉點，其次是右下方的交叉點。但最佳位置也不是固定不變的，只是比較符合人們的視覺習慣，使主體自然成為視覺中心，突出主體，并使畫面趨向于均衡。如圖所示為九宮格構圖示例。項目2Banner的設計與制作模擬實訓一、實訓目的（1）了解Banner的應用領域。（2）掌握構圖的概念和法則。（3）熟悉構圖的樣式和結構。二、實訓內容（1）分析“我要自學網”首頁Banner效果圖的構圖、配色及編排效果，完成Banner的設計與制作，如圖1所示。（2）分析“唐獅音樂節”網站首頁Banner效果圖的構圖、配色及編排效果，完成Banner的設計與制作，如圖2所示。項目2Banner的設計與制作任務2設計與制作Banner圖片在Banner動畫中，圖片占據了非常重要的位置，出彩的圖片是十分有力的表現手法。本任務除了介紹Banner圖片設計的版式和排版原則，還會結合實際案例講解Banner圖片特效動畫的制作。任務目標（1）了解Banner圖片設計的版式。（2）熟悉Banner圖片設計的排版原則。（3）掌握Banner圖片特效動畫的制作方法。項目2Banner的設計與制作了解Banner圖片設計的版式圖片設計的版式包括主題形象的體現、整體的布局、視覺元素的大小和數量、圖片與文字的關系等。根據不同的組織形式，可以將圖片設計的版式大致劃分為以下幾種。1．兩欄式兩欄式版式布局采用的是左文右圖或左圖右文的形式，表現主題內容的圖片一般占大部分區域，補充說明性的文字用于進一步表達主題。如圖所示為兩欄式版式示例。項目2Banner的設計與制作了解Banner圖片設計的版式2．三欄式三欄式版式布局采用的是中間文字、兩邊圖片的形式，主次關系明確。如圖所示為三欄式版式示例。項目2Banner的設計與制作了解Banner圖片設計的版式3．上下式上下式版式布局采用的是上面文字、下面圖片的形式，先由上面的文字引導用戶的閱讀視線，再由下面的圖片更好地表現主題內容，使圖文相結合。如圖所示為上下式版式示例。項目2Banner的設計與制作了解Banner圖片設計的版式4．組合式1組合式1版式布局采用一邊為展示產品的模特人物，而另一邊為文字加圖片的形式，在表現形式上更加靈活。如圖所示為組合式1版式示例。項目2Banner的設計與制作了解Banner圖片設計的版式5．組合式2組合式2版式布局采用兩邊為模特人物、中間為文字加圖片的形式，在展示類的Banner圖片中使用居多，如服飾、潮流單品等。如圖所示為組合式2版式示例。項目2Banner的設計與制作了解Banner圖片設計的版式6．文字+背景文字+背景版式布局采用的是純文字加背景的圖片形式，在背景的襯托下，突出文字主題的內容，重點鮮明。如圖所示為文字+背景版式示例。項目2Banner的設計與制作熟悉Banner圖片設計的排版原則排版就是把可視化信息（如文字、圖片等元素）在整體布局上調整位置、大小和方向，使版面美觀。在Banner中，圖片設計排版遵循以下原則。（1）對齊原則。為了使用戶可以快速瀏覽畫面，相關的內容要對齊，以便一眼就可以關注到最重要的信息。（2）集中原則。如果畫面中的內容分成幾個不同的區域，那么在同一個區域中應該聚集相關的內容。（3）留白原則。專業的Banner設計絕不會排得密密麻麻，要留出一定的空間，這樣既可以避免Banner的擁擠感，又可以集中用戶視線，突出重點內容。（4）降噪原則。顏色太多、字體太多、圖形太過復雜，這些都是分散用戶關注度的“噪聲”。（5）重復原則。在排版時，要關注整體設計的一致性和連貫性，避免出現多種類型的視覺元素。（6）對比原則。增加不同元素的視覺差異，這樣既能體現Banner的活潑性，又能突出視覺重點，以使用戶第一眼就能瀏覽到重要的信息。項目2Banner的設計與制作熟悉Banner圖片設計的排版原則排版就是把可視化信息（如文字、圖片等元素）在整體布局上調整位置、大小和方向，使版面美觀。在Banner中，圖片設計排版遵循以下原則。（1）對齊原則。為了使用戶可以快速瀏覽畫面，相關的內容要對齊，以便一眼就可以關注到最重要的信息。（2）集中原則。如果畫面中的內容分成幾個不同的區域，那么在同一個區域中應該聚集相關的內容。（3）留白原則。專業的Banner設計絕不會排得密密麻麻，要留出一定的空間，這樣既可以避免Banner的擁擠感，又可以集中用戶視線，突出重點內容。（4）降噪原則。顏色太多、字體太多、圖形太過復雜，這些都是分散用戶關注度的“噪聲”。（5）重復原則。在排版時，要關注整體設計的一致性和連貫性，避免出現多種類型的視覺元素。（6）對比原則。增加不同元素的視覺差異，這樣既能體現Banner的活潑性，又能突出視覺重點，以使用戶第一眼就能瀏覽到重要的信息。項目2Banner的設計與制作模擬實訓一、實訓目的（1）了解Banner圖片設計的版式。（2）掌握Banner圖片設計的排版原則。（3）學會制作Banner圖片特效動畫。二、實訓內容為了宣傳低碳生活，保護環境，請制作如圖所示的“隱藏的圖片”動畫。當鼠標指針滑過第一張慢慢變黃的樹葉圖片時，文字描述是“我們還能擠出多少氧氣？！”，切換到第二張圖片時，回答第一張圖片中的問題，倡導“低碳生活，讓氧多起來”。（提示：制作按鈕元件和影片剪輯元件，圖片采用遮罩技術進行切換。）項目2Banner的設計與制作任務3設計與制作Banner文字總體來說，一個Banner是由文字和輔助圖兩部分構成的。輔助圖雖然占據大多數的面積，但是不添加文字進行輔助說明就很難讓用戶清楚這個Banner要表達的含義。就像人們可以通過觀察一個人的五官來感受這個人的喜、怒、哀、樂，但其因何表現出喜、怒、哀、樂，還要通過文字來說明一樣。本任務除了介紹Banner中文字設計的技巧，還會結合實際案例講解在Banner中運用的一些特效文字動畫。任務目標（1）了解文字在Banner設計中的地位。（2）掌握Banner中文字設計的技巧。（3）掌握特效文字動畫的制作方法。項目2Banner的設計與制作了解文字在Banner設計中的地位文字是記錄語言的書面形式，是人類思想感情交流的必然產物，而特效文字更是各個領域中渲染主題的一種方法。在Banner中使用特效文字，可以使Banner表現得與眾不同。在Banner中，信息的表達通常使用文字、圖像等方式，其中Banner中最重要的設計元素就是文字，相對于圖形來說，文字的信息傳遞方式更直接，所以文字在Banner設計中占有舉足輕重的地位。為了配合網頁的整體效果，網頁中Banner文字的設計一般以特效文字樣式呈現，用于突出主題。在網絡廣告中，為了突出廣告主題，使用戶可以在第一時間關注到所要表達的內容，常常使用特效文字來突出顯示。項目2Banner的設計與制作掌握Banner中文字設計的技巧1．處理文字的數量在Banner中文字過長，并且不能刪減文字的情況下，如圖所示，可以對Banner中的文字進行比較，以突出“端午”這類主要的文字信息，弱化“的”、“之”、“和”、“年”和“第X屆”等信息量不大的文字，使文字信息結構清晰，主次分明，重點突出。項目2Banner的設計與制作掌握Banner中文字設計的技巧1．處理文字的數量如果Banner中的文字過短，畫面太空，則可以加入一些輔助信息以豐富畫面，如圖所示，可以在圖中加入時間、英文、域名、頻道名或意念等輔助文字，以充實畫面。項目2Banner的設計與制作掌握Banner中文字設計的技巧2．構建輔助的視覺1）文字+背景陪襯兩段式這類Banner設計的畫面感強，視覺集中，突出文字，顯示主題，其示例如圖所示。項目2Banner的設計與制作掌握Banner中文字設計的技巧2）文字+主體物兩段式這類Banner設計中的文字和圖案相輔相成，具有文字言事、圖案補充理解的效果，最適合做介紹類或產品類的Banner。3）主體物+背景+文字三段式這類Banner設計是目前應用最廣泛的主流設計，畫面虛實結合，主次關系明顯，其示例如圖所示。項目2Banner的設計與制作掌握Banner中文字設計的技巧3．控制文字的留白文字的旁邊要留有一定的空間，這樣能使它們更突出，避免廣告條的每個角都有文字，不要以為這樣做會分散文字，調整個別文字可以使瀏覽者更好地理解廣告主旨。文字緊靠邊緣的廣告條會讓人覺得很不專業，在Banner設計中要避免這一點，即應留有適當的空白，如圖所示。項目2Banner的設計與制作掌握Banner中文字設計的技巧廣告條的邊緣既不是一個休息場所，也不是一個可以讓文字“跑出去”的“空房間”，而是一個內容與邊緣保持適當距離的區域。Banner中文字邊距太小和文字邊距合適的效果如所示。項目2Banner的設計與制作掌握Banner中文字設計的技巧4．調整文字的間距如果文字較小，間距也較小，就會增加瀏覽的難度，輕微地進行調整能產生意想不到的變化。文字越小，越需要大的間距來提高它們的可讀性。對比圖1可以發現，兩張圖中的文字的字號相同，但圖中的文字間距較大，瀏覽者更容易看清文字，效果一目了然。Banner中的大號文字要粗壯扁平，并且要減小大號文字的間距。對比圖2可以發現，下圖的效果更好。項目2Banner的設計與制作模擬實訓一、實訓目的（1）了解Banner文字設計的方法。（2）掌握Banner文字動畫的制作方法。二、實訓內容（1）制作橫幅類廣告中的“模糊文字”動畫，要求文字清晰，沖擊力強，文本由右向左閃電般模糊出現，并轉換為金黃色發光的文本，與背景畫面相映，其效果如圖所示。（提示：使用“文本工具”，將文字設置為粗體并輸入文本，使用“屬性”面板中的色調和“模糊”濾鏡創建文本的模糊效果，使用“發光”濾鏡為文字添加發光效果。）項目2Banner的設計與制作模擬實訓二、實訓內容（2）制作“火焰”文字動畫。以網絡游戲中的人物畫面為背景，游戲名稱采用火焰文字特效，使玩家產生激情燃燒的感覺，其效果如圖所示。（提示：使用遮罩層創建文字遮罩動畫。）項目2Banner的設計與制作任務4設計與制作Banner主題在Flash中，Banner動畫占據了非常重要的地位，按照內容分類的不同可表現為不同風格的主題設計。本任務除了介紹Banner主題設計的風格和技巧，還結合案例講解Banner主題設計動畫的制作方法。任務目標（1）了解Banner主題設計的風格。（2）掌握Banner主題設計的技巧。（3）掌握Banner主題設計動畫的制作方法。項目2Banner的設計與制作了解Banner主題設計的風格3．清新風清新風的特點就是畫面清爽、唯美，色彩搭配清新自然。如圖所示的Banner就給人一種十分清新和透亮的感覺。項目2Banner的設計與制作了解Banner主題設計的風格4．炫酷風炫酷風通常使用深色背景，并搭配有質感的元素與光影特效。圖1所示的Banner色彩華麗，引人入勝。5．簡約風簡約風的特點就是極簡主義、大空間。圖2所示的Banner沒有任何過多的裝飾元素，整體簡潔大方。6．歐美風如果藝術作品、商品等事物在整體上呈現出歐美事物的面貌，或者具有歐美面貌的特點，則被稱為歐美風。它是一種風格，但不局限于一種風格。項目2Banner的設計與制作掌握Banner主題設計的技巧設計師在實際工作中經常會遇到不同Banner主題設計的需求。從設計成本方面來考慮，用戶不會給太多的設計時間，因此設計師需要在短時間內做出一個成功的Banner。下面總結了一些Banner主題設計的技巧，供讀者參考。1．思考主題定位1）對象的定位因為分類內容不同，門戶網站的各個頻道具有不同的風格，所以在做設計時要考慮這個因素，如體育頻道的運動感、時尚頻道的潮流感等。下圖所示為歷史頻道主題Banner，以水墨畫作為背景，表現出滄桑厚重的歷史感。項目2Banner的設計與制作掌握Banner主題設計的技巧2）專題的定位頻道和專題的定位有時存在沖突。例如，在女性頻道的大風格下，有時候可能需要呈現溫馨浪漫的小情懷，在存在風格沖突的情況下，應盡量以貼合專題的定位為主，盡可能避免偏離頻道風格。下圖所示為女性頻道下的一個懷舊主題Banner，在水墨畫風格的背景映襯下，身著旗袍表現東方雅韻之美的女性人物形象躍然畫面上，整體呈現出了復古懷舊的感覺。項目2Banner的設計與制作掌握Banner主題設計的技巧2．創造力對主題的藝術化表現1）使用新感覺重塑嚴肅話題做新聞報道的時候，遇到嚴肅話題，一般會比較公式化，表現得比較刻板，制作者通常不做視覺上的創新，這樣就會使畫面信息量弱，感染力不足，此時就要敢于挖掘內涵、拓展思維進行創新。下圖所示為抗洪救災的新聞主題Banner，畫面中的洪流、堤壩、抗洪搶險的武警官兵及“抗洪救災，你我同行”的文字內容，都很好地傳達了主題思想。在設計Banner時，不僅要考慮整體畫面的設計，還要突出主題。項目2Banner的設計與制作掌握Banner主題設計的技巧2）使用幽默感呈現輕松話題在設計一些輕松且具有娛樂感的主題時，更應該用天馬行空的創意營造輕松詼諧的氛圍。下圖所示為娛樂專題Banner，以繪制在手指上的漫畫人物搭配手勢動作表現主題內容，畫面詼諧有趣，引人注目。項目2Banner的設計與制作掌握Banner主題設計的技巧3）使用小情調充實主題創意有時一點小小的創意會使Banner增色不少。下圖所示為商業主題Banner，冰雪中不僅有車，還有文字，從背景到文字都體現出冰雪體驗的主題內容。項目2Banner的設計與制作模擬實訓一、實訓目的（1）熟悉Banner主題設計的風格。（2）掌握Banner主題設計的技巧。（3）制作Banner主題設計動畫。二、實訓內容為某科技公司制作網站Banner，在極具個性的工業化風格背景的映襯下，加上文字特效，整體色彩搭配極具科技感，引人入勝，其效果如圖所示。（提示：元件的制作，逐幀動畫和補間動畫的運用。）項目2Banner的設計與制作任務5設計與制作軟文Slogan（軟文）是廣告界常用的英文詞匯，意為“口號”，對于企業網站來說，Slogan的設計非常重要。Slogan的作用就是以最簡短的文字把企業或商品的特性及優點表達出來，為用戶提供濃縮的廣告信息。本任務除了介紹Slogan的構圖規則和構圖樣式等基本知識，還結合案例介紹Slogan動畫的制作方法。任務目標（1）熟悉Slogan的構圖規則。（2）掌握Slogan的構圖樣式。（3）掌握Slogan動畫的制作方法。項目2Banner的設計與制作熟悉Slogan的構圖規則構圖就是對畫面進行合理的布局，在構圖的引導下，使用戶了解畫面中展示的內容，產生購買的沖動，如果能夠達到這樣的目標，就說明構圖是成功的。構圖的基本規則是均衡、對比和視點。均衡：不同于對稱，均衡是一種力量上的平衡感，使畫面具有穩定性，如圖所示。項目2Banner的設計與制作熟悉Slogan的構圖規則對比：從構圖上來說可以是大小的對比、粗細的對比、方圓的對比、曲線與直線的對比等，如圖1所示。視點：即如何將用戶的目光集中在畫面的中心點上，利用構圖來引導用戶關注的視點，如圖2所示。項目2Banner的設計與制作熟悉Slogan的構圖規則了解構圖的基本規則后，下面以一張新商品宣傳Banner為例，幫助讀者理解構圖的規則，如圖所示。此Banner在整體構圖上既平衡又不對稱，在背景的映襯對比下，可以很容易地把客戶的視點聚焦到畫面中心的新商品上，很好地利用了基本構圖規則進行設計。項目2Banner的設計與制作掌握Slogan的構圖樣式Slogan的構圖樣式大概分為以下幾種：垂直水平式構圖、三角形構圖（正三角形構圖和倒三角形構圖）、對角線構圖、漸次式構圖、輻射式構圖和框架式構圖。1．垂直水平式構圖如圖所示，畫面中的每個產品平行排列，各個產品所占的比例相同，秩序感強，每個產品都能很好地展示。垂直水平式構圖使用戶感覺規矩、正式、安全感強。項目2Banner的設計與制作掌握Slogan的構圖樣式2．三角形構圖如圖1所示，多個產品以正三角形排列，產品立體感強，各個產品所占的比例有輕有重，構圖安定自然，空間感強。正三角形構圖使用戶感覺穩定可靠、安全感強。如圖2所示，多個產品以倒三角形排列，產品運動感極強，構圖活潑。倒三角形構圖為用戶呈現的是不穩定感，以激發用戶的激情，有一種運動的感覺。項目2Banner的設計與制作掌握Slogan的構圖樣式3．對角線構圖如圖所示為一個產品或多個產品進行組合的對角線構圖示例，產品展示空間感強，各個產品所占的比例相對平衡，構圖活潑、穩定，運動感、空間感強。對角線構圖為用戶呈現的是動感、穩定感。項目2Banner的設計與制作掌握Slogan的構圖樣式4．漸次式構圖如圖所示為多個產品的漸次式構圖示例，產品展示空間感強，各個產品所占的比例不同，由大及小，構圖穩定，次序感強，利用透視法指向Slogan。漸次式構圖使用戶感覺穩定、自然、產品豐富可靠。項目2Banner的設計與制作掌握Slogan的構圖樣式5．輻射式構圖如圖所示為輻射式構圖示例，多個產品展示立體空間感強，各個產品所占的比例不同，由大及小，構圖活潑，次序感強，利用透視法指向Slogan。輻射式構圖使用戶感覺活潑、產品豐富可靠。項目2Banner的設計與制作掌握Slogan的構圖樣式6．框架式構圖如圖所示為多個產品的框架式構圖示例，能有效地展示產品，給人以畫中畫的感覺，構圖規整平衡、穩定堅固。框架式構圖為用戶呈現的是可信任感。項目2Banner的設計與制作模擬實訓一、實訓目的（1）了解Slogan的構圖規則。（2）掌握Slogan的構圖樣式。（3）能夠制作Slogan動畫。二、實訓內容（1）設計與制作家具廣告動畫，請把歐式風格的典雅沙發的高貴華麗、古典氣派展現在消費者面前。在雍容華麗的背景下，利用線條分割畫面，廣告文案以溫馨、舒適為主題，展現典雅的品牌形象，其效果如圖所示。（提示：元件的制作，元件的Alpha值的設置，補間動畫的運用。）項目2Banner的設計與制作模擬實訓（2）制作綠地Banner動畫。在波光粼粼的水面上倒映著背景，從遠景切換到近景，設置轉場效果，在漸變色背景下，跳動顯示的Slogan主標題活潑生動，變形文字動畫的副標題吸引觀看者的注意力，其效果如圖所示。（提示：元件的制作，遮罩動畫、補間動畫的運用。）項目2Banner的設計與制作FlashCS6動畫制作電子工業出版社Flash網站的設計與制作項目3項目3Flash網站的設計與制作│

項目分析本項目先介紹Flash網站的架構與應用領域，然后介紹Flash網站美工設計，最后介紹Logo動畫和Flash網站的制作，由此引領讀者完成Flash網站的設計與制作。任務1熟識Flash網站的架構與應用領域Flash網站，顧名思義，就是通過Flash技術制作的網站，網頁內容基本上以圖形和動畫為主，比較適合制作以文字內容為輔，以平面、動畫視覺效果呈現為主的網站，如企業品牌推廣、特定網絡廣告、網絡游戲、個性網站等。本任務主要介紹Flash網站的架構與應用領域等。任務目標（1）掌握Flash網站的架構。（2）了解Flash網站的應用領域。項目3Flash網站的設計與制作掌握Flash網站的架構與網站的主體框架類似，網站的架構具有支撐網站的作用，就像人是由骨骼和血肉組成的，網站的架構正如人的骨架一樣，由此可見，網站的架構對于網站來說非常重要。1．網站的開發流程為了加快建設網站的速度和降低項目失敗的風險，應該采用一定的流程來策劃、設計、制作和發布網站。網站的開發流程如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構2．客戶需求分析客戶需求分析的主要任務就是把客戶的需求信息有機地表現出來，把網站的目標信息有效地傳達給瀏覽者或潛在用戶，從而達到最佳的網站營銷效果。3．網站策劃設計（1）確定網站的目標。建立網站的第一步就是確定目標。由于網站的分類不同，目標受眾也不同，因此在建立網站之前需要考慮網站所面對的對象。不同的網站有不同的目標，所以獲得的收益不同。（2）確定網站的主題。網站的主題就是網站所要表達的主要內容，是對網站的一個準確定位。在選擇主題和內容時，主題定位要小，內容要精。不要試圖做一個包羅萬象的網站，這樣往往會使網站失去特色。（3）確定網站的界面。界面是網站給瀏覽者的第一印象，建立網站就像寫論文，要先列大綱，才能主題明確、層次清晰。不僅要仔細考慮每個欄目和板塊的組織編排，把架構規劃好，還要考慮到以后的可擴充性，避免制作過程中多次修改整個網站的架構。項目3Flash網站的設計與制作掌握Flash網站的架構（4）確定網站的內容。網站的內容和網站的建設目標及類型有很大的關系。個人網站的內容依賴個人的興趣、愛好及其愿意為瀏覽者提供的特殊信息。企業網站一般用于展示其組織結構、業務范圍、產品類型等。商業網站要根據網站提供的服務、實現的功能、達到的目標來確定內容。（5）確定網站的風格。風格是指網站帶給瀏覽者的綜合感受，包括網站的形象設計、版面布局、瀏覽方式、交互性等因素，不管是哪個因素，都要能夠突出網站的獨特性。（6）確定網站的功能。個人、企業做網站首先要知道自己想要的功能。網站的功能可以從系統、布局或交互的角度等多個方面進行描述。項目3Flash網站的設計與制作掌握Flash網站的架構4．網站整體設計1）欄目結構的劃分網站結構是網站設計的基礎，網站結構劃分就是將網站的架構通過圖表的形式表現出來。合理的結構設計對于網站的規劃是非常重要的，下面介紹3種常用的結構類型。（1）層狀結構：類似于目錄系統的樹形結構。層狀結構是按照網頁之間的包含關系組織而成的，結構簡單且直觀，條理清晰，能將所有的內容劃分得非常清晰且便于理解。層狀結構如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構（2）線性結構：類似于數據結構中的線性表，如網絡服務器的鏈接，各頁面之間都建立了鏈接，可以引導瀏覽者按部就班地瀏覽整個網站的文件。線性結構常用于制作需要按步驟進行的欄目，如用戶注冊、建立訂單等。線性結構如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構（3）Web結構：類似于Internet的組成結構，各網頁之間形成網狀連接，允許用戶隨意瀏覽。Web結構如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構2）網站版式布局的設計和傳統的報刊類似，網站頁面也需要進行排版布局。在設計時要把文字、圖片、空白當作一個整體來看待，采用劃分平面的方式，在傳達信息的同時使瀏覽者產生感觀與精神上美的享受。網站版式布局是一種不同于傳統媒體的具有獨特風格和藝術特色的視聽表現方式，下面探討網站版式布局的設計。（1）對齊式布局。這種版式布局可分為上下對齊和左右對齊兩種，使文字、圖像等元素按比例合理布局。如圖所示，頁面采用的是左右對齊式布局，滿載文字信息，一點兒都不浪費空間，是特別適合傳遞商業性信息的版式。項目3Flash網站的設計與制作掌握Flash網站的架構（2）全景式布局。這種版式布局可以分散排列多張圖片，看起來就像在瀏覽電子畫冊一樣，可以自由、輕松地細細品味，如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構（3）包圍式布局。這種版式布局的基本構思是在頁面四周用純色或圖案包圍起來，以便產生一個被界定的區域，如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構（4）對稱式布局。這種版式布局以中心線為基準，且左右對稱。這種版式是最常見的，是一種格調高雅的穩定型版式，給人以嚴謹、理性的感覺。如圖所示，黑白兩色將頁面分為左右對稱的形式，不但背景對稱，圖像也對稱，充分體現了頁面主題。項目3Flash網站的設計與制作掌握Flash網站的架構（5）滿版式布局。這種版式布局以圖像充滿屏幕，主要以圖像為訴求點，可以將部分文字置于圖像之上。其視覺傳達效果直觀而突出，給人以生動大方的感覺。如圖所示，整個畫面充滿了音樂氣息，樂符、音響、吉他等元素的出現，使畫面更具有律動感和空間感。項目3Flash網站的設計與制作掌握Flash網站的架構（6）三角形布局。這種版式布局是指網頁中的各視覺元素呈三角形或多角形排列。正三角形最具穩定性；倒三角形可產生動感；側三角形則構成一種均衡版式，既安定又有動感。如圖所示，將兩個三角形分別放置在相應的對角上，并配以標志及導航，可以突顯主題內容，使畫面更具動感、現代感。項目3Flash網站的設計與制作掌握Flash網站的架構（7）自由式布局。采用這種版式布局的頁面具有活潑、輕快的氣氛。如圖所示，素描風格的背景搭配貼畫風格的人物，有趣的導航奇妙地融入其中，這樣搭配組合的構圖自由、形式獨特，且極具趣味性。項目3Flash網站的設計與制作了解Flash網站的應用領域Flash網站以強大的交互性、無縫的跳轉鏈接、跨平臺和客戶端的支持、極具視覺沖擊的表現力而深受大眾的喜愛，其應用領域也越來越廣泛。1．網絡游戲利用Flash技術開發的網絡游戲是一種新興的游戲形式，以畫面精美、操作簡單、無須安裝等優點深受廣大網友青睞。隨著Flash技術的迅速發展，Flash網絡游戲發展空間巨大。網絡游戲的代表：仙劍類《飄渺仙緣》、角色扮演《十年一劍》、策略類《三十六計》等。2．電子雜志企業文化的建設直接影響企業的凝聚力和競爭力，越來越多的企業開始注重并花費大量的人力和財力進行這方面的團隊建設。傳統的板報和告示欄顯然已無法滿足需求，網絡傳播成了最有效且最經濟的手段。電子雜志是網絡時代的一種重要工具，可以用于各種群體之間的信息交流和信息發布。通過電子雜志可以輕松解決印制成本及運輸費用的問題。項目3Flash網站的設計與制作了解Flash網站的應用領域3．特定網上廣告與傳統的廣告相比，使用Flash制作的廣告具有明顯的優勢，因為其制作成本低、周期短、產品多樣化、自由度高且具有交互性。Flash廣告可以通過網絡有目的地將產品信息隨著動畫悄無聲息地傳遞給用戶，使用戶在不知不覺中了解產品，并且不容易產生逆反心理，也突顯了Flash在商業推廣上的巨大價值。4．企業品牌推廣Flash網站以新穎獨特的視覺體驗，被越來越多的有實力的企業所引用。Flash網站對企業品牌推廣來說效果非常好，特別是一些高端的汽車品牌和房地產項目。除了上述應用，Flash網站還可以用于企業宣傳、產品展示、形象推廣、動態視頻展示等。項目3Flash網站的設計與制作模擬實訓一、實訓目的（1）掌握Flash網站的架構。（2）了解Flash網站的應用領域。二、實訓內容分組制作網站的策劃書（自選題目），應包括建設網站的目標、主題、功能和欄目內容，在Word或Photoshop中制作網站結構圖和版式布局設計草圖。項目3Flash網站的設計與制作任務2掌握Flash網站美工設計人們對美的追求是不斷加深的，網頁設計也是如此。網頁設計的審美需求是對平面視覺傳遞美學設計的一種繼承和拓展。需要考慮如何提高用戶接收網頁信息的效率，增加網頁設計的美感，從而迎合大眾的視覺審美。本任務主要介紹Flash網站美工設計的相關知識，包括Flash網頁的平面構成、色彩搭配及設計風格等。任務目標（1）了解Flash網頁的平面構成。（2）熟悉Flash網頁的色彩搭配。（3）掌握Flash網頁的設計風格。項目3Flash網站的設計與制作了解Flash網頁的平面構成網頁具有獨特的信息表達方式和強大的交互性，因此網頁設計在平面構成的創意上受到諸多限制和挑戰。在設計網頁時，運用平面構成的原理和藝術表現形式能夠使網頁效果更加豐富。1．平面構成的形式表現平面構成的原理已經廣泛應用于不同的設計領域，在網頁設計中也不例外。1）分割構成在平面構成中，把整體分成各個部分稱為分割，下面介紹幾種常用的分割方法。（1）等形分割。這種分割方法要求分割的形狀完全相同，分割后再加上分割線用于界定會有更好的效果。等形分割頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成（2）自由分割。這種分割方法將畫面進行自由分割，呈現的是不規則的形狀。不同于等形分割的整齊效果，自由分割根據圖像效果隨意分割，以呈現活潑靈動的感覺。自由分割頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成2）對稱構成