項(xiàng)目3添加文本、聲音和視頻Animate動(dòng)畫(huà)制作立體化教程（Animate2021）（微課版）新形態(tài)立體化精品系列教材2任務(wù)3.1制作“百億補(bǔ)貼”動(dòng)態(tài)膠囊任務(wù)3.2為購(gòu)物節(jié)廣告動(dòng)畫(huà)添加聲音內(nèi)容導(dǎo)航綜合實(shí)戰(zhàn)任務(wù)3.3為中秋節(jié)電子賀卡添加視頻任務(wù)3.1?制作“百億補(bǔ)貼”動(dòng)態(tài)膠囊Banner米拉翻看了客戶資料，并上網(wǎng)搜集到一些同題材的動(dòng)畫(huà)作品，發(fā)現(xiàn)動(dòng)態(tài)膠囊Banner的視覺(jué)效果常由圖形和文本組成。圖形的動(dòng)畫(huà)形式豐富，但大多是為文本的展現(xiàn)做鋪墊，將觀眾的視線引導(dǎo)到文本上，突出文本。因此米拉決定著重設(shè)計(jì)動(dòng)態(tài)膠囊Banner的文本效果，使其信息展現(xiàn)直觀，視覺(jué)效果美觀。【任務(wù)描述】任務(wù)背景膠囊Banner是一種常見(jiàn)的橫幅廣告形式，其通常表現(xiàn)為一個(gè)橫向矩形的橫幅，并且兩側(cè)通常為圓弧形，整體形狀看起來(lái)像膠囊。某電商網(wǎng)站準(zhǔn)備舉辦“百億補(bǔ)貼”促銷活動(dòng)，消費(fèi)者每消費(fèi)滿100元可領(lǐng)35元消費(fèi)紅包。為擴(kuò)大宣傳力度，現(xiàn)需要設(shè)計(jì)師制作一個(gè)動(dòng)態(tài)膠囊Banner放置在電商網(wǎng)站和社交媒體平臺(tái)上。任務(wù)目標(biāo)①

制作尺寸為900像素×252像素，時(shí)長(zhǎng)為3s，平臺(tái)類型為HTML5Canvas的動(dòng)畫(huà)文件。②

使用文本工具添加文本，并按照文本信息的重要程度依次設(shè)計(jì)視覺(jué)效果，使信息層級(jí)明確。③

膠囊Banner動(dòng)態(tài)效果流暢，文本突出，易于識(shí)別。知識(shí)要點(diǎn)文本工具、墨水瓶工具、顏料桶工具、“顏色”面板。【任務(wù)描述】本任務(wù)的參考效果如上圖所示【知識(shí)準(zhǔn)備】1．文本工具●

輸入點(diǎn)文本：選擇文本工具

，直接在舞臺(tái)上單擊以插入文本定位點(diǎn)，此時(shí)出現(xiàn)一個(gè)文本框，輸入的文本將出現(xiàn)在文本定位點(diǎn)左側(cè)，該文本框會(huì)隨輸入文本的增加而自動(dòng)變寬如下圖所示?！?/p>

輸入段落文本：選擇文本工具

，在舞臺(tái)中按住鼠標(biāo)左鍵并拖曳，也會(huì)出現(xiàn)一個(gè)文本框，確定文本框的寬度后，輸入文本，當(dāng)輸入的文本超過(guò)文本框的寬度時(shí)，文本會(huì)自動(dòng)進(jìn)行換行，如上圖所示?！局R(shí)準(zhǔn)備】2．文本工具的“屬性”面板（1）靜態(tài)文本模式的“屬性”面板靜態(tài)文本模式的“屬性”面板中的參數(shù)如右圖所示。（2）動(dòng)態(tài)文本模式的“屬性”面板動(dòng)態(tài)文本模式下“屬性”面板中的參數(shù)與靜態(tài)文本模式大致相同，如右圖所示?！局R(shí)準(zhǔn)備】2．文本工具的“屬性”面板（3）輸入文本模式的“屬性”面板輸入文本模式下“屬性”面板中的參數(shù)與動(dòng)態(tài)文本模式幾乎相同，只是“行為”下拉列表中會(huì)新增“密碼”選項(xiàng)，選擇該選項(xiàng)后，選擇已輸入的文本，或者新輸入文本，會(huì)形成加密效果，如下圖所示?！局R(shí)準(zhǔn)備】3．變形文本變形文本是指為文本制作傾斜、旋轉(zhuǎn)、縮放、扭曲等變形效果，與變形圖形有異曲同工之處。當(dāng)文本的字?jǐn)?shù)超過(guò)一個(gè)時(shí)，變形還可以分為整體變形和局部變形。如下圖所示。【知識(shí)準(zhǔn)備】4．填充與描邊文本（1）填充文本若需要為文本填充線性漸變、徑向漸變、位圖，需要先將文本分離為填充圖形，然后使用“顏色”面板設(shè)置填充類型，再使用顏料桶工具單擊文本，如下圖所示。（2）描邊文本在Animate中，文本是沒(méi)有線條屬性的，若要為文本添加描邊，需要先將文本分離為填充圖形，然后使用墨水瓶工具

單擊文本的邊緣，為其賦予線條屬性，即描邊，如上圖所示。【任務(wù)實(shí)施】膠囊Banner中的裝飾圖形多位于兩側(cè)，中間區(qū)域比較空，于是米拉便想在該區(qū)域中依次輸入活動(dòng)名稱文本、活動(dòng)條件文本和活動(dòng)優(yōu)惠文本，并適當(dāng)布局文本，具體操作如下。1．輸入文本01設(shè)置文本工具參數(shù)02輸入活動(dòng)名稱文本03輸入活動(dòng)優(yōu)惠文本【任務(wù)實(shí)施】雖然文本已經(jīng)添加完畢，但米拉發(fā)現(xiàn)由于文本的字體、大小、間距等屬性都一致，導(dǎo)致文本信息層級(jí)不清晰，于是她決定通過(guò)編輯文本的間距、大小等屬性來(lái)劃分文本信息層級(jí)，具體操作如下。2．編輯文本的屬性01調(diào)整活動(dòng)條件文本的大小和位置02調(diào)整活動(dòng)優(yōu)惠文本的大小和間距【任務(wù)實(shí)施】通過(guò)編輯文本屬性，文本在視覺(jué)上已有主次之分，米拉覺(jué)得還可以通過(guò)添加色彩來(lái)突出關(guān)鍵文本，同時(shí)豐富視覺(jué)效果。經(jīng)過(guò)思考，米拉打算為活動(dòng)名稱文本和活動(dòng)優(yōu)惠文本制作漸變顏色，由于活動(dòng)條件文本字號(hào)較小，可為其添加描邊來(lái)進(jìn)行強(qiáng)調(diào)，具體操作如下。3．制作漸變和描邊文本01分離活動(dòng)名稱文本02活動(dòng)名稱文本的漸變效果03分離活動(dòng)優(yōu)惠文本04調(diào)整漸變文本的漸變方向05分離活動(dòng)條件文本06為文本添加描邊【任務(wù)實(shí)施】為了強(qiáng)調(diào)“百億補(bǔ)貼”的活動(dòng)主題，米拉打算適當(dāng)變形活動(dòng)名稱文本，增加活潑感，使其在視覺(jué)上與其他兩個(gè)文本有所區(qū)別，具體操作如下。4．制作變形文本01拖曳錨點(diǎn)02變形文本效果03預(yù)覽“百億補(bǔ)貼”動(dòng)態(tài)膠囊Banner動(dòng)畫(huà)效果15任務(wù)3.1制作“百億補(bǔ)貼”動(dòng)態(tài)膠囊任務(wù)3.2為購(gòu)物節(jié)廣告動(dòng)畫(huà)添加聲音內(nèi)容導(dǎo)航綜合實(shí)戰(zhàn)任務(wù)3.3為中秋節(jié)電子賀卡添加視頻任務(wù)3.2?為購(gòu)物節(jié)廣告動(dòng)畫(huà)添加聲音同事將制作的購(gòu)物節(jié)廣告動(dòng)畫(huà)交給客戶后，客戶要求為該動(dòng)畫(huà)添加聲音，以豐富動(dòng)畫(huà)的聽(tīng)覺(jué)效果。由于負(fù)責(zé)該任務(wù)的同事正在出差，老洪便交由米拉來(lái)添加聲音?！救蝿?wù)描述】任務(wù)背景臨近中秋節(jié)，萃易購(gòu)物中心打算趁此機(jī)會(huì)舉辦購(gòu)物節(jié)，以慶賀雙節(jié)為宣傳契機(jī)進(jìn)行促銷活動(dòng)。為了讓新老顧客有新鮮感，打算采用動(dòng)畫(huà)的形式制作廣告，并投放在購(gòu)物中心和媒體平臺(tái)。該購(gòu)物中心提供了一段聲音素材，需要設(shè)計(jì)師將其添加到動(dòng)畫(huà)中。任務(wù)目標(biāo)①

為動(dòng)畫(huà)文件添加4s的聲音，內(nèi)容和音量合適。②

為聲音添加淡入、淡出效果，質(zhì)量較佳，能帶給顧客舒適的聽(tīng)覺(jué)感受。知識(shí)要點(diǎn)“導(dǎo)入到庫(kù)”命令、“編輯聲音封套”按鈕、“聲音屬性”對(duì)話框?！救蝿?wù)描述】本任務(wù)的參考效果如上圖所示【知識(shí)準(zhǔn)備】1．聲音的格式●WAV（*.wav）

格

式。WAV格

式

是

微

軟

和IBM（InternationalBusinessMachinesCorporation，國(guó)際商業(yè)機(jī)器公司）公司共同開(kāi)發(fā)的計(jì)算機(jī)端標(biāo)準(zhǔn)聲音格式，這種聲音格式直接保存對(duì)聲音波形的采樣數(shù)據(jù)?！馦P3（*.mp3）格式。MP3格式是一種壓縮過(guò)的聲音格式。相比WAV格式，這種格式占用磁盤(pán)空間更小，通常5min左右的歌曲只需占用5～10MB的磁盤(pán)空間，這是因?yàn)樗谋忍芈手挥?2～320kbit/s（千比特/秒）?！局R(shí)準(zhǔn)備】2．添加聲音導(dǎo)入完成后，打開(kāi)“庫(kù)”面板，選擇該聲音文件，可在預(yù)覽框中查看聲音的波形，預(yù)覽框右上角將出現(xiàn)“播放”按鈕

和“停止”按鈕

，如右圖所示。添加聲音的具體操作方法：在“庫(kù)”面板中選擇所需的聲音并將其拖曳到舞臺(tái)中，該聲音將自動(dòng)添加到“時(shí)間軸”面板中位于頂部的圖層（應(yīng)處于未鎖定狀態(tài)）中，并且顯示聲音的波形，如右圖所示?！局R(shí)準(zhǔn)備】3．聲音的表現(xiàn)方式（1）事件聲音事件聲音由動(dòng)畫(huà)中發(fā)生的動(dòng)作觸發(fā)。例如，單擊某個(gè)按鈕，或者播放到某個(gè)設(shè)置了聲音的關(guān)鍵幀處時(shí)，開(kāi)始播放聲音文件。（2）流式聲音流式聲音隨動(dòng)畫(huà)的播放而載入，通常與動(dòng)畫(huà)內(nèi)容同步播放。在使用流式聲音時(shí)，還需要注意以下要點(diǎn)。●流式聲音的時(shí)長(zhǎng)較長(zhǎng)，只下載很小一部分的聲音文件后就可以順利播放?！窳魇铰曇糁粫?huì)在它所在的幀中播放，沒(méi)有播放到該幀，或已過(guò)該幀，就會(huì)停止播放?！局R(shí)準(zhǔn)備】4．編輯聲音若添加的聲音不符合心理預(yù)期，可以將其替換或刪除，還可以通過(guò)設(shè)置播放效果、聲音同步方式、播放次數(shù)等操作來(lái)編輯聲音。（3）設(shè)置聲音同步方式（5）調(diào)整聲音的持續(xù)時(shí)間和音量（4）設(shè)置播放次數(shù)（6）設(shè)置聲音屬性（1）替換與刪除聲音（2）設(shè)置播放效果【任務(wù)實(shí)施】米拉聆聽(tīng)客戶提供的聲音素材后，發(fā)現(xiàn)該素材由開(kāi)場(chǎng)音效和廣告語(yǔ)組成，但開(kāi)場(chǎng)音效與畫(huà)面不太相配，經(jīng)過(guò)溝通后，客戶讓米拉自行替換開(kāi)場(chǎng)音效，于是米拉準(zhǔn)備將自己搜集的聲音素材和客戶提供的聲音素材都添加到動(dòng)畫(huà)文件中，以便進(jìn)行替換，具體操作如下。1．添加背景聲音02查看導(dǎo)入的文件01導(dǎo)入背景聲音03添加背景聲音的效果【任務(wù)實(shí)施】米拉預(yù)覽動(dòng)畫(huà)后，發(fā)現(xiàn)“聲音素材.wav”文件中的廣告語(yǔ)并未完全播放，于是她準(zhǔn)備通過(guò)調(diào)整聲音持續(xù)時(shí)間的方式刪除開(kāi)場(chǎng)音效，使廣告語(yǔ)能夠完整播放，同時(shí)降低音量，使其與“角色登場(chǎng).wav”文件的音量相適配，具體操作如下。2．調(diào)整背景聲音的持續(xù)時(shí)間和音量02調(diào)整聲音的音量01調(diào)整聲音的持續(xù)時(shí)間03剪輯聲音并調(diào)整音量后的效果【任務(wù)實(shí)施】目前，由于圖層中的聲音位置重疊，導(dǎo)致兩個(gè)聲音同時(shí)播放，于是米拉準(zhǔn)備調(diào)整聲音的幀位置，并設(shè)置聲音的播放效果和屬性，使聲音效果更加和諧，具體操作如下。3．設(shè)置聲音的淡入、淡出效果和屬性01設(shè)置聲音素材文件的淡出效果02設(shè)置聲音素材文件的屬性03最終效果26任務(wù)3.1制作“百億補(bǔ)貼”動(dòng)態(tài)膠囊任務(wù)3.2為購(gòu)物節(jié)廣告動(dòng)畫(huà)添加聲音內(nèi)容導(dǎo)航綜合實(shí)戰(zhàn)任務(wù)3.3為中秋節(jié)電子賀卡添加視頻任務(wù)3.3?為中秋節(jié)電子賀卡添加視頻中秋節(jié)快到了，公司為每位員工準(zhǔn)備了中秋禮品，并打算在節(jié)日當(dāng)天向員工郵箱發(fā)送一張電子賀卡，該賀卡需要由設(shè)計(jì)部提前設(shè)計(jì)并制作。老洪將這一任務(wù)交給了米拉，她打算先為中秋節(jié)電子賀卡繪制美觀的外形，再將視頻添加到其中，并調(diào)整成合適的大小。為快速完成工作，她開(kāi)始搜集所需的素材?！救蝿?wù)描述】任務(wù)背景公司為慶祝中秋節(jié)，打算通過(guò)郵箱向每位員工發(fā)送一張電子賀卡，表達(dá)對(duì)員工的節(jié)日祝福和關(guān)懷。賀卡需要采用卡通動(dòng)畫(huà)的形式進(jìn)行設(shè)計(jì)，并包含具有中秋美滿團(tuán)圓之意的視頻和中秋祝福視頻。任務(wù)目標(biāo)①

制作尺寸為2548像素×1536像素，時(shí)長(zhǎng)為6s，幀速率為25幀/秒，平臺(tái)類型為ActionScript3.0的動(dòng)畫(huà)文件。②

使用導(dǎo)入素材和繪制圖形的方式制作電子賀卡的背景，然后導(dǎo)入視頻，美化視頻的外觀，使電子賀卡的背景與視頻融合更加自然。知識(shí)要點(diǎn)“導(dǎo)入視頻”命令?！救蝿?wù)描述】本任務(wù)的參考效果如上圖所示【知識(shí)準(zhǔn)備】1．視頻的格式在Animate中，只能導(dǎo)入MP4、WebM和FLV格式的視頻，這3種格式的具體介紹如下?！馱ebM（*.webm）格式：WebM是一個(gè)開(kāi)放、免費(fèi)的視頻文件格式，WebM格式的視頻是基于HTML5標(biāo)準(zhǔn)的，包括VP8影片軌和OggVorbis音軌?！馞LV（*.flv）格式：FLV（FlashVideo）格式是AdobeSystems開(kāi)發(fā)的一種將視頻和音頻內(nèi)容傳輸?shù)交ヂ?lián)網(wǎng)上的標(biāo)準(zhǔn)格式?！馦P4（*.mp4）格式：MP4是一套用于音頻、視頻信息的壓縮編碼標(biāo)準(zhǔn)，由國(guó)際標(biāo)準(zhǔn)化組織和國(guó)際電工委員會(huì)下屬的動(dòng)態(tài)圖像專家組制定，主要用于網(wǎng)上視頻、光盤(pán)、語(yǔ)音發(fā)送，以及電視廣播等?！局R(shí)準(zhǔn)備】2．導(dǎo)入視頻（1）使用播放組件加載外部視頻選中“使用播放組件加載外部視頻”單選項(xiàng)，導(dǎo)入視頻后將創(chuàng)建FLVplayback組件的實(shí)例以控制回放，若要在其他計(jì)算機(jī)或平臺(tái)中查看，需要先下載該視頻，才能正常播放。選中該單選項(xiàng)后，單擊“下一步”按鈕，進(jìn)入“設(shè)定外觀”向?qū)Ы缑?，如左圖所示?！局R(shí)準(zhǔn)備】2．導(dǎo)入視頻（2）在SWF中嵌入FLV并在時(shí)間軸中播放選中“在SWF中嵌入FLV并在時(shí)間軸中播放”單選項(xiàng)，單擊“下一步”按鈕，進(jìn)入左圖所示的“嵌入”向?qū)Ы缑??！局R(shí)準(zhǔn)備】2．導(dǎo)入視頻（3）將H.264視頻嵌入時(shí)間軸（僅用于設(shè)計(jì)時(shí)間，不能導(dǎo)出視頻）選擇“將H.264視頻嵌入時(shí)間軸（僅用于設(shè)計(jì)時(shí)間，不能導(dǎo)出視頻）”單選項(xiàng)，單擊“下一步”按鈕，也將進(jìn)入“嵌入”向?qū)Ы缑?，但是?huì)新增“匹配文檔FPS（將根據(jù)需要?jiǎng)h除或重復(fù)視頻中的幀）”復(fù)選框，勾選該復(fù)選框，導(dǎo)入的視頻將根據(jù)當(dāng)前文件的幀速率來(lái)調(diào)整幀速率，調(diào)整的方式是刪除某些視頻幀，或重復(fù)某些視頻幀。最終嵌入時(shí)間軸的H.264視頻都只能在制作動(dòng)畫(huà)時(shí)使用，不能隨動(dòng)畫(huà)一起導(dǎo)出?！救蝿?wù)實(shí)施】米拉準(zhǔn)備先新建與視頻幀速率一致的文件，再繪制視頻的背景，這樣既能明確視頻的位置，又能裝飾視頻，使電子賀卡畫(huà)面美觀，具體操作如下。1．制作電子賀卡背景01繪制矩形02添加兔子圖像【任務(wù)實(shí)施】確定好視頻在賀卡中的位置后，米拉準(zhǔn)備將視頻素材以嵌入的形式添加到矩形中，再調(diào)整動(dòng)畫(huà)文件的持續(xù)時(shí)間，使其與視頻的持續(xù)時(shí)間一致，具體操作如下。2．添加中秋節(jié)視頻01選擇視頻文件02設(shè)置“嵌入”向?qū)Ы缑鎱?shù)03導(dǎo)入視頻的效果【任務(wù)實(shí)施】2．添加中秋節(jié)視頻04調(diào)整圖層堆疊順序的效果05中秋節(jié)電子賀卡最終效果37任務(wù)3.1制作“百億補(bǔ)貼”動(dòng)態(tài)膠囊任務(wù)3.2為購(gòu)物節(jié)廣告動(dòng)畫(huà)添加聲音內(nèi)容導(dǎo)航綜合實(shí)戰(zhàn)任務(wù)3.3為中秋節(jié)電子賀卡添加視頻綜合實(shí)戰(zhàn)

制作國(guó)慶節(jié)促銷廣告動(dòng)畫(huà)臨近國(guó)慶節(jié)，與其相關(guān)的設(shè)計(jì)委托源源不斷，老洪將制作國(guó)慶節(jié)促銷廣告動(dòng)畫(huà)的任務(wù)交給米拉，告訴她客戶要求動(dòng)畫(huà)內(nèi)容豐富，元素多樣。米粒正好可以將近期學(xué)到的添加文本、聲音、視頻的知識(shí)用到其中，于是欣然接受，準(zhǔn)備在畫(huà)面中和諧融入圖像、動(dòng)態(tài)效果、文本、聲音和視頻等多種元素?！緦?shí)戰(zhàn)描述】實(shí)戰(zhàn)背景萃易購(gòu)物中心發(fā)現(xiàn)之前制作的購(gòu)物節(jié)廣告動(dòng)畫(huà)廣受好評(píng)，且在活動(dòng)期間人流量明顯上升，因此，面對(duì)即將到來(lái)的國(guó)慶節(jié)，該購(gòu)物中心準(zhǔn)備繼續(xù)采用廣告動(dòng)畫(huà)的方式吸引顧客，并繼續(xù)開(kāi)展促銷活動(dòng)。現(xiàn)需要設(shè)計(jì)師制作國(guó)慶節(jié)促銷廣告動(dòng)畫(huà)，要求能在其中添加慶祝國(guó)慶節(jié)的視頻內(nèi)容，以此引出開(kāi)展促銷活