木疙瘩教程:图片合成类H5的制作

房产证,结婚证,军官证等类型H5一夜之间刷爆朋友圈,参与度极高,访问量极高,成为朋友之间炫耀的小工具,本篇将结合相关案例,讲解这类型的H5的制作方法。

工具/原料

  • mugeda

步骤1:添加素材与行为

  1. 我们在舞台第一页添加两个输入框、按钮等相关素材制作输入页面,分别为两个输入框命名“name1”“zhiye1”

  2. 在舞台第二页添加两个文本框、按钮等相关素材制作名片页面,分别为两个文本框命名“name2”“zhiye2”

  3. 为“确定”按钮添加三个行为:1.属性控制→改变元素属性→触发条件:点击→设置参数元素名称:name2元素属性:文本取值赋值方式:用设置的值替换现有值取值:{{name}}

  4. 属性控制→改变元素属性→触发条件:点击→设置“培训师”参数元素名称:zhiye2元素属性:文本取值赋值方式:用设置的值替换现有值取值:MUGEDA认证培训师执行条件:检查元素状态元素名称:zhiye考察属性:文本取值逻辑条件:等于参考值:培训师

  5. 属性控制→改变元素属性→触发条件:点击→同理设置“讲师”参数

步骤2:设置判断

  1. 设置判断:我们要设置不填即禁止跳转的行为

    回到第一页,将两个输入框都设置为“必填项”

  2. 之后为“确定”按钮再添加一个“提交表单”的行为

  3. 同时记住需为舞台添加一个禁止翻页的行为

步骤3:制作图片合成效果

  1. 新建第3页面,添加一张图片,为其命名为“P”

  2. 为第2页的“确定”按钮添加行为:属性控制→舞台截图→触发条件:点击→设置参数目标图片:P操作成功后:跳转到第3页

  3. 同时为“确定”按钮添加两个“改变元素属性”行为,设置点击将舞台上“确定”“重置”两个按钮移至舞台之外

  4. 发布作品,获得作品的发布二维码

  5. 将二维码附在第二页“名片”合适的位置上

  6. 最后为“重置”按钮添加一个“跳转到第1页”行为

分类:游戏/数码
标签:

站长推荐

我们猜您还喜欢

  • 木疙瘩教程:如何制作小图标动画?
  • 木疙瘩教程:如何压缩图片?
  • 木疙瘩教程(H5制作):处理声音及视频
  • 木疙瘩教程:H5作品相关设置
  • 木疙瘩教程(H5):关键帧和页面的命名
  • 木疙瘩教程(H5):如何设置翻页效果
  • 木疙瘩教程(H5):如何设置舞台坐标
  • 木疙瘩教程(H5):手机屏幕适配方法
  • 木疙瘩教程(H5):缩放功能
  • 木疙瘩教程(H5):元件的使用