1.1.3 Animate CC新增及改进的功能

Adobe在2018年12月发布了Animate CC的新版本(版本号19.1)。与Flash相比,Animate CC拥有大量的新特性,特别是在继续支持Flash SWF、AIR格式的同时,还会支持HTML5 Canvas、Web GL,并能通过可扩展架构去支持包括SVG在内的几乎任何动画格式。下面介绍一些主要的新增及改进的功能。

建议

初学者可以先忽视这些新增功能,待对软件有一定的基础后再来查阅。

1.HTML5 Canvas支持

Flash的末期版本就增加了一种文档类型——HTML5 Canvas,新的Animate CC继续在HTML5的道路上不断增强功能,可以创建具有图稿、图形及动画等丰富内容的HTML5动画,对HTML5内容提供本地支持。这意味着可以使用传统的时间轴、工作区及工具来创建动画内容,只需单击几次鼠标,即可创建HTML5 Canvas文档并生成功能完善的HTML输出。

2.Web GL支持

Web GL(Web Graphics Library)是一项在网页浏览器中呈现3D画面的技术。Animate CC可为Web GL格式提供原生支持。用户可以在Animate CC内使用熟悉的“时间轴”“工作区”“工具”及其他功能,创建Web GL文件类型并发布Web GL内容,其中包含预设效果文件和发布设定。不过,Web GL支持暂时是实验性质的功能,只以预览形式提供,并且包含有限的互动功能支持。

有别于过去需要安装浏览器插件,通过Web GL的技术,我们可以将3D元素与HTML元素进行混合和匹配,只需要编写网页代码即可实现3D图像的展示。Web GL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以在浏览器中更流畅地展示3D场景和模型,甚至可以设计3D网页游戏等。

3.转换为其他文档类型

不同的设备和平台可能具有不同的文档类型要求。为了便于将设计的动画广泛用于多个设备和平台而不需要重复制作,Animate CC新增了不同文档类型的转换功能。可以根据设备要求,使用简单易用的文档类型转换器,将动画从一个文档类型转换为其他文档类型,单击菜单“文件”→“转换为”命令即可选择需要的文档类型,如图1-8所示。

图1-8 菜单中的文档类型转换

4.舞台增强功能

Animate CC引入了一些舞台增强功能,如图1-9所示,包括舞台居中设置、剪切舞台外部的内容、创建舞台轮廓以指明舞台边界、支持舞台透明画布背景等。

图1-9 舞台增强功能

5.新增矢量画笔及画笔库

Animate CC新增了一个矢量画笔工具,并且自带了一个种类丰富的矢量画笔库,如图1-10所示。借助矢量画笔工具和画笔库,我们可以绘制各具特色的笔触效果,从而大大增强了Animate CC的绘图能力。

6.宽度可变的形状描边

Animate CC对轮廓和描边有更完善的设置,可以将原本粗细均匀的描边宽度设置为不均匀,根据自己的要求设置描边的粗细变化,并且可将这种变化记录为形状补间。此外,Animate CC专门有一个宽度工具,类似于Illustrator,可以在描边任意位置控制其宽度,如图1-11所示。

图1-10 新增的矢量画笔及画笔库

图1-11 描边的宽度设置和宽度工具

7.时间轴增强功能

Animate CC对原时间轴也做了很多改进和增强,如图1-12所示,使其更便于设计人员和动画制作人员使用,具体改进如下。

图1-12 Animate CC对时间轴做了很多改进

●增强了调整时间轴视图大小的功能,使得时间轴缩放体验更流畅。

●显示时间及帧编号:此功能可以更快地从帧转换为时间,便于我们知悉当前帧所处的时间位置。

●缩放帧间距:可以更改动画的每秒帧数(Frames Per Second,FPS),而不必更改动画速度。在更改FPS以保持时间不变时,可使用“缩放帧间距”选项。

● 延长或缩短选定帧间距的时间:在时间轴上选择帧间距,然后向前或向后拖动选定间距的右边缘,时间轴上的帧会自动调整,无需对此帧间距内的其他关键帧进行手动调整。

● 在舞台上平移动画:通过使用新的“时间划动”工具直接在舞台上向左或向右拖动,以查看整个时间轴,类似于使用播放头在时间轴上拖动。

8.新增虚拟摄像头及图层深度功能

以前,如果要制作画面缩放和平移的效果,需要对每个图层甚至每个对象同时进行缩放和平移,以模仿摄像头的运动,工作烦琐。现在,Animate CC新增了虚拟摄像头,直接利用它可以快速模仿镜头的推拉摇移效果,如图1-13所示,它们对任何动画都是必不可少的。其具体功能如下。

图1-13 虚拟摄像头工作区

注:A. 舞台轮廓;B. 摄像头图标;C. 摄像头属性;D. 摄像头色彩效果;E. 摄像头工具;F. 摄像头图标;G. 摄像头图层。

●放大感兴趣的对象以获得逼真效果:推镜头。

●缩小帧,使查看者可以看到更大范围的图片:拉镜头。

●修改焦点,将查看者的注意力从一个主题移到另一个主题:平移镜头。

●旋转摄像头。

●使用色调或滤镜应用色彩效果。

在摄像头视图下查看作品时,看到的图层会像正透过摄像头来看一样。此外,还可以对摄像头图层添加补间或关键帧。

Animate CC还引入了图层深度及增强的摄像头工具,它通过在不同的平面中放置资源在动画中创建深度感,通过修改图层深度、补间深度,并在图层深度中引入摄像头来创建视差效果。例如,一名游戏设计人员或开发人员,需要为游戏创造身临其境的体验,通过在前景和背景图层中使用游戏的不同对象,可以控制这些对象的速度和位置;通过将摄像头聚焦在一个恒定的焦点上,可以在不同速度下移动对象以创建三维效果。

9.全新的动画编辑器及缓动设置

Animate CC针对补间动画的“动画编辑器”,可以在优化补间动画时提供更顺畅的使用体验,有助于更轻松、集中地编辑属性曲线。设计者可以用简单的步骤来创建复杂且具吸引力的补间动画,更便于模拟物件的真实运动轨迹。

此外,Animate CC提供了一组标准缓动预设,适用于传统和形状补间,为Animate设计人员提供灵活性,如图1-14所示。设计人员可以从缓动预设列表中选择某种预设,然后将其应用于补间。Animate CC还为动画设计人员提供了自定义缓动预设并在其他项目中重复使用这些预设的功能,以便减少手动工作量和缩短时间。借助增强的自定义缓动预设,设计人员现在可以轻松地管理动画的速度。预设和自定义缓动预设现已延伸到属性缓动,设计人员可以针对传统和形状补间保存自定义缓动预设。

图1-14 增强的缓动预设及自定义缓动功能

10.脚本增强

Flash的末期版本已增加了对HTML5 Canvas文档的支持,并内嵌了Create JS脚本引擎,以便于开发交互式网页动画。Animate CC进一步增强了脚本编写功能,如支持添加全局和第三方脚本。设计人员经常会使用适用于整个动画的Java Script代码。以前,设计人员无法从Flash内部设置应用于整个动画的全局变量或脚本,但有了新版的Animate CC后,设计人员可以添加非特定于帧的全局脚本了。此外,Animate CC还增加了固定脚本功能,使用该功能可以固定动作窗口中各个脚本的标签并相应地移动它们。此功能在设计人员还没有将FLA文件中的代码组织到一个集中的位置或者在使用多个脚本时是非常有用的,可以将脚本固定,以保留代码在动作面板中的打开位置,然后在各个打开的脚本中切换。

11.HTML5 Canvas组件支持

组件提供一种功能或是一组相关的可以提高效率的可重用元素。Animate CC不仅支持与使用原Flash的组件,在其新版中也支持基于HTML5 Canvas的组件,并提供了以下新功能。

●打包、分发和安装HTML5自定义组件。

Animate开发人员可以打包,将随时可供使用的打包组件分发给设计人员。Animate设计人员可以安装分发的组件,而无需进行编码。

●对HTML5视频组件支持“静音”和“海报”属性。

Animate CC新版本为HTML5视频组件引入了两个新属性:“静音”和“海报”。设计人员可以使用“静音”属性启用或禁用视频组件的音频,并且可以使用“海报”属性在视频播放之前选择静态海报图像。

12.使用CC库实现协作

在新版的Animate CC中,通过CC库可以在不同文档中共享元件或整个动画。这样,多名动画制作人员就可以实现无缝协作,从而简化游戏或应用程序的开发流程;并且,设计人员可以通过CC库在多个支持的应用程序(如Adobe Muse和Adobe Indesign)之间实现动画资源的无缝导入,还可以使用链接的方式将库中资源与原始资源同步。

13.自动嘴型同步

嘴型同步是指制作嘴型动画时,让嘴型与声音较好地协调。Animate CC借助Adobe Sensei(一种基于深度学习和机器学习的新技术)的支持,可以让嘴型与声音、语调自动同步。自动嘴型同步功能可基于所选择的语音图层,利用已有嘴型列表(在图形元件中绘制)并给它们标记相应的视位来实现。在图形元件上应用自动嘴型同步功能后,Animate CC将对指定语音图层进行分析,然后在不同位置自动创建关键帧,以匹配语音的发音嘴型。如果需要,可以使用常规工作流程和帧选择器进行进一步的调整,如图1-15所示。

图1-15 新增的自动嘴型同步功能

14.VR创作和发布(测试版)

Animate CC引入了VR 360和VR Panorama文档类型,我们可以轻松地创作全景或360°虚拟现实动画这种具有吸引力的内容;此外,还可以使用虚拟现实文档类型将3D模型内容(glb文件)导入Animate项目中,并与VR输出交互。

15.建立图层父子关系

Animate CC现在可以将一个图层设置为另一个图层的父项,以使动画的一个图层或对象控制另一个图层或对象,当父图层上的对象移动时,子图层自动随它一起移动。这种功能特别适合于角色动画设计人员或游戏设计人员,使他们可以更轻松地控制人物不同部位的移动,从而加快制作动画的时间,如图1-16所示。

图1-16 为一个角色设置的图层父子关系

16.图层效果

现在Animate CC可以为整个图层或帧添加着色、滤镜等,可将多种滤镜效果同时应用于帧中的所有对象,包括图形元件和形状,而不必像以前那样只能给影片剪辑添加滤镜效果,因此提高了灵活性。

17.改进了与After Effects的集成

现在,Animate CC通过为After Effect提供一个插件,可以将Animate FLA文件直接导入After Effects,以将它们合成视频或将其作为视频进行渲染,从而取得更有创造性的效果,而且Animate的图层层次结构在After Effects中可继续保持。