網(wǎng)頁設(shè)計(jì)與制作第20章聲音和視頻網(wǎng)頁設(shè)計(jì)與制作——聲音和視頻聲音和視頻為按鈕、動(dòng)畫添加聲音聲音壓縮、音效的編輯有聲動(dòng)畫文件的導(dǎo)出ADCB本章要點(diǎn)：插入視頻E導(dǎo)出視頻文件第20章聲音和視頻網(wǎng)頁設(shè)計(jì)與制作——聲音和視頻在Animate中使用聲音聲音的優(yōu)化導(dǎo)出在Aniamte中使用視頻邊學(xué)邊做（動(dòng)畫背景配音）一、在Animate中使用聲音AdobeAniamteCC2018提供了多種使用聲音的方式，如可以使聲音獨(dú)立于時(shí)間軸連續(xù)播放，或使用時(shí)間軸將動(dòng)畫與音軌保持同步，向按鈕添加聲音可以使按鈕具有更強(qiáng)的互動(dòng)性，通過聲音淡入淡出還可以使音軌更加優(yōu)美。Animate中有兩種聲音類型：事件聲音和音頻流。向Animate文檔添加聲音010203要將聲音從“庫”中添加到文檔，首先將聲音文件導(dǎo)入到“庫”中。將聲音放在時(shí)間軸上時(shí)，把聲音分配到一個(gè)獨(dú)立的層上，然后在“屬性”面板的“聲音”控件中設(shè)置選項(xiàng)。1.將聲音添加到時(shí)間軸可以將聲音和一個(gè)按鈕元件的不同狀態(tài)關(guān)聯(lián)起來。因?yàn)槁曇艉驮鎯υ谝黄穑鼈兛梢杂糜谠乃袑?shí)例。2．向按鈕添加聲音在Animate中與聲音相關(guān)的最常見任務(wù)就是與動(dòng)畫同步播放和停止播放關(guān)鍵幀中的聲音。3.將聲音與動(dòng)畫同步將聲音與動(dòng)畫同步創(chuàng)建動(dòng)畫背景，背景在“背景”圖層的第1幀中；設(shè)計(jì)制作小鳥飛入、飛出的動(dòng)畫效果，在新圖層的從第20幀處創(chuàng)建關(guān)鍵幀，應(yīng)用引導(dǎo)層動(dòng)畫產(chǎn)生小鳥起起伏伏的飛行效果，不同畫面效果截圖如圖所示。創(chuàng)建“聲音1”圖層。從網(wǎng)絡(luò)上下載海浪和小鳥飛翔的音頻文件到本地。從菜單上選擇【文件】/【導(dǎo)入】/【導(dǎo)入到庫(L)…】命令，將音頻文件導(dǎo)入到庫。在第1幀處創(chuàng)建關(guān)鍵幀，將庫面板中的“海浪聲.mp3”拖入場景中。新建“聲音2”圖層，在第20幀處插入新的關(guān)鍵幀，然后將庫面板中的“小鳥飛翔.mp3”拖入場景中。時(shí)間軸內(nèi)容如圖

所示?！緦?shí)例20.1】為動(dòng)畫配音。畫面中當(dāng)有小鳥飛入時(shí)，開始出現(xiàn)聲音，當(dāng)小鳥從畫面中消失，聲音即停止。選擇“聲音2”圖層的第60幀處，創(chuàng)建關(guān)鍵幀，打開“屬性”面板，單擊“聲音”中“同步”下拉按鈕，選擇“停止”。“屬性”面板如圖所示。在Animate中編輯聲音單擊“屬性”面板中的“編輯聲音封套”按鈕，即打開“編輯封套”對話框在“編輯封套”對話框中可以進(jìn)行設(shè)置二、聲音的優(yōu)化導(dǎo)出聲音優(yōu)化通過“發(fā)布設(shè)置”對話框定義動(dòng)畫中所有聲音的設(shè)置；通過對“庫”內(nèi)的每個(gè)聲音進(jìn)行設(shè)置或“聲音屬性”對話框中控制單個(gè)聲音的導(dǎo)出質(zhì)量和大小壓縮與導(dǎo)出聲音壓縮聲音文件是為了盡量減小Animate聲音動(dòng)畫文件的大小，以便Animate影片能夠在網(wǎng)頁中迅速的下載并播放。通過選擇壓縮選項(xiàng)可以控制導(dǎo)出的SWF文件中的聲音品質(zhì)和大小。Animate軟件不但可以向動(dòng)畫中添加聲音，而且可以將動(dòng)畫中的聲音以多種格式進(jìn)行導(dǎo)出。三、在Aniamte中使用視頻ActionScript3.0或AIR文檔中使用視頻使用FLVPlayback組件播放視頻，或者將視頻直接嵌入到Animate文檔中。

HTML5Canvas文檔中使用視頻使用視頻（Video）組件。Video組件不含導(dǎo)入向?qū)В⑶倚枰脩糇约菏謩?dòng)將Video組件從組件面板添加到舞臺。ActionScript3.0或AIR文檔中使用視頻1) 創(chuàng)建新的ActionScript3.0文檔，并保存為“20-2導(dǎo)入MP4.fla”。2) 在文檔中創(chuàng)建三個(gè)圖層，分別命名為“標(biāo)題”、“時(shí)長”和“MP4視頻”。【實(shí)例20.2】使用組件播放外部視頻。3) 按下“Ctrl+F8”鍵，創(chuàng)建名為“標(biāo)題”的圖形元件，使用“文本”工具輸入“將MP4視頻導(dǎo)入到Animate中”，然后設(shè)置其屬性，并添加濾鏡效果。再創(chuàng)建名為“時(shí)長”的影片剪輯元件，在此創(chuàng)建一個(gè)簡單動(dòng)畫，使文字“30秒”進(jìn)行縮放移動(dòng)。4) 再按下“Ctrl+F8”鍵，創(chuàng)建名為“MP4”的影片剪輯元件，在此執(zhí)行【文件】/【導(dǎo)入】/【導(dǎo)入視頻】命令，隨即彈出“導(dǎo)入視頻”對話框，如圖所示。ActionScript3.0或AIR文檔中使用視頻5) 在對話框中，單擊文件路徑的“瀏覽”按鈕，在彈出的對話框中選擇已經(jīng)準(zhǔn)備好的MP4文件，單擊“打開”按鈕，則文件位置被指定。6) 在對話框中有三個(gè)視頻導(dǎo)入選項(xiàng)：“使用播放組件加載外部視頻”、“在SWF中嵌入FLV并在時(shí)間軸中播放”、“將H.264視頻嵌入時(shí)間軸（僅用于設(shè)計(jì)時(shí)間不能導(dǎo)出視頻）”。選擇“使用播放組件加載外部視頻”選項(xiàng)，點(diǎn)擊瀏覽按鈕添加外部視頻路徑。然后單擊“下一步”按鈕?！緦?shí)例20.2】使用組件播放外部視頻。8) 回到“場景1”，將“庫”面板中三個(gè)元件分別對應(yīng)移入時(shí)間軸每個(gè)圖層關(guān)鍵幀的舞臺上，此時(shí)時(shí)間軸上只有第1幀對象，如圖所示。按“Ctrl+Enter”鍵導(dǎo)出并觀看動(dòng)畫效果。7) 在對話框中，對插入的視頻外觀進(jìn)行選擇，如圖所示，然后單擊“下一步”按鈕，在單擊“完成”，完成視頻導(dǎo)入。四、邊學(xué)邊做（動(dòng)畫背景配音）1) 創(chuàng)建新的AniamteScript3.0文檔，并保存為“20-3配音.fla”。設(shè)置舞臺大小為600×400像素。2) 將一幅圖片導(dǎo)入到舞臺，作為背景（可以將圖片進(jìn)行縮放，尺寸與舞臺大小相同）。【實(shí)例20.3】為動(dòng)畫配背景音樂。4) 選中“飛”字，單擊右鍵選擇“轉(zhuǎn)換到元件”，形成名為“飛”的圖形元件，再將其他幾個(gè)字都單獨(dú)轉(zhuǎn)換為對應(yīng)文字名稱的圖形元件。選中文字，選取【修改】/【時(shí)間軸】/【分散到圖層】命令。如圖所示。3) 打開“庫”面板，創(chuàng)建一個(gè)名為“標(biāo)題”的影片剪輯。使用“文字”工具，在舞臺上創(chuàng)建“飛揚(yáng)的青春”字樣，在“屬性”面板中設(shè)置其屬性。然后按下“Ctrl+B”鍵，將文本分離成單個(gè)文字，如圖所示。四、邊學(xué)邊做（動(dòng)畫背景配音）5) 將文字分散到各個(gè)圖層的目的是為了單獨(dú)創(chuàng)建動(dòng)畫，實(shí)現(xiàn)文字的旋轉(zhuǎn)、移出舞臺等效果【實(shí)例20.3】為動(dòng)畫配背景音樂。7) 將需要作為背景音樂的文件導(dǎo)入到“庫”中。選擇“場景1”，新建一個(gè)“聲音”圖層，將聲音文件從“庫”中拖至舞臺，則時(shí)間軸的關(guān)鍵幀上顯示出聲音的波形標(biāo)識。6) 按下“Ctrl+F8”鍵，創(chuàng)建一個(gè)名為“圖動(dòng)畫”的影片剪輯。設(shè)計(jì)制作5個(gè)圖片框先后顯示到舞臺中，然后依次在圖片框中出現(xiàn)一幅圖片的動(dòng)畫效果，如圖所示的時(shí)間軸標(biāo)記。四、邊學(xué)邊做（