Animate動畫設計與制作實例教程（Animate CC 2019） 課件 項目三 制作電子相冊

Animate動畫設計與制作實例教程

（AnimateCC2019）王德永主編項目三

制作電子相冊項目簡介

隨著多媒體拍攝設備的普及，電子相冊以多樣性和低成本等特性受到人們的喜愛。因為制作方法簡單，動態(tài)效果逼真，越來越多的人開始使用Animate制作電子相冊。

本項目主要介紹元件、實例和“庫”面板的使用。通過本項目的學習，讀者可以掌握元件、實例和庫的相關知識，以及用Animate制作電子相冊的方法和技巧。學習目標掌握圖形元件、按鈕元件和影片剪輯元件的使用方法；掌握實例和“庫”面板的使用方法；掌握成長相冊、婚禮相冊、家庭相冊的制作方法。3.1.1元件和實例

元件和實例是Animate動畫的重要內容之一。元件是指在Animate中創(chuàng)建的、可以在影片中重復使用的一個小部件，它是構成Animate動畫的基本單位。元件分為圖形、影片剪輯、按鈕三種類型。實例是指位于“舞臺”或嵌入另一個元件內的元件副本。通過元件與實例的結合使用，可以保證在動畫文件很小的基礎上，實現(xiàn)Animate作品的交互能力和動感表現(xiàn)。

首先做個試驗，用“橢圓”工具在“舞臺”上任意畫一個圓形。選中這個矩形，看看它的“屬性”面板，如圖3-1所示。我們會發(fā)現(xiàn)這個圓形被叫作“形狀”（shape），它的屬性也只有寬度、高度和坐標值。在Animate中，可以改變“形狀”的外形、尺寸、位置，能進行“形狀變形”，但“形狀”的用途相當有限。要使“動畫元件”得到有效管理并發(fā)揮更大作用，就必須把它轉換為“元件”。3.1知識準備——元件、實例和庫圖3-1

選擇這個圓形形狀，執(zhí)行“修改”>“轉換為元件”命令（或者按F8鍵），彈出“轉換為元件”對話框，默認的“名稱”為“元件1”，選擇“類型”為“圖形”，單擊“確定”按鈕，把“形狀”轉為圖形元件。

執(zhí)行“窗口”>“庫”命令（或按Ctrl+L組合鍵），打開Animate的管理機構“庫”面板，發(fā)現(xiàn)“庫”面板中有了第一個項目：元件1。

接著選擇“舞臺”上的這個對象，發(fā)現(xiàn)對象已經不像圖3-1所示的“離散狀”了，而是變成了一個“整體”，它的“屬性”面板也豐富了很多，如圖3-2所示。這個對象能夠轉化“角色”，有序列幀播放選項和顏色設置等。此外，它還能進行功能最全面的“動作變形”。圖3-2

元件僅存在于“庫”面板中，元件從“庫”面板中進入“舞臺”就稱為該元件的“實例”。如圖3-3所示，從庫中把“元件1”向場景拖放3次（也可以復制場景中的實例），這樣，“舞臺”上就有了元件1的3個實例。圖3-3

可以試著分別把各個實例的顏色、方向、大小設置成不同樣式，具體操作可以配合使用不同的面板，例如，可以在“屬性”面板中設置圖3-3所示的“實例1”的“寬”“高”參數(shù)，如圖3-4所示。在“變形”面板中設置它的“旋轉”參數(shù)，如圖3-5所示。與“實例1”一樣，“實例2”和“實例3”也可在“變形”面板和“屬性”面板中進行相應的設置，“實例2”具體設置如圖3-6所示。圖3-4

圖3-5圖3-6

能創(chuàng)建圖形元件的元素可以是導入的位圖圖像、矢量圖形、文本對象以及用Animate工具創(chuàng)建的線條、色塊等。

選擇相關元素，按F8鍵，彈出“轉換為元件”對話框，在“名稱”文本框中輸入元件的名稱，在“類型”下拉列表中選擇“圖形”，如圖3-7所示，單擊“確定”按鈕，在“庫”面板中生成相應的元件，在“舞臺”中，元素變成了元件的一個實例。

圖形元件中可包含圖形元素或者其他圖形元件，它接受Animate中的大部分變化操作，如大小、位置、方向、顏色設置以及動作變形等。3.1.2圖形元件圖3-7

影片剪輯元件就是通常所說的MC（MovieClip）?？梢园选拔枧_”上任何看得到的對象，甚至整個時間軸的內容創(chuàng)建為一個MC，可以把一個MC放置到另一個MC中，還可以把一段動畫（如逐幀動畫）轉換成MC。

從以上描述可以看出，創(chuàng)建影片剪輯相當靈活，而且創(chuàng)建過程非常簡單：選擇“舞臺”上需要轉換的對象，按F8鍵，彈出“轉換為元件”對話框，在“類型”下拉列表中選擇“影片剪輯”，如圖3-12所示，單擊“確定”按鈕。3.1.3影片剪輯元件圖3-12

按鈕元件是一種特殊的交互式影片剪輯，它只包含4個幀。當新建一個按鈕元件時，Animate自動創(chuàng)建一個含有4幀的時間軸，分別是“彈起”“指針經過”“按下”和“點擊”。按鈕元件時間軸上的每一幀都具有特殊的含義?！颉皬椘稹睅罕硎景粹o的原始狀態(tài)，即鼠標指針沒有對此按鈕產生任何動作時，按鈕表現(xiàn)出的狀態(tài)?！颉爸羔樈涍^”幀：表示鼠標指針位于該按鈕上時，按鈕的外觀狀態(tài)?！颉鞍聪隆睅罕硎締螕粼摪粹o時，按鈕的外觀狀態(tài)?！颉包c擊”幀：用于定義響應鼠標單擊時的相應區(qū)域，該幀上的區(qū)域在影片中是不可見的。3.1.4按鈕元件

“庫”面板如圖3-20所示。利用“庫”面板中的各種按鈕及“庫”菜單，可以進行元件管理與編輯的大部分操作。①“庫”面板標簽：拖動它，能夠隨意移動“庫”面板。②“庫”菜單：單擊它能打開“庫”面板的菜單。③“文件”下拉列表：當前“庫”面板所屬的文件。④元件區(qū)當前選中的元件。3.1.5管理、使用庫圖3-20⑤“排序”按鈕：這是元件項目列表“排序”切換按鈕。⑥元件屬性按鈕：單擊可以更改元件屬性。⑦“添加文件夾”按鈕：單擊可在“庫”面板中添加新的文件夾。⑧“添加元件”按鈕：單擊可在“庫”面板中添加新的元件。⑨“刪除”按鈕單擊可刪除“庫”面板中選中的元件。3.2.1案例效果

利用元件素材制作寶寶的成長電子相冊，可愛小寶寶的成長過程記錄在電子相冊中，效果如圖3-21所示。3.2任務一——制作成長相冊圖3-213.2.2設計思路（1）導入素材。（2）制作開始按鈕元件。（3）利用學過的Animate動畫制作動畫效果。3.2.3相關知識和技能點（1）元件：圖形、按鈕、影片剪輯。（2）Animate動畫：逐幀動畫、傳統(tǒng)補間動畫。（1）啟動AnimateCC2019，執(zhí)行“文件”>

“新建”命令，在彈出的“新建文檔”對話框中選擇“角色動畫”選項下方的預設為“標準”，設置寬度為410像素，高度為310像素，在“屬性”面板設置幀頻為12。3.2.4任務實施圖3-22（2）執(zhí)行“文件”>“導入”>“導入到庫”命令，依次將圖片素材baby、baby1、baby2、baby3、baby4導入“庫”面板中，如圖3-22所示。觀察“庫”面板中的素材類型發(fā)現(xiàn)導入的素材為“位圖”，此時依次將位圖素材拖動到“舞臺”上，執(zhí)行“修改”>“轉換為元件”命令，在彈出的“轉換為元件”對話框中選擇“類型”為“圖形”，并修改元件名稱，如圖3-23所示。全部轉換完成后的效果如圖3-24所示。圖3-23

圖3-24（3）制作成長相冊的封面。①將“庫”面板中的圖形元件1拖到“舞臺”中，按Ctrl+K組合鍵，打開“對齊”面板，設置元件1相對于“舞臺”“匹配寬和高”，水平、垂直居中，效果如圖3-25所示。②制作“小芽轉動”影片剪輯元件。圖3-25圖3-26

圖3-27圖3-28

圖3-29圖3-30

圖3-31圖3-32

圖3-33圖3-34圖3-35圖3-36

圖3-37④回到場景1中，輸入文字，導入“小芽按鈕”元件，效果如圖3-38所示。圖3-38（4）設置相框內容。新建“圖層_2”，在第2幀插入空白關鍵幀。設計相框，在第100幀插入普通幀。設計完成后的效果如圖3-39所示。（5）設置相冊頁內容。圖3-39圖3-40圖3-41

圖3-42圖3-43

圖3-44（6）設置動作。

選中文字按鈕，在“屬性”面板中設置實例名為“play_btn”，選中“封面”圖層第1幀，用鼠標右鍵單擊，在彈出的快捷菜單中選擇“動作”命令，在彈出的“動作”面板中，輸入圖3-45所示的腳本。（7）保存文件，按Ctrl+Enter組合鍵預覽效果。圖3-453.3.1案例效果

利用Animate的幀動畫，制作出炫美的切換效果，烘托出婚禮相冊的華美，效果如圖3-46所示。3.3任務二——制作婚禮相冊圖3-463.3.2設計思路（1）導入素材，將位圖素材轉換為圖形元件。（2）制作封面按鈕元件素材：心形圖形元件、心形旋轉影片剪輯元件、文字按鈕。（3）使用遮罩動畫制作相片切換效果。3.3.3相關知識和技能點（1）元件：圖形元件、按鈕元件、影片剪輯元件。（2）遮罩動畫、傳統(tǒng)補間動畫。（3）在“動作”面板設置動作。（1）啟動AnimateCC2019，執(zhí)行“文件”>“新建”命令，在彈出的“新建文檔”對話框中選擇“角色動畫”選項下方的預設為“標準”，設置寬度為400像素，高度為520像素。在“屬性”面板中設置幀頻為12。（2）執(zhí)行“文件”>“導入”>“導入到庫”命令，依次將圖片素材新娘0、新娘1、新娘2、新娘3、新娘4導入“庫”面板中。觀察“庫”面板中的素材類型發(fā)現(xiàn)導入的素材為“位圖”，此時依次將位圖素材拖動到“舞臺”上，執(zhí)行“修改”>“轉換為元件”命令，在彈出的“轉換為元件”對話框中選擇“類型”為“圖形”，修改元件名稱。全部轉換完成后的效果如圖3-47所示。（3）制作封面。3.3.4任務實施圖3-47（4）制作相框。（5）制作相冊頁。（6）設置動作。（7）測試發(fā)布影片，完成婚禮相冊的制作。圖3-703.4.1實訓概述

本實訓制作效果如圖3-71所示。3.4實訓任務——制作家庭相冊圖3-711．動畫的制作目的與設計理念

制作本實訓的目的是強化元件和“庫”面板的使用，以及“動作”面板的引入。

本實訓是制作一個家庭相冊，體現(xiàn)和諧的家庭氛圍，增進親人的感情。2．動畫整體風格設計

本實訓以漫畫人物為原型，所以動畫的整體風格生動活潑，連按鈕也是一只淘氣的小貓咪，同時給按鈕配上相應的貓咪叫聲。3．素材收集與處理

素材包括以“歡樂家庭”為主題的素材圖片和貓咪的叫聲。1．主題設計

小女孩的家庭合影。2．造型設計

按照卡通人物原型為基礎設計。3．場景設計

按照卡通原型為基礎設計。3.4.2實訓要點（1）新建一個Animate文檔，保存名稱為“家庭相冊.fla”。將素材圖片依次導入“庫”面板中。導入的素材類型為“位圖”，將位圖依次轉換為圖形元件，方法同前面的案例。轉換完成后的效果如圖3-72所示。（2）制作按鈕元件，在這個按鈕元件中會學習如何給按鈕添加聲音。執(zhí)行“插入”>“新建元件”>“按鈕元件”命令，選中“彈起”幀，將“按鈕圖片”圖形元件從“庫”面板中拖入“舞臺”中心，效果如圖3-73所示。3.4.3實訓步驟圖3-72

圖3-73（3）用鼠標右鍵單擊“指針經過”幀，在彈出的快捷菜單中選擇“插入關鍵幀”命令，在“變形”面板中將實例調整為原始大小的120%，如圖3-74和圖3-75所示。（4）用鼠標右鍵單擊“彈起”幀，在彈出的快捷菜單中選擇“復制幀”命令；用鼠標右鍵單擊“按下幀”，在彈出的快捷菜單中選擇“粘貼幀”命令，把“彈起”幀中的內容復制到“按下”幀；用鼠標右鍵單擊“點擊幀”，在彈出的快捷菜單中選擇“插入幀”命令完成按鈕的制作。圖3-74

圖3-75（5）新建“圖層_2”，用鼠標右鍵單擊“彈起幀”，在彈出的快捷菜單中選擇“插入關鍵幀”命令，選擇“文字”工具，輸入文字“play”，效果及屬性設置如圖3-76和圖3-77所示。（6）執(zhí)行“文件”>“導入”>“導入到庫”命令，將素材中的“喵喵.wav”聲音文件導入“庫”面板中，導入的效果如圖3-78所示。圖3-76

圖3-77

圖3-78（7）新建“圖層_3”，選擇“指針經過”幀，用鼠標右鍵單擊，選擇“插入關鍵幀”命令，將元件“喵喵.wav”從“庫”面板中拖入“舞臺”，效果如圖3-79所示。注意：要想按鈕的聲音顯示，“屬性”面板中的“同步”選項一定要設置為“事件”，如圖3-80所示。至此完成按鈕的制作。（8）回到場景1中，制作幾張相片間的切換效果，利用所學的Animate幀動畫知識制作各種美觀的效果。本項目使用的是簡單的顏色透明度動作補間動畫。制作完成的面板效果如圖3-81所示。圖3-79

圖3-80圖3-81（9）給相冊添加動作，實現(xiàn)單擊按鈕開始播放。新建“圖層_2”，查看“幀”面板，看到“圖層_2”被自動添加到與“圖層_1”相同的幀數(shù)120幀，選擇“圖層_2”的第11幀，用鼠標右鍵單擊，在彈出的快捷菜單中選擇“動作”命令，在彈出的“動作”面板中輸入“stop();”，效果如圖3-82所示。圖3-82（10）測試影片發(fā)現(xiàn)影片沒有自動播放，是靜止的，接下來添加按鈕。新建“圖層_3”，選中第1幀，將“按鈕元件”元件從“庫”面板拖到“舞臺”，并放置在合適的位置，用鼠標右鍵單擊“圖層_3”的第2幀，在彈出的快捷菜單中選擇“插入空白關鍵幀”命令，將第3～120幀刪除，如圖3-83所示。圖3-83（11）選中“舞臺”上的“按鈕元件”按鈕實例，在“屬性”面板中設置實例名為“play_btn”，選中“圖層_2”圖層第1幀，用鼠標右鍵單擊，在彈出的快捷菜單中選擇“動作”命令，在彈出的“動作”面板中，輸入圖3-84所示的腳本。（12）發(fā)布導出影片，即可查看制作的家庭相冊。圖3-843.5評價考核能力類型考核內容評價學習目標評價項目321職業(yè)能力掌握圖形元件、按鈕元件和影片剪輯元件的制作方法；會使用“庫”面板；會運用Animate制作電子相冊能夠制作圖形元件

能夠制作按鈕元件

能夠制作影片剪輯元件

能夠使用“庫”面板

能夠使用Animate制作電子相冊

通用能力造型能力

審美能力

組織能力

解決問題能力

自主學習能力

創(chuàng)新能力

綜合評價

項目三任務評價考核表3.6.1參考制作效果

動漫相冊的最終效果如圖3-85所示。3.6課外拓展——制作動漫相冊圖3-85動漫相冊（1）按鈕元件的使用。（2）各補間動畫的使用。（3）簡單的動作與行為。3.6.2知識要點（1）啟動AnimateCC2019，單擊文檔“屬性”面板下方的“高級設置”按鈕，打開“文檔設置”面板，取消選中“使用高級圖層”復選框，如圖3-86所示。將素材依次導入“庫”面板中，在“庫”面板中新建“素材”文件夾，把導入的圖片素材拖動到“素材”文件夾下。（2）將對應位圖素材依次建立為按鈕元件，如圖3-87所示，其中一個例子如圖3-88所示。3.6.3參考制作過程圖3-86

圖3-87圖3-88（3）新建“圖層1”，重命名為“背景”，導入圖片素材1.jpg，效果如圖3-89所示。圖3-89（4）新建“圖層2”，重命名為“灰照片”，單擊第1幀，在舞臺上擺好圖片的位置，如圖3-90所示，分別在第2幀、第16幀、第45幀和第62幀插入關鍵幀，在第2幀、第16幀、第45幀和第62