《Flash CS6動(dòng)畫制作（第3版）》 課件全套 項(xiàng)目1-4 Flash制作基本功 - Flash片頭動(dòng)畫的設(shè)計(jì)與制作

FlashCS6動(dòng)畫制作Flash制作基本功項(xiàng)目1項(xiàng)目1Flash制作基本功│

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

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

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

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