如何在Hype制作3秒后出现下一步的页面（场景设置）

为了让浏览者在阅读页面内容时，花费足够的时间阅读，减少因阅读过快造成信息遗漏，一些页面会设置倒计时按钮。浏览者需要在倒计时完成后，才能看到“下一步”、“下一页”等切换页面的按钮。

我们将会以一个3秒倒计时的页面效果为例，使用Hype制作上述效果。首先，本文会先进行整体页面效果的设置讲解。对于进一步的动画制作操作，会在《如何在Hype制作3秒后出现下一步的页面（动画制作）》一文中详细讲解。

图1：页面场景

一、创建重叠按钮

首先，使用Hype的创建按钮功能，创建按钮。

图2：创建按钮

如图3所示，分别创建“下一步”、“1s”、“2s”、“3s”的按钮。“1s”、“2s”、“3s”按钮是作为倒计时按钮使用的。建议使用拷贝功能，确保这四个按钮是同等大小的。

图3：完成按钮创建

为什么要保持按钮的同等大小呢？这是因为，如图4所示，我们需要将这些按钮都重叠起来，后续再通过调整按钮透明度，来控制这些按钮在不同时间点的隐藏与可见，实现倒计时的动画效果。

图4：重叠按钮

完成按钮的创建与排版后，返回到时间线编辑面板，将按钮的前后顺序调整为如图5所示（向上或向下拖放元素的名称即可调整顺序），保持“下一步”按钮在最前方。

图5：调整按钮的顺序

二、设置鼠标点击动作

接着，进行“下一步”按钮的触发动作设置。

如图6所示，创建场景2。

图6：创建场景

然后，如图7所示，选中“下一步”按钮（之前已经将下一步按钮放置在最前面，方便后续选取使用），打开其操作检查器，在“鼠标点按时”操作中添加“跳转到下一个场景”的操作，实现点击“下一步”按钮，跳转到场景2的效果。

图7：鼠标点击动作

三、小结

以上，我们已经完成了倒计时按钮、下一步按钮的创建，并为下一步按钮设置了鼠标点按时跳转到下一个场景的动作。在下一节，我们会继续完成倒计时按钮的动画效果制作。