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

在前面章节详细介绍了Hype 4交互动效制作 中的“形状”元素，它是基于hype的绘图功能。本章节重点讲解Hype 4 HTML5创作工具中的“组件”元素。所谓“组件”，就是元素本身就是一个具有完整功能的部件。

一、文本

通过“元素”工具中的“文本”可以给场景画布添加文字或者段落。

点击“元素”工具的“文本”，在画布上添加了一个写有高亮“新文本”的文本框。可以直接键入文字替代“新文本”；也可以点击文本框正下方的“铅笔”符号，在弹出的文本输入框中输入文字。

图1：给场景添加文字

在“排印”面板，可以对输入的文字或者段落进行编辑和排版，改变字体、大小、颜色等等属性。

图2：编辑文本

如果小伙伴学习过HTML语言，使用“排印”面板编辑过文字后，双击文字代开文本输入框，可以看到刚才编辑过的文字边上有一些代码，例如<br>表示换行，<b></b>表示中间的文字加粗。

可以在“元素”面板改变文本框的属性，例如：给文字补白、给文本框添加底色等等。

图3：编辑文本框

二、Button和有纹理的按钮

Button和有纹理的按钮功能是一样的，只是外观上有纹理的按钮比Button在边框外多了一层阴影。要注意的是：如果不给按钮添加操作，按钮是不会起作用的。

点击“元素”工具的“Button”或者“有纹理的按钮”，就会在画布上添加了一个按钮。这个按钮的默认名字为“Button”，在高亮状态下，可以更改按钮的名字。

图4：添加按钮

在“元素”面板可以更改按钮的背景颜色、边框以及阴影等属性。

图5：编辑按钮

给按钮添加动效。

按钮被选中后，在按钮的上方有三个小功能键：法线、悬停和按下。这三个小功能键代表按钮的三种状态：

法线——表示按钮的正常状态。

悬停——表示鼠标的光标移动到按钮上面时按钮的状态。

按下——表示鼠标左键点击按钮并按住左键不放时按钮的状态。

通过改版三种状态下的按钮的属性，可以实现鼠标点击按钮时产生动态效果。

图6：给按钮添加动效

三、小结

文本和按钮又是Hype的专属元素，文本和按钮在Hype中可以通过“元素”面板改变其形状属性。文本有“排印”面板，专门用来编辑文字或者段落的属性；而按钮有三种状态，可以通过改变其三种状态的属性，实现点击按钮的动效。