# 声音和视频的交互控制 ### **一、声音** **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