《Animate動畫設(shè)計與制作實例教程（AnimateCC2019）》全套教學(xué)課件

Animate動畫設(shè)計與制作實例教程

（AnimateCC2019）項目1制作VI標識項目2制作電子賀卡項目3制作電子相冊項目4制作廣告項目5制作MTV項目6制作電子閱讀物項目7制作動畫片項目8制作游戲項目9制作網(wǎng)站全套可編輯PPT課件項目一

制作VI標識項目簡介

企業(yè)形象識別系統(tǒng)（CorporateIdentitySystem，CIS）包括3個部分，分別是理念識別（MindIdentity，MI）、行為識別（BehaviorIdentity，BI）和視覺識別（VisualIdentity，VI）。其中VI包括基本要素（企業(yè)名稱、企業(yè)標志、標準字、標準色、企業(yè)造型等）和應(yīng)用要素（產(chǎn)品造型、辦公用品、服裝、招牌、交通工具等）。VI標識通過展示視覺元素，能夠較好地體現(xiàn)企業(yè)的經(jīng)營理念和經(jīng)營風(fēng)格，是傳播企業(yè)形象的有效手段。

本項目詳細介紹AnimateCC2019的基礎(chǔ)知識和基本操作，并通過3個實例，講解AnimateCC2019在企業(yè)標識制作中的應(yīng)用。通過本項目的學(xué)習(xí)，讀者可以了解AnimateCC2019的操作界面，掌握繪制圖形、編輯圖形的方法和技巧，掌握用AnimateCC2019繪制企業(yè)靜態(tài)及動態(tài)VI的方法和技巧。學(xué)習(xí)目標了解Animate的繪制模式；掌握工具箱中各種工具的使用方法；掌握“混色器”面板、“變形”面板的使用方法；掌握石化商標、企業(yè)標識、校園文化節(jié)會徽的制作方法。

2015年12月2日，Adobe公司宣布將FlashProfessional更名為AnimateCC。它支持動畫、聲音及交互，具有強大的多媒體編輯功能，在支持FlashSWF文件的基礎(chǔ)上，加入了對HTML5的支持。AnimateCC的操作界面如圖1-1所示。1.1知識準備——Animate繪圖圖1-11．默認繪制模式

用AnimateCC2019工具箱中的繪圖工具直接繪制的圖形叫作“形狀”，選中時形狀上出現(xiàn)網(wǎng)格點，如圖1-2（a）所示。形狀在“屬性”面板中的屬性只有“寬”“高”和“坐標值”，如圖1-2（b）所示。1.1.1Animate的繪制模式

（a）

（b）圖1-2（1）形狀的切割和融合

圖1-3

圖1-4

圖1-5

圖1-6

圖1-7

圖1-8（2）將形狀轉(zhuǎn)換為組

執(zhí)行“修改”>“組合”命令，可以將選中的對象組合成“組”。圖1-9

圖1-10

圖1-112．對象繪制模式

在“矩形”“橢圓”“鋼筆”“刷子”等工具的選項中找到“對象繪制”選項，如圖1-12所示。

繪制一個對象，選擇“橢圓”工具，在工具箱的選項中單擊“對象繪制”按鈕，在“舞臺”上繪制一個圓形，如圖1-13所示。展開“屬性”面板，可以看到這里繪制的橢圓不再是形狀，而是一個繪制對象，如圖1-14所示。

使用“對象繪制”選項后，在同一圖層繪制出的形狀和線條自動成組，在移動時不會互相切割、互相影響。

圖1-12

圖1-13

圖1-14

選中“線條”工具后，可以在圖1-15所示的“屬性”面板中對直線的筆觸顏色、筆觸高度和筆觸樣式等屬性進行設(shè)置。1.1.2“線條”工具圖1-151．筆觸顏色

圖1-162．筆觸高度3．筆觸樣式圖1-174．自定義筆觸樣式5．線條的端點圖1-18圖1-196．線條的接合圖1-20

圖1-21

圖1-221．更改線條的長度和方向

在工具箱中選中“選擇”工具，然后移動鼠標指針到線條的端點處，當(dāng)鼠標指針右下角出現(xiàn)直角標志后，按下鼠標左鍵拖動鼠標，即可改變線條的長度和方向，如圖1-23所示。2．更改線條的輪廓

將鼠標指針移動到線條上，當(dāng)鼠標指針右下角出現(xiàn)弧線標志后，按下鼠標左鍵拖動鼠標，即可改變線條的輪廓，使直線變成各種形狀的弧線，如圖1-24所示。1.1.3“選擇”工具

圖1-23

圖1-241.1.4“顏料桶”工具

圖1-25

圖1-261．“矩形”工具2．“多角星形”工具1.1.5“矩形”工具與“多角星形”工具圖1-32

“橢圓”工具用于繪制橢圓或者圓，操作時單擊“橢圓”工具或者按O鍵。1.1.6“橢圓”工具圖1-34

圖1-35

圖1-36

圖1-37圖1-38

圖1-39

圖1-40

圖1-411．用“鋼筆”工具繪制直線2．用“鋼筆”工具繪制曲線3．修改曲線的方法1.1.7“鋼筆”工具

“部分選取”工具用于調(diào)整節(jié)點，改變圖形的形狀，操作時單擊“部分選取工具”按鈕或者按A鍵。1.1.8“部分選取”工具圖1-51

圖1-52

圖1-53圖1-54

圖1-55圖1-56

圖1-57

“鉛筆工具”用于手繪圖形，操作時單擊“鉛筆工具”按鈕或者按Y鍵。

選擇工具箱中的“鉛筆”工具，將鼠標指針移到“舞臺”中，按住鼠標左鍵隨意拖動即可繪制任意直線或曲線，繪制的方式與使用真實鉛筆大致相同。單擊工具箱底部的“鉛筆模式”按鈕，在彈出的下拉列表中有3種繪圖模式可以選擇，如圖1-66所示。1.1.9“鉛筆”工具

圖1-66◎在伸直模式下，線條自動轉(zhuǎn)化成接近形狀的直線?！蛟谄交Ｊ较?，線條轉(zhuǎn)化為接近形狀的平滑線?！蛟谀Ｊ较拢患有揎?，完全保持鼠標軌跡的形狀。

應(yīng)用伸直、平滑、墨水3種繪圖模式繪制的樹葉最終效果如圖1-67所示。圖1-67

使用“畫筆”工具可以繪制任意形狀、大小及顏色的填充區(qū)域，也可以給已經(jīng)繪制好的對象填充顏色。操作時單擊“畫筆”工具按鈕或者按B鍵。單擊“畫筆”工具，將鼠標指針移到“舞臺”中，鼠標指針變成一個黑色的圓形或方形的刷子，單擊即可在“舞臺”中繪制對象。

選中“畫筆”工具后，激活工具箱底部的下拉菜單按鈕，顯示畫筆的5種繪畫模式，如圖1-72所示。1.1.10“畫筆”工具圖1-72◎標準繪畫：不管是線條，還是填充范圍，只要是畫筆經(jīng)過的地方，都變成了畫筆的顏色。◎顏料填充：只影響填充的內(nèi)容，不會遮蓋住線條?！蚝竺胬L畫：無論怎么畫，它都在圖像的后方，不會影響前景圖像?！蝾伭线x擇：用“選擇”工具選中圖形的一塊，再選擇“畫筆”工具進行繪制，此時選擇區(qū)域被涂上所選的顏色?！騼?nèi)部繪畫：在繪畫時，畫筆的起點必須在輪廓線以內(nèi)，而且畫筆的范圍也只作用在輪廓線以內(nèi)。

以上5種繪畫模式的效果如圖1-73所示。圖1-73

“套索”工具用于選擇形狀圖形的不規(guī)劃區(qū)域或者相同的顏色區(qū)域，操作時單擊“套索工具”按鈕或者按L鍵。“套索”工具提供了3個按鈕，如圖1-76所示。1.1.11“套索”工具圖1-761．“套索工具”選項

選擇“套索工具”選項，用鼠標在位圖上任意勾選想要的區(qū)域，形成一個封閉的選區(qū)，釋放鼠標，選區(qū)中的圖像被選中。2．“魔術(shù)棒”選項

選中“魔術(shù)棒”選項，將鼠標指針放在位圖上，指針變化，在要選擇的位圖上單擊，與點取點顏色相近的圖像區(qū)域被選中，如圖1-77所示。圖1-773．“多邊形工具”選項

選中“多邊形工具”選項，在圖像上單擊，確定第一個定位點。釋放鼠標并將鼠標指針移至下一個定位點，再單擊，用相同的方法直到勾畫出想要的圖像，并使選區(qū)形成一個封閉的狀態(tài)。雙擊，選區(qū)中的圖像被選中，如圖1-78所示。圖1-78

“任意變形”工具用于縮放、旋轉(zhuǎn)、傾斜、扭曲以及封套圖形，操作時單擊“任意變形工具”按鈕或者按Q鍵。

選擇“任意變形”工具，在圖形的周圍出現(xiàn)控制點，拖動控制點改變圖形的大小，如圖1-79所示。工具箱的下方提供了5種變形模式，如圖1-80所示。1.1.12“任意變形”工具圖1-79

圖1-801．移動、旋轉(zhuǎn)與傾斜

移動、旋轉(zhuǎn)與傾斜對圖形對象和元件都適用。

將鼠標指針移動到圖形的中心點，鼠標指針右下角出現(xiàn)一個圓圈標志，這時拖動鼠標可以將圖形移動到任何位置，如圖1-81所示。圖1-81

將鼠標指針移到變形框任一角的手柄上，鼠標指針變成圓弧狀，按住鼠標左鍵拖動到合適位置，就實現(xiàn)了對圖形的旋轉(zhuǎn)，如圖1-82所示。圖1-82

將鼠標指針移到變形框任一邊手柄外的地方，當(dāng)鼠標指針變?yōu)閮蓚€平行反向的箭頭形狀時，拖動鼠標可以使對象傾斜，如圖1-83所示。圖1-832．縮放

縮放對圖形對象和元件都適用。將鼠標指針移到任一手柄上，鼠標指針變成雙向箭頭形狀，拖動鼠標可以放大或縮小對象，如圖1-84所示。圖1-843．扭曲和封套

扭曲和封套不能運用于元件上，除非將元件打散。

選擇“扭曲”按鈕，選中對象，拖動邊框上的角手柄或邊手柄，移動該角或邊，如圖1-85所示。選擇“封套”按鈕，拖動點和切線手柄修改封套，如圖1-86所示。圖1-85

圖1-86

使用“漸變變形”工具可以方便地對填充效果進行旋轉(zhuǎn)、拉伸、傾斜、縮放等各種變換。（1）當(dāng)圖形填充為線性漸變時，選擇“漸變變形”工具，單擊圖形，出現(xiàn)3個控制點和2條平行線，如圖1-110所示。1.1.13“漸變變形”工具圖1-110（2）當(dāng)圖形填充為放射狀漸變時，選擇“漸變變形”工具，單擊圖形，出現(xiàn)4個控制點和一個圓形外框，如圖1-113所示。圖1-1131．“滴管”工具

“滴管”工具用于提取線條或填充的屬性，操作時單擊“滴管工具”按鈕或者按I鍵吸取填充色。（1）吸取填充色1.1.14“滴管”工具和“墨水瓶”工具圖1-128

圖1-129（2）吸取邊框?qū)傩?/p>

圖1-130

圖1-131（3）吸取位圖圖案圖1-132

圖1-133（4）吸取文字屬性圖1-134

圖1-135

圖1-1362．“墨水瓶”工具

“墨水瓶”工具用于描繪填充的邊緣或者改變線條的屬性，操作時單擊“墨水瓶工具”按鈕或者按S鍵。（1）使用“滴管”工具單擊要套用屬性的線條，如圖1-137所示。當(dāng)前的“屬性”面板顯示該線條的屬性，如圖1-138所示。此時，所選工具自動變成“墨水瓶”工具，如圖1-139所示。圖1-137圖1-138

圖1-139（2）使用“墨水瓶”工具單擊其他屬性的線條，被單擊線條的屬性變成了當(dāng)前在“屬性”面板中所設(shè)置的屬性，如圖1-140所示。圖1-140

“橡皮擦”工具用于擦除不需要的圖形。雙擊“橡皮擦”工具，可以刪除“舞臺”上的所有內(nèi)容。選擇“橡皮擦”工具，在圖形上想要刪除的地方拖動鼠標，圖形被擦除?？梢栽诠ぞ呦湎路降摹跋鹌げ列螤睢卑粹o的下拉菜單中選擇橡皮擦的形狀與大小。工具箱的下方提供了5種擦除模式，如圖1-141所示。1.1.15“橡皮擦”工具

圖1-141◎標準擦除：拖動鼠標擦除同一層上的筆觸和填充色。橡皮的大小和形狀與“刷子”工具的設(shè)置相同?！虿脸钌褐徊脸畛渖挥绊懝P觸?！虿脸€條：只擦除筆觸，不影響填充?！虿脸x填充：只擦除當(dāng)前選定的填充，不影響筆觸，不管此時筆觸是否被選中。使用此模式之前都需先選擇要擦除的填充?！騼?nèi)部擦除：只擦除橡皮擦筆觸開始處的填充。如果從空白點開始擦除，則不會擦除任何內(nèi)容。以這種模式使用橡皮擦并不影響筆觸。

在“橡皮擦”工具的選項中選擇“水龍頭”，單擊需要擦除的填充區(qū)域或筆觸段，可以快速將其擦除。

5種擦除模式擦除圖形的效果如圖1-142所示。圖1-1421.1.163D工具

使用“3D平移”工具，可以在x、y和z軸上全方位地移動對象；使用“3D旋轉(zhuǎn)”工具，可以在3D空間移動對象。1.1.17“手形”工具和“縮放”工具

1．“手形”工具

如果圖形很大或被放大得很大，就需要使用“手形”工具調(diào)整觀察區(qū)域。選擇“手形”工具，鼠標指針變?yōu)槭中危蟿訄D像到需要的位置。2．“縮放”工具

利用“縮放”工具放大圖形以便觀察細節(jié)，縮小圖形以便觀看整體效果。選擇“縮放”工具，在“舞臺”上單擊可放大圖形。要想放大圖像中的局部區(qū)域，可在圖像上拖曳出一個矩形選取框，松開鼠標后，所選取的局部圖像被放大。選中工具箱下方的“縮小”按鈕，在“舞臺”上單擊可縮小圖像。1.2.1案例效果分析

本案例設(shè)計的威力士潤滑油企業(yè)商標是通過5個“V”的變形來有機組合成的?！癡”字母通常有勝利之意，商標的整體像一個花卉。以綠色調(diào)為主凸顯綠色產(chǎn)品之含義，橙色的“V”字母進行顏色和造型強調(diào)，寓意企業(yè)的創(chuàng)新精神，如圖1-161所示。1.2任務(wù)一——制作威力士石化商標圖1-1611.2.2設(shè)計思路（1）用“直線”工具和“顏料桶”工具繪制商標圖案。（2）用“文字”工具和“鋼筆”工具繪制商標文字。1.2.3相關(guān)知識和技能點

利用“直線”工具、“鋼筆”工具和“部分選取”工具繪制圖形，利用“變形”面板對圖形進行復(fù)制旋轉(zhuǎn)變形，利用“顏料桶”工具為圖形填充顏色，使用“漸變變形”工具調(diào)整漸變的位置和大小。（1）新建一個Animate文檔，并設(shè)置文檔屬性，如圖1-162所示。（2）選擇工具欄中的“直線”工具繪制出商標的V字形部分，效果如圖1-163所示。使用“顏料桶”工具為其填充黃色，效果如圖1-164所示。（3）在黃色V字形旁邊繪制4個小三角形，效果如圖1-165所示。用“顏料桶”工具分別為其填充綠色和深綠色，效果如圖1-166所示。1.2.4任務(wù)實施圖1-162

圖1-163

圖1-164

圖1-165

圖1-166（4）刪除邊線，利用“選擇”工具選擇繪制的所有圖形，將它們組合在一起，把圖形的中心點放到尖角位置，如圖1-167所示。打開“變形”面板，對其進行旋轉(zhuǎn)復(fù)制，復(fù)制出3個實例，將它們組成商標的下半部分，如圖1-168所示。

圖1-167圖1-168（5）選擇“直線”工具繪制商標最上面的部分，用“顏料桶”工具為V字形下左右兩個三角形填充不同深度的黃色，用“顏料桶”工具為上方V字形填充橘紅到橘黃的線性漸變，并用“漸變變形”工具調(diào)整漸變的方向和位置，刪除邊線，效果如圖1-169所示。圖1-169（6）用“文本”工具輸入“威力士”文字，在“屬性”面板中調(diào)整其顏色為綠色，字體為華文細黑。調(diào)整合適的大小并放到合適的位置，最后將文字打散，效果如圖1-170所示。圖1-170（7）用“鋼筆”工具勾繪出英文字母輪廓，效果如圖1-171所示，并用“顏料桶”工具為其填充紅色，效果如圖1-172所示。圖1-171

圖1-172（8）利用“直線”工具繪制一個小菱形，然后用“部分選取”工具選中菱形的角點，按Alt鍵調(diào)整角點使其弧度，效果如圖1-173所示。用“文本”工具輸入R，顏色為粉紅色，放置在菱形中間，效果如圖1-174所示。

圖1-173

圖1-1741.3.1案例效果分析

本案例設(shè)計的是雅潔彩妝企業(yè)標識，桃紅色的背景、扇形的標識圖案和醒目的文本效果，體現(xiàn)出雅潔彩妝面向年輕女性的企業(yè)定位，如圖1-175所示。1.3任務(wù)二——制作企業(yè)標識圖1-1751.3.2設(shè)計思路（1）用“直線”工具、“顏料桶”工具和“變形”面板繪制標識圖案。（2）用“文字”工具和“鋼筆”工具繪制商標文字。1.3.3相關(guān)知識和技能點

使用“線條”工具、“橢圓”工具繪制標識圖案，使用“顏料桶”工具填充圖形，使用“選擇”工具選擇繪制圖形，利用“變形”面板復(fù)制并變形圖案，使用“文本”工具輸入并設(shè)置文本。（1）新建一個Animate文檔，設(shè)置寬和高分別為450像素和400像素，背景顏色為粉紅色（#FF6699），如圖1-176所示。1.3.4任務(wù)實施圖1-176（2）選擇“線條”工具，設(shè)置筆觸顏色為白色，筆觸高度為0.1，如圖1-177所示。在“舞臺”上繪制一個閉合的三角形，效果如圖1-178所示。

圖1-177

圖1-178（3）選擇“顏料桶”工具，設(shè)置填充顏色為白色，為三角形填充白色，如圖1-179所示。圖1-179（4）選擇“橢圓”工具，設(shè)置其起始角度和結(jié)束角度分別為90°和270°，按住Shift鍵在“舞臺”上繪制一個寬為42，高與三角形高相同的正圓，將左半圓放置在三角形的左側(cè)，效果如圖1-180所示。圖1-180（5）使用“選擇”工具選擇繪制好的三角形和半圓，將其組合。使用“任意變形”工具選擇組合好的對象，將變形控制中心移至變形框中的右下方角點，如圖1-181所示。

圖1-181（6）保持組合對象為選中狀態(tài)，在“變形”面板中，設(shè)置旋轉(zhuǎn)角度，然后5次單擊復(fù)制選區(qū)和“變形”按鈕，復(fù)制組合對象，效果如圖1-182所示。（7）選擇“橢圓”工具，設(shè)置開始角度和結(jié)束角度為180°和0°，按住Shift鍵繪制寬為65的正圓，然后調(diào)整其位置，效果如圖1-183所示。圖1-182

圖1-183（8）選擇“文本”工具，設(shè)置字體為黑體，大小為75點，顏色為白色，在“舞臺”中輸入“雅潔彩妝”文本，效果如圖1-184所示。選擇文字，再執(zhí)行“文本”＞“樣式”＞“粗體”命令，使字體更加醒目，如圖1-185所示。圖1-184

圖1-185（9）選擇“文本”工具，在“舞臺”中輸入“YAJIECZ”，效果如圖1-186所示，完成商標的制作。圖1-1861.4.1實訓(xùn)概述1．制作效果及設(shè)計理念

本實訓(xùn)制作效果如圖1-187所示。

將阿拉伯?dāng)?shù)字“2”變化成“人”，體現(xiàn)了第2屆校園文化節(jié)的人文色彩。在色彩上運用紅色和黃色體現(xiàn)熱情奔放的特點，滲透著現(xiàn)代化氣息。閃動的文字也體現(xiàn)了校園文化節(jié)的多姿多彩。1.4實訓(xùn)任務(wù)——制作校園文化節(jié)會徽圖1-1872．動畫設(shè)計

利用AnimateCC2019制作校園文化節(jié)會徽動態(tài)效果，體現(xiàn)校園文化節(jié)的流動旋律。3．素材收集與處理

收集標志、VI設(shè)計圖片作為參考和設(shè)計資料。（1）使用“鋼筆”工具、“顏料桶”工具繪制并填充會徽輪廓。（2）使用“文本”工具、分離功能輸入并設(shè)置文本。（3）利用遮罩制作“第2屆校園文化節(jié)”動畫。（4）利用傳統(tǒng)補間動畫制作“平頂山工業(yè)職業(yè)技術(shù)學(xué)院”文字動畫。1.4.2實訓(xùn)要點（1）新建一個Animate文檔，并設(shè)置名稱為“校園文化節(jié)會徽”。使用“鋼筆”工具繪制會徽輪廓，效果如圖1-188所示。（2）使用“顏料桶”工具，設(shè)置紅到黃的漸變，如圖1-189所示。為輪廓填充相應(yīng)的顏色，效果如圖1-190所示。1.4.3實訓(xùn)步驟圖1-188

圖1-189（3）使用“選擇”工具選擇繪制的圖形，在“屬性”面板中將筆觸顏色設(shè)置為無，去除會徽輪廓，效果如圖1-191所示。（4）新建“文字”圖層，使用“文本”工具，在編輯區(qū)中的合適位置創(chuàng)建相應(yīng)的文本內(nèi)容，效果如圖1-192所示。圖1-191

圖1-192（5）選擇“平頂山工業(yè)職業(yè)技術(shù)學(xué)院”文字將其打散，選擇所有被打散的文字圖形，用右鍵單擊，在彈出的快捷菜單中選擇“分散到圖層”命令，效果如圖1-193所示。圖1-193（6）在“平”層的第1幀、第6幀插入關(guān)鍵幀，分別設(shè)置第1幀中的“Alpha”值為0，大小為200，如圖1-194所示。設(shè)第6幀的“中”的“Alpha”值為70，大小為150，如圖1-195所示。在該層的第1～3幀和第3～6幀創(chuàng)建傳統(tǒng)補間動畫，如圖1-196所示。圖1-194

圖1-195

圖1-196（7）其他圖層每個向后退相應(yīng)的幀數(shù)，制作方法與“平”層一樣，如圖1-197所示。圖1-197（8）選擇圖形中的“第2屆校園文化節(jié)”字樣，將其轉(zhuǎn)化為圖形元件，效果如圖1-198所示。新建矩形元件，用“矩形”工具繪制幾個矩形，效果如圖1-199所示，再用“顏料桶”工具為矩形填充白色。圖1-198

圖1-199（9）新建“閃動”影片剪輯，將“校園文化節(jié)”圖形元件拖入“圖層1”中，在其下層新建“矩形”圖層，將“矩形”元件拖入該圖層中，并將其旋轉(zhuǎn)一定角度，效果如圖1-200所示。復(fù)制“圖層1”，將其拖到“矩形”層下方。

圖1-200（10）在“矩形”層的第30幀插入關(guān)鍵幀，將“矩形”元件向后移動一定距離，效果如圖1-201所示。在第1～30幀創(chuàng)建傳統(tǒng)補間動畫，并將“圖層1”設(shè)為遮罩層，效果如圖1-202所示。圖1-201

圖1-202（11）返回場景1，選擇“文字”中的“校園文化節(jié)”圖形元件，用鼠標右鍵單擊，在彈出的快捷菜單中選擇“交換元件”命令，在彈出的“交換元件”對話框中選擇“閃動”影片剪輯，效果如圖1-203所示。（若替換的元件位置不對，可以適當(dāng)調(diào)整其位置。）

圖1-203

（12）新建“腳本”層，在該層的第68幀插入空白關(guān)鍵幀，并添加停止腳本，效果如圖1-204所示。（13）在所有層的第68幀插入普通幀。（14）按Ctrl+Enter組合鍵測試影片，保存文檔。圖1-2041.5評價考核能力類型考核內(nèi)容評價學(xué)習(xí)目標評價項目321職業(yè)能力掌握繪制圖形、編輯圖形的方法和技能；掌握編輯和修飾對象的各種方法和技巧；掌握使用Animate設(shè)計VI的技能能夠選擇合適的Animate繪制模式

能夠使用工具箱中的各種工具

能夠使用“顏色”面板

能夠使用“變形”面板

能夠使用Animate設(shè)計VI

通用能力造型能力

審美能力

組織能力

解決問題能力

自主學(xué)習(xí)能力

創(chuàng)新能力

綜合評價

項目一任務(wù)評價考核表1.6.1參考制作效果

參考效果如圖1-205所示。1.6課外拓展——制作飲料廣告標牌圖1-2051.6.2知識要點（1）元件的使用。（2）應(yīng)用傳統(tǒng)補間動畫制作圖片逐漸出現(xiàn)和消失的動畫。1.6.3參考制作過程Animate動畫設(shè)計與制作實例教程

（AnimateCC2019）

項目二

制作電子賀卡項目簡介

電子賀卡是人們通過網(wǎng)絡(luò)傳遞信息和交流情感的一種媒介。要想制作出生動的邀請卡、生日賀卡、友情賀卡、春節(jié)賀卡等電子賀卡，就必須掌握Animate動畫的制作方法。

本項目主要介紹Animate動畫的制作原理、方法和技巧，以及制作電子賀卡的方法。通過本項目的學(xué)習(xí)，讀者可以掌握利用AnimateCC2019制作各類電子賀卡的方法與技巧。學(xué)習(xí)目標掌握創(chuàng)建逐幀動畫、動作補間動畫、形狀補間動畫、引導(dǎo)路徑動畫、傳統(tǒng)補間動畫、遮罩動畫的方法；掌握春節(jié)賀卡、端午節(jié)賀卡、生日賀卡、友情賀卡的制作方法。

幀是構(gòu)成動畫的最基本元素之一，在Animate中根據(jù)幀的不同功能，可以將幀分為普通幀、空白關(guān)鍵幀和關(guān)鍵幀3種。1．普通幀

普通幀在時間軸中以黑灰色方塊表示，常常處于關(guān)鍵幀的后面，作為關(guān)鍵幀之間的過渡，用于延長關(guān)鍵幀中動畫的播放時間。是由系統(tǒng)經(jīng)過計算自動生成的，用戶無法直接對普通幀上的對象進行編輯。2.1知識準備——Animate動畫2．空白關(guān)鍵幀

空白關(guān)鍵幀在時間軸中以空心的小圓表示，這種關(guān)鍵幀中沒有任何的內(nèi)容，主要用于結(jié)束前一個關(guān)鍵幀的內(nèi)容或分割兩個相連的補間動畫。3．關(guān)鍵幀

關(guān)鍵幀在時間軸中以黑色的實心小圓表示，主要用于定義動畫中表現(xiàn)關(guān)鍵性動作或關(guān)鍵性內(nèi)容變化的幀，一般的動畫元素都必須在關(guān)鍵幀中編輯。根據(jù)創(chuàng)建動畫的不同，關(guān)鍵幀在時間軸中的顯示效果也不相同。4．動作腳本

幀單元格中有一個字母“a”，它表示在這一幀中帶有動作腳本，如圖2-1所示，動畫播放到這一幀時，就會執(zhí)行相應(yīng)的動作。5．聲音

若單元格中有像電波一樣的波形圖像，表示加載了聲音，如圖2-2所示，波形的振幅表示音量的大小。圖2-1

圖2-26．標簽

幀標簽有3種，分別是“名稱”“注釋”和“錨記”標簽，它們的外觀如圖2-3所示。圖2-37．幀的相關(guān)操作（1）選擇幀：在“時間軸”面板中，單擊一個幀，可以看到它變成藍色，表示已經(jīng)把它選中；選擇一幀后，按住Shift鍵的同時單擊需要選擇的連續(xù)幀的最后一幀，即可選擇兩幀之間所有的幀；選擇一幀后按住Ctrl鍵的同時單擊其他需要選擇的幀，即可選擇不連續(xù)的多個幀。（2）移動幀：如果按住選中的幀進行拖動，那么可以改變這個幀的位置。（3）使用右鍵菜單：用鼠標右鍵單擊選中的幀，在彈出的快捷菜單中可選擇幀的相應(yīng)操作命令，如圖2-4所示。

圖2-4（4）使用命令菜單：執(zhí)行“編輯”>“時間軸”、“插入”>“時間軸”或者“修改”>

“時間軸”命令，可以選取與幀操作相關(guān)的命令。（5）設(shè)置幀頻：幀頻（FPS）是動畫播放的速度，以每秒播放的幀數(shù)為度量。例如，某個影片在播放時，每秒播放15幀，那么幀頻就是“15幀每秒”，幀頻太小會使動畫看起來一頓一頓的，幀頻太大會使動畫的細節(jié)變模糊，一般可以將幀頻設(shè)置為12～30幀每秒。1．逐幀動畫的制作

將動畫中的每一幀都設(shè)置為關(guān)鍵幀，在每一個關(guān)鍵幀中創(chuàng)建不同的內(nèi)容，該動畫就稱為逐幀動畫。將這些靜態(tài)圖片快速連續(xù)播放形成動畫，可以靈活地表現(xiàn)豐富多變的動畫效果，最適于圖像在每一幀中都需要發(fā)生變化的復(fù)雜動畫。2.1.1逐幀動畫2．運用繪圖紙功能編輯圖形

使用“時間軸”面板中提供的繪圖紙功能，可以在編輯動畫的同時查看多個幀中的動畫內(nèi)容。圖2-9所示是使用繪圖紙功能后的時間軸。在制作逐幀動畫時，利用該功能可以對各關(guān)鍵幀中圖形的大小和位置進行更好的定位，并可參考相仿關(guān)鍵幀中的圖形，對當(dāng)前幀中的圖形進行修改和調(diào)整。圖2-9

繪圖紙相關(guān)按鈕的功能如下。“繪圖紙外觀”按鈕：單擊此按鈕后，在時間軸的上方出現(xiàn)繪圖紙外觀標記。拉動外觀標記的兩端，可以擴大或縮小顯示范圍?！袄L圖紙外觀輪廓”按鈕：單擊此按鈕后，場景中顯示各幀內(nèi)容的輪廓線，填充色消失，特別適合觀察對象輪廓，另外可以節(jié)省系統(tǒng)資源，加快顯示過程?！熬庉嫸鄠€幀”按鈕：單擊此按鈕后可以顯示全部幀內(nèi)容，并且可以進行“多幀同時編輯”?！靶薷臉擞洝卑粹o：單擊此按鈕后，彈出下拉菜單，如圖2-10所示。

圖2-10“始終顯示標記”選項：用于在時間軸標題中顯示繪圖紙外觀標記，無論繪圖紙外觀是否打開?！板^定標記”選項：用于將繪圖紙外觀標記鎖定在它們在時間軸標題中的當(dāng)前位置上。通常情況下，繪圖紙外觀范圍是和當(dāng)前幀的指針及繪圖紙外觀標記相關(guān)的。通過錨定繪圖紙外觀標記，可以防止它們隨當(dāng)前幀的指針移動?！皹擞浄秶?”選項：用于在當(dāng)前幀的兩邊顯示兩幀?！皹擞浄秶?”選項：用于在當(dāng)前幀的兩邊顯示5幀?！皹擞浰蟹秶边x項：用于在當(dāng)前幀的兩邊顯示全部幀。

在關(guān)鍵幀中放置一個元件，然后在另一個關(guān)鍵幀中改變這個元件的大小、顏色、位置、透明度等，Animate根據(jù)二者之間的幀的值創(chuàng)建的動畫被稱為動作補間動畫。

構(gòu)成動作補間動畫的元素是元件，包括影片剪輯、圖形、按鈕、文字、位圖、組合等。只有把形狀或者組合轉(zhuǎn)換成“元件”后，才可以制作“動作補間動畫”。如果創(chuàng)建動作補間動畫后，又改變了兩個關(guān)鍵幀之間的幀數(shù)，或者在某個關(guān)鍵幀中移動了群組或?qū)嵗?，則Animate將自動重新生成兩個關(guān)鍵幀之間的過渡幀。2.1.2動作補間動畫1．創(chuàng)建動作補間動畫的兩種方法（1）選擇圖層的第1幀，用鼠標右鍵單擊該幀，在彈出的快捷菜單中選擇“創(chuàng)建補間動畫”命令即可創(chuàng)建動作補間動畫，如圖2-14所示。（2）選擇要創(chuàng)建動畫的第1個關(guān)鍵幀，執(zhí)行“插入”＞“補間動畫”命令，如圖2-15所示，Animate將自動創(chuàng)建動作補間動畫。圖2-14

圖2-15

然后在結(jié)束幀的位置用鼠標右鍵單擊，在彈出的快捷菜單中選擇“插入關(guān)鍵幀”＞“位置”等選項后，設(shè)置結(jié)束幀，即可完成動作補間動畫的創(chuàng)建。動作補間動畫創(chuàng)建后，“時間軸”面板的背景色變?yōu)辄S色，如圖2-16所示。

圖2-162．動作補間動畫參數(shù)設(shè)置（1）緩動：設(shè)置物體的加速減速運動?！驍?shù)值范圍為－100～1，速度由慢到快，朝運動結(jié)束的方向加速度補間?！驍?shù)值范圍為1～100，速度由快到慢，朝運動結(jié)束的方向減慢補間。默認情況下，補間幀之間的變化速率是不變的。（2）旋轉(zhuǎn)：讓物體旋轉(zhuǎn)，有無、順時針、逆時針3種旋轉(zhuǎn)方式?！蝽槙r針：順時針旋轉(zhuǎn)相應(yīng)的圈數(shù)。◎逆時針：逆時針旋轉(zhuǎn)相應(yīng)的圈數(shù)。圈數(shù)在“X”后面的數(shù)值框中輸入即可。（3）調(diào)整到路徑：此功能主要用于引導(dǎo)層動畫中，可將物體調(diào)整到引導(dǎo)路徑上。3．編輯動作補間動畫

以下的動畫效果經(jīng)常需要使用動畫編輯器來實現(xiàn)。（1）添加不同的緩動預(yù)設(shè)或自定義緩動：使用動畫編輯器可以添加不同預(yù)設(shè)、添加多個預(yù)設(shè)或創(chuàng)建自定義緩動。對補間屬性添加緩動是模擬對象真實行為的最簡便方式。（2）合成曲線：可以對單個屬性應(yīng)用緩動，然后使用合成曲線在單個屬性圖上查看緩動的效果。（3）錨點和控制點：可以使用錨點和控制點隔離補間的關(guān)鍵部分并進行編輯。（4）動畫的精細調(diào)整：動畫編輯器是制作某些種類動畫的唯一方式，如對單個屬性通過調(diào)整其屬性曲線來創(chuàng)建彎曲的路徑補間。

在時間軸上，選擇要調(diào)整的補間動畫，然后雙擊該補間范圍；也可以用鼠標右鍵單擊該補間范圍，然后在彈出的快捷菜單中選擇“調(diào)整補間”命令來調(diào)出動畫編輯器，如圖2-21所示。圖2-21

可補間的對象的屬性如下。（1）2D下的X和Y位置屬性。（2）3D下的Z位置屬性（僅限影片剪輯）。（3）2D下的旋轉(zhuǎn)（圍繞z軸）屬性。（4）3D下的X、Y和Z旋轉(zhuǎn)（僅限影片剪輯）屬性。（5）3D動畫要求FLA文件在發(fā)布設(shè)置中面向ActionScript3.0和FlashPlayer10或更高版本。AdobeAIR還支持3D動畫。（6）傾斜的X和Y屬性。（7）縮放的X和Y屬性。（8）顏色效果屬性。（9）色彩效果包括alpha（透明）、亮度、色調(diào)和高級顏色設(shè)置。（10）濾鏡屬性。不能將濾鏡應(yīng)用于圖形元件。1．創(chuàng)建傳統(tǒng)補間動畫

在傳統(tǒng)補間動畫中，可在動畫的重要位置定義關(guān)鍵幀，AnimateCC2019會自動在關(guān)鍵幀之間創(chuàng)建內(nèi)容。

首先，在同一圖層中創(chuàng)建兩個關(guān)鍵幀。然后用鼠標右鍵單擊兩個關(guān)鍵幀之間的任一普通幀，執(zhí)行“創(chuàng)建傳統(tǒng)補間”命令，即可為這兩個關(guān)鍵幀建立傳統(tǒng)補間關(guān)系。兩個關(guān)鍵幀之間的插補幀會顯示一個箭頭。2.1.3傳統(tǒng)補間動畫2．編輯傳統(tǒng)補間動畫（1）緩動

傳統(tǒng)補間可以使用一組常用的緩動預(yù)設(shè)。可以從緩動預(yù)設(shè)列表中選擇預(yù)設(shè)，然后將其應(yīng)用于選定屬性。

在Animate時間軸中單擊包含補間的圖層，單擊“屬性”面板中的“補間”類別?？梢允褂谩熬弰印毕吕斜砣ピO(shè)置緩動類型，如圖2-22所示。圖2-22

可以對傳統(tǒng)補間應(yīng)用緩動預(yù)設(shè)屬性。在“屬性”面板中，提供了用于設(shè)置緩動屬性的選項?？梢赃x擇“單獨每個屬性”以對每個屬性應(yīng)用不同的緩動預(yù)設(shè)。如圖2-23所示。圖2-23（2）旋轉(zhuǎn)

除了設(shè)置元件的緩動外，Animate還支持設(shè)置元件的旋轉(zhuǎn)。在“屬性”面板的“補間”選項卡的“旋轉(zhuǎn)”下拉列表中有4種旋轉(zhuǎn)方式。

在一個關(guān)鍵幀中繪制一個形狀，然后在另一個關(guān)鍵幀中更改該形狀或繪制另一個形狀，Animate根據(jù)二者之間的幀的值或形狀來創(chuàng)建的動畫稱為“形狀補間動畫”。

形狀補間動畫可以實現(xiàn)兩個圖形之間顏色、形狀、大小、位置的相互變化，其使用的元素多為繪制出來的“形狀”，如果使用圖形元件、按鈕、文字，則必先“打散”，將其轉(zhuǎn)換為“形狀”才能創(chuàng)建形狀補間動畫。2.1.4形狀補間動畫1．創(chuàng)建形狀補間動畫（1）在“時間軸”面板上動畫開始播放的地方繪制動畫的初始形狀，在動畫結(jié)束處插入空白關(guān)鍵幀，繪制動畫的結(jié)束圖形。（2）用鼠標右鍵單擊開始幀或者用鼠標右鍵單擊兩個關(guān)鍵幀之間的任意幀，在彈出的快捷菜單中選擇“創(chuàng)建補間形狀”命令，這樣便在這兩個關(guān)鍵幀之間創(chuàng)建了形狀補間動畫，如圖2-35所示。圖2-352．形狀補間動畫“屬性”面板參數(shù)設(shè)置（1）“緩動”選項

設(shè)置物體的加速減速運動，與傳統(tǒng)補間動畫參數(shù)相同。（2）“混合”選項◎“角形”選項：創(chuàng)建的動畫中間形狀會保留明顯的角和直線，適合于具有銳化轉(zhuǎn)角和直線的混合形狀。◎“分布式”選項：創(chuàng)建的動畫中間形狀比較平滑和不規(guī)則，形狀變化得更加自然。3．使用形狀提示（1）單擊開始關(guān)鍵幀，執(zhí)行“修改”>“形狀”>“添加形狀提示”命令，該幀的形狀中會增加一個帶字母的紅色圓圈（一般第一個提示是字母“a”），在結(jié)束幀形狀中也會相應(yīng)地出現(xiàn)一個一模一樣的紅色圓圈。（2）在不同的關(guān)鍵幀中單擊，并分別將這2個“提示圓圈”拖放到適當(dāng)?shù)奈恢?，如果使用形狀提示成功后，開始幀上的“提示圓圈”就變?yōu)辄S色，結(jié)束幀上的“提示圓圈”會變?yōu)榫G色。安放不成功或者它們不在一條曲線上時，“提示圓圈”顏色保持不變。（3）刪除所有的形狀提示，可執(zhí)行“修改”>“形狀”>“刪除所有提示”命令，刪除單個形狀提示，可用鼠標右鍵單擊它，在彈出的快捷菜單中選擇“刪除提示”命令。4．使用可變寬度向筆觸添加形狀補間動畫

在AnimateCC2019中可以給可變寬度的筆觸添加形狀補間動畫，也可以對可變寬度配置文件的筆觸添加形狀補間動畫。

引導(dǎo)路徑動畫是指創(chuàng)建一條路徑，引導(dǎo)動畫對象按照一定的路徑運動。1．引導(dǎo)方式

引導(dǎo)方式可分為兩種，即普通引導(dǎo)和傳統(tǒng)運動引導(dǎo)。（1）普通引導(dǎo)方式

在制作動畫過程中，為了在繪制時幫助對齊對象，可創(chuàng)建引導(dǎo)層。在“時間軸”面板中，普通引導(dǎo)方式所在的引導(dǎo)層，通常以“尺子”為標記。該圖層主要用于輔助靜態(tài)對象定位，不會導(dǎo)出，不會顯示在發(fā)布的SWF文件中。2.1.5引導(dǎo)路徑動畫

在“時間軸”面板中，選中圖層，然后用鼠標右鍵單擊，在彈出的快捷菜單中選擇“引導(dǎo)層”命令，即將該圖層轉(zhuǎn)化為引導(dǎo)圖層。創(chuàng)建引導(dǎo)層后，即可在引導(dǎo)圖層中繪制引導(dǎo)路徑。在插入的新圖層中，可以使用引導(dǎo)路徑為其他圖層中的對象定位。創(chuàng)建了引導(dǎo)圖層的“時間軸”面板如圖2-50所示。（2）傳統(tǒng)運動引導(dǎo)方式

在“時間軸”面板中，選中圖層，然后用鼠標右鍵單擊，在彈出的快捷菜單中選擇“添加傳統(tǒng)運動引導(dǎo)層”命令，即將該圖層轉(zhuǎn)化為傳統(tǒng)運動引導(dǎo)圖層。在傳統(tǒng)運動引導(dǎo)圖層所引導(dǎo)的圖層中，可將補間動畫關(guān)鍵幀中的元件與引導(dǎo)路徑的兩個端點綁定。運動對象將按照引導(dǎo)路徑的軌跡移動。創(chuàng)建了傳統(tǒng)運動引導(dǎo)圖層的“時間軸”面板如圖2-51所示。圖2-50

圖2-512．創(chuàng)建引導(dǎo)路徑動畫的方法（1）一個最基本的引導(dǎo)路徑動畫由兩個圖層組成，上面一層是“引導(dǎo)層”，下面一層是“被引導(dǎo)層”。（2）引導(dǎo)路徑動畫最基本的操作就是使一個運動動畫“附著”在“引導(dǎo)路徑”上，所以操作時要特別注意引導(dǎo)路徑的兩端，被引導(dǎo)的對象起始、終點的2個“中心點”一定要對準引導(dǎo)路徑的2個端點。3．將圖層與傳統(tǒng)運動引導(dǎo)層鏈接起來

如需要把其他圖層也放置到當(dāng)前傳統(tǒng)運動引導(dǎo)層的路徑上來，被其引導(dǎo)，就將現(xiàn)有圖層拖到傳統(tǒng)運動引導(dǎo)層的下面，該圖層在傳統(tǒng)運動引導(dǎo)層下面以縮進形式顯示，該圖層上的所有對象自動與傳統(tǒng)運動路徑對齊。4．?dāng)嚅_圖層與傳統(tǒng)運動引導(dǎo)層的鏈接

斷開被引導(dǎo)層與引導(dǎo)層的引導(dǎo)關(guān)系，有以下兩種方法。（1）拖動該圖層到傳統(tǒng)運動引導(dǎo)層的上面。（2）執(zhí)行“修改”>“時間軸”>“圖層屬性”命令，然后選擇圖層類型為“一般”。

Aniamte中的遮罩可分為靜態(tài)遮罩和動畫遮罩兩種。（1）靜態(tài)遮罩用于控制圖層的顯示區(qū)域。遮罩層一般是由普通層轉(zhuǎn)換而來的。（2）動畫遮罩即在動畫中的遮罩層，其既可以是在遮罩層制作的動畫，又可以是在被遮罩層制作的動畫。2.1.6遮罩動畫1．創(chuàng)建遮罩

在“時間軸”面板中用鼠標右鍵單擊創(chuàng)建的遮罩層，從彈出的快捷菜單中選擇“遮罩層”命令，如圖2-66所示。該層將轉(zhuǎn)換為遮罩層，用一個遮罩層圖標來表示，如圖2-67所示。圖2-66

圖2-672．添加多個被遮罩層

要添加多個被遮罩層可以進行以下3種操作。（1）將現(xiàn)有的圖層直接拖到遮罩層的下面，如圖2-68所示。（2）在遮罩層下面的任何地方創(chuàng)建一個新圖層。（3）執(zhí)行“修改”>“時間軸”>“圖層屬性”命令，然后選擇“被遮罩”選項。圖2-683．?dāng)嚅_遮罩

要斷開遮罩可以進行以下兩種操作。（1）將圖層拖到遮罩層的上面。（2）執(zhí)行“修改”>“時間軸”>“圖層屬性”命令，然后選擇圖層類型為“一般”，如圖2-69所示。圖2-69

動畫預(yù)設(shè)是Animate預(yù)先配置的運動補間動畫，可以將它們應(yīng)用于舞臺上的對象。用戶可以創(chuàng)建并保存自己的自定義預(yù)設(shè)，可以使用修改過的現(xiàn)有動畫預(yù)設(shè)，也可以使用自己創(chuàng)建的自定義補間。使用預(yù)設(shè)可極大節(jié)約項目的制作時間，提高動畫設(shè)計制作效率。2.1.7動畫預(yù)設(shè)1．動畫預(yù)設(shè)

動畫預(yù)設(shè)可應(yīng)用于各種文本字段、影片剪輯元件和按鈕元件。在為元件應(yīng)用動畫預(yù)設(shè)之前，需要先執(zhí)行“窗口”>“動畫預(yù)設(shè)”命令，打開“動畫預(yù)設(shè)”面板，如圖2-88所示。

“動畫預(yù)設(shè)”面板包括“預(yù)設(shè)瀏覽”“預(yù)設(shè)列表”等區(qū)域以及下方的一些按鈕等。在工作區(qū)中選擇要添加的動畫預(yù)設(shè)的元件和文本后，即可在“動畫預(yù)設(shè)”面板中選擇相應(yīng)的預(yù)設(shè)項目，查看“預(yù)設(shè)瀏覽”，如圖2-89所示。圖2-88

圖2-892．自定義動畫預(yù)設(shè)

用戶可以自定義動畫預(yù)設(shè)。

在保存動畫預(yù)設(shè)時，打開“將預(yù)設(shè)另存為”對話框，可在該對話框中設(shè)置這些自定義動畫預(yù)設(shè)的名稱。圖2-90所示的abc即為預(yù)設(shè)動畫。

用戶自定義的預(yù)設(shè)是沒有預(yù)設(shè)預(yù)覽的。在“動畫預(yù)設(shè)”面板中單擊“刪除項目”按鈕，可將已添加的動畫預(yù)設(shè)從列表中刪除。圖2-902.2.1案例效果分析

本設(shè)計作品以紅色為主色調(diào)，配上春節(jié)的代表物燈籠和金牛，鼠標滑過金牛時呈現(xiàn)“牛年行大運”圖片，4個福字轉(zhuǎn)動出拜年的“吉祥語”，突出體現(xiàn)了春節(jié)熱鬧嘉慶的氣氛，如圖2-91所示。2.2任務(wù)一——制作春節(jié)賀卡圖2-912.2.2設(shè)計思路（1）制作影片剪輯元件“福字動”和“金牛微動”。（2）制作4個“福字”按鈕和“金?！卑粹o。（3）制作燈籠和影片剪輯元件“穂動”。（4）制作底圖和祥云效果。2.2.3相關(guān)知識點和技能點

“變形”面板的使用，在制作圖形元件時綜合使用各種繪圖工具；影片剪輯元件、按鈕、傳統(tǒng)補間動畫的制作。2.3.1案例效果分析

本案例設(shè)計的端午節(jié)賀卡，畫面以綠色為主，將翠竹、粽葉和粽子等端午節(jié)特有的元素應(yīng)用到動畫中。整個動畫輕柔、流暢，配上好聽的音樂，給人一種美的享受，效果如圖2-113所示。2.3任務(wù)二——制作端午節(jié)賀卡圖2-1132.3.2設(shè)計思路（1）制作背景、邊框、圖框。（2）制作翠竹、漣漪、星星。（3）制作粽子的傳統(tǒng)補間動畫。（4）制作文本動畫。（5）插入背景音樂。（6）添加腳本。2.3.3相關(guān)知識和技能點

使用形狀補間動畫制作畫面過渡效果，使用動作補間動畫創(chuàng)建文本動畫，以及圖層的操作。2.4.1實訓(xùn)概述1．動畫的制作目的與設(shè)計理念

本實訓(xùn)的目的是掌握文本內(nèi)容的輸入、按鈕元件的創(chuàng)建、引導(dǎo)層動畫的創(chuàng)建、應(yīng)用遮罩動畫、使用圖層文件夾功能的方法，以及熟悉電子賀卡的制作流程。

本實訓(xùn)制作的友情賀卡主要通過四葉草來傳達友情的內(nèi)涵，再配以音樂烘托主題，效果如圖2-126所示。2.4實訓(xùn)任務(wù)——制作友情賀卡圖2-1262．動畫整體風(fēng)格設(shè)計

動畫主體風(fēng)格舒緩柔美，伴隨著輕柔的音樂，一句句表達友情的話語帶給人們對友情的美好向往。3．素材收集與處理

收集四葉草植物、動態(tài)植物組合、動態(tài)氣泡、半透明漸變圓（自己制作）、小房子、背景圖片、音樂等素材。（1）背景的設(shè)定，通過靜的背景和動的四葉草植物組合，以及一些動的裝飾元件（如動態(tài)氣泡、漸變半圓、動態(tài)星星）的添加，使背景更有生氣，友情賀卡的內(nèi)容更豐富。（2）祝福語文本動畫的設(shè)定。主要通過四葉草引出文本，文本逐漸出現(xiàn)。（3）按鈕、音樂的添加。2.4.2實訓(xùn)要點2.5評價考核能力類型考核內(nèi)容評價學(xué)習(xí)目標評價項目321職業(yè)能力掌握逐幀動畫、動作補間動畫、傳統(tǒng)補間動畫引導(dǎo)路徑動畫和遮罩動畫的制作方法和技巧；會使用形狀提示制作形狀補間動畫；會運用繪圖紙功能編輯圖形；會使用Animate制作電子動畫賀卡能夠制作逐幀動畫

能夠制作動作補間動畫及傳統(tǒng)補間動畫

能夠制作引導(dǎo)路徑動畫

能夠制作遮罩動畫

能夠使用Animate制作電子賀卡

通用能力造型能力

審美能力

組織能力

解決問題能力

自主學(xué)習(xí)能力

創(chuàng)新能力

綜合評價

項目二任務(wù)評價考核表2.6.1參考制作效果

本實例設(shè)計的生日賀卡，動畫一開始顯示逐漸放大的轉(zhuǎn)場效果、從空中掉下來的生日蛋糕和燃燒的火柴，然后蠟燭點燃，緊接著出現(xiàn)音樂、彩帶、蒲公英、閃爍的星星、心形氣球和祝福語。靜幀效果如圖2-197所示。2.6課外拓展——制作生日賀卡圖2-197

導(dǎo)入外部庫的素材元件、文本和影片剪輯，應(yīng)用“發(fā)光”濾鏡，創(chuàng)建形狀補間動畫制作過渡效果。設(shè)置不同的“Alpha”值，制作傳統(tǒng)補間動畫。使用“屬性”面板和“變形”面板、編寫腳本，實現(xiàn)動畫播放的控制。使用文字動畫制作“點上生日蠟燭”文字效果。2.6.2知識要點Animate動畫設(shè)計與制作實例教程

（AnimateCC2019）

項目三

制作電子相冊項目簡介

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

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

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

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

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

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

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

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

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

圖3-5圖3-6

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

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

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

影片剪輯元件就是通常所說的MC（MovieClip）。可以把“舞臺”上任何看得到的對象，甚至整個時間軸的內(nèi)容創(chuàng)建為一個MC，可以把一個MC放置到另一個MC中，還可以把一段動畫（如逐幀動畫）轉(zhuǎn)換成MC。

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

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

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

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

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

圖3-24（3）制作成長相冊的封面。①將“庫”面板中的圖形元件1拖到“舞臺”中，按Ctrl+K組合鍵，打開“對齊”面板，設(shè)置元件1相對于“舞臺”“匹配寬和高”，水平、垂直居中，效果如圖3-25所示。②制作“小芽轉(zhuǎn)動”影片剪輯元件。圖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中，輸入文字，導(dǎo)入“小芽按鈕”元件，效果如圖3-38所示。圖3-38（4）設(shè)置相框內(nèi)容。新建“圖層_2”，在第2幀插入空白關(guān)鍵幀。設(shè)計相框，在第100幀插入普通幀。設(shè)計完成后的效果如圖3-39所示。（5）設(shè)置相冊頁內(nèi)容。圖3-39圖3-40圖3-41

圖3-42圖3-43

圖3-44（6）設(shè)置動作。

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

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

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

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

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

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

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

小女孩的家庭合影。2．造型設(shè)計

按照卡通人物原型為基礎(chǔ)設(shè)計。3．場景設(shè)計

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

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

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

圖3-77

圖3-78（7）新建“圖層_3”，選擇“指針經(jīng)過”幀，用鼠標右鍵單擊，選擇“插入關(guān)鍵幀”命令，將元件“喵喵.wav”從“庫”面板中拖入“舞臺”，效果如圖3-79所示。注意：要想按鈕的聲音顯示，“屬性”面板中的“同步”選項一定要設(shè)置為“事件”，如圖3-80所示。至此完成按鈕的制作。（8）回到場景1中，制作幾張相片間的切換效果，利用所學(xué)的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幀，在彈出的快捷菜單中選擇“插入空白關(guān)鍵幀”命令，將第3～120幀刪除，如圖3-83所示。圖3-83（11）選中“舞臺”上的“按鈕元件”按鈕實例，在“屬性”面板中設(shè)置實例名為“play_btn”，選中“圖層_2”圖層第1幀，用鼠標右鍵單擊，在彈出的快捷菜單中選擇“動作”命令，在彈出的“動作”面板中，輸入圖3-84所示的腳本。（12）發(fā)布導(dǎo)出影片，即可查看制作的家庭相冊。圖3-843.5評價考核能力類型考核內(nèi)容評價學(xué)習(xí)目標評價項目321職業(yè)能力掌握圖形元件、按鈕元件和影片剪輯元件的制作方法；會使用“庫”面板；會運用Animate制作電子相冊能夠制作圖形元件

能夠制作按鈕元件

能夠制作影片剪輯元件

能夠使用“庫”面板

能夠使用Animate制作電子相冊

通用能力造型能力

審美能力

組織能力

解決問題能力

自主學(xué)習(xí)能力

創(chuàng)新能力

綜合評價

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

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

圖3-87圖3-88（3）新建“圖層1”，重命名為“背景”，導(dǎo)入圖片素材1.jpg，效果如圖3-89所示。圖3-89（4）新建“圖層2”，重命名為“灰照片”，單擊第1幀，在舞臺上擺好圖片的位置，如圖3-90所示，分別在第2幀、第16幀、第45幀和第62幀插入關(guān)鍵幀，在第2幀、第16幀、第45幀和第62幀依次刪除圖片htl、lyy、myy、nyy、xhh，并調(diào)整圖片的大小，效果如圖3-91所示。圖3-90圖3-91（5）選擇“灰照片”圖層的第1幀，然后依次選中每一個按鈕元件，在“屬性”面板修改實例名稱分別為htl1_btn，lyy1_btn，nyy1_btn，myy1_btn，xhh1_btn，如圖3-92所示。圖3-92（6）新建文字層，輸入文字“喜羊羊與灰太狼”，效果如圖3-93所示。圖3-93（7）新建“圖層4”，重名為“灰太狼”，在這一層實現(xiàn)灰太狼圖片的預(yù)覽。在第1幀插入空白關(guān)鍵幀，選擇第2幀右鍵單擊，在彈出的快捷菜單中選擇“插入關(guān)鍵幀”命令，使用“繪圖紙”工具將有色的灰太狼圖片與原來無色的圖片的位置對應(yīng)。用鼠標右鍵單擊第29幀，在彈出的快捷菜單中選擇“插入關(guān)鍵幀”命令，用鼠標右鍵單擊第15幀，在彈出的快捷菜單中選擇“插入關(guān)鍵幀”后，調(diào)整圖片的大小和位置，使其位于“舞臺”中央。用鼠標右鍵單擊第16幀建立關(guān)鍵幀，在第2幀、第15幀、第16～29幀建立動作補間動畫，效果如圖3-94所示。圖3-94（8）選擇該圖層第15幀，修改htl元件的實例名稱為“htl_btn”，如圖3-95所示，在該層的第15幀上添加動作腳本，如圖3-96所示。圖3-95

圖3-96（9）同樣的方法依次建立“懶羊羊”“美羊羊”“暖羊羊”和“小灰灰”圖層，建立完成后的效果如圖3-97所示。圖3-97（10）建立“動作1”圖層和“動作2”圖層用來實現(xiàn)單擊自動播放，如圖3-98和圖3-99所示。（11）執(zhí)行保存、發(fā)布操作，即可完成動漫相冊的制作。圖3-98

圖3-9