中职教材二维动画-

Flashcc二维动画基础第5章元件和库

学习目标创建元件库面板的管理图形元件的创建与实例制作影片剪辑元件的创建与实例制作按钮元件的创建与实例制作重点难点影片剪辑元件与图形元件的区别图形元件循环播放设置按钮元件四个关键帧的状态元件与实例的关系第5章元件和库

学习内容：5.1元件与库面板5.2图形元件的应用5.3影片剪辑元件的应用5.4按钮元件的应用5.5知识拓展5.6本章小结与重点回顾5.7课后实训5.1元件与库面板

5.1.1课堂案例—花草绘制案例综述案例分析操作步骤举一反三5.1.2元件的类型5.1.3创建元件5.1.4转换元件5.1.5编辑元件5.1.6库面板的操作5.1.7元件与实例关系5.1.8改变实例类型5.1元件与库面板

5.1.1课堂案例—花草绘制案例综述本实例效果如图所示，场景中多次出现花和草，可以将花草等素材转换为元件后，对元件实例属性进行变化。图中的蝴蝶主要使用影片剪辑元件来绘制蝴蝶的扇动翅膀的过程。通过本实例的学习，不仅熟悉并掌握绘制工具的综合应用，而且也掌握如何创建元件，创建元件实例、编辑元件、管理元件等元件的基本操作。5.1元件与库面板

案例分析在制作这个实例时，大致需要以下环节。新建文档，并保存。打开外部库，导入背景元件新建草的图形元件并绘制新建花的图形元件并绘制。新建蝴蝶的图形元件并绘制新建蝴蝶动的影片剪辑元件并绘制将绘制好的花和草的元件放置在场景中。将蝴蝶动的影片剪辑放到场景中，制作蝴蝶飞的动画效果测试并发布影片5.1元件与库面板

举一反三打开“绘制椰子树”实例，制作椰子树随风飘动的效果5.1元件与库面板

5.1.2元件的类型

元件是制作动画的最基本的元素，包括图形、按钮、影片剪辑。在整个文档或其他文档中重复使用该元件。使用元件可以简化影片的编辑，大大减少文件大小。创建元件时需要选择元件类型，主要包括三种类型：

（1）图形元件。可用于静态图像和简单动画，并可用来创建链接到主时间轴的、可重复使用的动画片段。图形元件与主时间轴同步运行，交互式控件和声音在图形元件的动画序列中不起作用。由于依附于主时间轴，图形元件在.fla文件中的数据量小于按钮元件和影片剪辑元件。

（2）按钮元件。可以创建用于响应鼠标单击、滑过或其他动作的交互式按钮。可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。5.1元件与库面板

5.1.2元件的类型

（3）影片剪辑元件。可以创建可重复使用的动画片段，影片剪辑拥有各自独立于主时间轴的“多帧时间轴”，即使主时间轴上的帧数只有1帧，影片剪辑仍可以播放完整的动画效果。可以将“多帧时间轴”看作是嵌套在主时间轴内的时间轴。在影片剪辑元件中可以包含交互式控件、声音甚至其他影片剪辑实例，也可以将影片剪辑实例放在按钮元件的时间轴内，以创建动画按钮。5.1元件与库面板

5.1.3创建元件

可以通过舞台上选定的对象来转换元件，也可以创建一个空元件。创建完元件后，可以在元件编辑模式下绘制图形、制作动画或导入内容。方法一：创建元件的方法主要通过【插入】—【新建元件】命令，在弹出的对话框【创建新元件】对话框中可以修改元件名称，及元件的类型。5.1元件与库面板

5.1.3创建元件方法二：创建新元件的快捷键为Ctrl+F8，可以直接弹出【创建新元件】对话框。方法三：在库面板左下角的【新建元件】按钮，可以弹出【创建新元件】对话框，进行创建元件。5.1元件与库面板

5.1.3创建元件

可以通过舞台上选定的对象来转换元件，也可以创建一个空元件。创建完元件后，可以在元件编辑模式下绘制图形、制作动画或导入内容。方法一：创建元件的方法主要通过【插入】—【新建元件】命令，在弹出的对话框【创建新元件】对话框中可以修改元件名称，及元件的类型。5.1元件与库面板

5.1.4转换元件对于已经在舞台上绘制好的元素对象，可以将其转换为元件，具体操作如下所示。方法一：在舞台上选择一个或多个元素。选择【修改】—【转换为元件】。方法二：在舞台上选择一个或多个元素，右键单击，在右键菜单中选择“转换为元件”。方法三：在舞台上选择一个或多个元素，按快捷键F8即可弹出转换为元件对话框。5.1元件与库面板

5.1.5编辑元件（1）新建元件

新建一个元件之后，会进入一个元件的编辑窗口，在元件的编辑窗口中可以对元件进行编辑，5.1元件与库面板

5.1.5编辑元件（2）库中元件编辑

对于库中的元件，可以双击进入编辑窗口。或者选择某个元件，右键单击，在弹出的右键快捷菜单中选择【编辑】选项，即进入元件的编辑窗口。编辑窗口的背景颜色为舞台设置的颜色。5.1元件与库面板

5.1.5编辑元件（3）舞台上已有元件的编辑

对于舞台上存在的元件，可以双击进入元件的编辑窗口，这时会发现舞台上的背景已虚影的形式存在，方便以舞台为背景参考进行元件设计。5.1元件与库面板

5.1.6库面板的操作5.1元件与库面板

5.1.7元件与实例关系

元件是制作Flash动画的最基本的元素，可在整个文档或其他文档中重复使用该元件。

而实例是指位于舞台上或嵌套在另一个元件内的元件副本。用户可以随意地对实例进行改变大小、颜色等操作，对实例的这些操作不会影响到元件本身，但如果用户对元件进行了修改,那么Flash就会更新该元件的所有实例。5.1元件与库面板

5.1.8改变实例类型

不同的元件类型在属性面板中会呈现不同的属性。如果需要改变实例的元件类型，可以在属性面板【实例行为】下拉列表中进行“影片剪辑”、“图形”、“按钮”三种元件类型进行切换。5.2图形元件的应用

5.2.1课堂案例—制作下雪动画效果案例综述案例分析操作步骤举一反三5.2.2图形元件属性面板5.2图形元件的应用

5.2.1课堂案例—制作下雪动画效果案例综述

本实例制作下雪动画效果，是FLASH动画特效中使用频率比较高的动画效果。实例制作主要通过创建补间动画制作雪花飘落的不规则曲线运动，并将其保存为图形元件。通过图形元件的【循环】属性，设置开始播放帧来实现一串雪花的效果。最后再将一串雪花组合为一片雪花下落效果，如图所示。5.2图形元件的应用

5.2.1课堂案例—制作下雪动画效果案例分析在制作这个实例时，大致需要以下环节。新建文档，并保存。导入背景元件创建“雪花”图形元件，绘制雪花。创建“一片雪花飘落”图形元件，利用补间动画制作一片雪花飘落的动画。创建“一组雪花飘落”图形元件，制作一组雪花飘落的动画。创建“下雪”图形元件，分别制作前层大雪花，中层中雪花，后层小雪花，加强远近透视的纵深感，形成错落有致的效果。测试并发布影片5.2图形元件的应用

操作步骤新建元件“雪花”。执行【插入】—【新建元件】命令，在弹出的【新建元件】对话框中，选择“图形”元件，名称为“雪花”。雪花绘制最简单的方法就是使用【刷子工具】，在舞台上点一个点，然后执行【修改】—【形状】—【柔化填充边缘】，效果如下。5.2图形元件的应用

操作步骤创建雪花下落动画。

5.2图形元件的应用

操作步骤制作一串雪花下落效果

5.2图形元件的应用

操作步骤制作一片雪花下落效果5.2图形元件的应用

操作步骤制作舞台场景动画

将4到5个“一片雪花”元件实例放置在舞台上。近大远小，改变两个实例制作为远处雪花的效果。同样在制作时，为了使需要下落的状态错落有致，可以将这几个“一片雪花”的【循环】属性的“第一帧”设置为不同的数值。5.2图形元件的应用

举一反三

利用此方法也可以制作下雨的动画效果，相对与下雪，下雨的运动路径为直线，只需要制作一串下雨的动画，然后将实例元件分布画面即可。5.2图形元件的应用

5.2.2图形元件属性面板

图形元件用于制作可重复使用的静态图像，以及依附于主影片时间轴的可重复使用的动画片段。已经创建并绘制好的图形元件拖放到舞台上或者另一个元件内后，选择图形元件实例，在属性面板中即出现图形元件的属性面板。5.2图形元件的应用

5.2.2图形元件属性面板面板功能：（1）改变实例元件类型：在“实例行为”下拉列表中可以改变元件实例的元件类型，修改后属性面板的属性也相应的进行变化。（2）交换实例：点击“交换”按钮，会弹出【交换元件】对话框，选择需要交换的元件，点击【确定】按钮后即可完成实例交换。（3）样式：“样式”的下拉列表中可以对元件的色彩效果进行变化，包括亮度、色调、高级和Alpha透明的的设置。（4）循环播放。

选择图形元件之后，可以在“属性”面板的中设置图形元件的循环方式，共有3种循环方式供选择。在后面的“第一帧”文本框中，可以设置动画的起始帧。循环：播放到最后一帧之后，又回到开头继续播放。播放一次：播放到最后一帧之后，就静止不动了。单帧：只显示一帧。5.3影片剪辑元件的应用

5.3.1课堂案例—制作角色表情动画案例综述案例分析操作步骤举一反三5.3.2影片剪辑属性面板5.3.3影片剪辑元件与图形元件区别5.3影片剪辑元件的应用

5.3.1课堂案例—制作角色表情动画案例综述在绘制花草的实例中，绘制的花、草采用的图形元件来完成的，而蝴蝶的翅膀扇动采用的影片剪辑元件来做的，在主场景中，蝴蝶会一边移动位置一边扇动翅膀的运动效果。影片剪辑元件是独立于主影片时间轴的动画片段，所以即使主时间轴只有1帧，也可以完整的播放影片剪辑中的动画。所以在Flash动画中，规律性比较强，循环运动的动画片段适合用影片剪辑来制作、例如马跑步、鸟飞行、蝴蝶飞、人走等。5.3影片剪辑元件的应用

5.3.1课堂案例—制作角色表情动画案例综述5.3影片剪辑元件的应用

5.3.1课堂案例—制作角色表情动画案例分析在制作这个实例时，大致需要以下环节。（1） 新建文档，并保存。导入角色身体和角色头部的角色元件，将角色身体与头部元件摆放到舞台上。（2） 创建“嘴”影片剪辑元件，绘制嘴动的效果动画（3） 创建“眼泪”影片剪辑元件，逐帧绘制流眼泪的动画效果（4） 制作“张嘴”的影片剪辑。（5） 创建表情动画效果（6） 测试并发布影片5.3影片剪辑元件的应用

5.3.1课堂案例—制作角色表情动画举一反三5.3影片剪辑元件的应用

5.3.2影片剪辑属性面板

影片剪辑元件用来制作可重复使用的、独立于主时间轴的动画片段。由于影片剪辑具有独立的时间轴，无法在编辑窗口上预览影片剪辑实例内的动画效果，在舞台上看到的只是影片剪辑第一帧的画面。如果要欣赏影片剪辑内的完整动画，必须按快捷键【Ctrl+Enter】测试影片才行。（1）实例名称（2）3D定位和查看（3）显示（4）辅助功能（5）滤镜设置375.3影片剪辑元件的应用

5.3.3影片剪辑元件与图形元件区别5.4按钮元件的应用

5.4.1课堂案例—制作水晶按钮案例综述案例分析操作步骤举一反三5.4.2按钮元件关键帧设置5.4.3按钮元件属性设置5.4按钮元件的应用

5.4.1课堂案例—制作水晶按钮案例综述

在第二章的课后实训中制作了水晶按钮，本实例是在次绘制的基础上增加按钮的交互响应效果，当鼠标经过时变成文字，当鼠标点击时文字变大。5.4按钮元件的应用

5.4.1课堂案例—制作水晶按钮案例分析在制作这个实例时，大致需要以下环节。（1） 新建文档，并保存。绘制动画的背景颜色。（2） 创建“按钮1”图形元件，绘制鼠标弹起状态图形（3） 创建“按钮1”图形元件，绘制指针经过状态图形（4） 创建“按钮1”图形元件，绘制鼠标按下状态图形（5） 直接复制“按钮1”为“按钮2”，修改“按钮2”的各个帧的状态。同样的方法制作“按钮3”和“按钮4”（6） 测试并发布影片5.4按钮元件的应用

5.4.1课堂案例—制作水晶按钮举一反三5.4按钮元件的应用

5.4.2按钮元件关键帧设置用来创建按钮元件的对象可以是图形元件实例、影片剪辑实例、位图、组合、文本、分散的矢量图形等。在按钮元件内部可以添加声音但不能在帧上添加动作脚本。创建按钮元件后，进入按钮的编辑页面。在时间轴上可以观察到按钮元件为包括四个帧，分别表示内容如下：弹起：表示按钮的正常显示状态， 指针经过：表示鼠标经过按钮的响应区域时，按钮的状态。按下：表示鼠标按下时，按钮的状态点击：表示鼠标的响应区域，只有在这区域内，鼠标的滑过、按下才会起作用。5.4按钮元件的应用

5.4.3按钮元件属性设置

将制作好的按钮放置在舞台上或其他元件内，点击按钮实例会出现对应的按钮的属性面板，按钮属性面板的设置与影片剪辑相似，包括设置按钮实例名称、实例行为、交换实例、实例的位置及大小、色彩效果、混合方式、辅助功能及添加滤镜等功能，与其他元件的属性设置类似。455.