H5录音机

添加素材
将PSD素材导入编辑页面,进行相关素材排版,同时可为各个素材添加预置动画效果。

新建图层,在第2帧插入关键帧,同时插入“录音机”相关素材。

将“录音机”转化为元件,设置录音机两个转轴旋转的动画效果。

同理新建图层,在第2帧插入关键帧,插入按钮等相关背景素材。在按钮图层合适位置插入关键帧,放置“按钮按下”的图片效果素材。

同理新建图层,分别在最后插入关键帧,上传结果页面和分享页面的素材,进行相关排版。

添加行为逻辑

  1. 新建“行为”图层,添加矩形,为其设置“出现即暂停”的行为。
  2. 为“打开未来录音机”按钮添加“点击跳转到第2帧并停止”行为。

来到第2帧,需设置“一开始录音机不旋转,点击‘录音’‘播放’按钮才开始旋转”的效果。新建“不动”图层,在第2帧插入关键帧,放置一个不旋转的“录音机”素材,注意删除图层后面帧数。

分别为按钮素材添加跳转行为,如下图,
为“录音”按钮添加“跳转到第5帧并停止”行为;
为“播放”按钮添加“跳转到第3帧并停止”行为;
为“制成”按钮添加“跳转到第4帧并停止”行为;

新建图层,添加背景音乐素材,为其命名“录音音频”。为“录音”按钮添加两个行为:

一、“控制录音”行为:微信定制→控制录音→触发条件:点击→设置参数:
录音行为:“开始录音”
目标元素:“录音音频”
录制成功后:“跳转到帧(第2帧)”


 二、“控制声音”行为:媒体播放控制→控制声音→触发条件:点击→设置参数:
 音频名称:“录音音频”
 控制方式:“暂停”

同理为“播放”按钮添加“点击播放‘录音音频‘”行为;
为“播放按下”按钮添加两个行为:“点击跳转到第2帧并停止”“点击暂停‘录音音频‘”;

回到“播放按下”帧数位置,为“播放按下”按钮添加两个行为:“点击跳转到第2帧并停止”“点击停止录音”。

同理为“制成按下”按钮添加 “点击跳转到第6帧并停止” 行为。

若想要设置按下“制成”按钮自动3秒后跳转至第6帧:新建图层,在“制成按下”帧数位置插入关键帧(注意前后都是空白帧),添加一个计时器,设置计时器时长为3秒,为计时器添加行为“定时器时间到跳转至第6帧并停止”行为。

制作结果页面
在结果页面相应位置添加一个输入框,命名为“姓名”,调整输入框位置大小,设置提示内容为“姓名”。

定义分享信息:在“分享”栏下可填写分享信息,如图内容为:“{{姓名}}给朋友听”

最后,可添加一个背景音乐。
(注意:如果添加了背景音乐,需给之后的按钮素材添加控制背景音乐的行为)

观看本节视频教程:
http://cdn1.mugeda.com/course/4/4.3/4.3.11.mp4