《UI視覺設(shè)計(jì)案例教程》348-7（李愛平）教案 第四章 用 After Effects 設(shè)計(jì)和實(shí)現(xiàn) UI 交互動效

PAGE4PAGE4PAGE3PAGE3《UI交互設(shè)計(jì)案例教程》

教案課時分配表章序課程內(nèi)容課時備注1第1章UI交互設(shè)計(jì)基礎(chǔ)62第2章UI交互設(shè)計(jì)規(guī)范和原則63第3章使用AxureRP實(shí)現(xiàn)線框原型設(shè)計(jì)104第4章用AfterEffects設(shè)計(jì)和實(shí)現(xiàn)UI交互動效85第5章常見UI交互動效設(shè)計(jì)與實(shí)現(xiàn)(上)66第6章常見UI交互動效設(shè)計(jì)與實(shí)現(xiàn)(下)67第7章文旌課堂App的界面與動效設(shè)計(jì)6合計(jì)48文旌課堂APP

課題第四章用AfterEffects設(shè)計(jì)和實(shí)現(xiàn)UI交互動效課時8課時（360min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）了解AfterEffects軟件的基礎(chǔ)知識。（2）掌握AfterEffects的基本操作。（3）掌掌握使用AfterEffects制作UI交互動效的方法與技巧。（4）掌握使用AfterEffects預(yù)覽、渲染和導(dǎo)出交互動效的方法。思政育人目標(biāo)：（1）加強(qiáng)練習(xí)，在實(shí)踐中培養(yǎng)自己的專業(yè)技能和職業(yè)素養(yǎng)。（2）完善作品設(shè)計(jì)，培養(yǎng)精益求精的良好品質(zhì)。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：AfterEffects軟件的基礎(chǔ)知識和基本操作教學(xué)難點(diǎn)：AfterEffects制作UI交互動效，預(yù)覽、渲染和導(dǎo)出交互動效的方法與技巧教學(xué)方法問答法、討論法、講授法、實(shí)訓(xùn)法、演示法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第1節(jié)課初識AfterEffects課前任務(wù)【教師】布置課前任務(wù)，提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請大家預(yù)習(xí)本任務(wù)的相關(guān)知識點(diǎn)?！緦W(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生了解本次課的重要性，增加學(xué)生的學(xué)習(xí)興趣考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況新章預(yù)熱

（3min）【教師】介紹本課章節(jié)大致內(nèi)容，導(dǎo)入課題靜態(tài)的線框原型很難完整地表達(dá)出設(shè)計(jì)師的設(shè)計(jì)思維，尤其是交互思維，而要表達(dá)交互思維，就需要制作交互動效。UI交互動效可以提升頁面的表達(dá)效果，帶給用戶更好的視覺體驗(yàn)，還可以更加有效地說明產(chǎn)品的使用方法和功能，增加產(chǎn)品的趣味性，利于展示產(chǎn)品細(xì)節(jié)。本章介紹制作UI交互動效的相關(guān)軟件及其操作方法，一方面可以使讀者更好地理解和掌握軟件，另一方面可以培養(yǎng)讀者腳踏實(shí)地、精益求精的良好品質(zhì)。【學(xué)生】聆聽、互動通過新章預(yù)熱，讓學(xué)生了解本章節(jié)的大致內(nèi)容和考核要求互動導(dǎo)入

（5min）【教師】根據(jù)預(yù)習(xí)內(nèi)容提出問題：介紹AdobeAfterEffects軟件的用途和主要功能?！緦W(xué)生】思考、討論、舉手發(fā)言【教師】與學(xué)生簡單互動，總結(jié)內(nèi)容，引入課程內(nèi)容通過互動導(dǎo)入，引導(dǎo)學(xué)生思考，調(diào)動學(xué)生的主觀能動性傳授新知

（25min）【教師】根據(jù)ppt內(nèi)容初識AdobeAfterEffects軟件4.1初識AfterEffectsAdobeAfterEffects是Adobe公司推出的一款動態(tài)圖形制作和視覺效果設(shè)計(jì)軟件，由于其自身強(qiáng)大、豐富的動效制作和高度靈活的2D、3D合成功能，以及數(shù)百種預(yù)設(shè)的效果與動畫，被廣泛應(yīng)用于UI交互動效設(shè)計(jì)、視頻后期合成處理等領(lǐng)域。AfterEffects支持無限多個圖層，能夠直接導(dǎo)入Illustrator和Photoshop文件，并且保留文件中的圖層，實(shí)現(xiàn)了與Adobe公司其他相關(guān)軟件的無縫銜接。除此之外，AfterEffects還配有多種內(nèi)置插件，以滿足更復(fù)雜、更獨(dú)特的設(shè)計(jì)要求。在學(xué)習(xí)AfterEffects之前，要先了解該軟件的操作界面，如圖4-1所示?！径嗝襟w】教師展現(xiàn)AfterEffects2021操作界面，操作并分別講解界面中不同區(qū)域的功能下面簡單介紹界面中不同區(qū)域的功能。(1)標(biāo)題欄:其中包括軟件名和正在制作的項(xiàng)目名稱，以及最小化、還原、關(guān)閉按鈕。(2)菜單欄:位于標(biāo)題欄下方，AfterEffects的大部分功能都位于該區(qū)域，選擇菜單項(xiàng)可執(zhí)行相應(yīng)功能，包括調(diào)整參數(shù)、切換面板和添加效果等。(3)工具欄:包括選取工具、縮放工具、形狀工具、文本工具、繪圖工具和Roto筆刷等制作交互動效的常用工具。要使用某個工具，單擊選擇即可。鼠標(biāo)左鍵長按工具右下方的◢按鈕，可以在下拉列表中查看并選擇隱藏工具。(4)“項(xiàng)目”面板:用于管理項(xiàng)目中的所有素材和合成，上方為素材與合成的預(yù)覽區(qū)域，下方為文件列表區(qū)域，可以對素材和合成進(jìn)行導(dǎo)入、新建、刪除、編輯等操作。(5)“合成”窗口:一般位于界面正中，是交互動效的預(yù)覽區(qū)，可以顯示當(dāng)前合成和素材的效果。(6)“時間軸”面板:一般位于界面底部，是用于組織素材的重要區(qū)域，可以對圖層進(jìn)行選擇、創(chuàng)建、排序和重命名等操作，還可以添加和設(shè)置關(guān)鍵幀?！径嗝襟w】教師展現(xiàn)“窗口”子菜單圖片，操作并講解工作面板中的隱藏面板除上述常用面板外，還有一些工作面板，在菜單欄的“窗口”菜單中選擇面板名稱即可打開相應(yīng)面板，如圖4-2所示?！緦W(xué)生】聆聽、觀察、跟隨操作【多媒體】教師展現(xiàn)改變界面布局圖片，操作并講解如何改變界面布局選擇“窗口/工作區(qū)”菜單項(xiàng)，可在其子菜單中選擇不同的界面布局;單擊工具欄中的按鈕，也可在下拉列表中選擇不同的界面布局，如圖4-3所示?！緦W(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容講解AdobeAfterEffects基本操作4.2AfterEffects基本操作4.2.1項(xiàng)目文件基本操作AfterEffects與其他軟件有一個明顯的不同之處，就是在該軟件中創(chuàng)建的項(xiàng)目不能直接操作，還需要在項(xiàng)目文件中創(chuàng)建合成。1.創(chuàng)建和打開項(xiàng)目文件【多媒體】教師展現(xiàn)“開始”界面圖片，操作并講解如何創(chuàng)建和打開項(xiàng)目文件在啟動軟件時，會出現(xiàn)“開始”界面，在該界面中單擊“新建項(xiàng)目”按鈕可以創(chuàng)建新項(xiàng)目;單擊“打開項(xiàng)目”按鈕，可以在彈出的“打開”對話框中選擇并打開本地項(xiàng)目文件，另外，該界面還會列出“最近使用項(xiàng)”，直接單擊項(xiàng)目名稱即可打開對應(yīng)的項(xiàng)目文件，如圖4-4所示?！径嗝襟w】教師展現(xiàn)創(chuàng)建項(xiàng)目或打開本地項(xiàng)目文件圖片，操作并講解如何創(chuàng)建項(xiàng)目或打開本地項(xiàng)目文件關(guān)閉“開始”界面后，可以通過選擇“文件/新建/新建項(xiàng)目”菜單項(xiàng)創(chuàng)建新項(xiàng)目;或者選擇“文件/打開項(xiàng)目...”菜單項(xiàng)，在彈出的“打開”對話框中選擇并打開本地項(xiàng)目文件，如圖4-5所示。在AfterEffects中一次只能打開一個項(xiàng)目文件，如果在已有項(xiàng)目打開時創(chuàng)建或打開新項(xiàng)目，系統(tǒng)將提醒你保存已經(jīng)打開的項(xiàng)目并將其關(guān)閉，之后再創(chuàng)建或打開新項(xiàng)目?！緦W(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容操作并講解創(chuàng)建合成的方法2.創(chuàng)建合成合成是動效的框架，每個合成都有自己的時間軸，一個項(xiàng)目文件可以包含數(shù)百個合成，每個合成都單獨(dú)列于“項(xiàng)目”面板中，雙擊“項(xiàng)目”面板中的合成可以在“合成”窗口中顯示該合成的效果，并且合成中的圖層將顯示于“時間軸”面板中。如果要創(chuàng)建新的空白合成，可以先選擇“合成/新建合成...”菜單項(xiàng)，在彈出的“合成設(shè)置”對話框中設(shè)置合成的相關(guān)選項(xiàng);然后單擊“確定”按鈕。如果要基于素材創(chuàng)建合成，可先雙擊“項(xiàng)目”面板文件列表區(qū)域的空白處，在彈出的“導(dǎo)入文件”對話框中選擇文件;然后單擊“導(dǎo)入”按鈕即可導(dǎo)入文件，并顯示于“項(xiàng)目”面板中。在“項(xiàng)目”面板中還會基于該文件自動創(chuàng)建一個與該文件名稱相同的合成。另外，在創(chuàng)建項(xiàng)目文件之后，在“合成”窗口中也提供了兩個創(chuàng)建合成的按鈕，分別是“新建合成”和“從素材新建合成”，直接單擊并進(jìn)行操作即可?！緦W(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容講解新知3.保存和關(guān)閉項(xiàng)目文件【多媒體】教師展現(xiàn)文件菜單中的保存命令圖片，操作并講解如何保存和關(guān)閉項(xiàng)目文件“文件”菜單中有多個保存項(xiàng)目文件的菜單項(xiàng)，如圖4-6所示。選擇“文件/保存”菜單項(xiàng)，在彈出的“另存為”對話框中設(shè)置保存位置，輸入文件名，然后單擊“保存”按鈕即可保存項(xiàng)目文件;選擇“文件/另存為/另存為...”菜單項(xiàng)，可將保存過的文件作為新文件保存到其他位置。要將項(xiàng)目保存為項(xiàng)目副本，可以選擇“文件/增量保存”菜單項(xiàng)，將文件保存于原始文件所在的文件夾中，此時的文件名稱為在原始文件名基礎(chǔ)上添加一個數(shù)字，當(dāng)原始文件名最后一位是數(shù)字時，該數(shù)字加1。要使項(xiàng)目文件可以用舊版本軟件打開，可以選擇“文件/另存為/將副本另存為...(主要版本號)”菜單項(xiàng)，彈出“將副本另存為...(主要版本號)”對話框，在其中選擇保存位置，輸入文件名，然后單擊“保存”按鈕即可保存項(xiàng)目文件為早期版本。保存項(xiàng)目文件之后選擇“文件/關(guān)閉項(xiàng)目”菜單項(xiàng)，可關(guān)閉當(dāng)前打開的項(xiàng)目文件?！緦W(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容講解新知4.2.2導(dǎo)入素材1.導(dǎo)入普通圖像文件【多媒體】教師展現(xiàn)導(dǎo)入素材選項(xiàng)圖片，操作并講解如何導(dǎo)入普通圖像文件使用AfterEffects制作交互動效，經(jīng)常需要從外部導(dǎo)入各種格式的素材文件，選擇“文件/導(dǎo)入”子菜單中的各項(xiàng)可以導(dǎo)入不同類型的文件，如圖4-7所示?！径嗝襟w】教師展現(xiàn)“導(dǎo)入文件”對話框圖片，操作如何導(dǎo)入文件，并講解導(dǎo)入對話框的相關(guān)參數(shù)在“文件/導(dǎo)入”子菜單中選擇“文件...”菜單項(xiàng)可打開“導(dǎo)入文件”對話框，在此對話框中選擇文件，并單擊“導(dǎo)入”或“導(dǎo)入文件夾”按鈕即可將文件導(dǎo)入項(xiàng)目文件中;要導(dǎo)入序列圖像，需要在對話框中單擊序列圖像中的第一張圖像，并勾選“...序列”復(fù)選框，然后單擊“導(dǎo)入”按鈕，如圖4-8所示。【學(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容講解新知2.導(dǎo)入Photoshop和Illustrator文件為了制作出效果精彩的交互動效，經(jīng)常需要把專業(yè)圖像設(shè)計(jì)軟件中制作的文件導(dǎo)入AfterEffects中。在AfterEffects中可以直接導(dǎo)入Photoshop和Illustrator的分層文件，尤其是Photoshop文件，在AfterEffects中可以顯示其所有屬性。【多媒體】教師展現(xiàn)設(shè)置對話框圖片，操作如何導(dǎo)入Photoshop和Illustrator文件，并講解不同的導(dǎo)入類型和圖層選項(xiàng)的不同狀態(tài)。選擇“文件/導(dǎo)入/文件...”菜單項(xiàng)，在彈出的“導(dǎo)入文件”對話框中選擇PSD格式或AI格式文件，單擊“導(dǎo)入”按鈕，彈出設(shè)置對話框，在該對話框的“導(dǎo)入種類”下拉列表中選擇導(dǎo)入類型，然后單擊“確定”按鈕，即可將Photoshop或Illustrator文件導(dǎo)入AfterEffects中，如圖4-9所示。當(dāng)導(dǎo)入文件時，在如圖4-9所示的對話框中，選擇不同的導(dǎo)入種類和圖層選項(xiàng)會使文件導(dǎo)入后呈現(xiàn)不同的狀態(tài)?！斠娊滩摹窘處煛扛鶕?jù)ppt內(nèi)容講解源文件導(dǎo)入AfterEffects中時的注意事項(xiàng)。在將專業(yè)圖像設(shè)計(jì)軟件的源文件導(dǎo)入AfterEffects中時，還需要注意以下四點(diǎn)?！斠娊滩摹緦W(xué)生】聆聽、觀察、跟隨操作通過教師的講解和演示，使學(xué)生了解AfterEffects的操作界面項(xiàng)目實(shí)訓(xùn)（10min）【教師】分析任務(wù)，并進(jìn)行演示【課堂演示】教師演示“導(dǎo)入文件”對話框制作方法步驟1在AfterEffects中新建項(xiàng)目，選擇“文件/導(dǎo)入/文件...”菜單項(xiàng)，在彈出的“導(dǎo)入文件”對話框中選擇“素材與實(shí)例/第4章/案例4-1/中秋節(jié).psd”文件，如圖4-10所示。單擊“導(dǎo)入”按鈕，彈出設(shè)置對話框。【課堂演示】教師演示如何基于文件創(chuàng)建合成步驟2在設(shè)置對話框中選擇導(dǎo)入種類為“合成-保持圖層大小”，在圖層選項(xiàng)處勾選“合并圖層樣式到素材”單選鈕，然后單擊“確定”按鈕導(dǎo)入文件，此時在“項(xiàng)目”面板中基于該文件就自動創(chuàng)建了一個合成，如圖4-11所示?！菊n堂演示】教師演示如何導(dǎo)入PSD格式文件為合成后的工作界面效果步驟3雙擊“項(xiàng)目”面板中自動生成的合成，“合成”窗口中將顯示與PSD素材圖像相同的效果，并且在“時間軸”面板中列出與PSD文件中圖層相對應(yīng)的圖層，如圖4-12所示。步驟4選擇“文件/保存”菜單項(xiàng)，彈出“另存為”對話框，在其中設(shè)置保存位置，輸入文件名稱，然后單擊“保存”按鈕保存當(dāng)前項(xiàng)目?！窘處煛堪才艑W(xué)生完成任務(wù)實(shí)施，沒有掌握操作步驟的學(xué)生可以掃描二維碼（詳見教材）觀看操作視頻再次學(xué)習(xí)【教師】巡堂輔導(dǎo)，及時解決學(xué)生遇到的問題；安排每組做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問題通過項(xiàng)目實(shí)訓(xùn)使學(xué)生掌握導(dǎo)入PSD格式文件為合成的方法，并以學(xué)生為主體，針對學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動其他學(xué)生掌握知識第2節(jié)課交互動效制作基礎(chǔ)傳授新知

（30min）【教師】講解新知，邊講解邊演示，學(xué)生跟隨練習(xí)4.3交互動效制作基礎(chǔ)使用AfterEffects制作交互動效需要用到“時間軸”面板和關(guān)鍵幀，本節(jié)將詳細(xì)講解“時間軸”面板和關(guān)鍵幀的基礎(chǔ)知識及操作方法。4.3.1“時間軸”面板在AfterEffects中制作交互動效的大多數(shù)操作都是在“時間軸”面板中完成的，因此想要制作交互動效就要先認(rèn)識“時間軸”面板。認(rèn)識“時間軸”面板【多媒體】教師展示“時間軸”面板圖片，并進(jìn)行講解“時間軸”面板主要分為圖層控制區(qū)域和時間線區(qū)域兩大部分，另外還包括時間碼、搜索框與合成開關(guān)等，如圖4-13所示?！径嗝襟w】教師展示列數(shù)菜單圖片，并進(jìn)行講解圖層控制區(qū)域由13列組成，右鍵單擊列標(biāo)題欄，在快捷菜單的“列數(shù)”子菜單中單擊列名稱，即可在“時間軸”面板中顯示或隱藏列，如圖4-14所示?！径嗝襟w】教師展示時間線和時間指示器圖片，并進(jìn)行講解時間線區(qū)域由時間線和時間指示器組成，如圖4-15所示。每個圖層都有對應(yīng)的時間線，時間指示器所在的位置稱為當(dāng)前時間，并且會在時間碼中顯示?！窘處煛窟叢僮鬟呏v解“時間軸”面板中的主要設(shè)置項(xiàng)：A/V設(shè)置項(xiàng)2)“轉(zhuǎn)換控制”選項(xiàng)3)父級和鏈接4)“時間控制”選項(xiàng)【教師】講解圖層基本操作，邊講解邊演示，學(xué)生跟隨練習(xí)2.圖層基本操作圖層是AfterEffects的基礎(chǔ)，是構(gòu)成合成的基本元素，所有的交互動效在編輯時都以圖層的方式顯示在“時間軸”面板中，如果沒有圖層，合成就只是一個空殼，而且“時間軸”面板中的選項(xiàng)，以及特效效果也是施加在圖層及圖層內(nèi)容中的。因此我們需要掌握圖層的基本操作方法。1）基礎(chǔ)操作(1)重命名。(2)創(chuàng)建圖層。2)選擇圖層(1)選擇圖層(2)多選圖層(3)選擇被遮擋的圖層(4)全選(5)反向選擇(6)選擇標(biāo)簽組(7)選擇子圖層……詳見教材3)改變圖層排序【多媒體】教師展示改變圖層排序圖片，操作并講解圖層排序的不同效果在“時間軸”面板中，按下鼠標(biāo)左鍵向上或向下拖動圖層，可以改變圖層的排序;選中圖層后，按快捷鍵“Ctrl+Alt+↑/↓”可將該圖層上移或下移;按快捷鍵“Ctrl+Alt+Shift+↑/↓”可將圖層置頂或置底;選擇菜單欄“圖層/排列”子菜單中的選項(xiàng)也可以改變圖層排序，如圖4-16所示?！窘處煛恐v解圖層屬性，邊講解邊演示，學(xué)生跟隨練習(xí)3.圖層屬性【多媒體】教師展示展開或折疊屬性圖片，操作并講解如何展開或折疊屬性每個圖層都有一個基礎(chǔ)屬性組，即“變換”屬性組，其中包括“錨點(diǎn)”“位置”“縮放”“旋轉(zhuǎn)”和“不透明度”屬性。單擊圖層名稱或?qū)傩越M名稱左側(cè)的“>”按鈕可展開屬性組;單擊“〉”按鈕可折疊屬性組，如圖4-17所示?？梢酝ㄟ^單擊屬性名稱右側(cè)的藍(lán)色數(shù)字并輸入數(shù)值來設(shè)置屬性值，也可以通過在藍(lán)色數(shù)字上按下鼠標(biāo)左鍵并左右拖動來設(shè)置屬性值。1)“錨點(diǎn)”屬性【多媒體】教師展示調(diào)整錨點(diǎn)位置圖片，操作并講解如何調(diào)整錨點(diǎn)位置“錨點(diǎn)”屬性主要用于設(shè)置素材的中心點(diǎn)位置。對素材做縮放、旋轉(zhuǎn)、移動等操作時，都是基于素材的中心點(diǎn)進(jìn)行的。選中圖層按快捷鍵“A”，可以顯示該圖層的“錨點(diǎn)”屬性。選擇圖層，按快捷鍵“Ctrl+Alt+Home”可以使該圖層中內(nèi)容的錨點(diǎn)位于圖層內(nèi)容的中心位置。在工具欄中選擇“向后平移(錨點(diǎn))工具”，可以在“合成”窗口中按下鼠標(biāo)左鍵拖動錨點(diǎn)，調(diào)整錨點(diǎn)位置，如圖4-18所示。2)“位置”屬性“位置”屬性主要用于控制素材在“合成”窗口中的位置。選擇圖層按快捷鍵“P”，可以顯示該圖層的“位置”屬性。除設(shè)置“位置”屬性值外，在工具欄中選擇選取工具，在“合成”窗口中按下鼠標(biāo)左鍵拖動素材，也可改變素材位置。3)“縮放”屬性【多媒體】教師展示拖動控制點(diǎn)縮放素材圖片，操作并講解如何拖動控制點(diǎn)縮放素材“縮放”屬性主要用于設(shè)置素材在“合成”窗口中的大小，選擇圖層按快捷鍵“S”，可以顯示該圖層的“縮放”屬性。除設(shè)置“縮放”屬性值外，在工具欄中選擇選取工具，先在“合成”窗口中選擇素材，然后按下鼠標(biāo)左鍵拖動素材周圍的控制點(diǎn)，也可改變素材大小，如圖4-19所示。在按下鼠標(biāo)左鍵對素材進(jìn)行縮放操作時，按住快捷鍵“Shift”，可使素材等比例縮放。4)“旋轉(zhuǎn)”屬性“旋轉(zhuǎn)”屬性主要用于設(shè)置素材的旋轉(zhuǎn)角度，選擇圖層按快捷鍵“R”，可以顯示圖層的“旋轉(zhuǎn)”屬性。除設(shè)置“旋轉(zhuǎn)”屬性值外，在工具欄中選擇旋轉(zhuǎn)工具，在“合成”窗口中選擇素材并按下鼠標(biāo)左鍵進(jìn)行拖動，也可改變素材的旋轉(zhuǎn)角度。5)“不透明度”屬性“不透明度”屬性用于設(shè)置圖層的不透明度，選擇圖層按快捷鍵“T”，可以顯示圖層的“不透明度”屬性。要顯示或隱藏屬性，還可以使用以下方法:……詳見教材【教師】講解關(guān)鍵幀的相關(guān)知識，邊講解邊演示，學(xué)生跟隨練習(xí)4.3.2關(guān)鍵幀關(guān)鍵幀是AfterEffects中制作動效的關(guān)鍵，在合適的位置添加關(guān)鍵幀，可以制作出符合實(shí)際的動效和動畫效果，因此理解關(guān)鍵幀，學(xué)習(xí)關(guān)鍵幀的操作尤為重要。1.什么是關(guān)鍵幀AfterEffects是通過使圖層屬性隨時間變化而實(shí)現(xiàn)動效的?！斠娊滩?.添加關(guān)鍵幀【多媒體】教師展示添加關(guān)鍵幀圖片，操作并講解如何添加關(guān)鍵幀在“時間軸”面板中，選擇要添加關(guān)鍵幀的圖層屬性，并單擊屬性名稱左側(cè)的“秒表”按鈕，即可激活秒表并在當(dāng)前“時間指示器”的位置添加關(guān)鍵幀，如圖4-20所示。也可以在選中圖層屬性后，選擇“動畫/添加...關(guān)鍵幀”菜單項(xiàng)，在當(dāng)前位置添加關(guān)鍵幀?！径嗝襟w】教師展示按鈕圖片，操作并講解不同按鈕的功能和屬性添加關(guān)鍵幀后，該屬性的最左側(cè)會出現(xiàn)三個按鈕，分別是“轉(zhuǎn)到上一個關(guān)鍵幀”“在當(dāng)前時間添加或移除關(guān)鍵幀”和“轉(zhuǎn)到下一個關(guān)鍵幀”，如圖4-21所示。如果當(dāng)前“時間指示器”位置有關(guān)鍵幀，單擊“在當(dāng)前時間添加或移除關(guān)鍵幀”按鈕，會刪除此關(guān)鍵幀，如果當(dāng)前位置沒有關(guān)鍵幀，單擊該按鈕會添加新關(guān)鍵幀。3.編輯關(guān)鍵幀1)選擇關(guān)鍵幀【多媒體】教師展示選中關(guān)鍵幀圖片，操作并講解如何選中關(guān)鍵幀以及選擇關(guān)鍵幀的方法。當(dāng)關(guān)鍵幀被選中時會顯示為藍(lán)色，當(dāng)未被選中時會顯示為灰色，如圖4-22所示。選擇關(guān)鍵幀的方法有以下四種?！斠娊滩?)刪除關(guān)鍵幀3)復(fù)制關(guān)鍵幀4)移動關(guān)鍵幀通過教師的講解和演示，使學(xué)生掌握交互動效制作基礎(chǔ)隨堂練習(xí)

（15min）【教師】進(jìn)行分組，提出問題：5人一組，進(jìn)行討論并回答以下問題：（1）“時間軸”面板主要由哪幾部分組成，分別需要注意哪些方面？（2）關(guān)鍵幀的主要操作有哪些，如何操作？【學(xué)生】思考、討論、舉手發(fā)言【教師】與學(xué)生簡單互動，總結(jié)內(nèi)容等【教師】根據(jù)課上教師講解，隨堂鞏固練習(xí)【學(xué)生】完成課上練習(xí)任務(wù)【教師】巡堂輔導(dǎo)，及時解決學(xué)生遇到的問題，總結(jié)本節(jié)課的要點(diǎn)【學(xué)生】聆聽、理解隨堂練習(xí)加深學(xué)生對知識點(diǎn)的記憶，鍛煉學(xué)生的理解和記憶能力第3節(jié)課案例練習(xí)-制作界面動效實(shí)訓(xùn)說明（10min）【教師】介紹項(xiàng)目實(shí)訓(xùn)內(nèi)容，分析任務(wù)：本案例制作界面動效，效果如圖4-23所示。【多媒體】教師展示界面動效圖片，教師分析其最終效果通過實(shí)訓(xùn)說明的方式，引入要講的知識，使學(xué)生了解界面動效的制作思路項(xiàng)目實(shí)訓(xùn)（35min）【教師】分析任務(wù)，并進(jìn)行演示【課堂演示】教師演示如何設(shè)置對話框步驟1在AfterEffects中新建項(xiàng)目，選擇“文件/導(dǎo)入/文件...”菜單項(xiàng)，在彈出的“導(dǎo)入文件”對話框中選擇“素材與實(shí)例/第4章/案例4-2/界面動效素材.psd”，單擊“導(dǎo)入”按鈕，彈出設(shè)置對話框，在其中設(shè)置相關(guān)選項(xiàng)，如圖4-24所示。【課堂演示】教師演示如何在“合成設(shè)置”對話框中修改“持續(xù)時間”步驟2單擊“確定”按鈕，導(dǎo)入PSD素材并自動生成合成。在“項(xiàng)目”面板中右鍵單擊生成的合成，在彈出的快捷菜單中選擇“合成設(shè)置...”，彈出“合成設(shè)置”對話框，在其中設(shè)置合成名稱為“界面動效”，幀速率為25，持續(xù)時間為4秒，并單擊“確定”按鈕完成設(shè)置，如圖4-25所示。步驟3雙擊“項(xiàng)目”面板中的合成，在“合成”窗口顯示合成效果，并在“時間軸”面板中顯示合成中的圖層?！菊n堂演示】教師演示如何給燈籠的“位置”屬性添加關(guān)鍵幀步驟4調(diào)整燈籠在不同關(guān)鍵幀的位置，制作其從底部向上飄的效果。選擇“燈籠”圖層，按快捷鍵“P”顯示其“位置”屬性，將“時間指示器”移到0秒位置，單擊屬性名稱左側(cè)的“秒表”按鈕為該屬性添加關(guān)鍵幀;將“時間指示器”移到2秒位置，單擊“在當(dāng)前時間添加或移除關(guān)鍵幀”按鈕為該屬性添加關(guān)鍵幀;采用同樣方法在3秒處添加關(guān)鍵幀，如圖4-26所示?！菊n堂演示】教師演示燈籠在0秒時的位置信息制作方法與效果步驟5單擊0秒處的關(guān)鍵幀，使該關(guān)鍵幀處于選中狀態(tài)，并確?！皶r間指示器”位于該位置，設(shè)置“位置”屬性值為“2300，7800”，效果如圖4-27所示。使用同樣方法將2秒處的“位置”屬性值設(shè)置為“3500，5000”。步驟6制作小船從左側(cè)移出的效果。選擇“小船”圖層，按快捷鍵“P”顯示其“位置”屬性，在0秒、1秒10幀和2秒20幀處為“位置”屬性添加關(guān)鍵幀，設(shè)置0秒處的屬性值為“-40，7300”，1秒10幀處的屬性值為“1000，7600”。【課堂演示】教師演示“小船”圖層的關(guān)鍵幀如何設(shè)置按快捷鍵“Shift+S”顯示其“縮放”屬性，在0秒、1秒10幀和2秒20幀處為“縮放”屬性添加關(guān)鍵幀，設(shè)置0秒處的屬性值為50%，1秒10幀處的屬性值為80%，如圖4-28所示。【課堂演示】教師演示如何修剪“散光”圖層的時間線入點(diǎn)步驟7修改散光、光效、燈籠亮光的不透明度，使亮光呈現(xiàn)一閃一閃的效果。選擇“散光”圖層，將“時間指示器”移到2秒05幀位置，按下快捷鍵“Alt+[”，將該圖層時間線的入點(diǎn)修剪到當(dāng)前時間，如圖4-29所示。使用同樣方法將“光效”圖層和“燈籠亮光”圖層時間線的入點(diǎn)分別修剪到2秒15幀和2秒10幀處?！菊n堂演示】教師演示3個圖層的關(guān)鍵幀如何設(shè)置步驟8分別選中步驟7中的三個圖層，并按快捷鍵“T”顯示它們的“不透明度”屬性。在2秒05幀、2秒10幀、2秒17幀和3秒05幀處為“散光”圖層的“不透明度”屬性添加關(guān)鍵幀，從左到右設(shè)置其屬性值為0%、50%和0%;在2秒15幀、2秒20幀、3秒和3秒10幀處為“光效”圖層的“不透明度”屬性添加關(guān)鍵幀，設(shè)置屬性值同上;在2秒10幀和3秒處為“燈籠亮光”圖層的“不透明度”屬性添加關(guān)鍵幀，并設(shè)置2秒10幀處的屬性值為0%，如圖4-30所示?！菊n堂演示】教師演示2秒05幀處“標(biāo)題”和“文本”圖層的效果步驟9制作標(biāo)題和文本從底部移出，并進(jìn)行跳動和縮放的效果。同時，選中“標(biāo)題”圖層和“文本”圖層，將“時間指示器”移到2秒05幀處，按下快捷鍵“Alt+[”，將所選圖層時間線的入點(diǎn)修剪到當(dāng)前時間，并在當(dāng)前位置為它們的“位置”屬性添加關(guān)鍵幀，按住快捷鍵“Shift”的同時在“合成”窗口中按下鼠標(biāo)左鍵垂直向下拖動兩段文本，將它們移至界面底部，如圖4-31所示。步驟10選擇“標(biāo)題”圖層的“位置”屬性，在2秒15幀處添加關(guān)鍵幀，并設(shè)置其y值為5856。步驟11選擇“標(biāo)題”圖層的“縮放”屬性，在2秒15幀、3秒和3秒10幀處添加關(guān)鍵幀，并設(shè)置3秒處的屬性值為120%。步驟12選擇“文本”圖層的“位置”屬性，在3秒、3秒06幀、3秒10幀、3秒14幀和3秒16幀處添加關(guān)鍵幀，從左到右設(shè)置屬性的y值為6150、6500、6250、6400和6363。步驟13此時，大致的界面動效就做好了，選擇“合成/預(yù)覽/播放當(dāng)前預(yù)覽”菜單項(xiàng)或按“空格鍵”可預(yù)覽動效，再次按“空格鍵”可停止預(yù)覽動效。步驟14“文本”圖層中的文字可以在圖表編輯器模式下進(jìn)行調(diào)整，使效果看起來更加和諧。選擇“文本”圖層的“位置”屬性，單擊“圖表編輯器”按鈕，進(jìn)入圖表編輯器模式，單擊時間線區(qū)域下方的“選擇圖表類型和選項(xiàng)”按鈕，在下拉列表中選擇“編輯速度圖表”顯示速度圖表曲線。【課堂演示】教師演示如何給關(guān)鍵幀添加“緩動”效果選擇“文本”圖層的“位置”屬性以選中該屬性上的所有關(guān)鍵幀，單擊“緩動”按鈕，添加“緩動”效果，如圖4-32所示。步驟15最后將文件保存?！窘處煛堪才艑W(xué)生完成任務(wù)實(shí)施，沒有掌握操作步驟的學(xué)生可以掃描二維碼（詳見教材）觀看操作視頻再次學(xué)習(xí)【教師】巡堂輔導(dǎo)，及時解決學(xué)生遇到的問題；安排每組做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問題通過項(xiàng)目實(shí)訓(xùn)使學(xué)生掌握界面動效的制作方法，并以學(xué)生為主體，針對學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動其他學(xué)生掌握知識第4節(jié)課蒙版和遮罩互動導(dǎo)入

（5min）【教師】根據(jù)預(yù)習(xí)進(jìn)行討論并回答問題：什么是蒙版？創(chuàng)建蒙版常用的工具有哪些？簡述蒙版屬性面板主要功能?！緦W(xué)生】思考、討論、舉手發(fā)言【教師】與學(xué)生簡單互動，總結(jié)內(nèi)容，引入課程內(nèi)容通過互動導(dǎo)入，引導(dǎo)學(xué)生思考，調(diào)動學(xué)生的主觀能動性傳授新知（40min）【教師】根據(jù)ppt內(nèi)容邊操作邊講解蒙版的相關(guān)知識，學(xué)生跟隨練習(xí)4.4蒙版和遮罩4.4.1認(rèn)識蒙版蒙版的原理，就是透過蒙版中的圖形或輪廓顯示出蒙版下方的內(nèi)容。蒙版依附于圖層，與“變換”屬性組一樣，作為圖層的特殊屬性存在，不是單獨(dú)的圖層，且一個圖層可以包含多個蒙版。【多媒體】教師展示添加圓形蒙版圖片，操作并講解添加蒙版的方法和效果，學(xué)生跟隨練習(xí)【學(xué)生】聆聽、觀察、跟隨操作當(dāng)為某個圖層創(chuàng)建蒙版后，圖層中位于蒙版范圍內(nèi)的區(qū)域會顯示出來，位于蒙版范圍以外的區(qū)域?qū)⒉槐伙@示，如圖4-33所示。因此，蒙版的輪廓形狀和范圍決定了被看到的圖像的形狀和范圍，而從蒙版中看到的內(nèi)容取決于圖層中的內(nèi)容?！窘處煛靠偨Y(jié)蒙版的操作原理【教師】根據(jù)ppt內(nèi)容講解創(chuàng)建蒙版的常用工具4.4.2創(chuàng)建蒙版常用工具使用AfterEffects中的工具可以創(chuàng)建各種形狀的蒙版。1.形狀工具在AfterEffects中，形狀工具包括矩形、圓角矩形、橢圓、多邊形和星形工具。按快捷鍵“Q”可以選擇和循環(huán)切換形狀工具，選擇形狀工具后在“合成”窗口中按下鼠標(biāo)左鍵并拖動可繪制相應(yīng)圖形?！径嗝襟w】教師展示選擇形狀工具后的工具欄圖片，操作并講解不同形狀工具的功能以及不同快捷鍵的不同功能當(dāng)選中圖層為形狀圖層時，選擇形狀工具后，會在工具欄中出現(xiàn)“工具創(chuàng)建形狀”按鈕和“工具創(chuàng)建蒙版”按鈕(如圖4-34所示)，單擊相應(yīng)按鈕并在“合成”窗口中繪制圖形可創(chuàng)建形狀或蒙版;當(dāng)所選圖層不是形狀圖層時，使用形狀工具繪制的圖形會自動轉(zhuǎn)化為當(dāng)前選中圖層的蒙版。使用形狀工具按下鼠標(biāo)左鍵并拖動繪制圖形時，按不同的快捷鍵有不同的功能?！斠娊滩摹緦W(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容講解鋼筆工具的相關(guān)知識2.鋼筆工具在AfterEffects中，鋼筆工具組中包括鋼筆工具，添加、刪除、轉(zhuǎn)換“頂點(diǎn)”工具和蒙版羽化工具，其中鋼筆工具和蒙版羽化工具可以按快捷鍵“G”選中與切換。在AfterEffects中，鋼筆工具的使用方法與AxureRP中鋼筆工具的使用方法相同，且使用鋼筆工具創(chuàng)建蒙版的方法與上述使用形狀工具創(chuàng)建蒙版的方法相同。此外，在繪制時按住快捷鍵“Shift”可以使當(dāng)前頂點(diǎn)的控制手柄按45°的倍數(shù)改變方向?！径嗝襟w】教師展示“RotoBezier”復(fù)選框圖片，操作并講解如何創(chuàng)建不包含控制手柄的形狀選擇鋼筆工具，在繪制之前勾選工具欄中的“RotoBezier”復(fù)選框(如圖4-35所示)，可創(chuàng)建不包含控制手柄的形狀，此時形狀頂點(diǎn)的手柄方向和路徑的彎度是通過自動計(jì)算得出的?！緦W(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容講解蒙版屬性的相關(guān)知識4.4.3蒙版屬性【多媒體】教師展示蒙版屬性圖片，操作并講解蒙版屬性的不同功能當(dāng)創(chuàng)建蒙版后，在“時間軸”面板中單擊蒙版名稱左側(cè)的“>”按鈕，可展開蒙版屬性，此時“>”按鈕變?yōu)椤啊怠卑粹o，如圖4-36所示。通過設(shè)置蒙版屬性可以對圖層蒙版效果進(jìn)行設(shè)置，并且可以為蒙版屬性添加關(guān)鍵幀制作出形式多樣的蒙版動效。1.蒙版路徑蒙版路徑用于控制蒙版的圖形形狀和范圍。為方便識別，在“合成”窗口中繪制的蒙版路徑是有顏色的，并且在“時間軸”面板中該蒙版名稱左側(cè)會顯示與蒙版路徑相同的顏色?！径嗝襟w】教師展示“蒙版形狀“對話框圖片，操作并演示如何改變蒙版的形狀和大小。單擊“蒙版路徑”屬性右側(cè)的“形狀...”文字，彈出“蒙版形狀”對話框，在其中可以改變蒙版路徑的形狀與大小，如圖4-37所示;在工具欄中選擇選取工具，單擊選擇圖層控制區(qū)域的圖層名稱，可以在“合成”窗口中按下鼠標(biāo)左鍵并拖動蒙版路徑的“頂點(diǎn)”改變蒙版路徑的形狀;單擊選擇蒙版名稱，可以在“合成”窗口中按下鼠標(biāo)左鍵并拖動蒙版路徑，改變蒙版路徑的位置;雙擊蒙版形狀的邊框顯示其變換框，按下鼠標(biāo)左鍵拖動變換框可以改變蒙版路徑的形狀和大小?！緦W(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容講解蒙版羽化的相關(guān)知識2.蒙版羽化使用蒙版羽化可以實(shí)現(xiàn)更為自然的融合效果，在默認(rèn)情況下，羽化寬度跨蒙版邊緣，一半在內(nèi)一半在外。選擇添加蒙版的圖層后按快捷鍵“F”，可顯示已添加蒙版圖層的“蒙版羽化”屬性;修改“蒙版羽化”右側(cè)的藍(lán)色數(shù)字可以按比例設(shè)置羽化值;單擊“約束比例”按鈕，可以鎖定或解除水平和垂直方向的約束比例，分別設(shè)置水平和垂直方向的羽化值。【多媒體】教師展示羽化效果對比圖圖片，操作并講解如何使用羽化功能以及羽化后的效果對比。未設(shè)置羽化效果和設(shè)置了羽化效果的對比如圖4-38所示?！緦W(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容講解新知3.蒙版不透明度【多媒體】教師展示蒙版不透明度效果圖片，操作并講解如何設(shè)置蒙版不透明度蒙版不透明度用于設(shè)置蒙版的不透明度，設(shè)置不透明度為50%的蒙版效果如圖4-39所示。4.蒙版擴(kuò)展【多媒體】教師展示蒙版擴(kuò)展和收縮效果圖片，操作并講解如何進(jìn)行蒙版擴(kuò)展“蒙版擴(kuò)展”屬性用于擴(kuò)展或收縮受蒙版影響的區(qū)域，實(shí)際指的就是蒙版區(qū)域與蒙版路徑的距離，是一個偏移量，當(dāng)數(shù)值為“正”時，蒙版區(qū)域擴(kuò)展;數(shù)值為“負(fù)”時，蒙版區(qū)域收縮，如圖4-40所示。5.反轉(zhuǎn)【多媒體】教師展示蒙版“反轉(zhuǎn)“效果圖片，操作并講解如何設(shè)置蒙版“反轉(zhuǎn)“效果選擇“反轉(zhuǎn)”復(fù)選框后，可以反轉(zhuǎn)當(dāng)前蒙版的形狀和路徑區(qū)域，效果如圖4-41所示。6.蒙版模式【多媒體】教師展示選擇蒙版模式圖片，操作并講解如何選擇蒙版模式以及各個蒙版模式的功能和應(yīng)用效果蒙版模式用于控制圖層中的蒙版與其上方蒙版之間的交互方式，僅作用于同一圖層上的不同蒙版之間。在默認(rèn)情況下，所有蒙版均設(shè)置為“相加”，此外，還包括“無”“相減”“交集”“變亮”“變暗”“差值”，可以從“時間軸”面板中的蒙版名稱右側(cè)的下拉列表中選擇蒙版模式，如圖4-42所示。下面簡述各個蒙版模式的功能和應(yīng)用效果?！径嗝襟w】教師展示無圖片，操作并進(jìn)行講解(1)無:蒙版對圖層沒有直接影響，如圖4-43所示。對蒙版添加“填充”“描邊”等效果時可以選擇該模式?！径嗝襟w】教師展示相加圖片，操作并進(jìn)行講解(2)相加:與上方蒙版疊加后的效果，如圖4-44所示。【多媒體】教師展示相減圖片，操作并進(jìn)行講解(3)相減:從上方蒙版的效果中減去該蒙版的效果，如圖4-45所示。【多媒體】教師展示交集圖片，操作并進(jìn)行講解(4)交集:僅在與上方蒙版的相交區(qū)域中產(chǎn)生蒙版效果，如圖4-46所示。(5)變亮、變暗和差值模式只對蒙版的不透明度產(chǎn)生影響?！緦W(xué)生】聆聽、觀察、跟隨操作通過教師的講解和操作，使學(xué)生掌握蒙版和遮罩的相關(guān)知識第5節(jié)課項(xiàng)目實(shí)訓(xùn)—制作蒙版位移動效實(shí)訓(xùn)說明（10min）【教師】介紹項(xiàng)目實(shí)訓(xùn)內(nèi)容，分析任務(wù)本案例制作蒙版位移動效，效果如圖4-47所示。該動效是通過為文字添加蒙版并為“蒙版路徑”屬性和圖層的“位置”屬性添加關(guān)鍵幀實(shí)現(xiàn)的?！菊n堂演示】教師展示蒙版位移動效圖片，教師分析其最終效果通過實(shí)訓(xùn)說明的方式，引入要講的知識，使學(xué)生了解蒙版位移動效的制作思路項(xiàng)目實(shí)訓(xùn)（35min）【教師】分析任務(wù)，并進(jìn)行演示【課堂演示】教師演示“導(dǎo)入文件”對話框制作方法步驟1在AfterEffects中新建項(xiàng)目，單擊“合成”窗口中的“從素材新建合成”按鈕，彈出“導(dǎo)入文件”對話框，先在其中選擇“素材與實(shí)例/第4章/案例4-3/啟動頁.jpg”;然后單擊“導(dǎo)入”按鈕，導(dǎo)入素材并自動創(chuàng)建合成，如圖4-48所示。【課堂演示】教師演示如何新建文本圖層步驟2在工具欄中選擇直排文字工具，在“合成”窗口中單擊，輸入“恭賀新春”，此時在“時間軸”面板中會新建文本圖層，如圖4-49所示?！菊n堂演示】教師演示如何進(jìn)行文本設(shè)置步驟3選中文字，在“字符”面板中設(shè)置字體為“文鼎CS大宋”，字體大小為190像素，顏色為黃色“#FFDD88”，字符間距為112，水平縮放為90%，如圖4-50所示。選擇文本圖層，先按快捷鍵“Ctrl+Alt+Home”使文本的錨點(diǎn)位于其中心位置，然后設(shè)置文本圖層“變換”屬性組中的“位置”屬性值為“272，548”?！菊n堂演示】教師演示如何繪制矩形蒙版步驟4在工具欄中選擇矩形工具，確保文本圖層為選中狀態(tài)，在“合成”窗口的文本框左上角按下鼠標(biāo)左鍵并向右下方拖動繪制矩形蒙版，使矩形蒙版完全遮蓋文本，如圖4-51所示。步驟5先在“時間軸”面板中單擊文本圖層左側(cè)的“〉”按鈕折疊圖層屬性，然后依次按快捷鍵“M”和“Shift+P”，同時顯示圖層的“蒙版路徑”屬性和“位置”屬性，將“時間指示器”移到1秒15幀位置，依次單擊這兩個屬性名稱左側(cè)的“秒表”按鈕添加關(guān)鍵幀。【課堂演示】教師演示如何拖動蒙版路徑步驟6將“時間指示器”移到15幀位置，為“蒙版路徑”屬性和“位置”屬性添加關(guān)鍵幀，設(shè)置“位置”屬性的x值為92，在工具欄中選擇選取工具，在“合成”窗口中雙擊蒙版路徑，然后在文本框左側(cè)邊框中心按下鼠標(biāo)左鍵向右拖動蒙版路徑，直至文字完全消失，如圖4-52所示?！菊n堂演示】教師演示如何為所選關(guān)鍵幀添加“緩動”效果步驟7同時選中1秒15幀處的兩個關(guān)鍵幀，單擊“圖表編輯器”按鈕，進(jìn)入圖表編輯器模式，單擊時間線區(qū)域下方的“緩動”按鈕，為其添加“緩動”效果，如圖4-53所示。步驟8最后將文件保存?！窘處煛堪才艑W(xué)生完成任務(wù)實(shí)施，沒有掌握操作步驟的學(xué)生可以掃描二維碼（詳見教材）觀看操作視頻再次學(xué)習(xí)【教師】巡堂輔導(dǎo)，及時解決學(xué)生遇到的問題；安排每組做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問題通過項(xiàng)目實(shí)訓(xùn)使學(xué)生掌握蒙版位移動效的制作方法，并以學(xué)生為主體，針對學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動其他學(xué)生掌握知識第6節(jié)課軌道遮罩傳授新知（10min）【教師】根據(jù)ppt內(nèi)容邊操作邊講解初識軌道遮罩，學(xué)生跟隨練習(xí)4.4.4軌道遮罩軌道遮罩可以使一個圖層的內(nèi)容透過另一個圖層定義的形狀顯現(xiàn)出來，是一個單獨(dú)的圖層，且只能應(yīng)用于下方圖層，如果想應(yīng)用于多個圖層，需要將多個圖層進(jìn)行預(yù)合成。知識鏈接如果要對合成中已有的圖層進(jìn)行分組，可以對這些圖層進(jìn)行預(yù)合成。進(jìn)行預(yù)合成的圖層會被放置在新的合成中，并且該預(yù)合成將替換原始合成中的圖層列于“時間軸”面板中。可以將預(yù)合成作為單個圖層在其他合成中使用，并對其進(jìn)行各種操作?！菊n堂演示】教師展示“預(yù)合成”對話框圖片，操作并講解預(yù)合成對話框的相關(guān)功能和設(shè)置在“時間軸”面板中選擇所需圖層，選擇“圖層/預(yù)合成...”菜單項(xiàng)或者按快捷鍵“Ctrl+Shift+C”，在彈出的“預(yù)合成”對話框中輸入合成名稱，并進(jìn)行相關(guān)設(shè)置，然后單擊“確定”按鈕即可將所選圖層合并為預(yù)合成，如圖4-54所示?！窘處煛恐攸c(diǎn)講解制作軌道遮罩需要執(zhí)行的操作：(1)首先確保在“時間軸”面板中的“模式”列可見。如不可見，可在“時間軸”面板中右鍵單擊列的標(biāo)題欄，并在彈出的快捷菜單中選擇“列數(shù)/模式”顯示該列。(2)在“時間軸”面板中拖動圖層，確保作為軌道遮罩的圖層位于要顯示內(nèi)容的圖層上方?！菊n堂演示】教師展示“TrkMat”下拉列表圖片，操作并講解“TrkMat”下拉列表中的每個選項(xiàng)(3)在下方圖層的“TrkMat”下拉列表中選擇任一選項(xiàng)，定義遮罩類型，如圖4-55所示。其中，Alpha遮罩，是利用素材Alpha通道創(chuàng)建軌道遮罩;Alpha反轉(zhuǎn)遮罩，是反轉(zhuǎn)素材的Alpha通道創(chuàng)建軌道遮罩;亮度遮罩，是利用素材的亮度創(chuàng)建軌道遮罩;亮度反轉(zhuǎn)遮罩，是反轉(zhuǎn)素材的亮度通道創(chuàng)建軌道遮罩。(4)此時，軟件會將上方的圖層自動轉(zhuǎn)換為軌道遮罩，并在軌道遮罩圖層名稱左邊顯示圖標(biāo)。通過教師的講解和演示，使學(xué)生掌握軌道遮罩的相關(guān)知識實(shí)訓(xùn)說明（10min）【教師】介紹項(xiàng)目實(shí)訓(xùn)內(nèi)容，分析任務(wù)本案例制作文字遮罩動效，效果如圖4-56所示。該動效是通過設(shè)置圖層的“TrkMat”模式來制作軌道遮罩而實(shí)現(xiàn)的。通過實(shí)訓(xùn)說明的方式，引入要講的知識，使學(xué)生了解文字遮罩動效的制作思路項(xiàng)目實(shí)訓(xùn)（25min）【教師】分析任務(wù)，并進(jìn)行演示【課堂演示】教師演示如何導(dǎo)入文件步驟1在AfterEffects中新建項(xiàng)目，單擊“合成”窗口中的“從素材新建合成”按鈕，彈出“導(dǎo)入文件”對話框，在其中先選擇“素材與實(shí)例/第4章/案例4-4/4-4-1.jpg”，然后單擊“導(dǎo)入”按鈕，導(dǎo)入素材并自動創(chuàng)建合成，如圖4-57所示。【課堂演示】教師演示如何新建文本圖層步驟2在工具欄中選擇橫排文字工具，在“合成”窗口中的頭像下方單擊，輸入“中國航天夢”，此時在“時間軸”面板中會新建文本圖層，如圖4-58所示?！菊n堂演示】教師演示文本如何設(shè)置步驟3選中文字，在“字符”面板中設(shè)置字體為“Adobe黑體Std”，字體大小為550像素，顏色為白色，并將其放置于合適位置，如圖4-59所示?！菊n堂演示】教師演示如何設(shè)置漸變色步驟4在不選擇任何圖層的情況下，在工具欄中選擇矩形工具，先按住快捷鍵“Alt”的同時重復(fù)單擊填充色塊，使填充類型變?yōu)榫€性漸變，之后再次單擊填充色塊，在彈出的“漸變編輯器”對話框中的漸變條上方和下方的中間分別單擊，添加一個不透明度色標(biāo)和一個色標(biāo);然后設(shè)置3個色標(biāo)的顏色均為藍(lán)色“#6181BC”，中間不透明度色標(biāo)的不透明度為100%，兩側(cè)不透明度色標(biāo)的不透明度為0%;最后單擊“確定”按鈕，如圖4-60所示。使用同樣方法設(shè)置描邊顏色為無。【課堂演示】教師演示如何繪制矩形步驟5在文本左上角按下鼠標(biāo)左鍵并向右拖動繪制矩形，使矩形完全遮蓋文本，如圖4-61所示?！菊n堂演示】教師演示如何調(diào)整漸變效果按快捷鍵“V”選擇選取工具，此時剛繪制的矩形中間會顯示漸變的起點(diǎn)和終點(diǎn)，分別選中起點(diǎn)和終點(diǎn)，按下鼠標(biāo)左鍵并分別向左上方和右下方拖動改變漸變的起止點(diǎn)，如圖4-62所示?！菊n堂演示】教師演示如何創(chuàng)建關(guān)鍵幀并移動矩形步驟6選中形狀圖層，按快捷鍵“P”顯示其“位置”屬性，在0秒的位置為該屬性添加關(guān)鍵幀，在“合成”窗口中按快捷鍵“Shift”的同時按下鼠標(biāo)左鍵水平向左拖動矩形到左側(cè)畫面外，如圖4-63所示?！菊n堂演示】教師演示如何向右拖動矩形步驟7將“時間指示器”移動到2秒位置，為“位置”屬性添加關(guān)鍵幀，并在“合成”窗口中按住快捷鍵“Shift”的同時按下鼠標(biāo)左鍵向右拖動矩形到右側(cè)畫面外，如圖4-64所示。【課堂演示】教師演示“時間軸”面板制作方法步驟8在“時間軸”面板中，按下鼠標(biāo)左鍵向下拖動形狀圖層到文本圖層下方，設(shè)置形狀圖層的“TrkMat”模式為“Alpha遮罩‘...’”，使文本圖層中的文字輪廓成為形狀圖層的遮罩。選中文本圖層，先按快捷鍵“Ctrl+D”復(fù)制一個圖層副本;然后拖動復(fù)制的圖層到形狀圖層下方，并單擊圖層左側(cè)的“視頻”按鈕顯示圖層中的文本內(nèi)容，如圖4-65所示。步驟9在“項(xiàng)目”面板中選擇“4-4-1”合成，將“時間指示器”移到2秒位置，按快捷鍵“N”使工作區(qū)的結(jié)束時間移至當(dāng)前時間，選擇“合成/將合成裁剪到工作區(qū)”菜單項(xiàng)，將所選合成的持續(xù)時間裁剪成2秒01幀?！菊n堂演示】教師演示如何設(shè)置工作區(qū)步驟10單擊“時間軸”面板中的“圖表編輯器”按鈕，進(jìn)入圖表編輯器模式，選擇形狀圖層“變換”屬性組中的“位置”屬性以選中該屬性中的所有關(guān)鍵幀，單擊“緩動”按鈕添加“緩動”效果，如圖4-67所示。步驟11最后將文件保存?！窘處煛堪才艑W(xué)生完成任務(wù)實(shí)施，沒有掌握操作步驟的學(xué)生可以掃描二維碼（詳見教材）觀看操作視頻再次學(xué)習(xí)【教師】巡堂輔導(dǎo)，及時解決學(xué)生遇到的問題；安排每組做得最快、最好的學(xué)生輔導(dǎo)其他學(xué)生進(jìn)行操作，并解答其遇到的問題通過項(xiàng)目實(shí)訓(xùn)使學(xué)生掌握文字遮罩動效的制作方法，并以學(xué)生為主體，針對學(xué)生接受能力的差異性，讓優(yōu)秀學(xué)生帶動其他學(xué)生掌握知識第7節(jié)課交互動效的預(yù)覽、渲染和導(dǎo)出互動導(dǎo)入

（5min）【教師】根據(jù)預(yù)習(xí)提出問題：交互動效的主要功能有哪些？【學(xué)生】思考、討論、舉手發(fā)言【教師】與學(xué)生簡單互動，總結(jié)內(nèi)容，引入課程內(nèi)容通過互動導(dǎo)入，引導(dǎo)學(xué)生思考，調(diào)動學(xué)生的主觀能動性傳授新知（35min）【教師】根據(jù)ppt內(nèi)容邊操作邊講解預(yù)覽動效的相關(guān)知識，學(xué)生跟隨練習(xí)4.5.1預(yù)覽動效【多媒體】教師展示“預(yù)覽”面板圖片，操作并講解如何打開預(yù)覽圖片使用預(yù)覽功能可以隨時查看動效。單擊“預(yù)覽”面板中的?按鈕(如圖4-68所示)，按“空格鍵”，或選擇“合成/預(yù)覽/播放當(dāng)前預(yù)覽”菜單項(xiàng)，均可預(yù)覽動效。單擊“預(yù)覽”面板中的■按鈕，再次按“空格鍵”，或按快捷鍵“Esc”均可退出預(yù)覽模式。【學(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容邊操作邊講解渲染和導(dǎo)出動效的相關(guān)知識，學(xué)生跟隨練習(xí)4.5.2渲染和導(dǎo)出動效1.使用“渲染隊(duì)列”面板渲染和導(dǎo)出動效在AfterEffects中，主要通過“渲染隊(duì)列”面板渲染和導(dǎo)出動效。使用“渲染隊(duì)列”面板可以成批渲染多個項(xiàng)目?！径嗝襟w】教師展示“渲染列隊(duì)”面板圖片，操作并講解渲染列隊(duì)面板的各項(xiàng)功能和參數(shù)設(shè)置......詳見教材上面介紹了采用默認(rèn)設(shè)置輸出動效的方法，如果想要設(shè)置渲染動效的幀速率、分辨率等，可在“渲染隊(duì)列”面板中進(jìn)行設(shè)置。(1)渲染設(shè)置【多媒體】教師展示“輸出模塊設(shè)置”對話框圖片，操作并講解輸出模塊設(shè)置對話框的各項(xiàng)功能和參數(shù)(2)輸出模塊(3)輸出到(4)渲染項(xiàng)狀態(tài)1）未加入隊(duì)列:表示渲染項(xiàng)已添加到“渲染隊(duì)列”面板中，但不能渲染?！径嗝襟w】教師展示將渲染項(xiàng)狀態(tài)設(shè)置為已加入隊(duì)列圖片，并進(jìn)行講解2）已加入隊(duì)列:表示渲染項(xiàng)可以渲染。勾選相應(yīng)渲染項(xiàng)“渲染”列的復(fù)選框，可使渲染項(xiàng)的狀態(tài)由未加入隊(duì)列變?yōu)橐鸭尤腙?duì)列，如圖4-71所示。3）完成:指渲染項(xiàng)已完成渲染。【學(xué)生】聆聽、觀察、跟隨操作【教師】根據(jù)ppt內(nèi)容邊操作邊講解使用Photoshop將動效輸出為GIF文件的相關(guān)知識，學(xué)生跟隨練習(xí)2.使用Photoshop將動效輸出為GIF文件GIF格式的動畫文件支持透明效果，占用空間小，不會損壞圖片和視頻質(zhì)量，還可以循環(huán)播放動畫，并且大多數(shù)網(wǎng)絡(luò)瀏覽器和圖像瀏覽軟件都支持該文件格式，方便查看動效，也有利于在網(wǎng)絡(luò)中進(jìn)行傳播與分享。在AfterEffects中無法直接導(dǎo)出GIF格式的動畫文件，需要將該軟件中導(dǎo)出的其他格式的視頻文件導(dǎo)入Photoshop中，然后再輸出為GIF格式。【多媒體】教師展示“存儲為web所用格式”對話框圖片，操作并講解如何使用Photoshop將動效輸出為GIF文件......詳見教材通過教師的講解和演示，使學(xué)生掌握預(yù)覽動效的相關(guān)知識點(diǎn)課堂小結(jié)

（5min）【教師】簡要總結(jié)本節(jié)課的要點(diǎn)本章介紹了AfterEffects的基礎(chǔ)知識，包括軟件的工作界面、基本操作、素材的導(dǎo)入與合成、交互動效的渲染和導(dǎo)出。希望通過本章的學(xué)習(xí)，讀者可以了解制作交互動效和動畫的原理，并能使用AfterEffects制作出簡單的交互動效與動畫效果?！緦W(xué)生】總結(jié)回顧知識點(diǎn)總結(jié)知識點(diǎn)，鞏固學(xué)生對流程圖相關(guān)知識的印象第8節(jié)課項(xiàng)目實(shí)訓(xùn)—制作波形充電效果佳作賞析（10min）【教師】講