互动大师可以简单的制作很有创意、很酷炫的微信H5页面作品/场景,只要准备好音乐和图片素材,通过互动大师的时间轴和事件,就可以简单快速完成有逼真打字效果的“一步一步看清韩寒”这个H5页面作品。
工具/原料找到VXPLO互动大师官网,进入并注册成为用户,登录即可免费使用。
在我的作品里,创建一个新的手机案例,根据需要调整舞台大小(大多数手机像素是640*1008,iPhone4的是640*832,iPhone5/5S的是640*1008,iPhone6的是640*1030,iPhone6+的是640*1040),互动大师默认的舞台大小是640*1008,该案例是以大多数手机尺寸为准,就不需要再调整舞台大小了。



点击工具栏,在舞台下添加朴树的平凡之路音乐素材(音乐属性设为自动播放),添加时间轴1(根据需要,将时间轴的自动播放和循环播放属性设置为No,时间轴时长设为65s),在时间轴下添加1、2、3、4、5图片素材,让图片成为时间轴1的子对象。



点击工具栏,为时间轴1下的每张图片添加轨迹,选中1图片的轨迹1添加关键帧,设置图片的运动轨迹,控制图片的运动(这个案例里面的图片是从下到上运动的,所以只需要选中图片轨迹的关键帧,修改图片的Y坐标就可以达到向上运动的效果。比如在0s关键帧设置1图片的坐标为(0,950),在1s关键帧设置1图片的坐标为(0,200),这样1图片就从Y坐标为950的位置向上移动了750个单位,移动到Y坐标为200的位置)。



点击工具栏,在舞台下添加透明按钮1、添加音按钮图片素材作为按钮,在这些按钮下添加事件(以事件2为例),设置事件的触发条件,即用户做了什么动作(手指离开);目标对象是什么,即用户的动作可以控制的东西(舞台.时间轴1);目标动作,即用户的动作控制的对象做出了什么反应(暂停)。然后根据我们的逻辑顺序,用这些按钮通过事件来控制音乐和时间轴的先后播放顺序,这样就可以将具有逼真打字效果的“一步一步看清韩寒”H5作品做出来了。
短短的5步操作就能将这样一个很有创意很酷炫的H5页面作品做出来了,而且还不需要任何编程,不需要写任何代码,是不是很简单,小伙伴们有没有get到这个新技能呢。


