FLASH课件动画制作

1、2021/6/161第七讲第七讲 补间动画补间动画的制作的制作2021/6/162内容概要内容概要lFlash CS4中的动画类型中的动画类型l创建传统补间动画创建传统补间动画l创建补间形状动画创建补间形状动画l创建引导层动画创建引导层动画l创建遮罩层动画创建遮罩层动画2021/6/163Flash CS4中的动画类型中的动画类型l逐帧动画逐帧动画 l使用此动画技术，可以为时间轴中的每个帧指定不同的使用此动画技术，可以为时间轴中的每个帧指定不同的艺术作品。使用此技术可创建与快速连续播放的影片帧艺术作品。使用此技术可创建与快速连续播放的影片帧类似的效果。对于每个帧的图形元素必须不同的复杂动类似的

2、效果。对于每个帧的图形元素必须不同的复杂动画而言，此技术非常有用。画而言，此技术非常有用。l补间动画补间动画 l使用补间动画可设置对象的属性，如一个帧中以及另一使用补间动画可设置对象的属性，如一个帧中以及另一个帧中的位置和个帧中的位置和Alpha透明度。然后透明度。然后Flash在中间内插在中间内插帧的属性值。对于由对象的连续运动或变形构成的动画，帧的属性值。对于由对象的连续运动或变形构成的动画，补间动画很有用。补间动画在时间轴中显示为连续的帧补间动画很有用。补间动画在时间轴中显示为连续的帧范围，默认情况下可以作为单个对象进行选择。补间动范围，默认情况下可以作为单个对象进行选择。补间动画功能强

3、大，易于创建。画功能强大，易于创建。 l传统补间传统补间 l传统补间与补间动画类似，但是创建起来更复杂。传统传统补间与补间动画类似，但是创建起来更复杂。传统补间允许一些特定的动画效果，使用基于范围的补间不补间允许一些特定的动画效果，使用基于范围的补间不能实现这些效果。能实现这些效果。2021/6/164Flash CS4中的动画类型（中的动画类型（2）l补间形状补间形状 l在形状补间中，可在时间轴中的特定帧绘制一个形状，在形状补间中，可在时间轴中的特定帧绘制一个形状，然后更改该形状或在另一个特定帧绘制另一个形状。然后更改该形状或在另一个特定帧绘制另一个形状。 然后，然后，Flash 将内插中间

4、的帧的中间形状，创建一个形将内插中间的帧的中间形状，创建一个形状变形为另一个形状的动画。状变形为另一个形状的动画。 l反向运动姿势（骨骼）反向运动姿势（骨骼） l反向运动姿势用于伸展和弯曲形状对象以及链接元件实反向运动姿势用于伸展和弯曲形状对象以及链接元件实例组，使它们以自然方式一起移动。可以在不同帧中以例组，使它们以自然方式一起移动。可以在不同帧中以不同方式放置形状对象或链接的实例，不同方式放置形状对象或链接的实例，Flash 将在中间将在中间内插帧中的位置。内插帧中的位置。 2021/6/165创建传统补间动画创建传统补间动画（又叫做（又叫做、），只要建立起始和结束的画面，中间的部），只要

5、建立起始和结束的画面，中间的部分由分由Flash自动生成，省去了中间动画制作的复杂过自动生成，省去了中间动画制作的复杂过程，是程，是Flash中最常用的动画效果。中最常用的动画效果。l可制作的动画效果有位置移动、大小变化、旋转移动、逐可制作的动画效果有位置移动、大小变化、旋转移动、逐渐消失等等，还能将它们相互组合制作出式样更加丰富、渐消失等等，还能将它们相互组合制作出式样更加丰富、效果更加吸引人的复杂动画。效果更加吸引人的复杂动画。l【一般制作流程一般制作流程】先在一个关键帧中定义实例的大先在一个关键帧中定义实例的大小、颜色、位置、透明度等参数，然后创建出另一小、颜色、位置、透明度等参数，然后

6、创建出另一个关键帧并修改这些参数，最后创建补间动画，让个关键帧并修改这些参数，最后创建补间动画，让Flash自动生成过渡状态。自动生成过渡状态。l两个必要前提：两个必要前提：l起始关键帧与结束关键帧缺一不可；起始关键帧与结束关键帧缺一不可；1.应用于传统补间的对象必须具有元件或者群组的属性。应用于传统补间的对象必须具有元件或者群组的属性。2021/6/166创建传统补间动画示例创建传统补间动画示例小鸭找妈妈小鸭找妈妈l动画开始时，小鸭与鸭妈妈离得很远；动画动画开始时，小鸭与鸭妈妈离得很远；动画结束时，小鸭与鸭妈妈相会。结束时，小鸭与鸭妈妈相会。 2021/6/167小鸭找妈妈小鸭找妈妈直线运动

7、与曲线运动直线运动与曲线运动n新建文档，导入做好的图形素材。新建文档，导入做好的图形素材。n制作背景层。制作背景层。n制作鸭妈妈层。制作鸭妈妈层。n制作小鸭层。制作小鸭层。n制作曲线运动。制作曲线运动。n测试与修改。测试与修改。 2021/6/168传统补间属性传统补间属性l缓动缓动：应用于有速度变化的动画效果。：应用于有速度变化的动画效果。-100100之间的值，之间的值，0值以上是由快值以上是由快到慢，到慢，0值以下是由慢到快；值以下是由慢到快；l旋转旋转：设置对象的旋转效果，包括：设置对象的旋转效果，包括“自动自动”、“顺时针顺时针”、“逆时针逆时针”和和“无无”4项；项；l紧贴紧贴：使

8、物体可以附着在引导线上；：使物体可以附着在引导线上；l同步同步：设置元件动画的同步性；：设置元件动画的同步性；l调整到路径调整到路径：在路径动画效果中，使：在路径动画效果中，使对象能够沿着引导线的路径移动；对象能够沿着引导线的路径移动；l缩放缩放：应用于有大小变化的动画效果。：应用于有大小变化的动画效果。2021/6/169补间动画补间动画l补间动画是补间动画是Flash CS4在原来的基础上新增加的动画功能，在原来的基础上新增加的动画功能，它通过为一个帧中的对象属性指定一个值并为另一个帧它通过为一个帧中的对象属性指定一个值并为另一个帧中的该相同属性指定另一个值来生成动画。中的该相同属性指定另

9、一个值来生成动画。l如果要创建传统补间动画或者补间形状动画就一定要有如果要创建传统补间动画或者补间形状动画就一定要有关键帧，在关键帧中对象或对象的属性发生变化就形成关键帧，在关键帧中对象或对象的属性发生变化就形成了动画效果。了动画效果。2021/6/1610创建补间形状动画创建补间形状动画可以实现将一幅图形变为另一幅图形的效果。可以实现将一幅图形变为另一幅图形的效果。l【形状补间和动作补间的主要区别形状补间和动作补间的主要区别】形状补间不能应形状补间不能应用到实例上，必须是被打散的形状图形之间才能产生用到实例上，必须是被打散的形状图形之间才能产生形状补间。形状补间。：由无数像素点堆积而成的，并

10、非是一个整：由无数像素点堆积而成的，并非是一个整体。选中时没有一个蓝色边框，而是显示为掺杂着白体。选中时没有一个蓝色边框，而是显示为掺杂着白点的图形。点的图形。l形状补间的属性：形状补间的属性：动画朝着结束方向变化的速率，：动画朝着结束方向变化的速率，-100100之间之间的值，的值，0值以上是减速，值以上是减速，0值以下是加速；值以下是加速；：“分布式分布式”创建的动画形状比较平滑和不规则；创建的动画形状比较平滑和不规则；“角形角形”创建的动画形状会保留明显的角和直线，只创建的动画形状会保留明显的角和直线，只适合于具有锐化转角和直线的适合于具有锐化转角和直线的 混合形状。如果所选形混合形状。

11、如果所选形状没有角，系统自动还原到状没有角，系统自动还原到“分布式分布式”补间；补间；2021/6/1611制作形状补间的条件l形状补间动画的变形对象必须是矢量图。在形状补间动画的变形对象必须是矢量图。在Flash中绘制的图形都是矢量图，导入的图形中绘制的图形都是矢量图，导入的图形均以位图形式出现。如果想要在组合体、实均以位图形式出现。如果想要在组合体、实例或位图图像上应用形状补间动画，必须先例或位图图像上应用形状补间动画，必须先将这些元素将这些元素“分离分离”。要对文本应用形状补。要对文本应用形状补间动画，如果是多个文字，则必须间动画，如果是多个文字，则必须“分离分离”文本两次：将文本先转换

12、成单个文字，再转文本两次：将文本先转换成单个文字，再转换为矢量图形。换为矢量图形。 2021/6/1612形状补间动画的制作方法l什么都能变各种对象的简单变形l光电时代定位变形2021/6/1613什么都能变各种对象的简单变形l制作图形元件到组合的形状补间变形。制作图形元件到组合的形状补间变形。 2021/6/1614什么都能变各种对象的简单变形l制作组合到文字的形状补间动画。制作组合到文字的形状补间动画。 2021/6/1615什么都能变各种对象的简单变形l制作文字到图形的形状补间变形。制作文字到图形的形状补间变形。 2021/6/1616光电时代定位变形l新建动画文档将素材导入到库。新建动

13、画文档将素材导入到库。l制作定位变形。制作定位变形。(修改修改-形状形状-添加形状提示符添加形状提示符) 开始时位置开始时位置 结束时位置结束时位置 2021/6/1617光电时代定位变形 绘图纸外观的形变过程绘图纸外观的形变过程2021/6/1618光电时代定位变形 添加形状提示的图片添加形状提示的图片 重新排列形状提示的图片重新排列形状提示的图片 2021/6/1619光电时代定位变形 绘画纸外观的形变过程绘画纸外观的形变过程 2021/6/1620实例l火焰的跳动效果l铅笔画直线效果2021/6/1621火焰的跳动效果l选择圆形工具，画一个竖长的椭圆，选择圆形工具，画一个竖长的椭圆，l选

14、用油漆桶工具，打开调色板，选择线性渐变，调出桔红色到黄色的渐变，点击新建选用油漆桶工具，打开调色板，选择线性渐变，调出桔红色到黄色的渐变，点击新建l在椭圆上涂色，删掉线条在椭圆上涂色，删掉线条l按住按住Ctrl的同时，点住椭圆顶部的一点向上拖，可以拉出一个尖点，调整形状如的同时，点住椭圆顶部的一点向上拖，可以拉出一个尖点，调整形状如l在第在第20帧上按帧上按F6，加入一个关键帧，调整火焰的形状如图：，加入一个关键帧，调整火焰的形状如图：l120帧之间的任意一帧上单击，选择帧之间的任意一帧上单击，选择Modify(修改修改)-frame（帧数）打开（帧数）打开frame (帧数帧数)对话对话框，

15、在框，在tweening（变化）右边的小三角上点击，在下拉菜单中选择（变化）右边的小三角上点击，在下拉菜单中选择shape（形状）。点击舞（形状）。点击舞台的空白处。台的空白处。l在第一帧上点右键，选择在第一帧上点右键，选择copy frames（复制帧）（复制帧）,在第在第40帧上点右键，选择帧上点右键，选择paste frames（粘贴帧）（粘贴帧）l在第在第20-40帧之间的任意一帧单击，选择帧之间的任意一帧单击，选择Modify(修改修改)-frame（帧数）打开（帧数）打开frame (帧数帧数)对话框，在对话框，在tweening（变化）右边的小三角上点击，在下拉菜单中选择（变化）

16、右边的小三角上点击，在下拉菜单中选择shape（形状）。点（形状）。点击舞台的空白处。击舞台的空白处。l完成。选择完成。选择 Control（控制）（控制）-Test Movie（测试影片）观看动画（测试影片）观看动画2021/6/1622铅笔画直线效果l画一条很短的直线，画一条很短的直线，l在第在第30帧按帧按F6加入关键帧加入关键帧l选用选用scal(缩放缩放)工具，把鼠标放在直一右边的控制点上，把直线拉长，如图工具，把鼠标放在直一右边的控制点上，把直线拉长，如图l在在1-30帧间的任意一帧单击，选择帧间的任意一帧单击，选择Modify(修改修改)-frame（帧数）打开（帧数）打开fra

17、me (帧数帧数)对话框，在对话框，在tweening（变化）右边的小三角上点击，在下拉菜单中选择（变化）右边的小三角上点击，在下拉菜单中选择shape（形状）。点击舞台的空白处。（形状）。点击舞台的空白处。l新增一层，在新加层的第一帧画一个铅笔，位置放在小短线的上方，如图新增一层，在新加层的第一帧画一个铅笔，位置放在小短线的上方，如图l在新增层的第在新增层的第30帧按帧按F6，加关键帧，把铅笔入到长线的右端，在新层的，加关键帧，把铅笔入到长线的右端，在新层的1-30之之间任意一帧单击，选择间任意一帧单击，选择Modify(修改修改)-frame（帧数）打开（帧数）打开frame (帧数帧数)

18、对话框，对话框，在在tweening（变化）右边的小三角上点击，在下拉菜单中选择（变化）右边的小三角上点击，在下拉菜单中选择shape（形状）。（形状）。点击舞台的空白处。如图点击舞台的空白处。如图l完成，完成，Control（控制）（控制）-test movie （测试影片）观看动画。（测试影片）观看动画。2021/6/1623引导层动画引导层动画l使用运动引导层可以创建特定路径的部件动画效果，使用运动引导层可以创建特定路径的部件动画效果，实例、组或文本块均可沿着这些路径运动。实例、组或文本块均可沿着这些路径运动。l两种引导层两种引导层：只起到辅助静态对象定位的作用，影片放映时：只起到辅助静

19、态对象定位的作用，影片放映时不可见，无需使用被引导层，可单独使用，与普通图层的属不可见，无需使用被引导层，可单独使用，与普通图层的属性相似。性相似。l图层面板中，右键快捷菜单图层面板中，右键快捷菜单【引导层引导层】：总是与至少一个图层相关联，如果需要可以与：总是与至少一个图层相关联，如果需要可以与任意多个图层相关联（这些被关联的图层称为任意多个图层相关联（这些被关联的图层称为）l图层面板中，右键快捷菜单图层面板中，右键快捷菜单【添加传统运动引导层添加传统运动引导层】；通过；通过拖拽可增加或减少被引导图层。拖拽可增加或减少被引导图层。2021/6/1624l路径动画指对象（包括元件的实例、组合的

20、图形和静路径动画指对象（包括元件的实例、组合的图形和静态文本）沿路径进行运动变化。态文本）沿路径进行运动变化。l路径动画是运动渐变的一种特殊应用，只要在运动渐路径动画是运动渐变的一种特殊应用，只要在运动渐变的图层上新增了一个特殊层变的图层上新增了一个特殊层引导层，并在引导层引导层，并在引导层中绘制引导路径，补间实例或文本块就可以沿着路径运中绘制引导路径，补间实例或文本块就可以沿着路径运动了。动了。l多个图层可以链接到一个引导层，使多个对象沿同一多个图层可以链接到一个引导层，使多个对象沿同一条路径运动。条路径运动。l在在 Flash中，引导层中的曲线可以封闭，但是如果要中，引导层中的曲线可以封闭

21、，但是如果要制作环绕运动的动画通常并不使用封闭的曲线，而是在制作环绕运动的动画通常并不使用封闭的曲线，而是在封闭曲线上打开一个小缺口，使曲线产生两个端点，然封闭曲线上打开一个小缺口，使曲线产生两个端点，然后再制作路径动画。后再制作路径动画。 引导层动画引导层动画2021/6/1625制作实例制作实例l激光写字激光写字l雨滴雨滴2021/6/1626遮罩动画遮罩动画l遮罩层中的任何填充区域都是完全透明的；而任何非填充区域都遮罩层中的任何填充区域都是完全透明的；而任何非填充区域都是不透明的。在遮罩层上绘制的图形或输入的文字，相当于在遮是不透明的。在遮罩层上绘制的图形或输入的文字，相当于在遮罩层上挖

22、掉了相应形状的洞，形成挖空区域。通过挖空区域，显罩层上挖掉了相应形状的洞，形成挖空区域。通过挖空区域，显示下面图层中的内容，而遮罩层中没有绘制图形或输入文字的地示下面图层中的内容，而遮罩层中没有绘制图形或输入文字的地方就成了遮挡物，把下面图层的内容完全掩盖起来。方就成了遮挡物，把下面图层的内容完全掩盖起来。l遮罩层中的内容可以包括图形、文字、实例、影片剪辑在内的各遮罩层中的内容可以包括图形、文字、实例、影片剪辑在内的各种对象，但种对象，但Flash会忽略遮罩层中内容的具体细节，只关心它们占会忽略遮罩层中内容的具体细节，只关心它们占据的位置。在遮罩层中绘制各种图形或输入文字时可以不必考虑据的位置

23、。在遮罩层中绘制各种图形或输入文字时可以不必考虑颜色。颜色。l每个遮罩层可以有多个被遮罩层，这样可以将多个图层组织在一每个遮罩层可以有多个被遮罩层，这样可以将多个图层组织在一个遮罩层之下创建非常复杂的遮罩效果。个遮罩层之下创建非常复杂的遮罩效果。l两大类遮罩动画：两大类遮罩动画：l遮罩层运动；遮罩层运动；l被遮罩对象运动。被遮罩对象运动。2021/6/1627遮罩层动画实例一遮罩层动画实例一l聚光灯效果聚光灯效果l将舞台背景设置成黑色将舞台背景设置成黑色l遮罩层：来回滚动的小球遮罩层：来回滚动的小球l被遮罩层：在舞台上要显示出来的文字被遮罩层：在舞台上要显示出来的文字l类似效果：打字效果、花样

24、年华、滚动字幕效类似效果：打字效果、花样年华、滚动字幕效果果2021/6/1628遮罩层动画实例二遮罩层动画实例二l制作地球仪制作地球仪l遮罩层：圆形元件遮罩层：圆形元件l被遮罩层：地图水平移动被遮罩层：地图水平移动l制作卷轴效果制作卷轴效果l制作卷轴两端的手柄，进行水平方向的位置移动（制作卷轴两端的手柄，进行水平方向的位置移动（将手柄做成元件）将手柄做成元件）l遮罩层：矩形由小到大的变化遮罩层：矩形由小到大的变化l被遮罩层：最终显示的文字被遮罩层：最终显示的文字2021/6/1629遮罩层动画实例三遮罩层动画实例三l制作放大镜制作放大镜l制作小字制作小字l遮罩层：挖空小字的矩形条进行水平移动

25、遮罩层：挖空小字的矩形条进行水平移动l被遮罩层：小字被遮罩层：小字l制作大字制作大字l遮罩层：显示大字的圆形进行水平移动遮罩层：显示大字的圆形进行水平移动l被遮罩层：大字被遮罩层：大字l制作放大镜：制作一个和大字遮罩层中的圆相同大制作放大镜：制作一个和大字遮罩层中的圆相同大小的放大镜小的放大镜2021/6/1630利用遮罩做的简单特效利用遮罩做的简单特效 1、创建影片剪辑元件，名为、创建影片剪辑元件，名为“曲线动画曲线动画”；把图层名称更改为；把图层名称更改为“曲线曲线”；画一条曲线，笔触高度为；画一条曲线，笔触高度为2，颜色任意；选中曲线（，颜色任意；选中曲线（“修改修改”-“形状形状”-“

26、将线条转换为填充将线条转换为填充”），将线条转换为填充。），将线条转换为填充。2、在该元件中创建新图层，名称为、在该元件中创建新图层，名称为“矩形矩形”；把该图层放在；把该图层放在“曲线曲线”图层的下方；画一个矩形，从左到右渐变，中间白色透明度为图层的下方；画一个矩形，从左到右渐变，中间白色透明度为100%，两边白色透明度为，两边白色透明度为0；把矩形放到曲线的右边。；把矩形放到曲线的右边。3、在、在“矩形矩形”图层的第图层的第10帧处插入关键帧，把矩形放到曲线的左边，帧处插入关键帧，把矩形放到曲线的左边，并创建形状补间动画。并创建形状补间动画。 4、在、在“矩形矩形”图层的第图层的第25帧和

27、帧和40帧处插入关键帧，并创建补间动画；帧处插入关键帧，并创建补间动画；把把40帧处的矩形透明度都设为帧处的矩形透明度都设为0并将宽度变小。并将宽度变小。 5、把、把“曲线曲线”图层上的帧延长到第图层上的帧延长到第40帧处，选中图层，右键选择帧处，选中图层，右键选择“遮遮罩层罩层”。6、从库中把、从库中把“曲线动画曲线动画”元件拖入到主场景中的合适位置，将中心点元件拖入到主场景中的合适位置，将中心点（小白圆）往右拖离一定矩离；打开（小白圆）往右拖离一定矩离；打开“窗口窗口”-“变形变形”，在，在“旋转旋转”中输入中输入30，点击下面的，点击下面的“复制并运用变形复制并运用变形”按钮，连按按钮，

28、连按11次。次。 2021/6/1631制作流动的动画制作流动的动画l新建一新建一flash文档文档,550 x400，导入几张图片。，导入几张图片。 l将一张图片拉到舞台上，设置图片宽为将一张图片拉到舞台上，设置图片宽为1100，高为，高为400，打对齐面板，打对齐面板相对于舞台右对齐。相对于舞台右对齐。l第第50帧插入关键帧，点击图片，打开对齐面板相对于舞台左对齐，建帧插入关键帧，点击图片，打开对齐面板相对于舞台左对齐，建立传统补间动画。新插入一层，画一无笔触任一色矩形，大小为立传统补间动画。新插入一层，画一无笔触任一色矩形，大小为550 x400，居中对齐。第，居中对齐。第50帧插入帧，

29、右击该层，设为遮罩层。帧插入帧，右击该层，设为遮罩层。l 新插入一层，将同一图片从库中拖出，打开对齐面板，宽、高匹配新插入一层，将同一图片从库中拖出，打开对齐面板，宽、高匹配（即（即550 x400），居中对齐，第），居中对齐，第50帧插入帧。帧插入帧。l 新插入一层画一无笔触任一色的矩形，大小为新插入一层画一无笔触任一色的矩形，大小为550 x400，居中对齐，居中对齐，用变形工具将注册点移到右边中间。在第用变形工具将注册点移到右边中间。在第50帧插入关键帧，回到第帧插入关键帧，回到第1帧，将矩形宽度缩小到帧，将矩形宽度缩小到5像素。建立补间动画，设为遮罩层。像素。建立补间动画，设为遮罩层。

30、l这样流动的图片效果就做成了。这样流动的图片效果就做成了。2021/6/1632制作流动的动画制作流动的动画l你可以在新的一层第你可以在新的一层第51帧，插入空白关键帧，将第帧，插入空白关键帧，将第2张图拖入，这一张图拖入，这一次图片的宽度为次图片的宽度为550，而高度为，而高度为800。在第。在第100帧插入关键帧。第帧插入关键帧。第1帧帧相对舞台上对齐，第相对舞台上对齐，第100帧下对齐，建立补间。帧下对齐，建立补间。l新插入一层，画一无笔触任一色矩形，大小为新插入一层，画一无笔触任一色矩形，大小为550 x400，居中对齐。，居中对齐。第第100帧插入帧，右击该层，设为遮罩层。帧插入帧，

31、右击该层，设为遮罩层。l 第三层第第三层第51帧插入空白关键帧，将相同图片拖入，大小匹配，居中帧插入空白关键帧，将相同图片拖入，大小匹配，居中对齐对齐l 第四层第第四层第51帧插入空白关键帧，画一无笔触任一色的矩形，大小为帧插入空白关键帧，画一无笔触任一色的矩形，大小为550 x400，居中对齐，用变形工具将注册点移到上边中间。在第，居中对齐，用变形工具将注册点移到上边中间。在第50帧帧插入关键帧，回到第插入关键帧，回到第1帧，将矩形高度缩小到帧，将矩形高度缩小到5像素。建立补间动画，像素。建立补间动画，设为遮罩层。设为遮罩层。l在第在第101帧做第三张图片，做法同上面两张图片，只是注意一点，第帧做第三张图片，做法同上面两张图片，只是注意一点，第一层图片的运动方向跟第一层图片的运动方向跟第4层的遮罩运动方向刚好相反。层的遮罩运动方向刚好相反。 2021/6/1633创建反向运动 反向运动（反向运动（IK）是一种使用骨骼的有关节结构对一）是一种使用骨骼的有关节结构对一个对象或彼此相关的一组对象进行动画处理的方法。使用个对象或彼此相关的一组对象进行动画处理的方法。使用骨骼，元件实例和形状对象可以按复杂而自然的方式移动骨骼，元件实例和形状对象可以按复杂而自然的方式移动，只需做很少的设计工作。例如，通过反向运动可以更加，只需做很少的设计工