H5制作软件Hype中符号的种类区分

Hype是一款HTML网页设计与制作软件，它能满足产品经理的美工和原型设计的需求，也能满足非编程人员制作网页的梦想，受众面广，是Mac系统下非常值得使用的一款软件，使用起来也非常简单易上手。

H5制作软件Hype的主打功能是它的物理引擎和网页动画制作，但关于网页静态页面的制作，使用更多的是它的元素功能和符号功能，本教程中，小编将使用Hype 4版本，为大家详细介绍下它的符号功能。

一、创建符号

说到符号，这个描述可能过于抽象，没使用过Hype的可能不清楚这个功能是用来干嘛呢。符号是一个功能强大的工具，它可以让用户轻松地重用元素，时间轴和动画，那么如何创建一个符号呢？

点击Hype上方的“符号”按钮，选择“新建符号”，可以为当前场景创建一个新的空“普通符号”；选择“新建持久符号”，可以创建一个新的“持久符号”，如下图1红框所示。

图1：创建空符号

不过一般不会通过这种方式创建符号，一般来说，都是在Hype“元素”按钮中，在场景中创建若干个元素，然后选中这些元素，通过鼠标右键，选择“转换为符号”或者是“转换为持久符号”，如下图2，直接创建一个非空的符号。  

图2：创建非空符号

二、普通符号和持久符号的区别

在上述中，都讲到了创建普通符号和持久符号两种方式，那么这2种符号有什么区别又有什么共同之处呢？

普通符号和持久符号，都是可以同时存在于多个场景中，它们都是多个元素和动画的组合，不同的是，普通符号和持久符号的存在形式是不一样的，具体看下面的演示。

首先，在Hype左侧场景列表中创建三个场景（场景1,场景2,场景3），如下图3，然后在场景1中创建一个绿色的矩形和一个红色的矩形。

图3：创建三个场景

第二步：选中场景1的绿色矩形，将其转换为“普通符号”，再将红色矩形转换为“持久符号”，然后在弹出的窗口中，选择“添加到所有场景”，从左侧的场景列表可以看到，普通符号默认只会存在于当前场景中，而“持久符号”可以选择加入到所有场景中，如下图4。

图4：场景列表

当然，普通符号也可以存在于其他的场景中，鼠标右键点击普通符号，然后选择“拷贝”（不是“复制”），再切换到场景2和场景3中，分别选择“粘贴”，就可以将普通符号复制到其他场景中，如下图5。

图5：普通符号拷贝到其他场景

普通符号可以存在在多个场景中，但不是存在在所有场景中，而持久符号是存在于所有场景中的。此时点击再次创建一个新场景，创建后场景列表如下图6，可以看到，红色的持久符号自动生成在新场景中，而绿色的普通符号并没有自动生成，这就说明持久符号是真正“持久”的，而普通符号不“持久”，这是它们的第一点区别。

图6：场景列表

此时的场景，肉眼可见的元素有7个，我们将三个场景中绿色普通符号分别命名为A1，A2，A3，红色持久符号命名为B1，B2，B3，B4。

上述复制普通符号A1，生成了A2符号，那么复制持久符号B1会怎样呢？点击右键对持久符号B1进行复制，会弹出警告窗口，如下图7，提示:“在每个场景上，每个持久符号只能有一个实例”，也就是说，持久符号是无法被复制的，这是普通符号和持久符号的第二个区别。

图7：复制持久符号提示

为A1和B1两个符号同时加上一个20px的黑色边框，此时的场景列表如下图8所示，可以看到，B2，B3和B4都同步被加上了边框，而A2和A3是没有加上的，这就说明，持久符号（B1、B2、B3、B4），其实是一体的，一损俱损一荣俱荣，修改其中的一个都会同时修改其余场景中的持久符号；而普通符号之间是相互独立互不影响的，这是普通符号和持久符号之间的第三个区别。

图8：修改符号

以上，就是关于Hype软件中符号功能的部分讲解，强大的符号功能当然不止于此，剩余关于符号功能的解析，会在城东书院网站上继续发布，也欢迎各位小伙伴们的持续关注哦！