# H5录音机 **添加素材** 将PSD素材导入编辑页面,进行相关素材排版,同时可为各个素材添加预置动画效果。 ![](https://box.kancloud.cn/cd8bc9070cf1624b38b9f893014902c0_900x504.png) 新建图层,在第2帧插入关键帧,同时插入“录音机”相关素材。 ![](https://box.kancloud.cn/871c9135768f0f7eb2bfdd55e5928876_900x502.png) 将“录音机”转化为元件,设置录音机两个转轴旋转的动画效果。 ![](https://box.kancloud.cn/05da189f164bff043effd1a38dae9feb_900x505.png) 同理新建图层,在第2帧插入关键帧,插入按钮等相关背景素材。在按钮图层合适位置插入关键帧,放置“按钮按下”的图片效果素材。 ![](https://box.kancloud.cn/f6bfcd14f12ca02a9d981c9fbd70a754_900x503.png) 同理新建图层,分别在最后插入关键帧,上传结果页面和分享页面的素材,进行相关排版。 ![](https://box.kancloud.cn/535555ece012990caa2b43601f392ade_900x504.png) **添加行为逻辑** 1. 新建“行为”图层,添加矩形,为其设置“出现即暂停”的行为。 2. 为“打开未来录音机”按钮添加“点击跳转到第2帧并停止”行为。 ![](https://box.kancloud.cn/37453a87c400ef7e99af5501f82c30fc_900x504.png) 来到第2帧,需设置“一开始录音机不旋转,点击‘录音’‘播放’按钮才开始旋转”的效果。新建“不动”图层,在第2帧插入关键帧,放置一个不旋转的“录音机”素材,注意删除图层后面帧数。 ![](https://box.kancloud.cn/c943a2d251f424da7628d4dd0bd475c6_900x508.png) 分别为按钮素材添加跳转行为,如下图, 为“录音”按钮添加“跳转到第5帧并停止”行为; 为“播放”按钮添加“跳转到第3帧并停止”行为; 为“制成”按钮添加“跳转到第4帧并停止”行为; ![](https://box.kancloud.cn/8987025082570cdda88eabc556528f36_900x505.png) 新建图层,添加背景音乐素材,为其命名“录音音频”。为“录音”按钮添加两个行为: 一、“控制录音”行为:微信定制→控制录音→触发条件:点击→设置参数: 录音行为:“开始录音” 目标元素:“录音音频” 录制成功后:“跳转到帧(第2帧)” ![](https://box.kancloud.cn/fed313fc3cfdbd05a60200f70bb3c996_900x504.png) ![](https://box.kancloud.cn/2b5654811a1101c9bb791b0b64418f21_900x506.png) 二、“控制声音”行为:媒体播放控制→控制声音→触发条件:点击→设置参数: 音频名称:“录音音频” 控制方式:“暂停” ![](https://box.kancloud.cn/e506d7adb9bb03f8f99aa4f1c132bab2_900x501.png) 同理为“播放”按钮添加“点击播放‘录音音频‘”行为; 为“播放按下”按钮添加两个行为:“点击跳转到第2帧并停止”“点击暂停‘录音音频‘”; ![](https://box.kancloud.cn/510e72ebde41df24cde010ebb7529ab1_900x510.png) 回到“播放按下”帧数位置,为“播放按下”按钮添加两个行为:“点击跳转到第2帧并停止”“点击停止录音”。 ![](https://box.kancloud.cn/93af2100a68a2455e56b72f4cf024240_900x507.png) 同理为“制成按下”按钮添加 “点击跳转到第6帧并停止” 行为。 ![](https://box.kancloud.cn/0eda2fcb50af7a50627c0d96e33c4519_900x506.png) 若想要设置按下“制成”按钮自动3秒后跳转至第6帧:新建图层,在“制成按下”帧数位置插入关键帧(注意前后都是空白帧),添加一个计时器,设置计时器时长为3秒,为计时器添加行为“定时器时间到跳转至第6帧并停止”行为。 ![](https://box.kancloud.cn/360e0b2098f68bf0e0c93d81b70ee989_900x506.png) **制作结果页面** 在结果页面相应位置添加一个输入框,命名为“姓名”,调整输入框位置大小,设置提示内容为“姓名”。 ![](https://box.kancloud.cn/3a3411280e6597ffeeafd969ca9e4521_900x508.png) 定义分享信息:在“分享”栏下可填写分享信息,如图内容为:“{{姓名}}给朋友听” ![](https://box.kancloud.cn/44007785f19428105cce032242cc27ac_900x458.png) 最后,可添加一个背景音乐。 (注意:如果添加了背景音乐,需给之后的按钮素材添加控制背景音乐的行为) 观看本节视频教程: http://cdn1.mugeda.com/course/4/4.3/4.3.11.mp4