# 聲音和視頻的交互控制 ### **一、聲音** **1.1聲音的上傳** 如下圖，點擊左邊媒體工具欄內“導入聲音”按鈕，在“導入聲音”對話框中，點擊“選擇文件”選擇聲音素材，上傳添加聲音。  * 注：為匹配各種播放平臺，添加的聲音文件最好為MP3格式 上傳的聲音素材可在“元件”面板內找到  同時，我們也可點擊媒體工具欄下的“素材庫”按鈕，在彈出的對話框中選擇“音頻”，找到剛剛上傳的聲音文件  **1.2更改“聲音圖標”** 如下圖，選中舞臺上的聲音文件，在“屬性”面板下找到“聲音圖標”，點擊該圖標，在彈出的“素材庫”對話框中可選擇更換的圖片文件，點擊“添加”按鈕，即可更替“聲音圖標”。  選中舞臺上的聲音文件，在“屬性”面板內還可調整該聲音文件是否“自動播放”、是否“循環播放”、是否在“預加載”時就開始播放等特性  **1.3添加背景音樂** 如下圖，在一個作品的編輯頁面中，鼠標點擊舞臺空白處選中舞臺，在“屬性”面板下找到“背景音樂”選項，點擊“上傳”按鈕  同“上傳聲音”步驟，選擇添加聲音文件，即可將上傳的聲音作為背景音樂  **1.4更改背景音樂圖標** 在舞臺的“屬性”面板下找到“聲音圖標”和“靜音圖標”，可點擊更替兩者的圖片樣式，點擊“預覽”可觀察效果  **1.5更改背景音樂圖標位置** 使用“繪制”工具欄下的“矩形”工具，在舞臺之外畫一個矩形，添加編輯行為：“媒體播放控制”→“設置背景音樂”→“觸發條件”：“出現”→點擊“編輯”按鈕  在“參數”中可設置“圖標位置”，最后點擊“預覽”按鈕預覽效果  **1.6聲音的控制-“播放聲音”** 如下圖，在“素材庫”中選擇添加聲音素材，可暫時刪除舞臺上的聲音圖標  選擇“橢圓”工具在舞臺上繪制一個橢圓，添加編輯行為：“媒體播放控制”→“播放聲音”→“觸發條件”：“出現”→點擊“編輯”按鈕  在“參數”對話框中選擇“聲音元件”，設置是否“自動循環”、是否在“預加載”時播放等行為，點擊“確認”。即可用物體播放聲音  調出聲音圖標：在上一步驟的基礎上點擊“編輯”按鈕，在“參數”對話框中命名“音頻名稱”為“bgm”，點擊“確認”  點擊左上角“文件”→“管理定制素材”  在彈出的“管理定制素材”對話框中選擇“預加載聲音”為“bgm”，點擊“確認”  點擊預覽即出現聲音圖標  設置背景音樂在作品中間某段時間內自動播放：如下圖，在一個案例作品中，我們可以看到，可在需要播放音樂的時間位置插入關鍵幀，同時添加一個矩形  設置該矩形的編輯行為：“媒體播放控制”→“播放聲音”→“觸發條件”：“出現”  點擊“編輯”按鈕，觀看其“參數”的設置為： “聲音元件”：“背景音樂” “自動循環”：“是” “預加載”：“是” 即設置“該背景音樂在第2頁最后一幀才開始播放”的行為  **1.7聲音的控制-“控制聲音”** 點擊“素材庫”上傳一個聲音元件至舞臺，選中舞臺上的聲音元件，在其“屬性”面板下為其命名為“猩猩”，點擊替換聲音圖標。  在舞臺上繪制一個矩形，設置編輯行為：“媒體播放控制”→“控制聲音”→“觸發條件”：“點擊”→點擊“編輯”按鈕  在“參數”對話框中修改“控制方式”為“播放”，點擊“確認”，即設置了“點擊該矩形播放聲音”的行為  如下圖，選中矩形，將其“轉換為元件”，雙擊矩形，進入元件頁面  在第2幀“插入關鍵幀”  在第2幀上畫一個橢圓形，添加編輯行為：“媒體播放控制”→“控制聲音”→“觸發條件”：“點擊”→點擊“編輯”按鈕  在“參數”對話框內設置： “音頻名稱”→“猩猩”； “控制方式”→“暫停” 點擊“確認”按鈕  點擊選中圖層第一幀，設置矩形編輯行為：“動畫播放控制”→“暫停”→“觸發條件”：“出現”  同時添加“點擊跳轉至下一幀”的行為：“動畫播放控制”→“下一幀”→“觸發條件”：“點擊”  為第2幀橢圓形添加編輯行為：“動畫播放控制”→“上一幀”→“觸發條件”：“點擊”  回到舞臺，在“素材庫”中選擇添加另外一個聲音元件，在其“屬性”面板下為其命名為“背景音樂”  在舞臺上繪制一個橢圓形，添加編輯行為為：“媒體播放控制”→“控制聲音”→“觸發條件”：“點擊”→點擊“編輯”按鈕  在“參數”對話框內設置： “音頻名稱”：“背景音樂” “控制方式”：“播放” 點擊“確認” 即設置了“點擊橢圓形播放‘背景音樂’”的行為  雙擊舞臺上的矩形進入矩形元件編輯區，添加矩形編輯行為：“媒體播放控制”→“停止所有聲音”→“觸發條件”：“點擊”  鼠標選中“停止所有聲音”行為按住不松，將其向上拖拉至最頂端，改變編輯行為的播放順序  回到舞臺，添加橢圓形編輯行為：“媒體播放控制”→“停止所有聲音”→“觸發條件”：“點擊”。鼠標選中“停止所有聲音”行為按住不松，將其向上拖拉至最頂端，改變編輯行為的播放順序，可點擊“預覽”觀察效果  ### **二、視頻** * 注：由于大部分移動端只能播放MP4格式的視頻，建議在Mugeda編輯時也盡量使用MP4格式的視頻，防止后期作品播放遇到播放端與視頻格式不符合等問題。除此之外，視頻大小應保持在20M以內，若大于20M，可采取輸入視頻鏈接的方式獲取視頻。 **2.1視頻的上傳** 如下圖，在“媒體”工具欄下找到“導入視頻”按鈕，選擇視頻素材添加  我們可為視頻命名，修改視頻“寬”“高”“左”“上”值，如下圖，分別為其設置了“320”“520”“0”“0”值，使視頻大小位置剛好符合舞臺  點擊“背景圖片”的“+”標志，可選擇替換的背景圖片素材  如下圖，可在視頻的“屬性”面板下修改其他相關屬性，例如是否“隱藏播放按鈕”、是否“隱藏控件”、是否“自動播放”、是否“繼續背景音樂”  **2.2視頻的控制** 如下圖，在舞臺上繪制一個橢圓，可在其“屬性”面板下調整橢圓顏色等屬性，設置一個“橢圓形紅色按鈕”  點擊“新建圖層”按鈕，新建一個圖層并將其重命名為“視頻”，選中“視頻”圖層的第2幀“插入關鍵幀”，在關鍵幀上添加一個視頻素材   可在“屬性”面板下修改視頻的“寬”“高”“左”“上”數值為“320”“520”“0”“0”，使其匹配舞臺大小位置  新建圖層，為其重命名為“暫停”，在舞臺之外畫一個矩形，為矩形設置一個“出現即暫停”的編輯行為   點擊選擇舞臺上的視頻，在其“屬性”面板下修改“自動播放”為“是”  點擊回到第1幀，找到舞臺上橢圓形，設置編輯行為：“動畫播放控制”→“下一幀”→“觸發條件”：“點擊”  * * * * * **如何用一個按鈕控制視頻？** 如下圖，在原來作品的基礎上，選擇“視頻”圖層第1幀，右鍵→“刪除幀”，同理刪除“暫停”圖層的第2幀  鼠標選中“圖層0”（橢圓形紅色按鈕圖層），將其向上拖拉至頂端  點擊選中視頻，為其命名為“徐崢”  同時在其“屬性”面板下將其“自動播放”改為“否”  刪除紅色橢圓形原本設置的“下一幀”行為  添加編輯行為：“媒體播放控制”→“控制視頻”→“觸發條件”：“點擊”→點擊“編輯”按鈕  在“參數”對話框內設置 “視頻名稱”：“徐崢” “控制方式”：“播放” 點擊“確認”  設置點擊紅色橢圓形按鈕之后按鈕消失的行為：選中舞臺上的橢圓形，在其“屬性”面板下為其命名為“a”  為橢圓形添加編輯行為：“屬性控制”→“改變元素屬性”→“觸發條件”：“點擊”→點擊“編輯”按鈕  在“參數”對話框內設置 “元素名稱”：“a” “元素屬性”：“左” “賦值方式”：“用設置的值替換現有值” 點擊“確認”，即設置了點擊橢圓形，橢圓形的左值會變成“333”（>320），超出舞臺之外  點擊預覽，發現視頻播放后紅色橢圓按鈕不見了  * * * * * **如何在矩形中插入并控制視頻？** 新建一個作品編輯頁面，點擊“素材庫”按鈕在素材庫中選擇需使用的視頻，點擊“添加”將其添加進舞臺  點擊刪除舞臺上的視頻圖標  在舞臺上繪制一個矩形，為其命名為“a”  設置矩形編輯行為：“媒體播放控制”→“播放視頻”→“觸發條件”：“點擊”→點擊“編輯”按鈕  如下圖，設置參數為 “視頻元件”：“薛之謙.mp4” “容器”：“a” 點擊“確認”  點擊預覽觀察效果  同時，也可在矩形的“編輯行為”對話框中將其行為的“觸發條件”改為“出現”，即當矩形一出現，視頻就會自動播放。  觀看本節視頻教程： http://cdn1.mugeda.com/course/3/3.2/3.2.16.mp4