
发布时间:2020/09/08 10:13:13
这是本篇教程的第三章节,在本章节中,小编将带大家学习如何使用Mac系统下的Hype软件,制作一个简单的模拟烟花爆炸的场景页面,以大大增加表白的成功率,请大家跟随小编的脚步往下看吧!
前期回顾:
第一步:先在Hype左侧添加一个新的场景,然后命名场景为“烟花爆炸”,再在右侧的“场景检查器”中,设置场景的背景颜色为黑色,此场景用于模仿黑夜的效果。
这里小编准备了2张图片,一张是烟花爆炸的图片,另外一张是烟花炮竹的图片,具体如下图2和图3所示,大家可以直接拿去使用。
第二步:在元素按钮中,导入上述烟花炮竹图片,然后在“度量检查器”中,设置图片的宽度为13px,同时勾选限制比例,会等比缩小高度到56px,这样就把图片缩小到了合适的尺寸,然后再设置左边位置为308px,上边位置为400px,如下图4。
第三步:点击“录制”按钮,移动时间线到00:02:03秒处,然后设置上边的位置为100px,宽度为1px,高度为5px,如下图5,同时设置不透明度为0。
此时导入的烟花爆竹图片的动画轨迹如下图6红框所示,炮竹会逐渐升空,然后渐渐消失在视野之中,慢慢消失。
搞定了烟花爆竹的升空以后,接下来是烟花爆竹的场景。首先移动时间线到00:02:12秒处,然后导入上述的烟花爆炸图片,在“度量检查器”中,修改此图片的位置和大小,具体的设置参数如下图7所示,同时设置图片不透明度为0。
第二步:移动时间线到00:04:23秒处,确认“录制”按钮现在还是开着的,然后修改对应的位置参数和图片大小参数如下图8所示,同时设置不透明度为100,这样就完成了烟花逐渐出现并放大爆炸的场景了。
第三步:设置烟花的颜色渐变。上述图片的烟花颜色是固定红色的,为了更好的效果,我们要增加烟花的颜色渐变效果,烟花从一开始为蓝绿色的,而后逐渐变黄再变红,这里要用到Hype提供的CSS滤镜效果。
时间线拉回到00:02:12秒,然后在“元素检查器”中,设置滤镜效果中的棕褐色为0%,色调为124%,如下图9。
时间线拉到00:04:23秒,然后设置滤镜效果中的棕褐色为77%,色调为329%,如下图10。
完成这些简单的设置以后,我们的烟花爆炸场景就算制作完成啦,效果预览如下GIF图11所示。
最后,选中主页场景中的“愿意”图标按钮,然后在“操作检查器”中,设置鼠标点按时,跳到“烟花爆炸”场景,过渡为淡入淡出,具体设置如下图12即可,这样就完成了整个网页的所有制作啦。
好啦,以上就是关于Hype制作浪漫表白网站的三篇教程了,大家看完以后可以赶紧下载Hype软件自己动手制作吧,自己的用心制作才是真正的表白良方,小编祝福在看的大家都能表白成功!
作者署名:包纸
读者也喜欢这些内容:
利用Hype制作汽车驾驶的动态路线图
在一些电视节目里,为了保护隐私,经常会使用动画来展现当前地点与目的地的行走路径,比如图1所示的简单汽车驾驶路径。...
阅读全文 >
利用Hype切换场景功能制作自动切换相册
Hype中的场景功能,跟PowerPoint中的幻灯片相似,可作为独立的“画布”创作内容。场景中包含了元素与时间表两个重要的部分,并可通过时间线操作切换不同的场景。...
阅读全文 >
Hype 4时间线操作(十) 暂停和继续时间线
在Hype 4交互动效制作软件中,可以通过设置“开始时间线”关键帧操作启动时间线,同样也可以设置“暂停时间线”和“继续时间线”关键帧暂停及继续当前时间线。表现出来的就是对象的运动在启动后,暂停下来,等待一段时间后继续运行,直至终点。...
阅读全文 >
实例演示如何利用Hype运动曲线调整动画运动路径
Hype运动路径是两个或多个点之间的曲线动画,可通过运动曲线调整。比如,图1所示的粉色圆形就是按照特定运动路径移动的。...
阅读全文 >