多语言展示
当前在线:1909今日阅读:84今日分享:32

H5页面制作工具,十五分钟重做腾讯魔兽H5!

在魔兽电影的冲击下,朋友圈里“为了部落”“为了联盟”“兽人永不为奴”等口号可谓是各种刷。魔兽可是承载着数亿人的十年期待和青春回忆啊!小编这就教大家如何用iH5工具制作一个魔兽题材的H5。
工具/原料

iH5

方法/步骤
1

打开iH5官方网站,进入编辑界面, 一、过渡画面制作: 1.设置舞台尺寸为640X1040(苹果手机推荐尺寸,安桌手机推荐640X1080),新建页面,并重命名为起始页。 2.原版H5起始页是黑色的背景颜色,我们在起始页下设置透明按钮,将X、Y坐标设置为0,宽、高设置为舞台尺寸640X1040,在下方找到【背景颜色】选项,点击选择黑色。 3.在起始页下添加时间轴功能,把时间轴的总时长设置为1S,自动播放;紧接着在时间轴下导入旋转画面的素材,在素材下设置【轨迹功能】,对时间轴的0S和1S设置【Add】关键帧,对1S处关键帧的属性设置旋转(顺时针)360°即可完成。4.设置旋转页面结束到下一页面的跳转:在时间轴下添加事件,事件设置为:触发条件—结束,目标对象—舞台,目标动作—跳转页面,页面—页面2(先设置后绑定,此处的页面2指下文的“跳转页面”。)

2

重点跳转页面制作:1.制作底下两个按钮的闪烁效果(为了让闪烁得更为生动,小编将效果改成了呼吸的效果),具体操作如下(以红色按钮为例子): A.在该页面下添加时间轴,同样把时间轴时长设置为1S、自动播放,让素材至于时间轴下方,在素材下添加轨迹功能 B.由于原H5有三个透明度由深到浅的素材,那么我只需要将这三个素材进行不同时间上的透明度变化就能实现字体呼吸的效果了,同样在时间轴0S、0.5S和1S处设置【Add】关键帧,并让浅颜色的两个素材在0S、1S处透明度为0,0.5S处的透明度为100,反之深颜色的素材0S、1S处透明度为100,0.5S处的透明度为0,图片字体呼吸效果一气呵成! C.蓝色按钮同理制成,在这就不重复说明了。 2.创建页面,并重命名为跳转页面,导入画面素材、导入视频(调整坐标位置和尺寸,视频隐藏,取消自动播放)。3.设置点击按钮自动播放视频的功能(同样以红色按钮为例子):A.在红色按钮处添加透明按钮,调整位置和切合按钮的大小,在透明按钮下设置事件组,设置事件组的触发条件为【轻触手机中】,在事件组下添加事件。B.添加隐藏该页面素材的多个事件,为视频的播放作准备:目标对象选择为该页面的各个素材,目标动作为隐藏。C.由于一开始是把视频隐藏的,所以我们需要添加显示视频、播放视频的事件:目标对象选择为视频,目标动作分别为显示、重头播放。D.蓝色按钮的设置也同理,就不赘述了。4.点击按钮后视频开始自动播放,播放完需要跳转到下一个页面(为下文的引导页面),在视频下设置事件:触发条件—结束,目标对象—舞台,目标动作—跳转页面,页面—引导页面。

3

引导页面的制作 新建页面,并重命名为引导页面,导入素材,调整位置和尺寸。在引导重新播放的位置添加透明按钮,在透明按钮下设置事件:触发条件—轻触手机中,目标对象—舞台,目标动作—跳转页面,页面—传送门页面即可。此案例主要运用到的功能分别为:时间轴、轨迹、事件、透明按钮。

推荐信息