2.4 元件和库_Animate CC 2017中文版基础与实例教程（第6版)-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

2.4 元件和库

元件是一种可重复使用的对象，重复使用它不会增加文件的大小。当编辑元件时，该元件的所有实例都会相应地更新以反映编辑效果。库也就是“库”面板，它是Animate CC 2017软件中用于存放各种动画元素的场所，所存放的元素可以是由外部导入的图像、声音、视频元素，也可以是使用Animate CC 2017软件根据动画需要创建出的不同类型的元件。

2.4.1 元件的类型

元件是构成Animate CC 2017动画的基础，用户可以根据动画的具体应用直接创建元件的不同类型。在Animate CC 2017中，元件分为影片剪辑、按钮和图形3种，如图2-104所示。

图2-104 元件的类型

1．影片剪辑

影片剪辑元件在“库”面板元件名称前显示出图标，如图2-105所示。使用影片剪辑元件可以创建可重用的动画片段。影片剪辑拥有自己独立于主时间轴的多帧时间轴，可以将影片剪辑看作是主时间轴内的嵌套时间轴，它们可以包含交互式控件、声音甚至其他影片剪辑实例，也可以将影片剪辑元件放在按钮元件的时间轴内，以创建动画按钮。

图2-105 影片剪辑元件在“库”面板中所显示的图标

2．图形

图形元件在“库”面板元件名称前显示出图标，它可用于创建静态图像，也可用于创建连接到主时间轴的可重用动画片段。图形元件与主时间轴同步运行。交互式控件和声音在图形元件的动画序列中不起作用。

3．按钮

按钮元件在“库”面板元件名称前显示出图标，用于创建交互式按钮。按钮有不同的状态，每种状态都可以通过图形、元件和声音来定义。一旦创建了按钮，就可以对其影片或者影片片断中的实例赋予动作。

2.4.2 创建元件

用户可以通过工作区中选定的对象创建元件；也可以创建一个空元件，然后在元件编辑模式下制作或导入相应的内容；还可以在Animate CC 2017中创建字体元件。元件可以拥有在Animate CC 2017中创建的所有功能，包括动画。

通过使用包含动画的元件，用户可以在很小的文件中创建包含大量动作的Animate CC 2017应用程序。如果有重复或循环的动作，例如，像鸟的翅膀上下翻飞，应该考虑在元件中创建动画。

1．将选定元素转换为元件

将选定元素转换为元件的操作步骤如下。

1）在工作区中选择一个或多个元素，然后执行菜单中的“修改|转换为元件”（快捷键〈F8〉）命令；或者右键单击选中的元件，从弹出的快捷菜单中选择“转换为元件”命令。

2）在“转换为元件”对话框中输入元件名称，并选择“影片剪辑”“按钮”或“图形”类型，然后在注册网格中单击，确定放置元件的注册点，如图2-106所示。设置完毕后单击“确定”按钮，即可将元素转换为元件。

图2-106 “转换为元件”对话框

提示：此时，工作区中选定的元素将变成一个元件。如果要对其进行再次编辑，可以双击该元件进入编辑状态。

2．创建一个新的空元件

创建一个新的空元件的操作步骤如下。

1）首先确认未在舞台上选定任何内容，然后执行菜单中的“插入|新建元件”命令；或者单击“库”面板左下角的（新建元件）按钮；或者从“库”面板右上角的库选项菜单中选择“新建元件”命令。

2）在“创建新元件”对话框中输入元件名称，并选择元件类型，然后单击“确定”按钮。

提示：此时，Animate CC 2017会将该元件添加到“库”面板中，并切换到元件编辑模式。在元件编辑模式下，元件的名称将出现在舞台的左上角，并由一个十字线表明该元件的注册点。

3．创建“影片剪辑”元件

影片剪辑是位于影片中的小影片，用户可以在影片剪辑片段中增加动画、动作、声音等其他元件或其他的影片片断。影片剪辑有自己的时间轴，其运行独立于主时间轴。与图形元件不同，影片剪辑只需要在主时间轴中放置单一的关键帧就可以启动播放。

创建影片剪辑元件的操作步骤如下。

1）执行菜单中的“插入|新建元件”（组合键〈Ctrl+F8〉）命令，在弹出的“创建新元件”对话框中输入名称，然后选择“影片剪辑”选项。

2）单击“确定”按钮，即可进入影片剪辑的编辑模式。

4．创建“图形”元件

图形元件是一种最简单的Animate CC 2017元件，使用这种元件可以处理静态图片和动画。注意，图形元件中的动画是受主时间轴控制的，并且动作和声音在图形元件中不能正常工作。

（1）将所选对象转换为图形元件

将所选对象转换为图形元件的操作步骤如下。

1）选中希望包含到元件中的一个或多个对象。

2）执行菜单中的“修改|转换为元件”（快捷键〈F8〉）命令，在弹出的“转换为元件”对话框中输入元件名称，然后选择“图形”选项，如图2-107所示，接着单击“确定”按钮。

（2）创建新图形元件

创建新图形元件的操作步骤如下。

1）执行菜单中的“插入|新建元件”（组合键〈Ctrl+F8〉）命令。

2）在弹出的“创建新元件”对话框中输入名称，然后选择“图形”选项。

3）单击“确定”按钮，即可进入图形元件的编辑模式。

5．创建“按钮”元件

按钮实际上是具有4帧的交互影片剪辑。当为元件选择按钮行为时，Animate CC 2017会创建一个4帧的时间轴。其中，前3帧显示按钮的3种状态，第4帧定义按钮的活动区域。此时的时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳到相应的帧。

创建按钮元件的操作步骤如下。

1）执行菜单中的“插入|新建元件”（组合键〈Ctrl+F8〉）命令，在弹出的“创建新元件”对话框中输入button，并选择“按钮”类型，然后单击“确定”按钮，进入按钮元件的编辑模式。

2）在按钮元件中有4个已命名的帧：“弹起”“指针. . .”“按下”和“点击”，分别代表了鼠标的4种不同状态，如图2-108所示。

图2-107 转换为图形元件

图2-108 创建按钮元件

●弹起：在弹起帧中可以绘制图形，也可以使用图形元件，导入矢量图或位图。

●指针近些...：全称为“指针经过帧”，将在鼠标位于按钮之上时显示。在这一帧中可以使用图形元件、位图或者影片剪辑。

● 按下：这一帧将在按钮被按下时显示。如果不希望按钮在被单击时发生变化，在这里只插入普通帧就可以了。

●点击：这一帧定义了按钮的有效点击区域。如果在按钮上只是使用文本，这一帧尤其重要。因为如果没有点击状态，那么有效的点击区域就只能是文本本身，这将导致很难点中按钮。因此，需要在这一帧中绘制一个形状来定义点击区域。由于这个状态永远都不会被用户实际看到，因此其形状如何并不重要。

2.4.3 编辑元件

用户在编辑元件时，Animate CC 2017会更新文档中该元件的所有实例。Animate CC2017提供了以下3种方式来编辑元件。

第1种：右键单击要编辑的对象，从弹出的快捷菜单中选择“在当前位置编辑”命令，即可在该元件和其他对象在一起的工作区中进行编辑。此时，其他对象以灰显方式出现，从而与正在编辑的元件区别开来。正在编辑的元件的名称显示在工作区上方的编辑栏内，且位于当前场景名称的右侧。

第2种：右键单击要编辑的对象，从弹出的快捷菜单中选择“在新窗口中编辑”命令，即可在一个单独的窗口中编辑元件。此时，在单独的窗口中编辑元件可以同时看到该元件和主时间轴。正在编辑元件的名称会显示在工作区上方的编辑栏内。

第3种：双击工作区中的元件，进入元件编辑模式，此时，正在编辑的元件的名称会显示在工作区上方的编辑栏内，且位于当前场景名称的右侧。

当用户编辑元件时，Animate CC 2017将更新文档中该元件的所有实例，以反映编辑结果。编辑元件时，可以使用任意绘画工具、导入介质或创建其他元件的实例。

1．在当前位置编辑元件

在当前位置编辑元件的操作步骤如下。

1）执行以下操作之一。

●在工作区中双击该元件的一个实例。

提示：在一个元件中可以包含多个实例。

●右键单击工作区中该元件的一个实例，从弹出的快捷菜单中选择“在当前位置编辑”命令。

●在工作区中选择该元件的一个实例，执行菜单中的“编辑|在当前位置编辑”命令。

2）根据需要编辑该元件。

3）如果要更改注册点，可拖动工作区中的元件。此时，十字准线指示注册点的位置。

4）要退出“在当前位置编辑”模式并返回到场景编辑模式，可执行以下操作之一。

●单击工作区上方编辑栏左侧的按钮。

●执行菜单中的“编辑|编辑文档”命令。

2．在新窗口中编辑元件

在新窗口中编辑元件的操作步骤如下。

1）右键单击工作区中该元件的一个实例，然后从弹出的快捷菜单中选择“在新窗口中编辑”命令。

2）根据需要编辑该元件。

3）如果要更改注册点，可拖动工作区中的元件。此时，十字准线指示注册点的位置。

4）单击右上角的按钮关闭新窗口，然后在主文档窗口内单击以返回编辑主文档。

3．在元件编辑模式下编辑元件

在元件编辑模式下编辑元件的操作步骤如下。

1）执行以下操作之一来选择元件。

●双击“库”面板中的元件图标。

●右键单击工作区中该元件的一个实例，从弹出的快捷菜单中选择“编辑”命令。

●在工作区中选中该元件的一个实例，然后执行菜单中的“编辑|编辑元件”命令。

●在“库”面板中选择该元件，然后从“库”面板选项菜单中选择“编辑”命令，或者右键单击“库”面板中的该元件，然后从弹出的快捷菜单中选择“编辑”命令。

2）根据需要编辑该元件。

3）如果要更改注册点，可拖动工作区中的元件。此时，十字准线指示注册点的位置。

4）要退出元件编辑模式并返回到文档编辑状态，可执行以下操作之一。

●单击工作区上方编辑栏左侧的“返回”按钮。

●执行菜单中的“编辑|编辑文档”命令。

4．将元件添加到工作区中

将元件添加到工作区中的方法如下。

1）执行菜单中的“窗口|库”（组合键〈Ctrl+L〉）命令，调出“库”面板。

2）在“库”面板中选择要添加到影片中的元件，然后将元件拖动到工作区中即可。

5．元件属性

每个元件实例都有独立于该元件的属性。用户可以更改元件的色调、透明度和亮度，可以重新定义元件的行为（例如，把图形更改为影片剪辑），可以设置动画在图形实例内的播放形式，还可以倾斜、旋转或缩放元件。

此外，用户可以给影片剪辑或按钮实例命名，这样就可以使用动作脚本更改它的属性了。

如果编辑元件或将某个元件重新链接到其他元件，则任何已经改变的元件属性仍然适用于该元件。

6．更改元件的颜色和透明度

每个元件实例都可以有自己的色彩效果。用户可以使用“属性”面板来设置元件的颜色和透明度选项。

提示：如果对包含多帧的影片剪辑元件应用色彩效果，Animate CC 2017会将效果应用于该影片剪辑元件的每一帧。

更改元件颜色和透明度的方法如下。

1）在工作区中选择该元件，然后执行菜单中的“窗口|属性”命令。

2）在“属性”面板的“色彩效果”下的“样式”下拉列表框中选择以下选项之一。

●亮度：用于调节图像的相对亮度或暗度，调整范围为从黑（-100%）到白（100%）。在调节时，可以拖动滑块或在文本框中输入一个值，如图2-109所示。

●色调：用相同的色相为元件着色。可使用“属性”面板中的色调滑块设置色调百分比，调整范围为从透明（0%）到完全饱和（100%）。或者选择颜色，可以在相应文本框中输入红、绿和蓝色的值，或单击颜色框，然后从弹出的调色板中选择一种颜色，如图2-110所示。

图2-109 调节“亮度”

图2-110 调节“色调”

● Alpha：用来调节元件的透明度，调整范围为从透明（0%）到完全饱和（100%）。在调节时，可以拖动滑块或在文本框中输入一个值，如图2-111所示。

●高级：用来分别调节元件的红、绿、蓝和透明度的值。在对位图这样的对象创建和制作具有微妙色彩效果的动画时，该选项非常有用。其中，左侧的控件使用户可以按指定的百分比降低颜色或透明度的值；右侧的控件使用户可以按常数值降低或增大颜色或透明度的值，如图2-112所示。将当前的红、绿、蓝和Alpha值都乘以百分比值，然后加上右列中的常数值，会产生新的颜色值。例如，如果当前红色值是100，此时把左侧的滑块移动到50%并把右侧常数设置为100，就会产生一个新的红色值150（[100×50%]+100=150）。