11年8月1日，adobe宣布发布首个adobe edge公众预览版。

Adobe Edge是怎样一种工具?Edge是adobe公司在HTML5高速发展的时候因应情况开发的一种网页互动工具，能将动画整合到采用HTML,Javascript和Css3之中。

从Adobe产品发展的改进中，看出尽管苹果等开始不支持flash等技术，但adobe并没有选择封闭，硬碰硬，而是通过改进flash相关技术适应html5潮流。例如新版本的flash可以直接将flash动画直接转换为HTML5的canvas。

下载：adobe官网https://labs.adobe.com/technologies/edge/

LOGO:

主界面：

由于是预览版，功能未完善，甚至界面也相当简陋，第一眼看着当然和adobe相关软件华丽界面格格不入，但界面是小事，关键是用途，其界面等正式版肯定会完善。

栏目:

1.属性(properties)：其属性有大小，定位，透明度，以及图形变换的各种功能，例如变形大小百分比(transform origin)，分设X,Y的变化率。再有就是旋转(rotate),在实时播放影片的时候，假如有旋转，可以在这边看到实时的角度值。还有倾斜（skew），scale（放大）

小技巧：修改各项属性数值时，鼠标移到数值上面，按着左键不放，鼠标左右移动可以扩大缩小数值，当然也可以直接输入数值，还有一种方法是按着alt或ctrl等再用鼠标滚轮上下滚动控制数值大小。。有些属性是比较特殊的，例如效果。这在后面叙述。

2.工具栏(tools)

就是方便快捷创建元素，因为是设计网页，比较常用的就是文字列，或按钮，或矩形。这个版本只有这几项，但在下拉菜单中有import功能，可以导入AI的矢量图，所以可以在AI中建立后导入到edge项目中。

小技巧：创建矩形的时候，有四个黑点，这4个是提供给用家，用以定制圆角的拖动黑点，可以定制每个圆角的大小，如图属性值的8点值就是4个角的x，y的大小当然了，4个角是必须大小相等的。这和CSS3属性有关

3.元素栏(Elements)

和其他软件类似，就是网页每个元素的快捷控制，颜色，可视，锁定，是必须的，但注意，所谓元素就是网页中的DOM，XHTML里面的DIV，了解CSS的都清楚，CSS是根据DIV或各个dom的id来辨识的。

4.时间轴(timeline)

时间轴设计得还是有点简陋，用过flash都清楚时间轴的作用，就不再论述，例如关键帧的使用等等也是，图形变形也是通过前后两关键帧的图形设置，这个时候不能激活自动关键帧属性的按钮（auto-keyframe properties）,也就是红色的小按钮。当需要图形按指定大小变化时候，先设一关键帧，再在需要变化到得时间那桢那里设置图形属性数值，再激活自动关键帧属性。

小技巧：当需要图形变化后还原的时候，利用复制粘贴，注意不是普通粘贴而是，paste inverted,也就是倒转粘贴，这样图形变换的方式就会倒转，从而实现图形还原。官网视频文字颤抖后还原也就是这样做出来的。

5.主窗口：

主窗口更为简陋，缺乏很多功能，例如定位等等。只提供最基本功能，希望正式版提供丰富完善的功能。

虽然是预览版，但功能实在令人惊异，将枯燥变成图形设计，将网页设计变成图形图像设计，对设计师来说是一款非常不错的工具

下一篇里面介绍adobe edge实际操作。（相当不错的）

（转载请注明来自blog.ccjk.com）