创建和组织图层

图层可以帮助您在文档中组织插图。可以在一个图层上绘制和编辑对象,而不会影响其他图层上的对象。在图层上没有内容的舞台区域中,可以透过该图层看到下面的图层。

要对图层或文件夹进行绘制、涂色或者修改,请在时间轴中选择该图层以将其激活。时间轴中图层或文件夹名称旁边的铅笔图标指示该图层或文件夹处于活动状态。一次只能有一个图层处于活动状态(尽管一次可以选择多个图层)。

在创建一个 Animate CC(以前名为 Flash Professional CC)文件时,其中仅包含一个图层。要在文档中组织插图、动画和其他元素,请添加更多图层。还可以隐藏、锁定或重新排列图层。可以创建的图层数仅受计算机内存的限制。图层不会增加发布的 SWF 文件的大小。只有放入图层的对象才会增加文件的大小。

要组织和管理图层,请创建图层文件夹,然后将图层放入其中。可以在时间轴中展开或折叠图层文件夹,而不会影响您在舞台中看到的内容。对声音文件、ActionScript、帧标签和帧注释分别使用不同的图层或文件夹。使用单独的图层有助于快速找到这些项目以进行编辑。

为了帮助创建复杂效果,可使用特殊的引导层,以便更轻松地绘制和编辑内容以及创建遮罩层。

可以在 Animate 中使用五种类型的图层:

  • 标准图层包含 fla 文件中的大部分插图。

  • 遮罩层包含用作遮罩的对象,这些对象用于隐藏其下方的选定图层部分。有关详细信息,请参阅使用遮罩层

  • 被遮罩层是位于遮罩层下方并与之关联的图层。被遮罩层中只有未被遮罩层覆盖的部分才是可见的。有关详细信息,请参阅使用遮罩层

  • 引导层包含笔触,可用于引导其他图层上对象的排列。此外,引导层还可用于在其他图层上引导传统补间动画的运动。有关详细信息,请参阅引导层沿路径创建传统补间动画

  • 被引导层是与引导层关联的图层。可以沿引导层上的笔触排列被引导层上的对象或为这些对象创建动画效果。被引导层可以包含静态插图和传统补间,但不能包含补间动画。

  • 补间动画图层包含使用补间动画进行动画处理的对象。有关详细信息,请参阅关于补间动画

  • 骨架图层包含附加了反向运动骨骼的对象。有关详细信息,请参阅使用骨骼工具实现反向运动动画

常规层、遮罩层、被遮罩层和引导层可以包含补间动画或反向运动骨骼。当上述某个图层中存在这些项目时,可向该图层添加的内容类型将受到限制。有关详细信息,请参阅补间动画使用骨骼工具实现反向运动动画

创建图层

创建一个图层之后,该图层将出现在所选图层的上方。新添加的图层将成为活动图层。

  1. 请执行下列操作之一:
    • 单击时间轴底部的“新建图层”按钮

    • 选择“插入”>“时间轴”>“图层”

    • 右键单击 (Windows) 或按住 Control 单击 (Macintosh) 时间轴中的一个图层名称,然后从上下文菜单中选择“插入图层”

创建图层文件夹

  1. 请执行下列操作之一:
    • 在时间轴中选择一个图层或文件夹,然后选择“插入”>“时间轴”>“图层文件夹”

    • 右键单击 (Windows) 或按住 Control 单击 (Macintosh) 时间轴中的一个图层名称,然后从上下文菜单中选择“插入文件夹”。新文件夹将出现在所选图层或文件夹的上方。

    • 单击时间轴底部的“新建文件夹”图标 。新文件夹将出现在所选图层或文件夹的上方。

组织图层和图层文件夹

要组织您的文档,请在时间轴中重新排列图层和文件夹。

图层文件夹通过让您将图层置于树形结构中,来组织您的工作流程。要查看文件夹包含的图层而不影响在舞台中可见的图层,请展开或折叠该文件夹。文件夹中可以包含图层,也可以包含其他文件夹,使您可以像在计算机中组织文件一样来组织图层。

时间轴中的图层控件将影响文件夹中的所有图层。例如,锁定一个图层文件夹将锁定该文件夹中的所有图层。

  • 要将图层或图层文件夹移动到图层文件夹中,请将该图层或图层文件夹的名称拖到目标图层文件夹的名称中。
  • 要更改图层或文件夹的顺序,请将时间轴中的一个或多个图层或文件夹拖到所需位置。
  • 要展开或折叠文件夹,请单击该文件夹名称左侧的三角形。
  • 要展开或折叠所有文件夹,请右键单击 (Windows) 或按住 Control 单击 (Macintosh),然后选择“展开所有文件夹”“折叠所有文件夹”

重命名图层或文件夹

默认情况下,Animate 会按照创建顺序向新图层分配名称:图层 1、图层 2,依此类推。为了更好地反映图层的内容,可以对图层进行重命名。

  1. 请执行下列操作之一:
    • 双击时间轴中图层或文件夹的名称,然后输入新名称。

    • 右键单击 (Windows) 或按住 Control 单击 (Macintosh) 图层或文件夹的名称,然后从上下文菜单中选择“属性”。在“名称”框中输入新名称,然后单击“确定”。

    • 在时间轴中选择该图层或文件夹,然后选择“修改”>“时间轴”>“图层属性”。在“名称”框中输入新名称,然后单击“确定”

选择图层或文件夹

  1. 请执行下列操作之一:
    • 单击时间轴中图层或文件夹的名称。

    • 在时间轴中单击要选择的图层的任意一个帧。

    • 在舞台中选择要选择的图层上的一个对象。

    • 要选择连续的几个图层或文件夹,请在按住 Shift 的同时单击时间轴中的图层或文件夹名称。

    • 若要选择多个不连续的图层或文件夹,请在按住 Ctrl (Windows) 或 Command (Macintosh) 的同时单击时间轴中的图层或文件夹名称。

从单个图层复制帧

  1. 在图层中选择一组帧。要选择整个图层,请单击时间轴中的图层名称。
  2. 选择“编辑”>“时间轴”>“复制帧”

  3. 单击希望开始粘贴处的帧,选择“编辑”>“时间轴”>“粘贴帧”。要替换目标时间轴上同样数目的复制帧,可使用“粘贴并覆盖帧”选项。

    Overwrite_frames_process_1
    “粘贴并覆盖帧”工作流

    A. 选择帧并复制。 B. 右键单击想要对其进行粘贴的帧,然后选择“粘贴并覆盖帧”。 C. 粘贴过来的帧将覆盖时间轴上同样数目的帧。 

从图层文件夹复制帧

  1. 要选择整个文件夹,请折叠文件夹(单击时间轴中文件夹名称左侧的三角形),然后单击文件夹名称。 

  2. 选择“编辑”>“时间轴”>“复制帧”

  3. 要创建文件夹,请选择“插入”>“时间轴”>“图层文件夹”

  4. 单击该新文件夹,然后选择“编辑”>“时间轴”>“粘贴帧”

删除图层或文件夹

  1. 要选择图层或文件夹,请单击时间轴中该图层或文件夹的名称,或者单击图层中的任意一个帧。
  2. 请执行下列操作之一:
    • 单击时间轴中的“删除图层”按钮。

    • 将图层或文件夹拖到“删除图层”按钮。

    • 右键单击 (Windows) 或按住 Control 单击 (Macintosh) 该图层或文件夹的名称,然后从上下文菜单中选择“删除图层”

    注意:

    删除图层文件夹时,还将删除所有封闭图层及其内容。

锁定或解锁一个或多个图层或文件夹

  • 要锁定图层或文件夹,请单击该图层或文件夹名称右侧的“锁定”列。要解锁该图层或文件夹,请再次单击“锁定”列。

  • 要锁定所有图层和文件夹,请单击挂锁图标。要解锁所有图层和文件夹,请再次单击它。

  • 要锁定或解锁多个图层或文件夹,请在“锁定”列中拖动。

  • 要锁定其他所有图层或文件夹,请在锁定列中按住 Alt 并单击 (Windows) 或按住 Option 并单击 (Macintosh)。要解锁所有图层或文件夹,请再次在锁定列中按住 Alt 并单击按住 Option 并单击 (Macintosh)。

复制并粘贴图层(仅限 CS5.5)

可以复制时间轴中的整个图层和图层文件夹,并将其粘贴到同一时间轴或单独的时间轴。可以复制任何类型的图层。

在复制和粘贴图层时,将保留所复制图层的图层文件夹结构。

  1. 通过单击图层名称可以选择时间轴中的一个或多个图层。按住 Shift 并单击可选择连续图层。按住 Control 并单击 (Windows) 或按住 Command 并单击 (Macintosh) 可选择不连续图层。

  2. 选择“编辑”>“时间轴”>“复制图层”“剪切图层”。还可以右键单击图层并从上下文菜单中选择“复制图层”“剪切图层”

  3. 在希望将图层粘贴到的时间轴中,选中要插入粘贴图层的位置下方紧邻的图层。

  4. 选择“编辑”>“时间轴”>“粘贴图层”

图层将显示在时间轴中所选图层的上方。如果选择了图层文件夹,则粘贴的图层将显示在文件夹内部。

若要将图层置于遮罩层或引导层,必须先在该遮罩层或引导层下选择一个图层,然后再粘贴。不能在遮罩层或引导层下粘贴遮罩层、引导层或文件夹图层。

还可以通过选择图层并选择“编辑”>“时间轴”>“复制图层”来复制图层。新图层的图层名称上附加了“复制”一词。

为多个图层设置属性

  1. 在 Animate CC 中,创建一个 FLA 文件或打开一个现有的文件。

  2. 选择您要修改其属性的那些图层,单击右键并选择“属性”

  3. “图层属性”对话框中修改属性。

  4. 单击“确定”

显示或隐藏图层或文件夹

时间轴中图层或文件夹名称旁边的红色 X 表示图层或文件夹处于隐藏状态。 在发布设置中,可以选择在发布 SWF 文件时是否包括隐藏图层。

  • 要隐藏图层或文件夹,请单击时间轴中该图层或文件夹名称右侧的“眼睛”列。 要显示图层或文件夹,请再次单击它。

  • 要隐藏时间轴中的所有图层和文件夹,请单击眼睛图标。若要显示所有图层和文件夹,请再次单击它。

  • 要显示或隐藏多个图层或文件夹,请在眼睛图标列中拖动。

  • 要隐藏当前图层或文件夹以外的所有图层和文件夹,请在“眼睛”图标列中按住 Alt 并单击 (Windows) 或按住 Option 并单击 (Macintosh)。要显示所有图层和文件夹,请再次按住 Alt 并单击或按住 Option 并单击。

按轮廓查看图层的内容

要区分对象所属的图层,请用彩色轮廓显示图层上的所有对象。

  • 要将图层上所有对象显示为轮廓,请单击该图层名称右侧的“轮廓”列。 要关闭轮廓显示,请再次单击它。

  • 要将所有图层上的对象显示为轮廓,请单击轮廓图标。 要关闭所有图层上的轮廓显示,请再次单击它。

  • 要将当前图层以外的所有图层上的对象显示为轮廓,请在“轮廓”列中按住 Alt 并单击 (Windows) 或按住 Option 并单击 (Macintosh)。要关闭所有图层的轮廓显示,请再次按住 Alt 并单击或按住 Option 并单击。

注意:

图层上的运动路径也使用图层轮廓颜色。

更改图层的轮廓颜色

  1. 请执行下列操作之一:
    • 双击时间轴中图层的图标(即该图层名称左侧的图标)。

    • 右键单击 (Windows) 或按住 Control 并单击 (Macintosh) 该图层名称,然后从上下文菜单中选择“属性”

    • 在时间轴中选择该图层,然后选择“修改”>“时间轴”>“图层属性”

  2. “图层属性”对话框中,单击“轮廓颜色”调色板,选择一种新颜色,再单击“确定”

查看图层和图层文件夹

显示或隐藏图层或文件夹

时间轴中图层或文件夹名称旁边的红色 X 表示图层或文件夹处于隐藏状态。 在发布设置中,可以选择在发布 SWF 文件时是否包括隐藏图层。

  • 要隐藏图层或文件夹,请单击时间轴中该图层或文件夹名称右侧的“眼睛”列。 要显示图层或文件夹,请再次单击它。

  • 要隐藏时间轴中的所有图层和文件夹,请单击眼睛图标。若要显示所有图层和文件夹,请再次单击它。

  • 要显示或隐藏多个图层或文件夹,请在眼睛图标列中拖动。

  • 要隐藏当前图层或文件夹以外的所有图层和文件夹,请在眼睛图标列中按住 Alt 并单击(Windows) 或按住 Option 并单击 (Macintosh)。要显示所有图层和文件夹,请再次按住 Alt 并单击或按住 Option 并单击。

按轮廓查看图层的内容

要区分对象所属的图层,请用彩色轮廓显示图层上的所有对象。

  • 要将图层上所有对象显示为轮廓,请单击该图层名称右侧的“轮廓”列。 要关闭轮廓显示,请再次单击它。

  • 要将所有图层上的对象显示为轮廓,请单击轮廓图标。 要关闭所有图层上的轮廓显示,请再次单击它。

  • 要显示当前图层以外的所有图层上的目标,请在轮廓列中按住 Alt 并单击(Windows) 或按住 Option 并单击 (Macintosh)。要关闭所有图层的轮廓显示,请再次按住 Alt 并单击或按住 Option 并单击。

更改图层的轮廓颜色

  1. 请执行下列操作之一:
    • 双击时间轴中图层的图标(即该图层名称左侧的图标)。

    • 右键单击 (Windows) 或按住 Control 并单击 (Macintosh) 该图层名称,然后从上下文菜单中选择“属性”

    • 在时间轴中选择该图层,然后选择“修改”>“时间轴”>“图层属性”

  2. “图层属性”对话框中,单击“轮廓颜色”调色板,选择一种新颜色,再单击“确定”

注意:

图层上的运动路径也使用图层轮廓颜色。

设置图层透明度

  1. 在 Animate CC 中,创建一个 fla 文件或打开一个现有的 fla 文件。

  2. 按住 Shift 键并单击时间轴中的“眼睛”图标列,将可见性设置为透明。

    注意:

    按住 Shift 键单击对隐藏图层无效。

    设置图层透明度
    设置图层透明度
  3. 可使用以下任一选项设置图层透明度:

    • 右键单击任一图层并从上下文菜单中选择“属性”。在“图层属性”对话框中,选择“可见性”>“透明”
    • 右键单击任一图层,然后选择“将其他图层显示为透明”
    图层属性
    图层属性
  4. 单击“确定”

注意:

图层透明度对隐藏图层无效。 

使用高级图层

在 Animate CC 中的高级图层模式下,时间轴中的所有图层将发布为元件。利用高级图层模式,可访问以下功能:

高级图层模式默认启用。可以使用“修改”>“文档”设置启用或禁用高级图层。在后续文档和 Animate 会话中应用更改之后,单击“设为默认值”以保留当前设置。

高级图层模式
高级图层模式

使用 Animate 中的脚本访问这些元件时,必须将图层作为对象来调用它们。例如,当您尚未利用高级图层时,可以使用类似于以下示例的脚本直接访问元件: 

getchildbyname("symbol1");

但是,当您使用高级图层时,您只能通过使用类似于以下示例的脚本,来通过图层访问该元件:

Layer=getchildbyname("L1");

Layer.getchildbyname("symbol1");

一个使用 AS3 文档类型的高级图层访问元件的示例代码: 

Var Layer:MovieClip =MovieClip(getchildbyname("L1"));
Layer.getchildbyname("symbol1");

一个使用 HTML5 Canvas 文档类型的高级图层访问元件的示例代码: 

Layer=this.getchildbyname("L1");
Layer.getchildbyname("symbol1");

下图的插图说明您如何可以使用带高级图层或不带高级图层的脚本访问元件。 

有关如何访问带或不带高级图层的元件的插图
有关如何访问带或不带高级图层的元件的插图

注意:

在 Animate 中使用高级图层时,所发布动画项目的大小可能会增大。如果在访问摄像头或图层深度功能时发现任何问题,请检查高级图层是否已启用。如果禁用,请将其启用,以获得所需的行为。 

应用图层效果

滤镜和色彩效果过去仅适用于影片剪辑。利用高级图层,滤镜和色彩效果现在可应用于一个选定帧,从而应用至该帧内得所有内容,包括形状、绘制对象、图形元件等。此外,也可使用传统、形状和跨帧 IK 补间对图层效果进行补间。

可以通过选择所需的帧来将图层效果应用到单个或多个帧上。也可以通过选中整个图层将图层效果应用到图层的所有帧上。此外,还可以将图层效果应用到元件的时间轴上,例如影片剪辑和图形元件以及所有场景中。

注意:

仅当高级图层模式启用时才能应用图层效果。可能需要显式启用高级图层模式才能在文件中使用此功能。

使用帧滤镜

要在特定帧上添加滤镜,请先选择该帧。“属性检查器”面板将加载该帧的特定属性。单击“滤镜”下拉列表中的“+”号图标。

帧滤镜
帧滤镜

在帧上添加滤镜时,“属性检查器”如下方屏幕截图所示。 

可以根据要求为每个滤镜设置属性,然后在帧级别应用这些属性。可以对所有帧滤镜进行补间。 

“属性检查器”中的帧滤镜属性
“属性检查器”中的帧滤镜属性

注意:

仅 ActionScript 3 文档类型支持图层效果。补间动画和摄像头图层不支持图层效果。 

使用色彩效果

要在特定帧上应用图层效果,请先选择该帧。“属性检查器”面板将加载该帧的特定属性。从“属性检查器”面板中选择任意所需的颜色属性。

颜色效果
颜色效果

应用图层深度

作为一名动画制作人员,您可以将图层置于 2D 动画的不同平面中,以创建深度感。 

可以通过“图层深度”面板动态更改图层的深度。要打开“图层深度”面板,请单击“窗口”>“图层深度”

表示每个图层的图层深度
表示每个图层的图层深度

注意:

可以在 -5000 至 10000 范围内设置图层深度的最小值和最大值。

如上面的屏幕截图所示,图层深度值显示在指定帧的每个图层名称的旁边。

  • 将鼠标指针悬停于每个值上,单击并将滑块向您右侧或左侧拖动。
  • 要减小深度,可将滑块拖动到您的左侧。要增加深度,可将滑块拖动到您的右侧。 
  • 您可以使用较低的正值表示更近的对象,使用较高的正值表示很远的对象。

您可以在动画的任何补间间距内补间图层深度值。 

每个图层在“图层深度”面板中用唯一的彩色线条表示。您可以在时间轴中查看表示每个图层的颜色。 

您还可以通过将多色线条向上或向下移动,来增加或减小每个图层中对象的深度。

  • 要减小图层中对象的深度,请单击相应线条并将其向上拖动。
  • 要增加图层中对象的深度,请单击相应线条并将其向下拖动。

一个描述带或不带图层深度的动画的插图:

无图层深度的内容
无图层深度的内容
有图层深度的内容
有图层深度的内容

一个在应用图层深度时描述动画的插图:

您可以在多平面图层上使用摄像头创建视差效果,或放大某个平面上的内容。您还可以在特定图层上锁定摄像头,或使用交互式 API 在运行时应用摄像头效果。有关详细信息,请参阅使用摄像头和图层深度创建视差效果

注意:

图层深度仅适用于主时间轴。

为图层深度保持大小

可以更改对象的图层深度,而不影响对象的大小和位置。要使用保持大小功能,请单击“图层深度”面板右上角的“保持大小”按钮。

可以在两种模式下使用“保持大小”选项:

  • 单击“保持大小”按钮,然后修改所需图层的图层深度。 “保持大小”按钮自动切换为开启。
  • 拖动图层深度值时,按住 Alt 键可暂时启用“保持大小”选项。
为图层深度保持大小
为图层深度保持大小

在运行时应用图层深度

您还可以在运行时在对象中引入摄像头,以及使用摄像头 API 应用效果。有关详细信息,请参阅在运行时使用交互式摄像头。 

AS3 的图层深度 API

通过使用 API,您可以在运行时管理图层。例如,在运行时,当您希望在动画中引入额外图层或在动画中减小其中一个图层的深度时。 

方法 原型 示例 描述
setLayerZDepth fl.Layer.setLayerZDepth(timeline,
layerName,zDepth)
fl.Layer.setLayerZDepth("layerName", 100); 设置特定图层的 Z 深度值。
getLayerZDepth fl.Layer.getLayerZDepth(layerName) :zDepth fl.Layer.getLayerZDepth("layerName"); 返回特定图层的 Z 深度值。
addNewLayer fl.Layer.addNewLayer(layerName,
zDepth=0)
fl.Layer.addNewLayer("layerName",-80); 将新图层添加到时间轴并设置 Z 深度。
removeLayer fl.Layer.removeLayer(layerName) fl.Layer.removeLayer("layerName"); 从时间轴中删除图层。

HTML 画布的图层深度 API

方法 原型 示例 描述
setLayerZDepth AdobeAn.Layer.setLayerZDepth(layerName,
zDepth)
console.log(fl.Layer.setLayerZDepth
("layerName", 100));
设置特定图层的 Z 深度值。
getLayerZDepth AdobeAn.Layer.getLayerZDepth(layerName)
:zDepth
console.log(fl.Layer.getLayerZDepth
("layerName"));
返回特定图层的 Z 深度值。

建立图层父子关系

Animate 允许您将一个图层设置为另一个图层的父项。建立图层父子关系的一种简单方法是允许您动画的一个图层/对象控制另一个图层/对象。作为动画设计人员或游戏设计人员,您可以更轻松地控制人物不同部位的移动,从而加快您的动画时间。

建立图层父子关系视图要求启用“高级图层”。默认情况下,已为新文件打开“高级图层”。可以通过单击时间轴右上角的层次结构符号图标,启用建立图层父子关系视图。

显示建立图层父子关系
显示建立图层父子关系

注意:

仅当子级图层效果的变形点位于父级图层对象上时,才可以为变形对象建立父子关系。

父级图层和子级图层

在“建立父子关系”视图中,当您将图层 1 拖动到图层 2 之上时,图层 1 会成为父级图层 2 的子项。除保留自己的属性外,子图层上的对象还继承父图层上对象的位置和旋转。因此,当您移动或旋转与父项时,子项会同时移动或旋转。可以创建多个父子关系以创建层次结构。

建立图层父子关系

您可以通过单击图层手柄(颜色头)并将其拖动到另一个图层上来将一个图层连接到另一个图层。或者,可以在图层名称旁边的水平矩形空间上单击任意位置,然后将其拖动到其他图层上。此外,还可以在任意图层上单击,然后从弹出列表中选择其父级图层。 

一旦单击并尝试拖动线,就会在图层的颜色头附近出现虚线。一旦释放单击和拖动操作,就会在两个图层之间建立父子连接。

设置父级图层
设置父级图层

图层父子关系视图层次结构中最左侧的颜色头表示父项。父子层次结构从左向右移动。

单击任意图层的颜色头,然后拖动虚线并释放,即可删除连接。或者,可以在水平空间上单击,然后再单击“删除父项”,如下方屏幕截图所示。

删除父项
删除父项

在下面的屏幕截图中,可以看到使用图层父子关系之前和之后图层层次结构和位置的视图。

应用图层父子关系之前和之后
应用图层父子关系之前和之后

以下所示为表示身体部位的图层父子关系用法的示例说明。

具有图层父子关系的身体部位的示例说明
具有图层父子关系的身体部位的示例说明

在上面的示例中,

  • 躯干是所有身体部位的父项。
  • 大腿是腿的其他各个部分(如脚、小腿和脚踝)的父项。
  • 头是父项“颈部”的子项,躯干是颈部的父项。因此,只要将颈部移离身体,头部也会随之移动。

注意:

父子关系是您需要为子图层上的每个关键帧设置的框架属性。在关键帧上,您可以中断父子关系或重建子图层与另一父图层的关系。

建立图层父子关系教程

建立图层父子关系教程
了解如何在图层之间创建父子层次结构并轻松操控合成内容。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略