什么比静态效果更好?当然是动态效果,朋友们。从简单的界面交互,到更为复杂的场景和原型,动态效果在网页中的应用日渐增多。本文我们将介绍一下Adobe Animate,它是什么,不是什么,以及它能如何帮助网页设计师工作。

什么是 Adobe Animate?

Adobe Animate 被描述成Flash专业版 (Flash Professional) 的进化版本;当史蒂夫·乔布斯发表了一封有关Flash的公开信的同时,flash注定成为了历史。

“为了更好的体现它在网页及其他领域内作为一款主打动效工具的地位,Flash Professional 将被改名为 Adobe Animate CC” – Rich Lee, 2015年

时至变迁,Adobe已经改变了他们对待网络的方式。

无论你是动效新手,还是正在考虑替换原型工具的老司机,Adobe Animate CC 或许正是你的选择。和所有工具一样,它的目的是专人专用。 虽然它不是每个人的必备工具,但是它还是会让你对它产生兴趣。

使用 Adobe Animate 创建的卡通,广告,游戏以及其他交互内容可以发布到我们熟悉的众多平台,如 HTML5 Canvas, Flash Player & Air, WebGL, 甚至是 Snap SVG。

功能特性

为了帮助大家更好的了解 Adobe Animate 的性能,我认为最好是列出一些我个人认为非常有用的主要功能。Adobe Animate最好的功能当然就是它已经完全拥抱了Web标准。其次就是相当广泛的导出和发布选项,还有矢量画笔,HiDPI支持,第三方JavaScript整合以及更多。

时间轴及帧

发生在一定时间内的动作集合通常称为时间轴。Flash开发者对这些概念会非常熟悉。该UI界面允许开发者通过获取整个序列组合的视觉透视来管理时间轴内的动作。这里有一个Adobe对时间轴概念的简单介绍。

时间轴用于组织和控制在一定时间内图层和帧中的文档内容。也就是说艺术家们可以单独创建动画并且将这些孤立的运动集成到一个更大的主时间轴里。

导出和发布

随着开放网络标准终于被Animate CC所接受,开发者还是必须要注意到导出格式的技术限制。开发者仍然可以根据需要选择导出到Flash播放器, SWF文件。Animate CC还可以导出到不同解析度的bitmap格式文件。你甚至可以根据帧和动效生成一个Sprite表在css中使用。

毫无疑问,导出和发布选项让你的项目更加高效和先进化。通过启用 “scale content” 选项,你可以无需从头创建源文件即可交付相同项目的不同版本。在发布设置窗口中使用正确的对象及嵌入式标签即可生成用于ActionsScript项目的HTML文件。

还有一个好消息就是,你还可以导出到SVG格式。

矢量画笔

Animate CC 引入了新的矢量绘制工具,包括无需转换成图形再进行编辑的矢量画笔。所有你在Illustrator 中熟知的画笔和绘制功能在 Animate CC 同样适用。你可以通过设置画笔的参数,比如形状甚至斜度,来自定义画笔。如果你关心作品的质量和清晰度,那么该项功能超级实用。

骨骼工具

Flash开发人员将会在家中使用骨骼工具对对象进行动画处理,这些骨骼按父子关系链接成线性或枝状的骨架;想象一下弯曲的手臂,蛇行或踢腿这些运动。这些类型的动效如果使用代码实现将会花费大量的时间,但是如果使用Animate CC制作就会非常快速,降低坏想法的成本,加速孕育好点子。

基于电枢的运动序列也可以包括在元件中,也就是我们熟知的“实例”,可以在你的项目中反复使用。

骨骼工具还有其他一些隐藏的小技巧。通过将动态物理学整合到骨骼中来获得逼真的物理运动,如弹性,让运动对物理世界来说更加逼真。

支持第三方JavaScript脚本

你创造了一件伟大的作品让他动起来,但是希望使用第三方帮助如 GreenSock,可以吗?好消息!你完全可以。现在开发者可以从全新的Animate界面获取他们想要的灵活性,而不用感觉住在一个砌了围墙的花园内无法获得外部世界的帮助。使用最新的JavaScript库为你动画中的帧获得所需的灵活性。

摄像头定位和舞台控制

动画师对舞台(例如画布)定位有着完全的控制权。有可用的选项可以设置以任何方式旋转舞台,选择你想要的任何起始点,例如舞台的正中央甚至角落。你的动画还可以包括更多的动态,例如添加相机效果,例如平移,放大或者旋转,让你的项目更加逼真;小心不要让詹姆斯·卡梅伦盯上你。

总结

工具很酷,但是它们不能主宰世界。工具选择不仅要明智,还要选择适合你的。工具是来帮助你的而不是来限定你的工流程的。如果你正在你的项目中使用Animate,请留言或者分享你的实例链接,告诉我们你的使用经验。祝你创作动画快乐!

延伸阅读以及有用的链接

  • 免费的 Adobe Animate 教程
  • 新增功能一览表
  • 使用帮助
  • 学习教程
  • WebGL