H5案例分享:60秒帮你摆脱朋友圈

公共点评出品的h5案例 ,
60秒帮你解脱伴侣圈 , 这么火的h5怎么可以错过呢 , 木疙瘩什么不会 , 此刻来介绍建造经验 。

需要这些哦
mugeda
方式/
1如图 , 建造一个扭转的加载元件、添加布景图 , 在第一页形当作一个加载页

H5案例分享:60秒帮你摆脱朋友圈

文章插图

2为第二页添加相关素材 , 同时为“承诺就点这”添加“点击跳转下一页”行为

H5案例分享:60秒帮你摆脱朋友圈

文章插图

3新建第三页 , 分层导入原先设置好的图片朋分素材

H5案例分享:60秒帮你摆脱朋友圈

文章插图

4新建图层 , 同理分层导入别的一份图片的朋分素材

H5案例分享:60秒帮你摆脱朋友圈

文章插图

5将素材移动至如下位置

H5案例分享:60秒帮你摆脱朋友圈

文章插图

6为所有图层插入帧→插入关头帧动画 , 在帧数的四分之一部门插入关头帧

H5案例分享:60秒帮你摆脱朋友圈

文章插图

7在关头帧上移动图片素材如下

H5案例分享:60秒帮你摆脱朋友圈

文章插图

8同理别离在帧数的四分之二、四分之三、最后部门插入关头帧 , 别离移动素材位置使其呈现出摆布交叉的动画结果

H5案例分享:60秒帮你摆脱朋友圈

文章插图

9别离为每一个关头帧添加“淡入淡出”结果 , 使其图片活动时呈现出短暂搁浅结果

H5案例分享:60秒帮你摆脱朋友圈

文章插图

10新建图层 , 添加两个矩形别离为舞台外的矩形添加一个“呈现即暂停”行为、为按钮位置上的矩形添加“点击即播放”行为 , 并调整透明度为“0”同时在该图层第二帧添加一个空白帧

H5案例分享:60秒帮你摆脱朋友圈

文章插图

11在特定位置添加按时器 , 设置按时器相关属性 , 为其定名为“DI”

H5案例分享:60秒帮你摆脱朋友圈

文章插图

12新建图层 , 添加布景图、文字、文本框等素材 , 为文本框定名为“fen”选中该图层所有素材 , 组合 , 为组定名为“tishi” , 将其移动至舞台之外

H5案例分享:60秒帮你摆脱朋友圈

文章插图

13新建图层 , 添加一个矩形使其笼盖舞台 , 设置透明度为“0”添加一个文本框 , 定名为“fen2”为透明矩形添加六个行为:

推荐阅读