声音和视频的交互控制

一、声音

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