edge怎样加HTML5播放器,Adobe Edge 新HTML5动画工具试用教程

打开Edge，乍一看，几乎和Adobe的After Effects(后面简称AE)界面一模一样(参考图1：After

Effects和Edge界面对比)。工具栏的布局跟AE一样，Elements面板与AE的Project面板相似，时间轴也几乎跟AE的一模一样，只有Properties属性面板和Flash是一样的，我本以为Edge的界面会更像Flash。我觉得应该是因为HTML里的元素基本都有众多的CSS属性，而AE这种一层时间轴对应一个属性的界面能使动画操作更精准、更有组织，但代价就是，一个圆角矩形元件有可能展开14层之多的时间轴(如图2：圆角矩形的属性所示)。或许，Edge也可以模仿AE，把同类属性放在一条时间轴里。

图1：After

Effects和Edge界面对比

图2：圆角矩形的属性

当前的Edge界面十分简洁，工具栏除选择工具之外，只有一个文字工具、一个矩形和一个圆角矩形工具(两个矩形工具画出的结果是一样的)，整个界面只有Properties、Elements和Timeline三个面板，仅仅满足了动画制作地基本支持。

除了文字和图形，你还可以导入外部图片做素材。这一点，Edge和AE也很类似，以处理和操作外部素材为主，毕竟HTML输出还不是一个图形环境，不可能像Flash一样绘制大量的图形。但某些方面HTML有自己的特点，例如圆角矩形的属性在CSS里有丰富的定义，通过操作这些属性，如每个圆角的半径，你可以很轻松的实现在Flash中很麻烦的动画效果。想象一下CSS中各种元素丰富的属性，我相信这种“属性驱动”的动画制作方式能给网络带来一些新的灵感和新的设计方法。有一点需要提一下，对于图片素材，修改属性面板里的宽和高实际是修改图像clipping区域的宽和高，并不是修改图片本身，在画布上拖拽图像边缘也是同样只修改了clipping区域。如果想调整图片大小呢？设置缩放(scale)的值就好。(参考图3：图片的裁剪操作)这也算是实现了图片素材的遮罩。

图3：图片的裁剪操作

Edge里动画的制作很直接，只要你有动画经验，即使没用过AE，也很容易上手。时间轴支持关键帧的自动建立，即当你在一个时间点上改变元件属性时，时间轴会自动建立一个关键帧，并且生成和其他关键帧之间的transition(不叫tween了)。时间轴还支持关键帧的删除和拖动，单条或若干条一组transition的拖动。transition有自己的属性面板，除了修改长度、起始和结束时间，还可以添加easing。easing是动画制作的灵魂，Edge提供了很丰富的easing类别，但还没有类似Flash或AE的可编辑的easing曲线操作，现在也没有常用的遮罩(前面所介绍的图片只实现了矩形遮罩)和动画引导线功能。Adobe官方的例子里有一段过山车沿着轨道走的动画(图4：官方的过山车动画源文件)，曲线的动画完全是用关键帧堆出来的，不但制作很麻烦，而且做完之后再修改会很要命。

图4：官方的过山车动画源文件

总结一下，Edge确实提供了一个基本的HTML动画编辑环境，设计师们不用死磕代码，也可以较快速地制作出常规的动画效果，目前版本的Edge功能有限，还不足以供设计师和动画师们大展身手。如果你有对HTML和CSS的了解，会有助于你理解为什么Edge是这个样子，为什么有些功能不能跟Flash或者AE一样。希望下一个版本的Edge能继续完善动画功能，同时加入对交互的支持，HTML里动画的发挥空间暂时还有限，交互效果才是当前主流的需求。Edge是一个开始，我希望Adobe能继续完善和增强，以提供给大家一个强大的HTML设计工具，给网络(尤其是移动平台上的)带来更丰富的内容。

http://www.byhtml5.com/hjc/2011-08-06/292.html

原文链接：