如何制作H5类型的邀请函?

随着移动互联网的发展,H5类型的邀请函已经非常流行了,学会制作H5类型的邀请函已成为公司职员必不可少的一项技能。接下来,小编就把制作H5类型邀请函的方法分享给大家。

步骤1:添加素材

  • 01

    如下图,在“舞台”上添加一个长形图片素材,使用“变形”工具调整长图大小位置

  • 02

    在“舞台”空白部分添加一个矩形,调整矩形宽高、颜色使其符合“舞台”

  • 03

    如下图,点击在“舞台”上添加一个文本框、两个矩形、两个输入框,“提交”按钮,分别在其“属性”面板下调整其颜色、大小、位置如下图

  • 04

    点击选中第一个输入框,在其“属性”面板下修改“提示文字”为“请输入姓名”,同理,选中第二个输入框,在其“属性”面板下修改“提示文字”为“请输入电话”,“类型”为“电话号码”,“必填项”为“是”

  • 05

    分别为两个输入框命名为“姓名”“电话”

步骤2:添加行为

  • 01

    点击“提交”按钮右边的“添加/编辑行为”按钮,在“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件:“点击”,点击“编辑”按钮

  • 02

    在“参数”对话框内,选择“提交目标”为“默认数据服务”,勾选“提交对象”为“姓名”“电话”,点击“确认”

  • 03

    如下图,点击添加第2页,使用Alt键吸取第1页背景图片的颜色,统一舞台颜色

  • 04

    在第2页点击添加文本框,输入文字内容如下图,并在其“属性”面板下修改文本框文字大小、字体、颜色等属性

  • 05

    回到第1页,复制“提交”按钮,粘贴进第2页(按照Ctrl+Shift+V粘贴至当前位置)

  • 06

    修改文本框文字内容为“我想再看看活动时间”

  • 07

    在按钮“属性”面板下找到“动作”,选择“无”,取消掉表单行为

  • 08

    复制第2页至第3页面,修改文本框“老朋友 提交失败 再来一次吧”,修改按钮文字内容为“OK,再来一次”,点击“保存”并填写名称为“邀请卡”

  • 09

    回到第1页,点击选中第1帧,即全选第一页素材,右键→“组”→“组合”,将第1页第1帧上的所有元素合并成一个组

  • 10

    在该组合的“属性”面板下找到“拖动/旋转”选项,选择“垂直拖动”。

  • 11

    按照Shift键将组合往下拖动,手动使其顶部与“舞台”顶部对齐,也可在“属性”面板下调整其“上”值为“0”,使其顶部与“舞台”顶部对齐

  • 12

    双击“组”进入组页面,点击“提交”按钮右边的“添加/编辑行为”按钮,在“编辑行为”对话框内点击“提交表单”行为的“编辑”按钮

  • 13

    在“参数”对话框选择“操作成功后”为“跳转到页”,点击其右边的“编辑”按钮

  • 14

    在新弹出的“参数”对话框内选择“页号”为“2”,“翻页方式”为“平移”,点击“确认”

  • 15

    同理,选择“操作失败后”为“跳转到页”,“页号”为“3”,“翻页方式”为“平移”,点击“确认”

  • 16

    接下来,在“舞台”上添加一个矩形,点击矩形“添加/编辑行为”按钮,添加“禁止翻页”行为

  • 17

    如图,在第2页面,点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮,进入“编辑行为”对话框,设置“点击跳转到第1页”行为

  • 18

    回到第1页,选中“组”,为其命名为“首页”

  • 19

    在第2页,点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮,进入“编辑行为”对话框,添加“改变元素属性”行为:选择“属性控制”→“改变元素属性”→触发条件:“点击”,点击该行为的“编辑”按钮

  • 20

    如图,在“参数”对话框内设置:元素名称:“首页”元素属性:“上”赋值方式:“用设置的值替换现有的值”取值:“-370”

  • 21

    如图,点击选中第3页失败页面,点击“ok,再来一次”按钮的“添加/编辑行为”按钮,在“编辑行为”对话框设置“点击跳转到第1页”行为

步骤3:添加背景音乐

  • 01

    点击“素材库”,选择添加已上传的“声音”素材至“舞台”

  • 02

    将音频移至“舞台”之外,鼠标点击“舞台”空白处,在“舞台”的“属性”面板下选择“背景音乐”为“音乐1”(即刚刚添加的音乐素材),即设置了背景音乐

步骤4:设置“加载”界面

  • 01

    如下图,点击“加载”界面,选择“样式”为“进度条”,“提示”为“嘿,老朋友,好久不见”,并修改文字大小,是否为动态文字以及文字颜色、进度颜色、进度背景等其他自定义形式。

  • 02

    如下图,点击“分享”界面,填写分享信息,上传添加分享图标等。

步骤5:发布

  • 01

    点击“发布”按钮

  • 02

    在“发布动画”页面输入“备注名”为“邀请卡”,勾选同意书,点击“下一步”

  • 03

    发布成功

(0)

相关推荐

  • 木疙瘩教程:如何制作H5类型的招聘信息?

    如今,H5动画应用十分的广泛,不仅应用于制作个人简历,还可以制作招聘信息.那么,小编今天就把制作H5类型的招聘信息的方法分享给大家. 步骤1:添加素材.排版 01 如下图,在新建页面上添加图片素材.矩 ...

  • 易企秀如何制作H5场景

    注意事项: 为了更好的使用网页版易企秀,建议使用谷歌浏览器(chrome),360浏览器,IE11浏览器. 易企秀如何制作H5场景 1.首先,我们要登录网页版" 易企秀 " 2.登 ...

  • ae怎么给视频制作条纹类型转场效果?

    ae中处理视频很简单,今天我们就来看看使用AE制作条纹类型的转场效果的教程. 1.打开AE新建项目并新建合成,设置合成的名称为“条纹类型转场”.合成的大小为1920*1080,合成的持续时间,Adob ...

  • 怎么制作h5页面? h5页面编辑工具的使用方法

    h5是当下比较流行的一种广告形式,也是受网民欢迎的,因为好看的画面,以及炫酷的特效,和动听的音乐,有极强的传播的效果,因此h5非常的受欢迎,当下制作H5页面的工具非常多,为大家来简单的介绍下,如何制作 ...

  • 如何用手机app制作H5?

    圣诞快要来了,小编要制作一个H5,所以今天就跟大家简单的介绍一下如何用手机APP制作啦~ 操作方法 01 小编最近发现了一个还不错的制作H5的苹果APP,以此为例: 打开app,点击+,进入制作编辑页 ...

  • 如何制作H5动画

    H5页面中,动画的使用已经非常广泛,可以说,百分之90的H5页面拥有动画效果. H5页面动画的制作,可以通过编码,插入flash等方式来实现. 但是对于非技术类人员,如何在H5中制作动画呢?我们在微吾 ...

  • 怎么制作H5招聘海报

    现在朋友圈这种类似自媒体的发展是很火热的,很多公司有招聘启事的话就会在朋友圈发一张H5海报,快速便捷,又节约了一些宣传成本,今天我们一起来学习一下应该如何制作H5招聘海报. 操作方法 01 要想制作H ...

  • 用WPS怎样制作h5页面?

    大家经常能够看到h5页面,眼花缭乱的效果深得我们喜欢,下面就教大家如何用WPS制作h5页面. 操作方法 01 首先打开WPSH5 02 打开WPSH5,登陆.QQ.微信都可以登陆. 03 登陆进入会看 ...

  • 如何制作免费的微信邀请函

    当今社会随着网络的不断发展,代替了许多传统习俗,早些时候宴会邀请都需要亲自去送请帖,不过现在由于网络信息的强大,我们可以通过网络邀请,我们在微信上就可以发送邀请函,下面我们聊聊如何制作免费的微信邀请函 ...