Animate動畫設(shè)計(jì)實(shí)例教程 課件 任務(wù)六 元件的嵌套使用

任務(wù)六

元件的嵌套使用Animate動畫設(shè)計(jì)案例教程CONTENTS目錄1.任務(wù)分析2.難點(diǎn)剖析3.相關(guān)知識4.案例實(shí)現(xiàn)5.任務(wù)總結(jié)6.提高創(chuàng)新01任務(wù)分析知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)思政目標(biāo)素質(zhì)目標(biāo)培養(yǎng)學(xué)生自主學(xué)習(xí)的能力：對元件嵌套的靈活應(yīng)用。技能目標(biāo)能夠制作雪花飛舞、煙花爆炸等動作重復(fù)類動畫；能夠通過按鈕控制動畫的播放。知識目標(biāo)掌握元件嵌套疊加和模塊化設(shè)計(jì)的思想；掌握元件嵌套在案例中的應(yīng)用方法。思政目標(biāo)培養(yǎng)學(xué)生立志為國、不負(fù)青春的氣概和愛國主義精神。任務(wù)分析02難點(diǎn)剖析動畫怎么分模塊模塊怎么合成動畫1．動畫怎么分模塊將每個可以獨(dú)立拿出來的動畫部分，單獨(dú)做成影片剪輯元件。但并不是要把整個動畫都分成模塊，只要把比較復(fù)雜（圖層多、對象多）的部分用模塊處理即可。難點(diǎn)剖析2．分完了在哪里做，哪個對象有獨(dú)立的編輯環(huán)境元件有獨(dú)立的編輯環(huán)境，所以在元件里做。3．做完了在哪里合成動畫在主場景中，合成動畫。①建立圖層，找到合適的時間點(diǎn)插入關(guān)鍵空白幀，生成元件實(shí)例。②將實(shí)例延時，確保和元件里動畫的制作時間保持一致。4．動畫可以在元件里合成嗎可以。元件可以嵌套使用，所以可以在元件里合成。如果動畫復(fù)雜度比較高，可以在元件里合成；如果動畫比較簡單，在場景里合成即可。難點(diǎn)剖析03相關(guān)知識元件嵌套疊加制作按鈕元件的類型及其區(qū)別1.元件嵌套疊加在制作動畫時，很多時候需要實(shí)現(xiàn)動作的疊加（元件的嵌套使用），即一個做著自身固有動作的對象，同時又在做其他的運(yùn)動。例如，昆蟲扇動著翅膀向遠(yuǎn)處飛去，動畫角色四肢交替運(yùn)動向前奔跑。相關(guān)知識這些疊加的動作效果在Animate中通過元件的疊加使用，將動作分解實(shí)現(xiàn)。①在影片剪輯元件，制作對象自身的運(yùn)動，比如：大雁展翅的動畫效果。②生成“大雁展翅”實(shí)例，再制作大雁位置變化的動畫效果。③測試影片，實(shí)現(xiàn)大雁飛來飛去的疊加動作了。2.元件的類型及其區(qū)別1．圖形元件圖形元件一般用來放置靜態(tài)圖形。圖形元件的時間軸和場景的時間軸是同步的，在圖形元件中制作動畫片段，在舞臺上生成元件實(shí)例，延時，直接拖動播放頭可以觀察動畫片段的效果。相關(guān)知識2．影片剪輯元件影片剪輯元件一般放置動畫片段。影片剪輯元件的時間軸是獨(dú)立的，它的播放與主時間軸沒有直接關(guān)系，只能在測試場景（按【Ctrl+Enter】鍵）或?qū)С鲇捌蟛拍芸吹絼赢嬈蔚男Ч?。影片剪輯元件?shí)例的“屬性”面板有一些特殊的參數(shù)項(xiàng)：濾鏡、混合模式等。濾鏡可以為實(shí)例添加模糊、發(fā)光等效果；混合模式可以設(shè)置實(shí)例與底層對象的顏色混合。影片剪輯元件實(shí)例支持動作腳本。2.元件的類型及其區(qū)別3．按鈕元件按鈕元件時間軸是獨(dú)立的，當(dāng)測試影片或?qū)С鲇捌瑫r才能看到按鈕效果。按鈕元件實(shí)例的“屬性”面板有一些特殊的參數(shù)項(xiàng)：濾鏡、混合模式等。按鈕元件只有4幀，彈起：默認(rèn)狀態(tài)；指針經(jīng)過：鼠標(biāo)滑過時；按下：鼠標(biāo)按下時；點(diǎn)擊：感應(yīng)區(qū)域，不可見。按鈕的4種狀態(tài)可以放置圖形、文本、實(shí)例（包括動畫實(shí)例）、音頻。相關(guān)知識3.制作按鈕1．靜態(tài)按鈕指在觸發(fā)按鈕事件時，按鈕因?yàn)殛P(guān)鍵幀內(nèi)容改變發(fā)生的狀態(tài)變化。在下圖中，開機(jī)鍵就是按鈕，當(dāng)光標(biāo)放在按鈕上時，開機(jī)鍵略微放大，按下時又相應(yīng)縮小。相關(guān)知識

3.制作按鈕2．透明按鈕只設(shè)置感應(yīng)區(qū)域，測試時看不到、能被鼠標(biāo)捕捉到的按鈕。透明按鈕在舞臺上以半透明的藍(lán)色顯示，在測試影片時，什么也看不到，但是光標(biāo)放置在透明按鈕存在的位置上時會顯示小手形狀。如果對該按鈕添加動作腳本，觸發(fā)按鈕時會執(zhí)行動作腳本。相關(guān)知識

3.制作按鈕相關(guān)知識3．動態(tài)按鈕為按鈕設(shè)計(jì)了動態(tài)效果，在觸發(fā)按鈕事件時播放動態(tài)效果，提高了按鈕的觀賞性。設(shè)計(jì)思路：①將動態(tài)效果單獨(dú)制作成影片剪輯元件。②按鈕元件，新建圖層。在按鈕的相關(guān)狀態(tài)插入空白關(guān)鍵幀，生成動畫元件實(shí)例。4．帶音效的按鈕

04案例實(shí)現(xiàn)基礎(chǔ)嵌套小池青春寄語1.基礎(chǔ)嵌套1．雪花飛舞學(xué)習(xí)目標(biāo)：元件的疊加、重復(fù)使用。實(shí)現(xiàn)效果：漫天雪花飛舞。設(shè)計(jì)思路：雪花飄動的動作相同，雪花大小不同、透明度不同，雪花飄動的方向相反，雪花出現(xiàn)的時間不同。該案例是，對一片雪花飄落效果的重復(fù)使用。（1）新建圖形元件：雪花

（2）新建影片剪輯元件：雪花飄（3）新建影片剪輯元件：多個雪花飄（4）生成“多個雪花飄”實(shí)例1.基礎(chǔ)嵌套2．煙花學(xué)習(xí)目標(biāo)：動作的疊加使用。實(shí)現(xiàn)效果：不同顏色、不同大小的煙花隨機(jī)出現(xiàn)在天空中，爆炸、消失。設(shè)計(jì)思路：每個煙花爆炸的動作一樣，只是大小、顏色、爆炸的先后順序不同。（1）制作橢圓升空的效果

（2）制作煙花爆炸的效果（3）制作多個煙花爆炸的效果（4）生成實(shí)例案例欣賞煙花欣賞1.基礎(chǔ)嵌套3．閃動七星學(xué)習(xí)目標(biāo)：動作的嵌套疊加使用。總結(jié)：動作共計(jì)疊加了3次。實(shí)現(xiàn)效果：星星甩著尾巴沿弧線飛舞、消失。設(shè)計(jì)思路：基礎(chǔ)元件是“一個星星的淡出”；按照72°復(fù)制“一個星星的淡出”實(shí)例5次，實(shí)現(xiàn)五個星星向四周淡出的效果；將向四周淡出的星星實(shí)例復(fù)制多個并排成一個弧線造型，設(shè)置顯示時間，形成逐個顯示的效果；將排成弧線造型的實(shí)例再復(fù)制多個，擺造型、設(shè)置時間，形成最終效果。2.青春寄語學(xué)習(xí)目標(biāo)：模塊化的設(shè)計(jì)思想及元件的嵌套使用。實(shí)現(xiàn)效果：黑色矩形從中間向兩邊展開，星星圖標(biāo)從舞臺上方掉落；中間出現(xiàn)一個黃色矩形條、顯示：愿你以夢為馬，不負(fù)韶華，星光從每個文字上閃過，星光閃動的同時向四周掉落；顯示：愿你拼盡全力，無畏前行，最后黑色矩形又從兩邊向中間展開。設(shè)計(jì)思路：分模塊解決問題。星星簽名是一個模塊，星星光芒是一個模塊、文字“你以夢為馬，不負(fù)韶華”是一個模塊，文字“愿你拼盡全力，無畏前行”是一個模塊。2.青春寄語1．開幕動畫——矩形展開2．模塊——動畫星芒模塊實(shí)現(xiàn)效果：星星淡出、星芒四散掉落。3．模塊——動畫“愿你以夢為馬，不負(fù)韶華”模塊實(shí)現(xiàn)效果：黃色矩形淡入、文本“愿你以夢為馬，不負(fù)韶華”左移、星星淡出星芒掉落效果先后出現(xiàn)10次。4．模塊——動畫“愿你拼盡全力，無畏前行”5．模塊-動畫簽名模塊內(nèi)部實(shí)現(xiàn)效果：4個星星左右晃動6．閉幕動畫——矩形合攏7．整理庫面板當(dāng)前動畫元素比較多，注意創(chuàng)建文件夾，分類管理庫元件。3.小池學(xué)習(xí)目標(biāo)：模塊化的設(shè)計(jì)思想及元件的嵌套使用。實(shí)現(xiàn)效果：畫軸展開，荷塘上方柳葉飄動、露珠晶瑩剔透閃閃發(fā)亮，荷塘里蝌蚪成群游動，荷葉在水流的沖擊下上下浮動，荷花綻放，吸引蜻蜓飛來駐足休息，最后顯示的經(jīng)典詩句。設(shè)計(jì)思路：把動畫分成八個模塊—荷葉、荷花、荷花開、柳條飄、蜻蜓飛、蝌蚪游、古詩。將八個模塊分別做好，在場景1中，制作畫軸，畫軸展開后，合成動畫。所需影片剪輯元件：荷葉動、荷花、荷花開、柳條飄、蜻蜓飛、蝌蚪游、詩文。所需圖形元件：荷葉、荷花、柳條、蜻蜓左翅膀、蜻蜓右翅膀、古詩、畫軸、畫紙。3.小池1．設(shè)置舞臺參數(shù)設(shè)置舞臺寬550像素，高300像素，幀頻為24fps。2．影片剪輯元件“荷葉動”3．影片剪輯元件“柳條飄”模塊實(shí)現(xiàn)效果：柳條緩緩的左右擺動。4．影片剪輯元件“蝌蚪甩尾巴”模塊內(nèi)部實(shí)現(xiàn)效果：蝌蚪甩尾巴的逐幀動畫。5．影片剪輯元件“蝌蚪游”生成“蝌蚪甩尾巴”元件實(shí)例，制作蝌蚪游了一段距離的動畫。6．影片剪輯元件“蜻蜓飛”3.小池7．圖形元件“荷花”荷花后期要制作綻放的動畫效果，所以有完整的四朵花瓣元件和一根荷花莖繪制對象組成。8．影片剪輯元件“荷花開”實(shí)現(xiàn)效果：荷花靜止，隨著時間的發(fā)展，慢慢綻放，然后停止（最后一幀添加時間軸停止播放stop();語句）。9．影片剪輯元件“古詩”10．場景1，制作畫軸展開的效果11．遮蓋畫軸和畫布以外的內(nèi)容畫布外的左上方多出了一截柳條，影響美觀度。可以利用第7章遮罩技術(shù)實(shí)現(xiàn)畫軸及畫軸以內(nèi)的內(nèi)容顯示的效果。12．“庫”面板中整理元件05任務(wù)總結(jié)任務(wù)總結(jié)1．雙擊實(shí)例進(jìn)入元件編輯環(huán)境該方式可以在元件的編輯環(huán)境下看到舞臺。既可以達(dá)到根據(jù)舞臺大小設(shè)計(jì)元件內(nèi)部動畫效果的目的（如雪花路徑、蝌蚪游的距離），又可以達(dá)到在舞臺上定位影片剪輯元件的目的（如在舞臺上定位“漫天飛舞”元件）。2．文件間實(shí)現(xiàn)庫共享打開多個文件后，通過“庫”面板列表，可以實(shí)現(xiàn)已打開文件間的元件共享。打開多個文件后，直接將A文件的元件拖入B文件的舞臺即可，同時與該元件相關(guān)的所有元件、素材也自動復(fù)制到B文件庫中。3．整理“庫”面板——建立文件夾分類別管理元件在“庫”面板中新建多個文件夾，按照模塊命名，或自己制定命名規(guī)則，要清晰易懂，便于后期修改和團(tuán)隊(duì)成員查看。4．整理“庫”面板——查找沒有使用到的元件在庫面板中，將使用次數(shù)為0的元件刪除，為文件減肥。06提高創(chuàng)新按鈕控制動畫播放按鈕控制動畫播放學(xué)習(xí)目標(biāo)：按鈕控制當(dāng)前時間軸播放；按鈕控制影片剪輯時間軸播放。實(shí)現(xiàn)效果：單擊“播放”按鈕，荷花綻放、蜻蜓飛來、古詩《小池》內(nèi)容顯示；單擊“返回”按鈕，動畫回到卷軸展開后的狀態(tài)。設(shè)計(jì)思路：（1）畫軸展開后，時間軸停止播放，荷花、古詩實(shí)例停止播放。

stop();//當(dāng)前時間軸停止播放hehua_1.stop();//荷花實(shí)例的時間軸停止播放

hehua_2.stop();//荷花實(shí)例的時間軸停止播放

gushi.stop();//小池實(shí)例的時間軸停止播放（2）“播放”按鈕，控制時間軸向后播放、影片剪輯元件實(shí)例播放。button.addEv