体验clayui编辑系统

           羡慕FLEX，WPF的界面效果？

           现在不用羡慕了，有了clayui以及界面编辑系统，可以很方便的为界面添加互动动画效果，clayui是用纯C++编写的，可以用于任何支持C++的系统。

           clayui现在支持windows，wince，android ，linux，并且提供了纯软件渲染，Directx3D，opengl es，三种渲染方式。

           这次放出的clayui编辑系统，以及稍候放出的windows-纯软件渲染 版本的开发库是完全免费的，可用于任何商业或非商业应用。

           如果对clayui开发库或者编辑系统有任何问题，可以加入QQ群：174738354 来讨论，请注明：clayui。clayui编辑系统和开发库的更新也会首先在QQ群里发布。

           好，不多说了，下面来体验下clayui的界面编辑系统。

           下载

           1. 首先启动 clayui界面设计器 ，点击皮肤库标签，在皮肤栏里点击“打开”，载入 “皮肤.cncskin”，如下图：

          

           2.  然后点击布局库标签栏，在布局栏里点击“打开”，载入 “布局.cnclayoutedit” ，如下图：

          

           3. 点击“窗体设计”，如下图：

          

           4. 点击“清空并打开”，载入 “2D动画”文件夹下的 “1.平移.cncwork”，如下图：

          

           5. 准备工作完毕，现在点击“测试”按钮，如果一切顺利的话，将会看到如下图所示的场景：

          

           这是一个平移动画的演示，可以点击下方的“线性”，“平方”等按钮观看动画效果。

           clayui编辑器目录里有“2D动画”，“3D动画”，“基本控件”，“遮罩特效”4个目录，里面都是一些基本的例子，可以重复第4-5步来打开并测试每个例子。

           接下来介绍一下编辑系统的基本操作

           1. 启动编辑器，载入皮肤与布局后，点击左上角的添加按钮，如下图，添加一个窗体：

          

           2. 现在在窗体设计标签下的编辑区，会有一个红色方框，以及一些小方框，如下图：

          

           可以使用鼠标左键来拖动这个窗体，如果左边的标签栏是属性，就可以看到在拖动过程中，X，Y属性是在不断变化的

           上图里的1-9数字边的小方框都是拖拽点，其中1，3，6，8是改变窗体的高宽，5，7是缩放，4是旋转。

           使用鼠标右键可以拖动编辑区，滚轴缩放编辑区。

           3. 新创建的窗体是空的，什么都没有，现在我们为这个窗体添加一个皮肤，点击“皮肤库”标签，如下图：

          

           先确保编辑区的窗体处于选中状态，图形列表选择“rect.swf"，下面的下拉框里再选”rectfill"，将是否绑定皮肤大小勾上，然后点击“添加皮肤到当前窗口”，如果操作正确，就可以看到编辑区的窗体上已经添加了一个皮肤。

           这里提示一下，由于编辑区可以存在多个窗体，所以在进行参数编辑之前，一定要选中一个窗体，作为当前编辑窗体。

           4. 为刚创建的窗体添加子窗口，点击“控件”标签，如下图所示：

          

           同前面一样，确保编辑区窗体处于选中状态，然后点击控件栏里的”勾选框“，可以看到编辑区的窗体里出现了一个小方框，这个就是一个勾选框控件，同样也是处于”裸体“状态中......，如果添加错了，可以选中子窗体，点键盘上的"delete"按键删除掉。

           5. 为刚创建的勾选框添加一个布局，让它成为真正的”勾选框“，先选中刚创建的”勾选框“子窗体，点击属性标签，如下图：

          

           将属性列表往下拖，直到出现上图里的”是否使用布局“，勾选上这个，然后在布局名列表里选择"check1"，这时，可以看到编辑区里勾选框的样子变成了一个”按钮“，”按钮“？为什么不是”勾选框“呢？

           在clayui里，布局就相当于是窗体的衣服，你可以给一个“勾选框”换上editbox，combox等其他的衣服，但特定的控件，只有在特定的布局下才能发挥其功能，如果一个勾选框上穿的是combox的衣服，那它是变不成一个combox的。只有穿上符合勾选框特定条件的布局，才能发挥勾选框的功能，关于布局的细节，会在后面慢慢介绍。

           在这里因为勾选框本身就是一个按钮，所以它穿上”按钮“的衣服，就能发挥按钮的作用，当然，你也可以在布局名里选择”check2"，这是一个勾选框的布局，这时，它就成为一个真正的“勾选框”了。

            可以点击“测试”，试试效果。

            6. 修改窗体属性，在左边属性标签栏里，可以修改当前选中的窗体的各种信息，需要注意的是，直接在编辑框里输入数值后，不会立即生效，需要点一下属性标签栏其他的地方，让编辑框失去焦点后，才会生效果。

             修改窗体颜色是在透明度一栏里，点击后，出现滚动条，可以实时调节颜色，如下图：

            

             按钮，勾选框，文本，编辑框，单选框这几个控件上的文字属性，在属性栏的最下方调整，如下图：

            

             文字颜色受到窗体颜色的影响，如上图，文字本来是黑色的，但是窗体的色调变了，文字颜色也会随之改变。

            

             7. 接下来介绍一下动画的创建方式，选中刚创建的勾选框，按住键盘上的shift键，然后拖动勾选框，会拖出来一个蓝色方框包裹的勾选框，松开shift键，此时，左边的属性栏会切换成动画属性，如下图：

            

             这时，可以点“测试”看下效果，可以看到勾选框有一个很快的平移动画，并且移动到了蓝色方框所在位置，可以随意调整下蓝色方框的坐标，然后“测试”看效果。

             蓝色方框是一个动画对象，代表动画结束时勾选框的状态，选中动画对象后，左侧属性栏里的x，y坐标，缩放系数，透明度，Z旋转角度即代表动画结束时的窗体的基本状态。

             将属性栏往下拖，可以设置各种缓动效果，如下图：

            

             有时候可能只想缩放或者旋转，不想要位移，这时可以将忽略位移勾上，这时就不会发生平移动画了。

             8：连续动画。如果有同学用过FLASH的，可能会觉得这里的动画对象就相当于FLASH里的关键桢，但FLASH里可以建立多个关键桢，来达到连续的动画效果，当然，clayui里也支持。

             还是接着刚才的，使用shift拖出3个动画对象，如下图：

            

            然后选中第一个动画对象，将持续时间修改为2000，选中第二个动画对象，将动画标识修改为 frame0ai1 ,并将持续时间修改为2000，等待时间修改为2000，选中第三个动画对象，将动画标识修改为 frame0ai2 ,并将持续时间修改为2000，等待时间修改为4000，如下图：

           

            可以看到，clayui是用3个动画对象，利用等待时间来完成连续动画。

            好的，这次先介绍到这里，后面会陆续放出关于添加编辑皮肤，布局，消息响应的介绍，下次见：）