还是以前Flash的老把戏，挪到HTML5 Canvas里。
http://www.ryan-liu.com/demo/html5/canvas_curve01.html

Adobe Edge试用手记，发表在了InfoQ上。InfoQ原文链接：http://www.infoq.com/cn/news/2011/08/edge-trial

8月1日，Adobe刚刚在Lab发布了Edge预览版，Edge是一款制作基于HTML5、CSS3和Javascript等标准的动画和交互效果的工具。虽然HTML5一直剑指Flash，但Adobe在继续增强Flash的同时，也在积极发展其产品对HTML5的支持。今年3月，Adobe发布了Wallaby预览版，一个可将FLA中动画输出为HTML5的工具。跟Wallaby相比，Edge更像是Adobe真正的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设计工具，给网络（尤其是移动平台上的）带来更丰富的内容。

Adobe官方提供了一些范例效果和源文件，大家可以看看。我也做了一个简单的例子给大家参考。

把以前做的像素效果改了个HTML5版。目前HTML5的位图API还太少，只能通过getImageData和putImageData来操作imageData对象。这里imageData相当于Flash的BitmapData。getImageData和putImageData可以获得/绘制一个imageData到context2d上。那么我即使是只想取得一个像素的信息，也必须通过getImageData来获得一个1×1大小的imageData，这显然是很浪费的。而Flash里通过getPixel和setPixel则可以很方便进行像素操作。另外，HTML5 Canvas绘图性能还有待提高，本例中绘制100×100个imageData还满流畅。但150×150就开始明显变慢。如果用fillRect则更慢。在绘图API和性能表现上，Flash目前可以说远超HTML5。

做了一个三角函数图像叠加的效果(点击重置)。我对js和html了解不多，就目前的经验，感觉canvas在某些情况下，绘图效率要比Flash好。我还没有测试canvas的位图绘图，期望还有更多惊喜。这次有几个小体会分享：

• 如果canvas面积较大，调用clearRect()会很消耗效率，这一点跟flash的graphic.clear()不太一样
• 频繁改动线条样式strokeStyle，尤其是粗细，也很消耗效率
• 单纯图形绘图（不clear），全屏（1920×1200）效率比Flash好太多
• 辅助绘图的API比Flash少，比如Color，不太方便

做Flash的同学们应该都熟悉Wonderfl。其创建者KAYAC会社又推出了在线编写和分享HTML5的Js do it。HTML5爱好者赶紧去看吧。顺便说一下，这个名字起得太赞了。

前两天看到了这个Silk，HTML5执行的一个效果应用。很漂亮，非常喜欢。于是这两天晚上用Flash模仿了一个。用perlin噪声来生成的波纹。画线是用的自己的一个曲线类，还不是很完美，打算之后修正一下现在的贝塞尔曲线算法。最终的结果在细节上跟原版还差很多。希望有时间再改进吧。不知道javascript有没有好的类库可以辅助，不然感觉上用js实现会比as复杂很多。

补：Adobe的传教士 James也做了一版，并附有详细教程。有趣的是我俩的思路各不相同。生成波纹，james用粒子自由运动，我用perlin噪声；颜色过渡，james自己写的算法，我用的mx.util.HSBColor。再就是绘图上的小不同，james用的fill填充，我只是画了线。看的出来，我是懒惰型的。。。都拣现成API用。

FlashPlayer 10.2 Beta放出。支持IE9内的硬件加速；更强的视频播放硬件加速，降低CPU资源消耗最多85%；支持自定义系统鼠标图标；全屏模式支持多显示器 。详情请自助浏览：http://labs.adobe.com/technologies/flashplayer10/

http://papervision2.com/tutorial-list/
例子丰富，讲解清楚，新手入门好帮手。

快速入口：
Away 3D Tutorials:

1. Basic Texturing with Away3D
2. A Simple Away3D Coverflow
3. A Simple Away3D Carousel
4. Loading Complex Models with Away3D

Papervision Tutorials:

1. Using Papervision’s BasicView.as
2. Basic Texturing (v2)
3. Loading Complex Models (v2)
4. Basic Mouse Interaction (v2)
5. Animation Using TweenLite
6. Advanced Interactivity
7. Advanced Interactivity 2
8. Fix Z-Sorting Issues Using Viewport Layers
9. Fix Z-Sorting issues with the QuadrantRenderEngine
10. A Simple Papervision Carousel
11. Papervision Explode Image / Rebuild
12. A Simple Papervision Coverflow
13. Adding XML to the Papervision Coverflow
14. **NEW : Papervision Isometric View & Pathfinding with as3isolib and A* (A Star)

Sencha Animator的操作界面跟Flash非常类似，Flash设计师们完全可以轻松上手。有了专门的工具，制作CSS3动画将会更轻松。假如你的网站是针对iOS设备的，那你就更应该马上动手改改版了。
地址：http://www.sencha.com/products/animator/
演示：http://dev.sencha.com/animator/demos/

Adobe动作很多啊。这又发布了Flash Media Gateway（FMG）的预测版。FMG是用于帮助FP和AIR在传统通讯设备上通过SIP协议（Session Initiation Protocol）建立连接的实时服务端平台。简单说，FMG可以使得Flash平台轻松实现传统通讯设备之间的语音或视频通话。

更多了解：http://labs.adobe.com/technologies/flashmedia_gateway/