基础教程：交互动效制作软件 Hype 4 添加元素（三）

上两小节小编详细介绍了在Hype4交互动效制作软件中添加形状、文本和按钮元素，本章节小编重点介绍Hype 4 HMTL6创作工具中的两个特殊元素：Sprite表元素和HTML小组件。

一、Sprite表元素

Sprite表元素是Hype 4新增的一个元素。Hype 4中的Sprite表元素，更像GIF图，它将多张具有连续动作的图片按照先后次序放在一张表格中，在时间线上调用这些图片，就像播放电影一样，把这些图片组合成一个在浏览器上自动播放的动画。

在“元素”工具中点击“Sprite表”，在弹窗中选择插入到Sprite表中的文件。（小编在这里选择了一个GIF图，因为一个GIF图包含了多张图片，能很好模拟Sprite表的作用。）

图1：选择插入Sprite表的文件

点击“打开”后，Hype弹出“Sprite表”界面。GIF图里的每张图都放置在Sprite表格里。

图2：Sprite表界面

由于GIF图的时间长度和帧速率都是设置好的，其他的如表边距、Sprite间距如果没有特殊要求，就不要修改参数。点击“插入Sprite表”，返回到Hype工作台主界面。

图3：返回工作台主界面

点击“缩放”工具选择25%，使场景窗口缩小，能够看到整个Sprite表元素。调整Sprite表元素大小，以适合场景画布，避免Sprite表元素超出画布的部分不能显示。

图4：调整Sprite表元素的大小

“缩放”工具选择100%显示场景画布，检查Sprite表元素在画布的位置，确保Sprite表都在画布上，没有超出画布。然后点击“预览”工具，在Chrome浏览器中自动播放Sprite表元素。

图5：Chrome播放Sprite表元素

二、HTML小组件

HTML小组件就是在场景中，显示使用HTML语言编写的，具有一定功能的嵌入式HTML，或者在场景中嵌入某个网页内容。

在图6中，小编使用“HTML小组件”添加了一个H2标题和一个按钮。在浏览器中能够正常地显示嵌入的内容。

图6：使用HTML小组件添加元素

在图7中，小编通过HTML小组件嵌入了百度首页www.baidu.com。在浏览器中，可以在场景中看到嵌入了百度首页，并且还可以在首页中进行搜索等功能。

图7：使用HTML小组件嵌入网页

三、小结

Sprite表元素和HTML小组件是Hype的特殊元素，Hype软件通过使用Sprite表元素提供了有别于时间线和关键帧的另一种创作动画的方案；而HTML小组件又提供了另一种添加Hype元素的方法，直接使用HTML语言创建元素。

但要注意的是，HTML小组件创建的元素不能使用Hype面板改变其属性。这些元素的属性必须在HTML元素命令行中使用行内样式进行修改。