制作控制按钮

控制按钮，就是操作浏览的按钮，一般位于底部。

在制作之前，我们首先要有按钮的素材，也就是按钮图片，可以是任何图片格式，但首推svg格式，其次png格式，鉴于png格式较为常见且容易通过PS、FW等工具制作，所以我们这里使用png的按钮图片。

点击下载一组个人自制png按钮图标

更多素材可以关注我的淘宝店铺：little山林的店

有了按钮图标之后，我们可以开始制作控制按钮了。

打开皮肤编辑器。

点击“添加按钮”。

在画布空白处单击鼠标，选择要添加的按钮图标（点击其左边的“添加图片”也可以制作按钮，且图片可以转换为按钮元素），添加按钮或添加图片可以一次选择一个，也可以按住Ctrl键一次选择多个进行添加。

添加完后，需要对按钮进行排列排版，排成什么样子根据(UI)设计要求或者自己的喜好来，可以参考自带的那些皮肤，也可以借鉴我们见过的一些皮肤。

按钮的排版可以先鼠标拖动，排出大致轮廓，再通过右边的参数“位置”调整按钮确切位置。大致就是保持按钮等间距，计算一下调整各按钮的 X 值，保持按钮的等高度，调整按钮的 Y 值。

按钮排好之后，我们就需要给按钮添加“动作”，也就是触发它们得到什么结果。毕竟按钮就是按了之后要有动作有结果。

点击后面的+加号或者双击前面空白处，给按钮添加动作。由图标我们也可以能看出每个按钮要实现的动作，开始给第一个这按钮添加一个“点击左转”的动作。

弹出动作设定的设置。

来源，就是由什么触发。可以是鼠标的事件触发，也可以时其它的事件触发。我们这里就不逐个解释每个事件了。这些事件单从字面意思就可以很好理解，绝大部分我们后面都会提到。

动作，就是触发后干什么，也即是赋给按钮真正的意义。要说明一点，我们能实现的动作，这里统统都给出了，超出范围的就无能为力了。

除了来源和动作之外，其实具体的不同的动作还对应一些不同的参数。我们与实际情况会一一说明。

我们开始给第一个按钮添加点击后左转的动作。

我们可以看到这里就多了两个参数，一个方向，一个速度。方向不多说了，说一下“速度”参数，说速度可能不太准确，这个参数在这里的意思是，点击后转动的幅度大小。这个参数默认是0，数值越大动作幅度越大。但是需要注意，当值是0或者我们不设置时，统统默认为最小值1。至于具体的我们想点击一下实现多大的动作幅度，可以根据实际情况一点点的试验，得出最满意的效果。

后面几个按钮的动作我们就依次的设置。

以上，是我们制作的第一种按钮，只赋予了一种单向的动作。比如左转，点击只左转就可以。

下面再说第二种按钮，赋予双向的动作，严格说是两个按钮分别赋予的单项动作，但占用一个位置，看起来像是按钮可切换能实现双向动作。

以上这四组按钮分别是音乐开关、自动旋转切换、拖拽方式切换、全屏切换。

我们先以“音乐开关”为例。

给两个按钮分别添加上播放和暂停的动作，这里注意目标是 _background ，我们以第一种方式添加的背景音乐，默认的ID就是 _background 。

添加完动作我们就需要将两个按钮拖到一起（可使用参数调节使契合更严谨），占用同一位置。

接下来，我们需要继续给按钮添加动作。再添加动作前，先从逻辑上理顺：两个按钮，同时只能显示一个，另一个隐藏。在点击显示的按钮时，自身隐藏，另一个则显示出来。

所以两个按钮在开始之前就需要隐藏一个，至于隐藏哪个要根据具体情况来，如果我们添加背景音乐时，循环参数设为0或者1、2、3…… 即进入场景就播放音乐的，那就把播放的按钮先隐藏，显示暂停的按钮。如果是循环参数是-1，即进入场景不自动播放音乐的，那就把暂停的先隐藏，显示播放的按钮。这样我们也能理解，按钮如果设置播放动作时，还有个循环参数，那是针对循环为-1为前提进行设置的。

我们的音乐是进入场景就播放的，所以动作设置如下。

先让播放按钮的初始值是隐藏自己。

然后给两个按钮的动作，分别是点击隐藏自己和点击显示对方。

当然，如果要求不高，只使用一个按钮，我们的动作也能实现。

因为双向的动作本身就存在。

制作音乐开关的按钮完毕，我们依次制作自动旋转切换、拖拽方式切换、全屏切换的按钮。

注意一下，开始自动旋转的两个参数“延迟”和“恢复视野”。“延迟”在前面的开启自动旋转文章说过，它是指等待鼠标键盘无操作后多长时间开始旋转。这里的延迟是一个意思，不是点击按钮后等待多长时间开始旋转，而是点击按钮后立即开始旋转，而后我们操作了鼠标键盘后，旋转动作会暂停，接着等待鼠标键盘无操作后的“延迟”时间再开始旋转。“恢复视野”，也即是返回水平线，这里的数值不是时间，而是速度，值越大，返回水平的速度越快。

拖动模式有两种，连续模式和拖动模式，前者是浏览视野跟随鼠标拖动的方向，后者是浏览视野想着鼠标拖动的反方向，具体的我们实际操作一下就明白了。其中还有一种模式是切换模式，即双向动作，点击后切换连续和拖动模式。

全屏没什么好说的。

这四组按钮对应的动作，都可以由一个按钮赋予一个双向的动作完成。

在设置完动作和按钮的位置设定后，为了对按钮的统一管理（比如统一移动位置、共同作为动作的目标等），还需要对按钮“成组”

（有一点需要注意，当两个按钮重叠时，谁在树列表里靠上，谁显示在前，这和PS里图层类似）

点击“绘制容器”。

绘制过程和我们鼠标选择多个文件类似。

绘制完，我们可以看到所有的按钮文件，都成为容器 Container 1 的子级。

对于放进一个容器的控制按钮组，我们还需要注意，调整容器的位置。不是X、Y，而是锚点位置。这样设置，控制按钮才会真正的位于底部居中位置。

最后说明，对于我们添加的任何元素，软件会默认给出一个ID，不论是容器还是按钮，我们可以使用默认的ID，也可以在右侧的参数区进行ID重命名，总之一定要保证元素ID不要重复，避免动作逻辑混乱。

制作完毕或者在制作过程中，我们可以随时“实时预览”。

制作完成，记得保存，命名。

使用时，直接在这里选择就可以了。

制作按钮介绍完毕，要在这里说明一下，我们为了介绍制作按钮的基本步骤，做了这么一组按钮，实际上，上面这样一组按钮是没有必要的，上下左右放大缩小这几个按钮除了看起来有排面，实际用处并不大，电脑上完全鼠标就能完成，而且操作上本来就是更多的使用鼠标，至于手机端就更不需要了，而且对于手机端来说还占地方，所以，我们制作皮肤按钮时，要慎重考虑实际效果。