基础教程：Hype 4符号与元素的排列（二）

在上一章节《基础教程：Hype 4符号与元素的排列（一）》中，讲述了在Hype 4交互动效制作软件中针对元素或者符号在画布中的定位工具以及把多个元素或者符号组合成一组的方法。本章节将继续讲述Hype 4 HTML5创作工具中在排版方面的三个基础概念。

一、前方和后方

在Hype 4工具箱中，有“前方”和“后方”两个工具。

在Hype 4场景设计中，具有“层”的概念的。以场景画布为标准，水平方向为X轴；垂直方向为Y轴；与显示器屏幕垂直方向为Z轴。场景中对象在Z轴位置的变化，就是“层”的变化，也就是“前方（顶层）”和“后方（底层）”的位置变化。

图1：Z轴“层”的概念

通过“前方”工具，可以使选中的对象（元素或者符号）移动到“顶层”；通过“后方”工具，可以使选中的对象移动到“底层”。通过对对象选择“前方”或者“后方”，可以把对象移动到指定的“层”。

图2：“前方”和后方

二、分发

主要针对三个或者三个以上的对象（元素或者符号），以第1个和最后一个对象为标准，这两个对象之间的空间进行平均分配，使对象之间的水平或者垂直距离相等。这样一个对对象排列的方法称为“分发”。

“分发”分三种情况：水平分发、垂直分发以及水平垂直分发。

水平分发。选择要分发的对象，在鼠标右键菜单选择“分发”-“水平”，完成对象的水平分发。

图3：水平分发

垂直分发。选择要分发的对象，在鼠标右键菜单选择“分发”-“垂直”，完成对象的垂直分发。

图4：垂直分发

水平垂直分发。就是把选择的对象首先进行水平分发，然后再进行垂直分发。

图5：水平垂直分发

三、对齐

对两个或者两个以上的对象以边（上边、右边、下边、左边）、水平居中、垂直居中进行对齐的操作，称为“对齐”。

以“边”对齐。

选择需要对齐的对象，鼠标右键菜单选择“对齐”-“左”，全部对象以最接近画布左边的对象的左边为基准线进行对齐。

图6：左边对齐

选择需要对齐的对象，鼠标右键菜单选择“对齐”-“右”，全部对象以最接近画布右边的对象的右边为基准线进行对齐。

图7：右边对齐

选择需要对齐的对象，鼠标右键菜单选择“对齐”-“上”，全部对象以最接近画布上边的对象的上边为基准线进行对齐。

图8：上边对齐

选择需要对齐的对象，鼠标右键菜单选择“对齐”-“下”，全部对象以最接近画布下边的对象的下边为基准线进行对齐。

图9：下边对齐

“居中（水平居中）”对齐。在全部需要对齐的对象中，对象与画布的左边的距离最小值与最大值之和的平均值为对齐基准线，要对齐的全部对象以此基准线进行水平中间对齐。

图10：水平居中对齐

“中等（垂直居中）”对齐。在全部需要对齐的对象中，对象与画布的上边的距离最小值与最大值之和的平均值为对齐基准线，要对齐的全部对象以此基准线进行垂直中间对齐。

图11 ：垂直居中对齐

四、总结

本章讲述了在排版中很重要的三个基本概念：

• “前方”和“后方”是“层”的概念，决定了“谁”覆盖“谁”，哪一层被显示能够看到。
• “分发”的是一个空间分布的概念，决定了对象之间在场景画布中的分布规律。
• “对齐”是一个平面排列的概念，决定了对象之间以什么样的基准线在平面上进行排列。

本章节是讲述元素和符号内容的最后一个章节，元素和符号是Hype 4HTML5创作工具中的基石，一切动效都是基于元素和符号进行操作的。