# 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