《Animate-CC-2019》06章

本章简介：在AnimateCC中，元件起着举足轻重的作用。通过重复应用元件，可以提高工作效率、减少文件量。本章讲解了元件的创建、编辑、应用，以及库面板的使用方法。读者通过学习，要了解并掌握如何应用元件的相互嵌套及重复应用来制作出变化无穷的动画效果。第6章元件和库课堂学习目标了解元件的类型。熟练掌握元件的创建方法。掌握元件的引用方法熟悉运用库面板编辑元件熟练掌握实例的创建和应用6.1元件与库面板课堂案例——制作小鸟卡片元件的类型创建图形元件创建按钮元件创建影片剪辑元件转换元件库面板的组成库面板弹出式菜单使用基本矩形工具和文本工具制作按钮元件，使用影片剪辑元件制作心动效果，使用变形面板调整元件的大小。效果图6.1.1课堂案例—制作小鸟卡片6.1.2元件的类型1．图形元件图形元件一般用于创建静态图像或创建可重复使用的、与主时间轴关联的动画。它有自己的编辑区和时间轴。如果在场景中创建元件的实例，那么实例将受到主场景中时间轴的约束。换句话说，图形元件中的时间轴与其实例在主场景的时间轴同步。另外，在图形元件中可以使用矢量图、图像、声音和动画的元素，但不能为图形元件提供实例名称，也不能在动作脚本中引用图形元件，并且声音在图形元件中失效。2．按钮元件按钮元件是创建能激发某种交互行为的按钮。创建按钮元件的关键是设置4种不同状态的帧，即“弹起”（鼠标抬起）、“指针经过”（鼠标移入）、“按下”（鼠标按下）、“点击”（鼠标响应区域，在这个区域创建的图形不会出现在画面中）。6.1.2元件的类型3．影片剪辑元件影片剪辑元件也像图形元件一样有自己的编辑区和时间轴，但又不完全相同。影片剪辑元件的时间轴是独立的，它不受其实例在主场景时间轴（主时间轴）的控制。比如，在场景中创建影片剪辑元件的实例，此时即便场景中只有一帧，在电影片段中也可播放动画。另外，在影片剪辑元件中可以使用矢量图、图像、声音、影片剪辑元件、图形组件和按钮组件等，并且能在动作脚本中引用影片剪辑元件。选择“插入新建元件”命令，或按Ctrl+F8组合键，弹出“创建新元件”对话框，在“名称”选项的文本框中输入“球”，在“类型”选项的下拉列表中选择“图形”选项。单击“确定”按钮，创建一个新的图形元件“球”。图形元件的名称出现在舞台的左上方，舞台切换到了图形元件“球”的窗口，窗口中间出现十字“”，代表图形元件的中心定位点。在“库”面板中显示出图形元件。创建图形元件过程6.1.3创建图形元件选择“插入新建元件”命令，弹出“创建新元件”对话框，在“名称”选项的文本框中输入“动作”，在“类型”选项的下拉列表中选择“按钮”选项。单击“确定”按钮，创建一个新的按钮元件“动作”。按钮元件的名称出现在舞台的左上方，舞台切换到了按钮元件“矩形”的窗口，窗口中间出现十字“”，代表按钮元件的中心定位点。在“时间轴”窗口中显示出4个状态帧：“弹起”“指针经过”“按下”“点击”。创建按钮元件过程6.1.4创建按钮元件选择“插入新建元件”命令，弹出“创建新元件”对话框，在“名称”选项的文本框中输入“字母变形”，在“类型”选项的下拉列表中选择“影片剪辑”选项，单击“确定”按钮，创建一个新的影片剪辑元件“字母变形”。影片剪辑元件的名称出现在舞台的左上方，舞台切换到了影片剪辑元件“字母变形”的窗口，窗口中间出现十字“”，代表影片剪辑元件的中心定位点。在“库”面板中显示出影片剪辑元件。创建影片剪辑元件过程6.1.5创建影片剪辑元件6.1.6转换元件1．将图形转换为图形元件如果在舞台上已经创建好矢量图形并且以后还要再次应用，可将其转换为图形元件。选中矢量图形，选择“修改转换为元件”命令，或按F8键，弹出“转换为元件”对话框，进行设置后单击“确定”按钮，矢量图形被转换为图形元件。2．设置图形元件的中心点选中矢量图形，选择“修改转换为元件”命令，弹出“转换为元件”对话框，在对话框的“注册”选项中有9个中心定位点，可以用来设置转换元件的中心点。6.1.6转换元件3．转换元件类型在制作的过程中，可以根据需要将一种类型的元件转换为另一种类型的元件。选中“库”面板中的影片剪辑元件，单击面板下方的“属性”按钮，弹出“元件属性”对话框，在“类型”选项下拉列表中选择“图形”选项，单击“确定”按钮，影片剪辑元件转换为图形元件。选择“窗口库”命令，或按Ctrl+L组合键，弹出“库”面板。“库”面板6.1.7库面板的组成单击“库”面板右上方的按钮，出现弹出式菜单，在菜单中提供了实用命令。“库”面板弹出式菜单6.1.8库面板弹出式菜单6.2实例的创建与应用课堂案例——制作教育插画建立实例转换实例的类型替换实例引用的元件改变实例的颜色和透明效果分离实例元件编辑模式使用属性面板调整元件的不透明度，使用分离命令将元件打散，使用变形面板旋转元件的角度，使用文本工具输入文字。效果图6.2.1课堂案例—制作教育插画6.2.2建立实例1．建立图形元件的实例选择“窗口库”命令，弹出“库”面板，在面板中选中图形元件“球”，将其拖曳到场景中，场景中的卡通球图形就是图形元件“球”的实例。2．建立按钮元件的实例选中“库”面板中的按钮元件“动作”，将其拖曳到场景中，场景中的图形就是按钮元件“表情”的实例。3．建立影片剪辑元件的实例选中“库”面板中的影片剪辑元件“字母变形”，将其拖曳到场景中。场景中的字母图形就是影片剪辑元件“字母变形”的实例。每个实例最初的类型，都是延续了其对应元件的类型。可以将实例的类型进行转换。将图形元件拖曳到舞台中成为图形实例并选择图形实例。在“属性”面板的上方，选择“实例行为”选项下拉列表中的“影片剪辑”，图形“属性”面板转换为影片剪辑“属性”面板，实例类型从“图形”转换为“影片剪辑”。实例类型从图形转换为影片剪辑6.2.3转换实例的类型如果需要替换实例所引用的元件，但保留所有的原始实例属性（如色彩效果或按钮动作），可以通过Flash的“交换元件”命令来实现。将图形元件拖曳到舞台中成为图形实例，选择图形“属性”面板，在“色彩效果”选项组中的“样式”选项下拉列表中选择“Alpha”选项，将其值设为50%。单击图形“属性”面板中的“交换元件”按钮，弹出“交换元件”对话框，在对话框中选中按钮元件“按钮”，单击“确定”按钮，图形元件转换为按钮元件，实例的不透明度也跟着改变。6.2.4替换实例引用的元件替换实例所引用的元件在舞台中选中实例，选择“属性”面板，在“色彩效果”选项组中可见“样式”选项的下拉列表。6.2.5改变实例的颜色和透明效果“属性”面板选中实例，选择“修改分离”命令，或按Ctrl+B组合键，将实例分离为图形。6.2.6分离实例分离实例过程6.2.7元件编辑模式元件创建完毕后常常需要修改，此时需要进入元件编辑状态，修改完元件后又需要退出元件编辑状态，进入主场景编辑动画。（1）进入组件编辑模式，可以通过以下几种方式。在主场景中双击元件实例，进入元件编辑模式。在“库”面板中双击要修改的元件，进入元件编辑模式。在主场景中用鼠标右键单击元件实例，在弹出的菜单中选择“编辑”命令，进入元件编辑模式。在主场景中选择元件实例后，选择“编辑编辑元件”命令，进入元件编辑模式。按Ctrl+E组合键，进入元件编辑模式。6.2.7元件编辑模式（2）退出元件编辑模式，可以通过以下几种方式。单击舞台窗口左上方的场景名称，进入主场景窗口。选择“编辑编辑文档”命令，进入主场景窗口。按Ctrl+E组合键，进入主场景窗口。使用钢笔工具、颜色面板和创建元件命令，来完成风景插画的制作。效果图6.3课堂练习—制作风景插画使用矩形工具绘制矩形块，使用补间形状命令制作形状动画，使用创建元件命令制作影片剪辑元件。效果图6.4课后习题—制作加载条动画