# 图片合成类H5的制作 **添加素材与行为** 我们在舞台第一页添加两个输入框、按钮等相关素材制作输入页面,分别为两个输入框命名“name1”“zhiye1” ![](https://box.kancloud.cn/25ac4f844974d3e5addde1cf1c90c06e_900x522.png) 在舞台第二页添加两个文本框、按钮等相关素材制作名片页面,分别为两个文本框命名“name2”“zhiye2” ![](https://box.kancloud.cn/f48566c4b8e9263ebecc961578d9dfdd_900x535.png) 为“确定”按钮添加三个行为: 1.属性控制→改变元素属性→触发条件:点击→设置参数 元素名称:name2 元素属性:文本取值 赋值方式:用设置的值替换现有值 取值:{{name}} ![](https://box.kancloud.cn/5d9bfd05a22b8de49c851d6112aa5a10_900x517.png) ![](https://box.kancloud.cn/d2808304f0124f8167b098d0ef481684_900x507.png) 2.属性控制→改变元素属性→触发条件:点击→设置“培训师”参数 元素名称:zhiye2 元素属性:文本取值 赋值方式:用设置的值替换现有值 取值:MUGEDA认证培训师 执行条件:检查元素状态 元素名称:zhiye 考察属性:文本取值 逻辑条件:等于 参考值:培训师 ![](https://box.kancloud.cn/85bff279c9e44a4f8cf5c889423fdd4c_900x458.png) 3.属性控制→改变元素属性→触发条件:点击→同理设置“讲师”参数 **设置判断:我们要设置不填即禁止跳转的行为** 回到第一页,将两个输入框都设置为“必填项” ![](https://box.kancloud.cn/923bd61ae509311691e4caff2b451525_900x531.png) 之后为“确定”按钮再添加一个“提交表单”的行为 ![](https://box.kancloud.cn/5f9a4bf216ca5d3b51f84750d9176991_900x536.png) ![](https://box.kancloud.cn/b53708353b397fc165d6e0f2b78fd676_900x503.png) 同时记住需为舞台添加一个禁止翻页的行为 ![](https://box.kancloud.cn/1b37aea3a5be8a966dc4130fe0ce1840_900x485.png) **制作图片合成效果** 新建第3页面,添加一张图片,为其命名为“P” ![](https://box.kancloud.cn/16f9ffe0bba4a8fbd8adb7347f2e9e89_900x527.png) 为第2页的“确定”按钮添加行为: 属性控制→舞台截图→触发条件:点击→设置参数 目标图片:P 操作成功后:跳转到第3页 ![](https://box.kancloud.cn/9be1fda970143db713a2807af45ffefa_900x523.png) ![](https://box.kancloud.cn/bb691025a85e24614e980184858c1618_900x454.png) 同时为“确定”按钮添加两个“改变元素属性”行为,设置点击将舞台上“确定”“重置”两个按钮移至舞台之外 ![](https://box.kancloud.cn/9e820f4bac079ab4e7e54025a876a76f_900x475.png) 发布作品,获得作品的发布二维码 ![](https://box.kancloud.cn/8022896381fbfc2f6d4b9a82bf71979d_900x458.png) 将二维码附在第二页“名片”合适的位置上 ![](https://box.kancloud.cn/917d7b80c443b1e617db7d93c6a41172_900x483.png) 最后为“重置”按钮添加一个“跳转到第1页”行为 ![](https://box.kancloud.cn/6f6e47810692927ab445f0818a4007cf_900x529.png) 观看本节视频教程: http://cdn1.mugeda.com/course/4/4.3/4.3.9.mp4