制作接力型H5

制作首页
新建图层,分别将首页图片和文字素材添加进舞台,调整位置大小等。同时在时间轴上插入关键帧动画,为各个素材制作动画效果。

如下图,将“历史”文字图片转化为元件,在元件页面通过遮罩功能制作一个“历史”文字的动态效果。

最后为其他文字等素材添加预置动画等,设置出现时间和动画效果。

制作擦玻璃过渡动画
添加背景图片、“擦一擦”“宛平城”等素材,调整位置大小,同时为素材制作相对应的动画效果等。

新建图层,在最后帧数上插入关键帧,添加一个“擦玻璃”功能,设置其背景图片和前景图片,同时可设置其橡皮擦大小、剩余比例等属性。

新建图层,在“擦玻璃”后一帧插入关键帧,再添加“擦玻璃”背景图片,调整大小位置,使其与“擦玻璃”背景图片大小位置重合。同时为该图层插入关键帧动画设置移动的动画效果。

新建图层,在“擦玻璃”关键帧相同帧数上添加一个“出现即暂停”的行为物体(注意在该帧数后面一帧插入一个空白帧)。

为“擦玻璃”添加一个“擦玻璃完成即播放下一帧”的行为。

新建图层,在“擦玻璃”下一帧插入文字,“插入进度动画”,设置文字以打字机效果出现的动画。

制作视频页
导入视频至舞台,可为视频添加背景图片、设置视频大小位置以及其他播放属性。

如下图,新建图层,在时间轴合适的位置插入关键帧,插入一个“出现即暂停”行为物体(注意在后面一帧插入一个空白帧)。

新建图层,在“出现即暂停”帧数后一帧插入关键帧,插入相关文字,为文字“插入进度动画”,设置文字以打字机效果出现的动画。为文字所在的帧命名为“go”。

为视频添加“视频结束跳转到‘go’帧并播放”的行为。

制作献花接力效果
添加相关素材,调整素材的大小位置等,注意为文本框命名为“献花数量”。

新建图层“计数器”,添加一个“计数器”在舞台上,设置默认值为“0”,计数值为“1”,并且为其命名为“计数器1”。

为按钮添加行为

数据服务→设置计数器→触发条件:点击→设置参数
计数器名称:“计数器1”
显示计数元素:“献花数量”


如图,如何制作“点击按钮,花即从按钮中随机移至上面五朵花中任意一朵位置”的动画效果?

如下图,制作一个花的元件,设置“从按钮位置旋转移至舞台上面第一朵花的位置上”的动画效果。为元件命名为“花1”。

同理再设置一个元件,该元件的花最后停留在舞台上面第二朵花的位置上,为其命名“花2”,将其添加进舞台(此处仅供理解,不再多添加其它三个元件)。

在舞台之外添加一个随机数,设置相关属性,例如最大值为“2”,最小值为“1”,更新间隔“0.1”。

为按钮添加两个行为

动画播放控制→播放元件片段→触发条件:点击→设置参数
元件实例名称:“花1”
是否循环:“不循环”
起始帧号:“2”
结束帧号:“20”
执行条件:检查元素状态→随机数1→文本或取值→等于→1
同理设置跳转“花2”播放的行为。



设置画面出现即显示原始数值:新建图层,添加一个文本框,为其添加“出现即将计数器数值显示到‘献花数量’文本框中”的行为。

设置留言
我们先新建图层,在合适的帧数上添加一个“出现即暂停”的行为物体,将舞台动画停在一帧。
在“暂停”帧数的后一帧添加“我要留言”按钮素材,同时再在下一帧制作“留言页面”,在留言区域添加输入框,为其命名为“文本输入1”。

如下图,为“提交”按钮添加“提交‘文本输入1’表单”行为,提交成功或失败后都跳转舞台画面(上一帧)。

同时也可设置点击黑色其他区域也可跳转返回舞台画面(上一帧)的行为。

为舞台的“我要留言”按钮添加“点击跳转下一帧”行为。

最后,我们可在后台查找相关提交的数据。

观看本节视频教程:
http://cdn1.mugeda.com/course/4/4.3/4.3.12.mp4