項目一Animate制作基本功

任務1熟識Animate的特點、應用、制作環境與基本操作1了解Animate的特點與應用2掌握Animate的制作環境任務目標3熟悉Animate的基本操作

Animate是一款功能強大的矢量動畫編輯軟件，不僅可以對圖片、文字、音樂、視頻和應用程序組件等多種資源進行整合，具有強大的多媒體編輯功能，還可以實現動畫與用戶的交互。由于Animate使用矢量圖形，存儲空間小，播放效果好，因此被廣泛地應用于網頁動畫的設計中，成為當前網頁動畫設計非常流行的軟件，其特點為：采用矢量技術，生成的文件所占的空間小，便于網絡傳輸。使用矢量圖形，無論放大或者縮小多少倍都不會失真。采用流媒體播放技術，可以實現邊下載邊播放。播放插件體積小，易于下載，常用的瀏覽器都可以自動安裝。可以將各種多媒體素材融合在一起，并能實現用戶和動畫的交互功能。可以與Dreamweaver配合使用，直接嵌入網頁的任意位置。操作簡單，即使初學者也能制作出令人炫目的動畫效果。

1.了解Animate的特點與應用

網站Banner網絡廣告產品演示動漫設計Animate游戲手機應用網站制作多媒體課件

1.了解Animate的特點與應用

Animate以其強大的動畫編輯功能、靈活的操作界面，以及開放的結構，被廣泛應用于多個領域。在Windows操作系統的任務欄中選擇“開始”→“所有程序”→“Adobe”→“AdobeAnimate2023”命令，啟動Animate軟件，進入Animate的界面，如圖1-1-1所示。圖1-1-1界面2.Animate的制作環境2.Animate的制作環境

在Animate的界面中選擇“文件”→“新建”選項后，選擇好相應的預設或者自定義文檔大小、單位、幀速率以及平臺類型，即可進入Animate2023的工作界面。Animate在每次版本升級后都會對界面進行優化，Animate2023的工作界面更具親和力，使用也更加方便，本書采用Animate2023進行講解，如圖1-1-2所示。圖1-1-2工作界面2.Animate的制作環境2.Animate的制作環境1．標題欄：從左至右依次顯示軟件和文件的名稱，最小化、最大化、關閉按鈕。2．菜單欄：在菜單欄中分類提供了Animate中所有的操作命令，幾乎所有的可執行命令都可在這里直接或間接地找到相應的操作選項。3．工具欄：工具欄也稱為繪圖工具箱。提供了Animate中所有的繪圖操作工具，如筆觸顏色、填充顏色以及工具的相應設置選項。4．時間軸：時間軸面板是制作Animate動畫的核心。主要用于組織和控制不同的圖層和幀中的動畫內容。主要包括圖層、幀、播放指針、時間軸標尺等。5．舞臺：即當前動畫制作的區域，是用來制作和編輯動畫。舞臺的大小決定了Animate動畫成品的大小。6．面板：Animate提供了大量常用功能面板，用于幫助查看、編輯和組織內容。選擇“窗口”命令，即可查看和打開Animate為用戶提供的各類面板。可以根據用戶的需求，將面板展現在Animate窗口的右邊。圖1-1-3“庫”面板下面介紹幾種常用的面板。（1）“庫”面板。在菜單欄中選擇“窗口”→“庫”命令，或者按“Ctrl+L”組合鍵，即可顯示或隱藏“庫”面板。“庫”面板主要用于存儲制作Animate動畫所需要的圖片、音頻和視頻等各類素材，以及創建的各類元件等，如圖1-1-3所示。2.Animate的制作環境圖1-1-4“動作”面板（2）“動作”面板。在菜單欄中選擇“窗口”→“動作”命令，或者按“F9”鍵，即可顯示或隱藏“動作”面板。“動作”面板主要用于Animate動畫的動作腳本的編輯。使用“動作”面板可以在幀、按鈕和影片剪輯元件上添加動作腳本，以實現各類動畫效果，如圖1-1-4所示。2.Animate的制作環境圖1-1-5“顏色”面板圖1-1-6“樣本”面板（3）“顏色”面板/“樣本”面板。在菜單欄中選擇“窗口”→“顏色”/“樣本”命令，即可顯示或隱藏“顏色”面板/“樣本”面板。“顏色”面板主要用于設置顏色類型、筆觸顏色、填充顏色及Alpha值等；“樣本”面板主要用于顏色樣本的管理，如圖1-1-5、1-1-6所示。2.Animate的制作環境圖1-1-7“對齊”面板（4）“對齊”面板。在菜單欄中選擇“窗口”→“對齊”命令，或者按“Ctrl+K”組合鍵，即可顯示或隱藏“對齊”面板。“對齊”面板主要用于對象的對齊和分布，既可以是相對于舞臺對齊分布，又可以是對象與對象之間對齊分布，如圖1-1-7所示。2.Animate的制作環境圖1-1-8“信息”面板（5）“信息”面板。在菜單欄中選擇“窗口”→“信息”命令，或者按“Ctrl+I”組合鍵，即可顯示或隱藏“信息”面板。“信息”面板主要用于顯示當前選擇對象的寬、高、位置、顏色及鼠標指針的位置等，如圖1-1-8所示。2.Animate的制作環境圖1-1-9“變形”面板（6）“變形”面板。在菜單欄中選擇“修改”→“變形”命令，或者按“Ctrl+T”組合鍵，即可顯示或隱藏“變形”面板。“變形”面板主要用于對象外形的編輯和操作，包括對象的寬高比、旋轉角度和傾斜角度等，如圖1-1-9所示。2.Animate的制作環境1．新建文件創建新文檔是制作Animate動畫的第一步，新建文檔的方法很多，常用的有兩種：方法一：啟動Animate，在界面中選擇“文件”→“新建”選項，即可創建一個新的Animate文檔。方法二：在已打開的Animate窗口的菜單欄中選擇“新建”命令，或者按“Ctrl+N”組合鍵，在彈出的“新建文檔”對話框中選擇相應預設或者自定義，即可創建一個新的Animate文檔，如圖1-1-10所示。3.熟悉Animate的基本操作

圖1-1-10“新建文檔”對話框3.熟悉Animate的基本操作2．打開文件

如果已經創建了Animate文檔，操作完成且關閉文檔后需要重新打開，則可以通過選擇“打開”命令來實現。方法一：在已經打開的Animate2023界面中選擇“打開”選項，找到Animate文檔并打開即可，或者將文件直接拖入舞臺，如圖1-1-11所示。方法二：啟動Animate2023，在菜單欄中選擇“文件”→“打開”命令，或者按“Ctrl+O”組合鍵，在彈出的“打開”對話框中選擇需要打開的文件即可，如圖1-1-12所示。

3.熟悉Animate的基本操作

圖1-1-11在窗口打開文件3.熟悉Animate的基本操作圖1-1-12“打開文件”對話框3.熟悉Animate的基本操作3．保存文件

在完成Animate文檔的編輯后，需要對文件進行保存。可以在菜單欄中選擇“文件”→“保存”命令，或者按“Ctrl+S”組合鍵，在彈出的“另存為”對話框中選擇存放文件的路徑，輸入文件的名稱，如“向日葵”，并將“保存類型”設置為“Animate文檔(*.fla)”，如圖1-1-13所示。

3.熟悉Animate的基本操作

圖1-1-13“保存文件”對話框3.熟悉Animate的基本操作4．發布文件

Animate文件除了可以保存為FLA源文件格式，Animate文檔還可以發布SWF動畫格式或其他文件格式，包括HTML、GIF、JPG、PNG等。

在菜單欄中選擇“文件”→“發布設置”命令，或者按“Ctrl+Shift+F12”組合鍵，在彈出的“發布設置”對話框中選擇所需要保存的文件格式，如圖1-1-14所示。在“發布”選項組中勾選所需要發布的文件格式的復選框，單擊“發布”按鈕，即可在相應的文件夾中發布生成的目標文件。

3.熟悉Animate的基本操作圖1-1-14“發布設置”對話框3.熟悉Animate的基本操作下面通過案例來學習下Animate文件的創建及常用面板的操作。打開“向日葵”Animate文檔，呈現的是欣欣向榮的向日葵的圖片，如圖1-1-15所示。圖1-1-15“向日葵”動畫效果案例1-1-1制作“向日葵”動畫

本任務主要介紹了Animate的基礎知識，包括Animate的特點、應用、制作環境與基本操作，使讀者初步了解Animate，在此基礎上引領讀者創建一個簡單的Animate文檔，以學習如何新建、打開和保存Animate文檔，引起讀者的興趣，為后續的學習奠定良好的基礎。任務小結一、實訓目的1．掌握創建Animate文檔的方法。2．掌握常用面板的使用方法。3．掌握保存源文件及發布動畫的方法。二、實訓內容1.制作“卡通頭像”Animate文檔，設置文檔尺寸為“400×400”像素，背景顏色為“黑色”，幀頻為“12”，修改圖片大小使其與舞臺大小一致，并且將圖片放在舞臺中央。效果如圖1-1-16所示。圖1-1-16“卡通頭像”文檔模擬實訓項目一Animate制作基本功

任務2掌握常用工具的使用與角色繪制1了解位圖與矢量圖的基本概念2掌握繪圖工具的使用任務目標4理解圖層的基本概念3熟悉顏色填充方法位圖與矢量圖都是計算機儲存圖像文件的方式，我們常用的圖像文件格式大多都屬于這兩種類型。1．位圖位圖也被稱為像素圖或點陣圖，是由一個個帶有顏色信息的小方格組成的。當這些帶有不同顏色的小方格緊密的排列在一起時，就組成了位圖圖像，這些小方格也稱為像素。單位面積上像素的多少決定了位圖圖像的畫質和文件大小，每平方英寸上所包含的像素越多，圖像就越清晰，顏色之間的混和就越平滑，文件所占空間也越大。位圖圖像可以更好的表現色彩的層次感，線條的細膩，顏色的艷麗多彩，可以很容易的模擬照片的真實效果。常見的位圖編輯軟件有Photoshop、Painter等。

1.了解位圖與矢量圖的基本概念

1.了解位圖與矢量圖的基本概念

2．矢量圖矢量圖也被稱為向量圖，通過一系列的直線和曲線來描述圖像，它所儲存的是對象的形狀、線條和色彩等，圖形中每個部分都是獨立存在的。因此矢量圖的清晰度與分辨率無關，在縮放圖像時不會出現圖像失真的情況，且矢量圖文件所占的空間很小，非常適合標志設計、圖案設計、文字設計等。常見的矢量圖編輯軟件有Illustrator、CorelDRAW、Flash、AutoCAD等。3．位圖與矢量圖的區別位圖與矢量圖最大的區別在于，位圖圖像受像素、分辨率的限制，在放大后會出現馬賽克的情況；矢量圖則與分辨率無關，可以縮放任意大小和任意分辨率，圖像清晰度都不會受到影響。

Animate工具欄中的繪圖工具可以幫助用戶繪制動畫對象。在繪制圖形時，先創建一個Animate文檔，再選擇合適的繪圖工具繪制圖形。下面通過具體的操作來介紹繪圖工具的使用。（1）新建一個Animate文檔，將舞臺大小設置為550px×400px，背景顏色設置為白色，幀頻設置為24fps，如圖1-2-1所示。圖1-2-1設置文檔屬性2.掌握繪圖工具的使用圖1-2-2選擇“橢圓工具”

（2）將鼠標指針移到工具欄中的“矩形工具”上長按鼠標左鍵，在彈出的下拉列表中選擇“橢圓工具”，如圖1-2-2所示。2.掌握繪圖工具的使用圖1-2-3設置“橢圓工具”的屬性

（3）在“屬性”面板中設置“橢圓工具”的屬性，將“筆觸顏色”設置為無色，“填充顏色”設置為黃色（#FFFF00），如圖1-2-3所示。2.掌握繪圖工具的使用圖1-2-4繪制正圓

（4）在按住“Shift”鍵的同時按住鼠標左鍵進行拖放，在舞臺中繪制一個正圓，如圖1-2-4所示。2.掌握繪圖工具的使用我們在繪制圖形時，除了可以通過“屬性”面板來設置圖形的顏色，還可以使用“顏料桶工具”和“漸變變形工具”等對圖形進行顏色的填充與改變，以達到特殊的圖形效果。顏色的填充類型有四種方式：純色、線性漸變、徑向漸變和位圖填充。顏色的填充方法：先選中填充對象，然后選擇或編輯顏色；也可在顏色設定后，使用墨水瓶工具或顏料桶工具在填充對象或區域單擊鼠標左鍵。3.熟悉顏色填充方法

圖層的概念：在Animate動畫中，可以將圖層看作一張張透明的紙，每張紙上都有不同的內容，將這些紙疊在一起就組成一幅比較復雜的畫面。在某圖層添加內容時，會遮住下一圖層中相同位置的內容。如果其上一圖層的某個位置沒有內容，透過這個位置就可以看到下一圖層相同位置的內容。

Animate中的圖層都是相互獨立的，擁有獨立的時間軸，包含獨立的幀，可以在圖層上繪制和編輯對象，且不會影響其他圖層上的對象。圖層的背景顏色為藍色時，表示當前的圖層是被選中的。4.理解圖層的基本概念

4.理解圖層的基本概念

創建新圖層的方法單擊【圖層】面板上底層最左邊的“新建圖層”按鈕，或者在菜單欄中選擇【插入】→【時間軸】→【圖層】命令，即可創建一個新的圖層選擇圖層的方法：單擊【圖層】面板上需要選擇的圖層名稱、或者在時間軸上單擊任意一幀可以選擇該幀所在的圖層。當需同時選擇多個圖層時，用鼠標單擊需要選擇的第一個圖層，然后按住【Shift】鍵的同時單擊需要選擇的最后一個圖層，即可選擇多個連續圖層；按住【Ctrl】鍵的同時單擊需要選擇的圖層，即可選擇多個不連續的圖層。4.理解圖層的基本概念

刪除圖層：

選擇需要刪除的圖層，單擊【圖層】面板上面的“刪除”按鈕或者在需要刪除的圖層上單擊鼠標右鍵，在彈出的的快捷菜單中選擇【刪除圖層】命令即可。重命名圖層：在需要重命名的圖層名稱上雙擊，然后在出現的編輯框中輸入新的圖層名稱即可。下面通過案例進一步學習Animate動畫角色的繪制。

打開已完成的“小蜜蜂”Animate文檔，其動畫效果如圖1-2-17所示。圖1-2-5卡通向日葵案例1-2-1制作“小蜜蜂”動畫

本任務首先介紹了Animate工具欄中基本繪圖工具的使用，包括“橢圓工具”、“矩形工具”、“鋼筆工具”和“任意變形工具”等；其次介紹了對繪制的圖形填充顏色的方法，包括填充純色和漸變色；最后以案例的形式介紹了圖層的創建及應用。任務小結一、實訓目的1．掌握基本繪圖工具的使用2．掌握填充顏色的方法3．掌握圖層順序的調整4．能夠繪制較為簡單的圖形二、實訓內容1.繪制卡通雪人，效果如圖1-2-6所示。圖1-2-6繪制卡通雪人模擬實訓2．制作“卡通向日葵”，效果如圖1-2-34所示。（提示：首先要使用繪圖工具繪制向日葵的外形，然后利用顏料桶、漸變工具填充顏色。在制作過程中，注意調整圖層前后的順序，并且將不同的圖形放在不同的圖層上，方便我們進行繪制或者修改。圖1-2-34“卡通向日葵”模擬實訓3.繪制“小獅子”圖形，其效果如圖1-2-35所示。（提示：使用多角星型工具繪制小獅子頭，在使用各種形狀工具繪制身體的各個部分，并使用選擇工具及部分選取工具對繪制圖形進行修改。）圖1-2-35“小獅子”模擬實訓4.繪制“太空飛船”圖形，其效果如圖1-2-36所示。（提示：使用鋼筆工具繪制火箭輪廓，并用顏料桶工具，填充圖形顏色，用任意變形工具，旋轉圖形的角度，再使用多角星形工具及橢圓工具分別繪制五角星和圓形裝飾圖形）圖1-2-36“太空飛船”模擬實訓項目一Animate制作基本功

任務3學會逐幀動畫和補間動畫

的制作1了解關鍵幀、空白關鍵幀和普通幀的概念2熟悉逐幀動畫的制作方法任務目標4熟悉傳統補間動畫的制作方法3熟悉形狀補間動畫的制作方法1．逐幀動畫的概念逐幀動畫是一種常見的動畫形式，是在每一幀上繪制不同的舞臺內容，這些幀在時間軸上連續排列起來，順序播放就形成了動畫效果。逐幀動畫形式源于傳統的動畫繪制，非常適合表現細膩，動作復雜的動畫。2．關鍵幀、空白關鍵幀和普通幀幀是Animate動畫的最基本單位，包括普通幀、關鍵幀、空白關鍵幀三種類型，在制作動畫時，根據不同的需要選擇不同的幀，如圖1-3-1所示。圖1-3-1【時間軸】面板上的各幀1.熟悉逐幀動畫的制作方法

關鍵幀空白關鍵幀普通幀1.熟悉逐幀動畫的制作方法

關鍵幀

制作Animate動畫過程中最重要的幀，用來放置動畫內容，并且其所包含的內容可以編輯。它可以用來定義動畫對象的變化，更改動畫對象的開始和結束。在“時間軸”面板中右擊，在彈出的快捷菜單中選擇“插入關鍵幀”命令，或者按“F6”鍵，即可插入關鍵幀。空白關鍵幀

是指沒有添加動畫內容的關鍵幀。在空白關鍵幀中添加內容，即可將空白關鍵幀自動轉換為關鍵幀；反之，刪除關鍵幀中的內容，關鍵幀就轉換為空白關鍵幀。是否有動畫內容，是關鍵幀和空白關鍵幀最大的區別。在“時間軸”面板中右擊，在彈出的快捷菜單中選擇“插入空白關鍵幀”命令，或者按“F7”鍵，即可插入空白關鍵幀。1.熟悉逐幀動畫的制作方法

普通幀

用來延長顯示左邊離它最近的關鍵幀或空白關鍵幀的動畫內容，但是不能對動畫內容進行編輯。在“時間軸”面板中右擊，在彈出的快捷菜單中選擇“插入幀”命令，或者按“F5”鍵，即可插入普通幀。3．逐幀動畫的類型（1）使用圖片制作的逐幀動畫。給連續多個幀分別導入多張靜態圖片，即可制作一個逐幀動畫，導入圖片的格式一般為JPG、PNG等。（2）使用繪制的矢量圖制作的逐幀動畫。使用工具欄中的工具在舞臺中給每一幀繪制動畫內容，連續播放這些幀，就是一個逐幀動畫。1.熟悉逐幀動畫的制作方法

（3）使用文字制作的逐幀動畫。文字也可以作為制作逐幀動畫的素材元素，在舞臺中輸入文字，將這些文字添加到各個幀中即可，文字逐幀動畫可以實現文字的旋轉、跳躍等效果。（4）使用序列圖片制作的逐幀動畫。將GIF圖片、SWF動畫文件等素材導入Animate，按動畫順序把這些成序列的圖片逐個放在不同的幀上，就可以制作成一個逐幀動畫。4．逐幀動畫的制作

制作簡單的逐幀動畫，只需要將多個連續的素材導入Animate中，然后把導入的素材按順序添加到各個關鍵幀即可。

制作逐幀動畫的一般步驟為：在時間軸上依次添加關鍵幀，然后在這些關鍵幀上添加或編輯對象，設置對象大小和位置就可以制作出一段連續逐幀播放的動畫。圖1-3-2添加關鍵幀及關鍵幀上的內容1.熟悉逐幀動畫的制作方法

下面通過案例進一步熟悉逐幀動畫的制作。看，“romantic”這個單詞，一個字母一個字母跳躍出來，這不就是打字機在打字嗎？哦，不是的，是神奇的Animate動畫效果呀，如圖1-3-3所示。圖1-3-3“打字機”動畫效果案例1-3-1制作“打字機”動畫效果1．形狀補間動畫的概念形狀補間動畫是用來表現動畫對象從一種物體狀態到另一種物體狀態的變化，例如動畫對象之間顏色、大小、形狀、位置的改變。它的操作對象必須是像素，對于文字或從外部導入的圖形圖像，可通過Animate提供的【分離】命令，將其分離為像素。制作形狀補間動畫，只需要制作動畫變形前和變形后的畫面，中間的變化過程由計算機自動完成。

2.熟悉形狀補間動畫的制作方法

2．制作形狀補間動畫的一般步驟：（1）在開始關鍵幀上繪制或添加對象（非像素圖像要進行分離）。（2）同樣在結束關鍵幀上繪制或添加對象（非像素圖像要進行分離）。（3）選中兩個關鍵幀之間的任意一幀，單擊鼠標右鍵彈出快捷菜單，選擇“創建補間形狀”命令，或者在時間軸面板上選擇“插入形狀補間”按鈕，即可創建形狀補間動畫。

圖1-3-4創建補間形狀2.熟悉形狀補間動畫的制作方法

下面通過案例進一步學習形狀補間動畫的制作。

在漆黑的背景下，迷彩線條尤其奪目，像魔術師的魔術棒變化無常，如圖1-3-17所示。圖1-3-5“魔幻線條”效果案例1-3-2制作“魔法線條”動畫下面通過一個案例來介紹如何控制動畫中間變化的過程。

文字是動畫的主要構成元素，大寫的“T”從一種字體變化成另外一種字體，這個奇妙的過程可通過控制來展現出不同的動畫效果，如圖1-3-6所示。圖1-3-6變形文字案例1-3-3制作“變形文字”動畫1．補間動畫的概念

在Animate的“時間軸”面板上，先在一個時間點（關鍵幀）放置一個實例，然后在另一個時間點（關鍵幀）改變這個實例的位置、大小、顏色、透明度等參數，Animate根據兩者之間的幀的值創建的動畫被稱為補間動畫，本書創建的補間動畫均為傳統補間動畫。

補間動畫和形狀補間動畫最大的區別就是補間動畫的對象是元件，形狀補間動畫的對象是像素。元件的種類很多，常見的有圖形、文字、圖像、按鈕和影片等。補間動畫最大的優點是在不改變補間動畫的情況下，直接修改元件即可對動畫進行修改。

補間動畫必須是同一個元件的動畫，不同的元件之間不能制作補間動畫。

3.熟悉補間動畫的制作方法

2．制作補間動畫的一般步驟：（1）創建元件，元件既可以是圖形、文字、圖片，也可以是按鈕、影片等。（2）添加開始和結束關鍵幀，分別設置它們的位置、大小、顏色、透明度等，使兩個關鍵幀上同一元件的顯示狀態發生改變。（3）選中兩個關鍵幀之間的任意一幀并右擊，在彈出的快捷菜單中選擇“創建傳統補間”命令，即可創建補間動畫。

圖1-3-7創建補間動作3.熟悉補間動畫的制作方法

各種補間動畫之間的區別如下。①補間動畫，可以完成傳統補間動畫及3D補間動畫的效果。②形狀補間動畫，可以對像素進行任意變化操作。③傳統補間動畫，可以對實例的位置、大小、顏色、透明度等參數進行變化操作。

圖1-3-83種補間動畫在時間軸上的表現形式3.熟悉補間動畫的制作方法

下面通過案例進一步學習補間動畫的制作。模仿鏡頭的推拉和旋轉，讓“古堡“圖片在顯示時先放大、旋轉、移動的效果，猶如電影大片一樣，效果如圖1-3-8所示。圖1-3-9鏡頭效果案例1-3-4制作“鏡頭效果”動畫本任務主要介紹了逐幀動畫的基本概念、幀的分類、幀的編輯、形狀補間動畫和傳統補間動畫的制作。通過各個任務學習了逐幀動畫的制作以及補間動畫的各項屬性設置等。任務小結一、實訓目的1．掌握逐幀動畫的制作方法。2．學會制作形狀補間動畫和傳統補間動畫。二、實訓內容1.制作“行走的鴨子”的效果，如圖1-3-9所示。圖1-3-10行走的鴨子效果本節實訓二、實訓內容2.變化的文字，從一組文字逐漸變化為另一組文字，如圖1-3-10所示。圖1-3-11變化胡文字3.制作“海底世界”文字動畫的效果，如圖1-3-11所示。圖1-3-12海底世界模擬實訓項目一Animate制作基本功

任務4掌握元件制作與庫的運用1了解元件的概念與分類2熟悉各類元件的制作方法任務目標3掌握庫的概念及運用1．元件的概念

所謂元件，就是在制作動畫的過程中可以反復使用或編輯的一種部件，存放在“庫”面板中。在Animate中，元件可以被多次重復使用，這便于動畫的修改，而重復使用不會增大動畫所占的空間，更便于網絡傳輸。2．元件的分類元件分為三種類型：圖形元件、按鈕元件和影片剪輯元件。圖形元件圖形元件主要用于創建靜態的動畫使用對象，不能用作交互。1.熟練圖形元件與影片剪輯元件的制作

影片剪輯元件

影片剪輯元件就是包含可以獨立播放動畫的元件。影片剪輯是包含在Animate影片中的影片片段，有其時間軸和屬性，具有交互性，是用途最廣、功能最多的部分。影片剪輯元件既可以包含交互控制、聲音及其他影片剪輯的實例，又可以放置在按鈕元件的時間軸上用來制作動畫按鈕。較為復雜的動畫經常用多個影片剪輯元件來簡化動畫的制作過程。按鈕元件按鈕元件用于實現動畫的交互功能，可以響應鼠標單擊、滑過或其他動作。使用按鈕可以控制動畫播放，與動畫進行交互。按鈕元件可以是一個圖形，一幅圖片，甚至是看不見的透明按鈕。1.熟練圖形元件與影片剪輯元件的制作

3．圖形元件的制作（1）新建一個Animate文檔，在菜單欄中選擇“插入”→“新建元件”命令，或者按“Ctrl+F8”組合鍵，彈出“創建新元件”對話框。（2）在“名稱”文本框中輸入元件的名稱“太陽”，在“類型”下拉列表中選擇“圖形”選項，如圖1-4-1所示。圖1-4-1創建圖形元件對話框1.熟練圖形元件與影片剪輯元件的制作

（3）單擊“確定”按鈕，創建名稱為“太陽”的圖形元件，并進入元件編輯區。在元件編輯區中繪制圖形元件，如1-4-2所示。（4）在菜單欄中選擇“窗口”→“庫”命令，打開“庫”面板，可以看到繪制的圖形元件自動進入“庫”面板中，如圖1-4-3所示。圖1-4-2繪制圖形元件圖1-4-3“庫”中元件1.熟練圖形元件與影片剪輯元件的制作

4．轉化成元件已經創建好的對象也可以直接轉化為元件，操作方法如下：（1）選中繪制好的圖形并右擊，在彈出的快捷菜單中選擇“轉換為元件”命令，或者在菜單欄中選擇“修改”→“轉換為元件”命令，或者按“F8”鍵，彈出“轉換為元件”對話框，如圖1-4-4所示。圖1-4-4轉化為元件對話框1.熟練圖形元件與影片剪輯元件的制作

5．影片剪輯元件的制作（1）新建Animate文檔，在菜單欄中選擇“插入”→“新建元件”命令，或者按“Ctrl+F8”組合鍵，彈出“創建新元件”對話框，在“名稱”文本框中輸入“憤怒的小孩”，在“類型”下拉列表中選擇“影片剪輯”選項，如圖1-4-5所示。（2）單擊【確定】按鈕進入該元件的編輯模式。圖1-4-5創建影片剪輯元件1.熟練圖形元件與影片剪輯元件的制作

6．元件與實例的關系

將元件從“庫”面板拖到舞臺中，舞臺中會自動生成該元件的一個實例，復制元件的過程就是創建實例的過程。將元件拖到舞臺中，選中該元件的實例，其“屬性”面板中就會出現與實例相對應的屬性，如名稱、顏色和大小等，如圖1-4-6所示。

圖1-4-6元件與實例1.熟練圖形元件與影片剪輯元件的制作

選中圖形元件實例，打開“屬性”面板“對象”選項，如圖1-4-7所示。

選中影片剪輯元件實例，打開“屬性”面板“對象”選項，如圖1-4-8所示。

。圖1-4-7圖形元件實例的“屬性”面板圖1-4-8影片剪輯實例的“屬性”面板1.熟練圖形元件與影片剪輯元件的制作

下面通過案例進一步熟悉影片剪輯元件的制作。在海底世界，一群可愛的小魚在水中悠閑的吐著泡泡，像是在比賽一般，如圖1-4-9所示。圖1-4-9“吐泡泡的小魚”動畫效果案例1-4-1制作“吐泡泡的小魚”動畫1．按鈕元件的制作

按鈕元件的時間軸與其他元件不同，由四幀組成，分別是“彈起”、“指針經過”、“按下”、“點擊”，每一幀標志一種鼠標狀態，對應四種響應鼠標操作狀態，如1-4-10所示。圖1-4-10按鈕元件時間軸2.熟練按鈕元件制作與庫的運用

2．按鈕元件的四種狀態：彈起：鼠標和按鈕沒有發生接觸，按鈕處于一般狀態。指針經過：鼠標經過按鈕但沒有按下鼠標的狀態。按下：鼠標移動到按鈕上方，并按下鼠標時的狀態。點擊：此狀態用于定義按鈕響應鼠標事件的有效區域范圍，此區域不會在影片中顯示。若沒有繪制“單擊”狀態的區域，“彈起”幀的范圍即為按鈕的有效響應范圍。2.熟練按鈕元件制作與庫的運用

3．庫的運用

庫就相當于Animate中的倉庫，用來存放制作動畫所需的元件及導入的各類素材，如位圖、聲音文件和視頻剪輯等。“庫”面板是制作動畫時使用頻率非常高的面板之一，可以方便用戶靈活地調用元件及素材，如圖1-4-11所示。圖1-4-11“庫”面板2.熟練按鈕元件制作與庫的運用

4．庫的操作（1）打開“庫”面板：在菜單欄中選擇“窗口”→“庫”命令，或者按“Ctrl+L”鍵，打開“庫”面板，選中“庫”面板中的任意一個元件或素材，其內容就會在預覽窗口中顯示出來。（2）新建“庫”元件：單擊“庫”面板下方的“新建元件”按鈕，在彈出的“創建新元件”對話框中可以新建元件。（3）更改“庫”元件屬性：選中“庫”面板中的某個元件，單擊“庫”面板下方的“屬性”按鈕，在彈出的“元件屬性”對話框中可以修改元件的屬性。2.熟練按鈕元件制作與庫的運用

（4）直接復制元件：選中“庫”面板中的某個元件并右擊，在彈出的快捷菜單中選擇“直接復制”命令，彈出“直接復制元件”對話框，在該對話框中可以對復制的元件進行設置。（5）刪除“庫”元件：選中“庫”面板中某個不需要的元件，單擊“庫”面板下方的“刪除”按鈕就可以刪除選中的元件。（6）新建文件夾：單擊“庫”面板下方的“新建文件夾”按鈕就可以創建一個文件夾，可以將“庫”面板中的元件或各類素材分類存儲。2.熟練按鈕元件制作與庫的運用

5．CCLibraries

Animate集成了CreativeCloudLibraries。CreativeCloudLibraries可幫助跟蹤自己所有的設計資源。創建圖形資源并將它們保存到該庫后，就可以將它們用在Animate文檔中了。設計資源會自動同步，并可以與任何具有CreativeCloud帳戶的人共享。創意團隊可以跨Adobe桌面和移動應用程序工作，因此您的共享庫資源始終最新，并可以在任何地方使用。提供用于從庫導入和重復使用圖形的支持選項。Animate支持的資源類型有：顏色和顏色主題、畫筆、Graphics以及矢量畫筆。

2.熟練按鈕元件制作與庫的運用

圖1-4-12CCLibraries面板內容介紹2.熟練按鈕元件制作與庫的運用

CCLibraries面板如圖1-4-12所示：A.

CreativeCloudLibrary文件夾

B.

將項目顯示為圖標

C.

將項目顯示為列表

D.

從AdobeStock中搜索圖像

E.

CreativeCloudLibrary內容面板

F.

添加顏色

G.

同步CreativeCloudLibraries

H.

刪除庫中的項目

。下面通過案例進一步學習按鈕元件的制作。夜晚的城市安靜而美麗，一個個窗戶透著家的溫暖，當鼠標經過，按下時屋里的燈就會慢慢變暗，如圖1-4-13所示。。圖1-4-13“燈火萬家”效果案例1-4-2制作“燈火萬家”動畫本任務主要介紹了元件的概念，圖形元件、影片剪輯元件和按鈕元件的創建方法，以及庫和組件的運用。通過各個案例，讀者可以熟悉元件的操作，并且可以使用元件來制作效果較為復雜的動畫。任務小結一、實訓目的1．掌握圖形元件的操作方法。2．掌握按鈕元件的操作方法。3．掌握影片剪輯元件的操作方法。4．使用元件的嵌套制作較為復雜的動畫效果。二、實訓內容1.制作“動態小魚”按鈕，如圖1-4-14、1-4-15所示。圖1-4-14按鈕“彈起”幀圖1-4-15按鈕“鼠標經過”幀模擬實訓2.制作“水波蕩漾”動畫效果，如圖1-4-16所示。圖1-4-16“水波蕩漾”效果模擬實訓項目一Animate制作基本功

任務5掌握遮罩動畫制作1了解遮罩的原理及概念2熟練掌握遮罩動畫的制作方法任務目標

運用遮罩制作的動畫稱為遮罩動畫。遮罩效果的獲得一般需要兩個圖層：上面的圖層稱為遮罩層，看到的是形狀；下面的圖層稱為被遮罩層，通過上面的圖層的形狀可以看到該層的內容。

Animate遮罩動畫，能夠透過該動畫遮罩層中的對象看到被遮罩層中的對象及其屬性（包括它們的變形效果），但是遮罩層中的對象的許多屬性，如漸變色、透明度、顏色和線條樣式等卻是被忽略的。“遮罩”主要有2種用途，一種是用在整個場景或一個特定區域中，使場景外的對象或特定區域外的對象不可見；另一種是用來遮住某一元件的一部分，從而實現要求的一些特殊的效果。

1.了解什么是遮罩1.了解什么是遮罩

1．構成遮罩和被遮罩層的元素遮罩層中的圖形對象在播放時是看不到的，遮罩層中的內容可以是按鈕、影片剪輯、圖形、位圖和文字等，但不能是線條，如果一定要使用線條，則可以使用“修改”→“形狀”→“將線條轉換為填充”命令，將線條轉換為填充即可。被遮罩層中的對象只能透過遮罩層中的對象被看到。在被遮罩層中，可以使用按鈕、影片剪輯、圖形、位圖、文字和線條。

2．遮罩中可以使用的動畫形式可以在遮罩層、被遮罩層中分別或同時使用形狀補間動畫、傳統補間動畫、逐幀動畫等，從而使遮罩動畫變成一個可以施展無限想象力的創作空間。

在創建簡單的遮罩動畫時，首先要在Animate動畫源文件時間軸上分別建立遮罩層和被遮罩層，然后分別在這兩個圖層中添加對象，最后在遮罩層上執行“遮罩層”命令，就實現了遮罩動畫的效果，如圖1-5-1所示。要建遮罩動畫，至少需要兩個圖層，下面被遮罩的圖層是看到的內容，還需要在被遮罩圖層上創建一個遮罩圖層，作為看到下面被遮罩層的窗口。

圖1-5-1遮罩動畫效果2.掌握遮罩動畫的制作方法2.掌握遮罩動畫的制作方法“圖層1”：圖層的圖標改變了，從普通圖層變成了被遮罩層（被拍攝圖層）。并且圖層縮進，圖層被自動加鎖。“圖層2”：圖層的圖標改變了，從普通圖層變成了遮罩層（放置拍攝鏡頭的圖層）。并且圖層被加鎖。舞臺顯示也發生了變化。只顯示電影鏡頭“拍攝”出來的對象，其他不在電影鏡頭區域內的舞臺對象都沒有顯示。通常我們制作比較一些精心、復雜的動畫，如在圖片上摳取一些人物、物體等時，一般都要用到遮罩，因為遮罩出來的對象邊沿比較實，像素點較好，清晰度和原圖是一樣的，這是遮罩最大的一個優點。

遮罩層動畫，就是在遮罩層上使用補間形狀動畫、補間動畫、逐幀動畫等，如圖1-5-2所示。

圖1-5-2制作遮罩層動畫3.

熟練掌握遮罩層動畫的制作方法下面通過案例進一步熟悉遮罩層動畫的制作。在黑夜中，隨著橢圓形的探照燈的移動，物體就從黑暗的背景中凸顯出來，如圖1-5-3所示。圖1-5-4探照燈動畫效果案例1-5-1制作“探照燈”動畫被遮罩層動畫，就是固定遮罩層的形狀、大小或位置，通過在被遮罩層上使用形狀補間動畫、補間動畫等來制作動畫效果，如圖1-5-5所示。

圖1-5-5制作被遮罩層動畫4.

熟練掌握被遮罩層動畫的制作方法下面通過案例進一步學習被遮罩層動畫的制作。繁星滿天的背景下，一首靜夜思古詩的文字由下而上緩慢地出現，效果如圖1-5-6所示。圖1-5-6“古詩”效果案例1-5-2制作“古詩”動畫

利用遮罩層動畫和被遮罩層動畫技術，制作食物和文字逐漸出現的特效。繪制橢圓，創建補間形狀動畫；創建“茶杯”圖片的的遮罩層動畫；繪制矩形，導入文本圖片，創建文本圖片的被遮罩動畫。效果如圖1-5-34所示。圖1-5-34“美食廣告”動畫效果案例1-5-3制作“美食廣告”動畫本任務主要介紹了遮罩的基本概念、遮罩動畫的制作方法、遮罩層動畫和被遮罩層動畫的制作方法等，并通過案例介紹了將形狀補間動畫、補間動畫靈活運用到遮罩中，以制作出炫目神奇的動畫效果。任務小結一、實訓目的1．掌握遮罩動畫的制作方法2．掌握遮罩層和被遮罩層動畫的制作方法3．能夠運用遮罩來制作各種動畫效果二、實訓內容1．制作文字從左到右的“滾動字幕”效果，如圖1-5-8所示。圖1-5-8滾動字幕效果模擬實訓2．制作百葉窗。百葉窗關閉時是一副美景圖，當百葉窗“拉開”時，又是另一幅山水風景畫，效果如圖1-5-38所示。（提示：可導入兩張圖片，一張作為背景層，一張作為被遮罩層。再制作窗葉粗細變化的影片剪輯元件作為窗葉，用制作的窗葉影片剪輯元件排列組合成窗簾作為遮罩層。）如圖1-5-10所示。圖1-5-10百葉窗模擬實訓項目一Animate制作基本功

任務6掌握引導層動畫制作1了解引導層動畫的概念2掌握引導層動畫的制作方法任務目標引導層動畫是指一個或多個對象沿著設計好的路徑運動。引導層動畫由引導層和被引導層兩個部分組成，二者缺一不可。1．引導線引導線是引導層動畫最主要的部分，對象的運動路徑就是通過引導線來設定的。引導線也就是運動對象的運動路徑，既可以是圓形、矩形、多邊形，也可以是弧線、不規則的直線或曲線等。2．引導層和被引導層用于繪制引導線的圖層稱為引導層。運動對象所在的圖層稱為被引導層。在制作引導層動畫時，必須是引導層在上，被引導層在下。

1.

了解引導層動畫概念1．制作引導層動畫的一般步驟：（1）在引導層上繪制運動路徑。（2）在被引導層上制作補間動畫。（3）讓對象元件在開始關鍵幀和結束關鍵幀的位置上分別與引導線的起點和終點重合。圖1-6-1創建引導層動畫2.

掌握引導層動畫的制作方法下面通過兩個案例進一步學習引導層動畫的制作。在明媚的春光中，蜜蜂跳著八字舞在花叢中采蜜，效果如圖1-6-2所示。圖1-6-2蜜蜂采蜜動畫效果案例1-6-1制作“蜜蜂采蜜”動畫頂著蘑菇頭樣的卡通小人，在不同高度的臺子上跳躍，是不是很有超級瑪麗的感覺呢？效果如圖1-6-3所示。。圖1-6-3“跳躍的蘑菇頭”動畫效果案例1-6-2制作“跳躍的蘑菇頭”動畫

本任務主要介紹了引導層動畫的原理及概念、引導層和被引導層的創建，以及引導層動畫的制作方法。運用引導層動畫可以實現對象按照不規則路徑運動的動畫效果。任務小結一、實訓目的1．掌握創建引導層和被引導層的方法2．掌握引導層動畫的基本操作3．能夠制作簡單的引導層動畫二、實訓內容1．制作一只可愛美麗的蝴蝶在花叢中“飛舞”的場景，如圖1-6-32所示。（提示：畫蝴蝶飛舞引導曲線，制作蝴蝶運動動畫，沿引導線運動。），如圖1-6-4所示。圖1-6-4蝴蝶特效模擬實訓2．制作雪花在空中自由飄動的“下雪”的效果，如圖1-6-33所示。（提示：插入背景圖后，新建圖形元件制做“雪花”，然后制作“雪花”沿引導線自由飄動下落的影片剪輯元件，在影片剪輯元件中使用了引導動畫。完成影片剪輯元件后，回到場景中，多拖放幾個影片剪輯元件到場景舞臺的各個位置，并根據遠近用自由變形工具改變影片剪輯元件實例大小，就可形成飄飛的“漫天大雪”場景。）如圖1-6-5所示。圖1-6-5下雪特效模擬實訓項目一Animate制作基本功

任務7交互動畫的制作1了解文檔與腳本類型2掌握“動作”面板的使用任務目標2掌握“代碼片段”面板的使用Animate既可以制作流暢的線性播放動畫，也可以制作面向移動互聯網應用的交互式動畫。要制作交互式動畫，就需要編寫腳本代碼。因為Animate支持面向不同平臺的文檔類型，所以腳本代碼類型也不同。ActionScript3.0平臺是面向PC端的創作平臺，在此平臺下主要發布傳統的SWF動畫，使用FlashPlayer播放器播放。ActionScript是AdobeFlashPlayer和AdobeAIR運行環境的編程語言，它在Aniamte、Flex、AIR應用程序中實現交互性、數據處理及其它多種功能。由于ActionScript3.0腳本和基于CreateJS的JavaScript腳本的編寫規則不盡相同，且腳本語言的語法知識和代碼編寫技巧也不是本任務的重點，所以就不對腳本編寫做太深入的介紹，只以ActionScript3.0為例，簡單介紹一下基本腳本的編寫及使用方法。

1.了解文檔與腳本類型

“動作”面板就是ActionScript的編輯窗口。在Animate中，用戶可以通過在菜單欄中選擇“窗口”→“動作”命令或按“F9”鍵或右擊，在彈出的快捷菜單中選擇“動作”命令來打開“動作”面板，如圖1-7-1所示。圖1-7-1“動作”面板2.掌握“動作”面板的使用

“動作”面板由兩部分組成：左側部分是“腳本導航器”窗格，它列出了Animate文檔中腳本的位置，可以單擊腳本導航器中的項目，在右側的“腳本”窗格快速查看這些腳本。右側部分為“腳本”窗格，用于鍵入與當前所選幀相關聯的ActionScript或JavaScript代碼。2.掌握“動作”面板的使用圖1-7-2“動作”面板1．代碼片段的概念與類型

代碼片段是Animate預置的一些功能代碼，它允許用戶直接在“腳本”窗口中添加大量模塊化的腳本代碼，而不需要任何JavaScript或ActionScript3.0方面的知識，從而使得非編程人員能夠輕松地使用簡單的JavaScript和ActionScript3.0。使用代碼片段需打開“代碼片段”面板，如圖1-7-3所示。3.掌握“代碼片段”面板的使用

1．代碼片段的概念與類型

圖1-7-3代碼片段面板3.掌握“代碼片段”面板的使用

圖1-7-4制作star動畫3.熟悉ActionScript命令分類及應用

2．如何使用代碼片段為了便于理解，準備了一個“星形”由左往右移動的動畫案例，“星形”實例名稱命名為“star”；建立了一個“Actions”圖層，用來放置腳本，如圖1-7-4所示。圖1-7-5代碼片段3.熟悉ActionScript命令分類及應用

代碼說明：star是“星形”實例的名稱，fLClickToGoToWebPage是自定義的函數名稱，可以更改，但要與后面使用該函數的地方保持一致。是鏈接要打開的網站網址，如圖1-7-4所示。下面通過兩個案例學習交互動畫的制作。利用導入的素材制作四肢可以運動的“小老鼠”影片剪輯元件，并制作補間動畫。通過時間軸控制腳本命令“stop()”停止動畫的播放；通過在按鈕上添加動作腳本來控制“小老鼠”的運動。效果如圖1-7-6所示。圖1-7-6“小老鼠爬梯子”動畫效果案例1-7-1老鼠上樓梯我是可愛的小鴨，我有孫大圣的本領，當單擊“大”按鈕，我就會變大，當單擊“小”按鈕，我就會變小，不信你試試，如圖1-7-7所示。圖1-7-7會縮放的“小鴨”效果圖案例1-7-2會縮放的“小鴨”本任務通過對如何使用代碼片段給動畫添加基本的腳本代碼，進行介紹，講解了ActionScript3.0命令的分類、應用，以及“動作”面板的使用，通過案例詳細講解了影