falsh制作基础课件第五章

1、/第五章 / 动画基础 本章主要介绍时间轴和帧的概念、场景及基本操作等方面的知识和技巧，同时还将对逐帧动画、形状补间动画、动作补间动画的动画原理和制作方法等进行介绍和讲解。通过本章的学习，读者可以掌握时间轴和场景等方面的知识，制作出基本的动画效果，为深入学习Flash CS5奠定基础。 第一节 Flash动画基础 在第一章已详细介绍过时间轴的相关知识，此处不再详述。时间轴是帧和图层操作的地方，是Flash编辑动画的主要工具，也是用于组织和控制动画中帧和层在一定时间内播放的坐标轴。在本章节，我们将会深入理解和体会时间轴和帧在Flash动画制作过程中所发挥的具体功能和作用。/第五章 / 动画基础

2、二、帧 帧是Flash动画制作中最基本的单位，在制作动画时，每个画面在Flash中都被称为帧，每个帧上都放置画面、文字、声音等多种对象，如果是连续的多个帧按照一定速率连续播放即可形成动画。 （一）帧的分类 按照功能的不同，帧可以分为3种：关键帧、空白关键帧和普通帧。 普通帧 起着延长关键帧的作用。 关键帧 包含画面、文字等内容，用来定义动画的帧。在逐帧动画中每个 帧都是关键帧；在补间动画中，只需要将动画发生变化的两端设置为关键帧。 空白关键帧 指没有内容的帧，一般新建图层的第一帧都为空白关键帧，如果加入了图像或文字等内容，则会变为关键帧。 如图5-1所示，图层1为普通帧，图层2为关键帧，图层3

3、为空白关键帧。/第五章 / 动画基础 （二）帧的频率 帧的频率指每秒钟播放帧的数量。频率越快，动画中的动作越流畅；频率越慢，动画中的动作连贯性越差。在电影中，通常是是以每秒24或25帧播放，在使用Flash软件制作动画时，以最少每秒12帧的速度制作会取得较好的视觉效果。/第五章 / 动画基础 一部动画只能设置1个帧频，帧频具体可以在【文档设置】中修改。执行【修改】【文档】命令或按快捷键【Ctrl】+【J】，打开【文档设置】对话框，在左下角【帧频】处修改数值可修改频率，如图5-2所示。/第五章 / 动画基础 （三）帧的基本操作 每一部动画都是由帧组成的，Flash动画就是通过对帧进行相应的编辑和

4、操作形成多种影片，以下列举一些具体帧的操作方式和方法，为进一步制作影片建立基础。 （1）选择帧（2）插入帧（3）复制帧（4）粘贴帧（5）移动帧（6）删除帧（7）清除帧（8）将帧转为关键帧（9）将帧转为空白关键帧第二节 逐帧动画 逐帧动画是和传统动画制作原理相同的一种动画形式，制作逐帧动画时需要在时间轴的每帧上绘制连续的、不同的内容，通过顺序播放得到连贯的动作效果，如图5-3所示。这种类型的动画效果连贯灵活，几乎可以表现任何想表现的内容。需要注意的是，由于逐帧动画的每帧内容均不一样，每一帧都是关键帧，导致最终输出的文件会很大，与补间动画有较大的差别。/第五章 / 动画基础 一、创建逐帧动画的方法

5、 下面将通过制作人脸喜怒快速变化的例子来具体介绍创建逐帧动画的方法。 （1）新建文档，在【时间轴】面板图层1的第1帧，用【钢笔工具】绘制出人物脸部轮廓，在第2帧按【F5】键插入帧，如图5-4所示。/第五章 / 动画基础 （2）在【时间轴】面板点击【新建图层】按钮，新建图层2，在图层2的第1帧绘制人物表情“喜”，如图5-5所示。 （3）选中图层2的第2帧位置，点击鼠标右键，在弹出菜单中选择【插入空白关键帧】，如图5-6所示。 （4）在绘制人物表情“怒”之前，为了使图像能够和第1帧图像的位置保持一致，可点击时间轴下端的【绘图纸外观】按钮，观看绘制的帧图像，如图5-7所示。/第五章 / 动画基础 （

6、5）在图层2第2帧绘制人物表情“怒”，如图5-8所示。/第五章 / 动画基础 （6）关闭【绘图纸外观】，按【Enter】键观看效果。调整时间轴下端的【帧速率】为“8”，如图5-9所示。（7）按【Ctrl】+【Enter】组合键，检测刚刚创建的动画。/第五章 / 动画基础 二、绘图纸 绘图纸功能是Flash软件最重要的辅助功能之一。在传统动画的制作过程中大量使用赛璐珞透明胶片，透过胶片可以露出下一层画面的内容，绘图纸类同于这种透明胶片，可使制作者在场景中绘画下一帧画面的时候可以准确地知道上一帧的内容，便于把握图像的定位和动作的连贯性，尤其是在制作逐帧动画时，这种功能显得极其重要。 下面具体讲解绘

7、图纸各部分的功能： 【帧居中】 将当前帧显示到控制区窗口中间。 【绘图纸外观】 在时间轴上设置一个连续的显示帧区域，区域内的帧所包含的内容同时显示在舞台上，如图5-10所示。/第五章 / 动画基础 【绘图纸外观轮廓】 在时间轴上设置一个连续的显示区域，除当前帧外，区域内的帧所包含的内容仅显示图形外框，如图5-11所示。【编辑多个帧】 在时间轴上设置一个连续的显示区域，区域内的帧所包含的内容可同时显示和编辑，如图5-12所示。【修改标记】 单击该按钮会显示一个选项菜单，可显示标记范围，如图5-13所示。/第五章 / 动画基础 三、实例制作 逐帧动画每一帧的内容都不同，需要用多个关键帧组成影片。下

8、面以制作翻书效果为例，详细讲解制作逐帧动画的具体步骤和方法。 （1）在Flash中新建文档，执行【插入】 【新建元件】命令建立元件1。在元件1中绘制出翻开的书本，如图5-14所示。 （2）点击场景1回到场景界面，将元件1拖到舞台中。在【时间轴】面板新建图层2，在图层2的第2帧按【F6】键插入关键帧，绘制书本刚开始翻动的效果，如图5-15 所示。/第五章 / 动画基础 /第五章 / 动画基础 （3）点击【绘图纸外观】，接下来在图层2依次建立空白关键帧，在每帧绘制书本翻页效果图像。复制图层1的第1帧，粘贴到图层2最后1帧下方的位置，如图5-16 所示。 （4）按【Ctrl】+【Enter】组合键，

9、检测刚刚创建的动画。/第五章 / 动画基础 第三节 形状补间动画 在Flash软件中可以创建形状补间动画和动作补间动画两种补间动画。能够创建形状补间是Flash软件的一项重要功能，这种功能可以使一种图形形状变化为另外一种图形形状，同时也可以使两个图形之间的大小、位置、颜色进行相互变化，非常适用于在两个关键帧之间创建图形变形的效果。本节将详细介绍形状补间动画方面的知识。 一、形状补间动画基础 形状补间动画是利用形状发生变化的动画，其变形的灵活性介于逐帧动画和动作补间动画两者之间。在时间轴上的某一帧上绘制一个图像，然后在该图层的另一帧上修改对象，或重新绘制另外一个新对象，两帧之间的变化过程可由Fl

10、ash自动生成，无须绘制。/第五章 / 动画基础 能够实现补间动画的元素有很多，其中包括两个图形之间形状、位置、大小、颜色等。这些变化的图形可以是绘制的，也可以是图形元件、文字等元素，通常我们对要进行形状补间的元素进行分离才能制作补间动画。创建了形状补间之后，创建形状补间的帧会变为淡绿色，并且在起始帧和结束帧之间出现一条长箭头，如图5-17所示。/第五章 / 动画基础 二、形状补间动画的属性设置 现在通过简单的元素进行变换来了解形状补间动画的属性设置。 （1）打开Flash软件新建文档，使用【矩形工具】 在图层1的第1帧绘制一个橙色的方形，如图5-18所示。 （2）在图层1的第30帧按【F6】

11、键添加关键帧，使用【椭圆工具】在此帧绘制一个蓝色的圆形，并删除此帧上的橙色方形，如图5-19所示。/第五章 / 动画基础 （3）此时【时间轴】面板中图层1的所有帧都是灰色，如图5-20所示。（4）在图层1的第1帧第30帧之间，点击鼠标右键，在弹出菜单栏中选择【创建补间形状】，如图5-21所示。/第五章 / 动画基础 （5）时间轴上的帧变为淡绿色，并出现了长箭头，如图5-22所示。（6）按【Enter】键观察形状补间动画效果。可以发现橙色的方形逐步变形、变色，最后转变为蓝色的圆形，如图5-23所示。/第五章 / 动画基础 三、实例制作 创建形状补间动画可以对图形进行形状的变化，下面以制作“气球变

12、文字”动画为例，详细讲解创建形状补间动画的具体步骤和方法。 （1）打开Flash软件新建Flash文档，执行【插入】【新建元件】命令新建元件1，将名称改为“气球”，如图5-24所示。 （2）在元件“气球”里使用【椭圆工具】绘制出气球图案，如图5-25所示。/第五章 / 动画基础 （3）依次新建元件“气球1”、“气球2”、“气球3”，在其元件内绘制色彩不一的气球，如图5-26所示。 （4）点击按钮回到场景 界面，在【时间轴】面板上添加图层2、图层3、图层4，如图5-27所示。/第五章 / 动画基础 （5）分别将元件“气球”、“气球1”、“气球2”、“气球3”放到图层1、图层2、图层3、图层4的空

13、白关键帧上，并使用【任意变形工具】修改各个气球的大小或位置，如图5-28 所示。 （6）在4个图层的第20帧分别按【F6】键添加关键帧，如图5-29所示。/第五章 / 动画基础 （7）选择【文本工具】，在其【属性】面板设置文字字体为“华文琥珀”，大小为“100”点，颜色为“黑色”，如图5-30所示。 （8）在每层的第20帧添加文字，并使用【任意变形工具】调整文字的方向，如图5-31所示。/第五章 / 动画基础 （9）将所有图层第20帧的气球图案删除，选择文字，在其【属性】面板里变换字体颜色，如图5-32所示。 （10）选中各层第1帧的气球图案，执行【修改】【分离】命令或直接按快捷键【Ctrl】

14、+【B】，对图案进行打散处理，如图5-33所示。/第五章 / 动画基础 （11）选中各层第20帧的文字图案，执行【修改】【分离】命令或直接按快捷键【Ctrl】+【B】，对文字进行打散处理，如图5-34所示。 （12）在各层的第1帧第20帧之间，分别点击鼠标右键，在弹出的菜单中选择【创建补间形状】，时间轴上的帧全变为绿色，如图5-35所示。 /第五章 / 动画基础 （13）在各图层第50帧按【F5】键添加帧，再按【Enter】键观察形状补间动画效果，如图5-36所示。/第五章 / 动画基础 第四节 动作补间动画 在Flash CS5软件中，动作补间动画可以通过软件中的【创建传统补间】或【创建补间

15、动画】命令来实现。能够创建动作补间动画是Flash软件基于元件进行变化的一项重要功能，这种功能可以使一个元件从一种形态（包括一个位置、大小、透明度等）变化为另一种形态。本节将详细介绍动作补间动画方面的知识。 一、动作补间动画基础 在Flash的【时间轴】面板上，如果使用【创建传统补间】命令制作动画，首先需要在时间轴上创建一个空白关键帧，然后在舞台上绘制一个元件，并在结束处再创建一个关键帧，在结束的关键帧上改变这个元件的大小、颜色、位置、透明度等，Flash软件通过计算两个关键帧之间的不同的数据自动生成中间/第五章 / 动画基础 帧，从而形成流畅的动画。当时间轴上的帧创建了传统补间之后，创建传统

16、补间的帧会变为淡紫色，并且在起始帧和结束帧之间出现一条箭头符号，如图5-37所示。 如果使用【创建补间动画】命令制作动画，只需要在时间轴上创建一个开始的关键帧然后执行相关命令即可。创建补间动画的帧会变为淡蓝色，没有箭头符号，如图5-38所示。/第五章 / 动画基础 二、动作补间动画的属性设置 现在通过简单的元素进行变换了解动作补间动画的属性设置。首先先了解如何使用【创建传统补间】命令制作动作补间动画。 （1）打开Flash软件新建文档，使用【矩形工具】在图层1的第1帧绘制一个方形，放置在场景的最左边，如图5-39所示。 （2）在场景中选中方形，点击鼠标右键，在弹出的菜单中选择【转换为元件】，如

17、图5-40所示。/第五章 / 动画基础 （3）在图层1的第30帧按【F6】键添加关键帧。使用【任意变形工具】把画面中的方形拖动到场景的右边，按住【Shift】键不放，同时用鼠标拖动方形一角将其等比例变大，如图5-41所示。此时图层1的所有帧都是灰色，如图5-42所示。/第五章 / 动画基础 （4）在图层1的第1帧第30帧之间，点击鼠标右键，在弹出菜单栏中选择【创建传统补间】，如图5-43所示。此时，图层1上的帧变为淡紫色，并出现了长箭头，如图5-44所示。/第五章 / 动画基础 （5）按【Enter】键观察动作补间动画效果。可以发现小方形逐步向右滑动变大，最后成为大方形，如图5-45所示。/第

18、五章 / 动画基础 接下来介绍如何使用【创建补间动画】命令制作动作补间动画。 （1）打开Flash软件新建文档，使用【矩形工具】在图层1的第1帧绘制一个方形，放在场景的最左边，如图5-46所示。 （2）在场景中选中方形，点击鼠标右键，在弹出的菜单中选择【转换为元件】，如图5-47所示。/第五章 / 动画基础 （3）在图层1的第30帧按【F5】键插入帧，此时图层1面板上的帧都是灰色的，每帧内容也是一样的，如图5-48所示。 （4）在图层1的第1帧第30帧之间单击鼠标右键，在弹出的菜单中选择【创建补间动画】，图层1上的帧变为淡蓝色，如图5-49所示。/第五章 / 动画基础 （5）选中图层1的第30

19、帧，使用【任意变形工具】把方块拖动到场景的右边，按住【Shift】键不放，同时用鼠标拖动方形一角将其等比例变大，此时画面当中会出现一条绿色的轨迹线，如图5-50所示。 （6）按【Enter】键观察动作补间动画效果。小方形沿绿色的轨迹线向右滑动变大成为大方形，如图5-51所示。/第五章 / 动画基础 三、实例制作 创建动作补间动画可以对元件进行位置、大小的变化，下面以制作风车转动为例，详细讲解制作动作补间动画的具体步骤和方法。 （1）打开Flash软件新建文档，执行【插入】【新建元件】命令创建元件1，修改名称为“风车”，如图5-52所示。 （2）选择【直线工具】，绘制出风车的第一片扇叶，如图5-53所示