设计物语 – 用Adobe Edge Animate工作的优点

在设计开发的过程中,当设计师做好了一套静态页面而且设想出N种有趣的交互动画,再交付前端开发人员还原页面的时候,由于无法提供精确的动态参数,导致沟通和制作的成本增加,而且最终的实现效果也会有预期误差。因此,我们需要一款软件来准确执行预期动画效果展示。

我们先来对比下目前主流动画执行软件的优劣势:Adobe 1Adobe Flash

是美国Macromedia公司(现在已被Adobe公司收购)所设计的一种二维动画软件,早期凭借良好的交互执行能力几乎垄断了互联网网站市场,涉及领域从banner到flash的整站再到flash游戏,苹果放弃flash策底终结了flash的互联网时代。

优势:介入动画领域较早,对于动画执行功能较为全面,可作出丰富的交互效果,会的人多。

劣势:输出带交互的效果必须是swf格式,需flash播放器支持,且目前网站市场基本放弃flash执行逻辑,所以输出文件基本不能直接使用到项目。

 

Adobe Photoshop

早期ImageReady专注于互联网gif动画,到Photoshop更新到5.5版本的时候,Adobe公司将升级到2.0版本的ImageReady和它捆绑在一起,但photoshop cs3后集成了ImageReady几乎所有的功能,因此ImageReady已经不必要了,photoshop保留了ImageReady的功能并将其作为一个功能更名为timeline。

优势:内置于Photoshop里头,直接调用Ps分层使用,适用于简单动画与逐帧动画执行。

劣势:无缓动曲线,模拟缓动需要逐帧调整,输出格式不带交互功能。

 

Adobe After Effects

Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件,适用于从事设计和视频特技的机构,包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。利用与其他Adobe软件无与伦比的紧密集成和高度灵活的2D和3D合成,以及数百种预设的效果和动画,为您的作品增添令人耳目一新的效果。

优势:动画功能非常强大,支持代码嵌入,属于专业级别动画工具。

劣势:学习成本高,执行效果无法直接用于项目。

 

Adobe Edge Animate

Adobe Edge是adobe公司的一款新型网页互动工具。允许设计师通过HTML5、CSS和JavaScript制作网页动画。Adobe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏。该工具的重点放在动画引擎上,但adobe承诺将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。

优势:软件量级轻,容易上手,输出内容能直接用于项目,且支持弹性结构展示,支持代码嵌入,移动设备领域优势明显。

劣势:输出垃圾代码多,不适用体验型站点使用。

Adobe 2

Adobe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏。该工具的重点放在动画引擎上,但adobe承诺将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等。支持Android、iOS、webOS、黑莓PlayBook、Firefox、Chrome、Safari和IE9等各个平台。

权衡软件的优点和缺点的软件,我得出的结论是,Adobe Edge是最方便的软件。首先,它很容易操作。其次,它允许一个高效的和光滑的工作流程在设计师和开发人员之间自从互动动画开发在早期阶段。

我们先来看看舞台的基本适配逻辑:

我们以新建立一个320x480px的主场景在iPhone6上显示的效果为例,iPhone6逻辑分辨率为375x615px,舞台的值决定着在不同设备上主画面以什么样的形式展示在设备上,是否缩放显示。

Adobe 3

我们以公司网站手机版为例子,制作第一屏里头的内容

Adobe 4

第一步,制作导航内容(导航结构应为,宽度自适应,定高80px,logo左浮动,icon右浮动)logo与icon离屏幕左右距离控制在5%左右

Adobe 5

第二步,制作标题内容

Adobe 6

第三步,制作简介内容

Adobe 7

第四步,制作导航内容,导航有内部嵌套内容,所以需要转化为符号

Adobe 8

第五步,为按钮添加事件参数

Adobe 9

第六步,衔接按钮与动画的播放位置

Adobe 10

然后保存导出,就能直接在模拟器里测试效果了

Adobe 11

完成!

我希望这篇文章能让你直观了解到如何用边缘动画工作。Adobe Edge Animate 功能远不止如此,如果结合js代码的使用,更能作出丰富的动画交互效果。所以有乐趣就自己测试它!

nesta-photo

 

本文的作者:

Nesta,公司的艺术总监,了解所有关于网络标准化过程的整合,最新的设计软件趋势和最新的国际足联结果。