# 声音和视频的交互控制 ### **一、声音** **1.1声音的上传** 如下图,点击左边媒体工具栏内“导入声音”按钮,在“导入声音”对话框中,点击“选择文件”选择声音素材,上传添加声音。 ![](https://box.kancloud.cn/f1bd3905838397cd9ee89e42cff5d98e_900x470.png) * 注:为匹配各种播放平台,添加的声音文件最好为MP3格式 上传的声音素材可在“元件”面板内找到 ![](https://box.kancloud.cn/ab943e682119b360cfc2e5a0e94258a0_900x507.png) 同时,我们也可点击媒体工具栏下的“素材库”按钮,在弹出的对话框中选择“音频”,找到刚刚上传的声音文件 ![](https://box.kancloud.cn/dfabd330a928df2db01edb990f77d64a_900x502.png) **1.2更改“声音图标”** 如下图,选中舞台上的声音文件,在“属性”面板下找到“声音图标”,点击该图标,在弹出的“素材库”对话框中可选择更换的图片文件,点击“添加”按钮,即可更替“声音图标”。 ![](https://box.kancloud.cn/9e87bdc81ea424708a650d7093639e9e_900x472.png) 选中舞台上的声音文件,在“属性”面板内还可调整该声音文件是否“自动播放”、是否“循环播放”、是否在“预加载”时就开始播放等特性 ![](https://box.kancloud.cn/7b8a69f4f67f873286c869d07023ec4b_900x476.png) **1.3添加背景音乐** 如下图,在一个作品的编辑页面中,鼠标点击舞台空白处选中舞台,在“属性”面板下找到“背景音乐”选项,点击“上传”按钮 ![](https://box.kancloud.cn/0275e43778dd6f08fa7cf94c3a2ffcbb_900x505.png) 同“上传声音”步骤,选择添加声音文件,即可将上传的声音作为背景音乐 ![](https://box.kancloud.cn/b012d13a253983084a564f4e61dc11e9_900x463.png) **1.4更改背景音乐图标** 在舞台的“属性”面板下找到“声音图标”和“静音图标”,可点击更替两者的图片样式,点击“预览”可观察效果 ![](https://box.kancloud.cn/d0c327a65fdebb7d324c4ee6b4255fba_900x458.png) **1.5更改背景音乐图标位置** 使用“绘制”工具栏下的“矩形”工具,在舞台之外画一个矩形,添加编辑行为:“媒体播放控制”→“设置背景音乐”→“触发条件”:“出现”→点击“编辑”按钮 ![](https://box.kancloud.cn/56baebd75bb42563f129543a7cb13c84_900x465.png) 在“参数”中可设置“图标位置”,最后点击“预览”按钮预览效果 ![](https://box.kancloud.cn/a1cde388b6119460b09b88e691a1ffda_900x484.png) **1.6声音的控制-“播放声音”** 如下图,在“素材库”中选择添加声音素材,可暂时删除舞台上的声音图标 ![](https://box.kancloud.cn/cdfe2f56fd69643b08658075503f8bcb_900x503.png) 选择“椭圆”工具在舞台上绘制一个椭圆,添加编辑行为:“媒体播放控制”→“播放声音”→“触发条件”:“出现”→点击“编辑”按钮 ![](https://box.kancloud.cn/1cb2c20d1750929b7094882c1f3884b8_900x510.png) 在“参数”对话框中选择“声音元件”,设置是否“自动循环”、是否在“预加载”时播放等行为,点击“确认”。即可用物体播放声音 ![](https://box.kancloud.cn/f1a4c71807465cd98a65aa3444423be6_900x470.png) 调出声音图标:在上一步骤的基础上点击“编辑”按钮,在“参数”对话框中命名“音频名称”为“bgm”,点击“确认” ![](https://box.kancloud.cn/6e2b165302b0048f341f0413e2da04c5_900x506.png) 点击左上角“文件”→“管理定制素材” ![](https://box.kancloud.cn/91f7cd189641ff42323b8c2cc696a7c0_900x469.png) 在弹出的“管理定制素材”对话框中选择“预加载声音”为“bgm”,点击“确认” ![](https://box.kancloud.cn/e08d6344c150ac4b89e73cbb5b45b659_900x509.png) 点击预览即出现声音图标 ![](https://box.kancloud.cn/c868e72fde7cc7b864dd67004148ab90_900x514.png) 设置背景音乐在作品中间某段时间内自动播放:如下图,在一个案例作品中,我们可以看到,可在需要播放音乐的时间位置插入关键帧,同时添加一个矩形 ![](https://box.kancloud.cn/20fcff0614c6095a42c9db1ab434cb2b_900x503.png) 设置该矩形的编辑行为:“媒体播放控制”→“播放声音”→“触发条件”:“出现” ![](https://box.kancloud.cn/b2c1eef6e5e792988e702dffa67eac18_900x499.png) 点击“编辑”按钮,观看其“参数”的设置为: “声音元件”:“背景音乐” “自动循环”:“是” “预加载”:“是” 即设置“该背景音乐在第2页最后一帧才开始播放”的行为 ![](https://box.kancloud.cn/3a8ca0c564f403aaeebfe45c2ea38b7c_900x504.png) **1.7声音的控制-“控制声音”** 点击“素材库”上传一个声音元件至舞台,选中舞台上的声音元件,在其“属性”面板下为其命名为“猩猩”,点击替换声音图标。 ![](https://box.kancloud.cn/c1f92d4d46495ab2a902b4247fe62d0a_900x501.png) 在舞台上绘制一个矩形,设置编辑行为:“媒体播放控制”→“控制声音”→“触发条件”:“点击”→点击“编辑”按钮 ![](https://box.kancloud.cn/acb9b916dc50e633c63c82ffff038ac4_900x487.png) 在“参数”对话框中修改“控制方式”为“播放”,点击“确认”,即设置了“点击该矩形播放声音”的行为 ![](https://box.kancloud.cn/9fe399ce1656f060436ad14360189644_900x490.png) 如下图,选中矩形,将其“转换为元件”,双击矩形,进入元件页面 ![](https://box.kancloud.cn/a450923df4a405aa351f72c2d0bafd3a_900x459.png) 在第2帧“插入关键帧” ![](https://box.kancloud.cn/da4c48d35a07e786a26c07fe4c28cc68_900x498.png) 在第2帧上画一个椭圆形,添加编辑行为:“媒体播放控制”→“控制声音”→“触发条件”:“点击”→点击“编辑”按钮 ![](https://box.kancloud.cn/83bd85f08be306a678a12ad4c80bf5e6_900x508.png) 在“参数”对话框内设置: “音频名称”→“猩猩”; “控制方式”→“暂停” 点击“确认”按钮 ![](https://box.kancloud.cn/4385ad9fbef73444fd9cdbf41fd7ab63_900x498.png) 点击选中图层第一帧,设置矩形编辑行为:“动画播放控制”→“暂停”→“触发条件”:“出现” ![](https://box.kancloud.cn/e39c838e011d2d12f80ef011a1b00ef8_900x465.png) 同时添加“点击跳转至下一帧”的行为:“动画播放控制”→“下一帧”→“触发条件”:“点击” ![](https://box.kancloud.cn/aedce7ec6831df91d5c76b8d9e43cc3e_900x452.png) 为第2帧椭圆形添加编辑行为:“动画播放控制”→“上一帧”→“触发条件”:“点击” ![](https://box.kancloud.cn/79871dbf92d025e9fd5f1af0c4a838ee_900x509.png) 回到舞台,在“素材库”中选择添加另外一个声音元件,在其“属性”面板下为其命名为“背景音乐” ![](https://box.kancloud.cn/3267511dae73bf329d24729d1f373b29_900x501.png) 在舞台上绘制一个椭圆形,添加编辑行为为:“媒体播放控制”→“控制声音”→“触发条件”:“点击”→点击“编辑”按钮 ![](https://box.kancloud.cn/37121de16b888260ac85897364d0b293_900x503.png) 在“参数”对话框内设置: “音频名称”:“背景音乐” “控制方式”:“播放” 点击“确认” 即设置了“点击椭圆形播放‘背景音乐’”的行为 ![](https://box.kancloud.cn/338b20a663358230db6ccf84b90f7b50_900x509.png) 双击舞台上的矩形进入矩形元件编辑区,添加矩形编辑行为:“媒体播放控制”→“停止所有声音”→“触发条件”:“点击” ![](https://box.kancloud.cn/d96278524b0e404b5f2a304b1252866d_900x467.png) 鼠标选中“停止所有声音”行为按住不松,将其向上拖拉至最顶端,改变编辑行为的播放顺序 ![](https://box.kancloud.cn/14da576424d6dc389337f4bf9e30b530_900x502.png) 回到舞台,添加椭圆形编辑行为:“媒体播放控制”→“停止所有声音”→“触发条件”:“点击”。鼠标选中“停止所有声音”行为按住不松,将其向上拖拉至最顶端,改变编辑行为的播放顺序,可点击“预览”观察效果 ![](https://box.kancloud.cn/7ef775936dc5747a6afd45f436d2210e_900x461.png) ### **二、视频** * 注:由于大部分移动端只能播放MP4格式的视频,建议在Mugeda编辑时也尽量使用MP4格式的视频,防止后期作品播放遇到播放端与视频格式不符合等问题。除此之外,视频大小应保持在20M以内,若大于20M,可采取输入视频链接的方式获取视频。 **2.1视频的上传** 如下图,在“媒体”工具栏下找到“导入视频”按钮,选择视频素材添加 ![](https://box.kancloud.cn/2e9c996659f1f3ce621bf51ae7a69388_900x510.png) 我们可为视频命名,修改视频“宽”“高”“左”“上”值,如下图,分别为其设置了“320”“520”“0”“0”值,使视频大小位置刚好符合舞台 ![](https://box.kancloud.cn/59be4cc7e0eb6186e3970dac665ec63a_900x508.png) 点击“背景图片”的“+”标志,可选择替换的背景图片素材 ![](https://box.kancloud.cn/7181608b32736d71031fb2ac3a640d54_900x509.png) 如下图,可在视频的“属性”面板下修改其他相关属性,例如是否“隐藏播放按钮”、是否“隐藏控件”、是否“自动播放”、是否“继续背景音乐” ![](https://box.kancloud.cn/26d66446612bc0cecd16b1a9ee4bf0b7_900x503.png) **2.2视频的控制** 如下图,在舞台上绘制一个椭圆,可在其“属性”面板下调整椭圆颜色等属性,设置一个“椭圆形红色按钮” ![](https://box.kancloud.cn/137f9112fed11026f6d0ae127af8eea8_900x501.png) 点击“新建图层”按钮,新建一个图层并将其重命名为“视频”,选中“视频”图层的第2帧“插入关键帧”,在关键帧上添加一个视频素材 ![](https://box.kancloud.cn/a3497d22a47b3c8d6485cee746e4ba07_900x500.png) ![](https://box.kancloud.cn/ee6fe9d1fcf1e0743fcecbe88a72399e_900x509.png) 可在“属性”面板下修改视频的“宽”“高”“左”“上”数值为“320”“520”“0”“0”,使其匹配舞台大小位置 ![](https://box.kancloud.cn/3e823549aa7445f6911481cee666a8ad_900x507.png) 新建图层,为其重命名为“暂停”,在舞台之外画一个矩形,为矩形设置一个“出现即暂停”的编辑行为 ![](https://box.kancloud.cn/103d993cdc96888964ec50997fc02c1d_900x506.png) ![](https://box.kancloud.cn/e1072494a0c3fa6bcd79e72430066214_900x499.png) 点击选择舞台上的视频,在其“属性”面板下修改“自动播放”为“是” ![](https://box.kancloud.cn/72d2ed18cf93bfb39e01a3f8cd10dd54_900x503.png) 点击回到第1帧,找到舞台上椭圆形,设置编辑行为:“动画播放控制”→“下一帧”→“触发条件”:“点击” ![](https://box.kancloud.cn/4b4b7a3cb881a95d93bf966c75657a04_900x485.png) * * * * * **如何用一个按钮控制视频?** 如下图,在原来作品的基础上,选择“视频”图层第1帧,右键→“删除帧”,同理删除“暂停”图层的第2帧 ![](https://box.kancloud.cn/3a793f15d9e575f6bb0e6c2cbf3b0e7a_900x486.png) 鼠标选中“图层0”(椭圆形红色按钮图层),将其向上拖拉至顶端 ![](https://box.kancloud.cn/7e4a8b54e8e0046caad55cdf146b73fc_900x499.png) 点击选中视频,为其命名为“徐峥” ![](https://box.kancloud.cn/96fc64598248124c4b5a83b24e34511b_900x502.png) 同时在其“属性”面板下将其“自动播放”改为“否” ![](https://box.kancloud.cn/81c671cdb661411e73a897f1e4a9f966_900x508.png) 删除红色椭圆形原本设置的“下一帧”行为 ![](https://box.kancloud.cn/c9ade7adb138349571d76872e0f1f299_900x505.png) 添加编辑行为:“媒体播放控制”→“控制视频”→“触发条件”:“点击”→点击“编辑”按钮 ![](https://box.kancloud.cn/2297706f35c2bb6a3c5b9cf9d75e26af_900x459.png) 在“参数”对话框内设置 “视频名称”:“徐峥” “控制方式”:“播放” 点击“确认” ![](https://box.kancloud.cn/83395e9e9671eec7cb6583572a1c05e8_900x506.png) 设置点击红色椭圆形按钮之后按钮消失的行为:选中舞台上的椭圆形,在其“属性”面板下为其命名为“a” ![](https://box.kancloud.cn/a3a2aead2f49e63f1a6cfb7abe8dbe83_900x503.png) 为椭圆形添加编辑行为:“属性控制”→“改变元素属性”→“触发条件”:“点击”→点击“编辑”按钮 ![](https://box.kancloud.cn/a49b88bb2988af8bc8aa4819ddc5651b_900x504.png) 在“参数”对话框内设置 “元素名称”:“a” “元素属性”:“左” “赋值方式”:“用设置的值替换现有值” 点击“确认”,即设置了点击椭圆形,椭圆形的左值会变成“333”(>320),超出舞台之外 ![](https://box.kancloud.cn/a49b88bb2988af8bc8aa4819ddc5651b_900x504.png) 点击预览,发现视频播放后红色椭圆按钮不见了 ![](https://box.kancloud.cn/546fb765738e6c50ebd0529b94f4a9eb_900x513.png) * * * * * **如何在矩形中插入并控制视频?** 新建一个作品编辑页面,点击“素材库”按钮在素材库中选择需使用的视频,点击“添加”将其添加进舞台 ![](https://box.kancloud.cn/fa1b32bbbcc7ff33b2c97b441058d1ad_900x471.png) 点击删除舞台上的视频图标 ![](https://box.kancloud.cn/dad9adb40beba57df58802cf33e900ff_900x464.png) 在舞台上绘制一个矩形,为其命名为“a” ![](https://box.kancloud.cn/3c3e59c29bee1091d5886fd41c8e4919_900x500.png) 设置矩形编辑行为:“媒体播放控制”→“播放视频”→“触发条件”:“点击”→点击“编辑”按钮 ![](https://box.kancloud.cn/b966c3a4d513340f5a9c44f2e8c279fd_900x506.png) 如下图,设置参数为 “视频元件”:“薛之谦.mp4” “容器”:“a” 点击“确认” ![](https://box.kancloud.cn/c40c0bd7a2048804ba0d7163af3663c4_900x468.png) 点击预览观察效果 ![](https://box.kancloud.cn/3f89e66354eacd0a6a8d04b20473d556_900x456.png) 同时,也可在矩形的“编辑行为”对话框中将其行为的“触发条件”改为“出现”,即当矩形一出现,视频就会自动播放。 ![](https://box.kancloud.cn/e11ab476d9bd1d4dcaa89f2b70be2fe3_900x459.png) 观看本节视频教程: http://cdn1.mugeda.com/course/3/3.2/3.2.16.mp4