Flash动画制作课件之动画制作基础.ppt

1、第4章动画制作基础,本章要点时间轴介绍帧（制作逐帧动画）制作补间动画（运动补间和形状补间）制作形状提示,4.1时间轴和帧,帧：一系列的单幅画面称为帧，动画的制作就是改变连续帧内容的过程。时间轴：由帧组成的动画是通过【时间轴】面板实现的。面板主要由帧、层和播放指针组成。,4.1.1时间轴概述,图所示为Flash的【时间轴】面板。,4.1.2帧,帧可分为以下两种：关键帧普通帧,下面介绍一下各种帧的标识：图所示为新打开文件时的状态，第1帧中带白背景的空心圆圈代表空白关键帧，即该帧中不包含任何内容。,如图所示，其中灰色背景带黑点的单元格为关键帧，关键帧之间的灰背景则表示这些帧与关键帧保持相同的内容，都

2、是普通帧，最右侧带黑框的单元格表示普通帧中的结束帧。,图所示为设置了运动补间的帧视图，其中淡蓝背景的黑点所在单元格表示关键帧，关键帧之间淡蓝背景上的黑色箭头表示运动补间帧。,图所示为设置了形状补间的帧视图，其中淡绿背景的黑点所在的单元格表示关键帧，关键帧之间淡绿背景的黑色箭头表示形状补间帧。,关键帧之间如果有虚线，则表示未完成或中断的渐变，如图所示。,图所示为在已设置的至少两个关键帧后新加入一个图层后显示的空帧。,关键帧上有个小写的字母a，表示此帧设置了交互动作，即使用【动作（Actions）】面板设置了动作语句，如图所示。,当关键帧上有一个小红旗，则表示该帧设置了标签，如图所示。,当关键帧上

3、出现绿色的双斜杠，表示该帧设置了注释，如图所示。,4.2帧的编辑,帧的编辑操作包括帧的选择、帧的复制、帧的粘贴、帧的移动等。,4.2.1帧的选择,选择帧的方法如下：在时间轴上单击某个单元格，则可以选中该方格代表的帧。当选择了一帧后，再按住【Shift】键单击另一帧，则可以选中这两帧之间包含的连续帧。选中的帧以黑色高亮显示。,按住【Ctrl】键并单击，可以选中不连续的多个帧。如果需要选择【时间轴】面板中的所有帧，可以执行【编辑(Edit)】【选择所有帧(SelectAllFrames)】命令。,4.2.2插入帧,用鼠标右击该帧，从弹出的快捷菜单中选择相应命令即可在某帧前插入一帧或将某帧设置为关键

4、帧、空白关键帧，如图所示。,插入普通帧：从快捷菜单中选择【插入帧（InsertFrame）】命令或按【F5】键可插入一个普通帧；设置关键帧：可以从快捷菜单中选择【插入关键帧（InsertKeyframe）】命令或按【F6】键；插入空白关键帧：从快捷菜单中选择【插入空白关键帧（InsertBlackKeyframe）】命令或按【F7】键。,4.2.3帧的复制和粘贴,复制帧时可按如下方法进行操作：1、在时间轴上先将需要复制的帧选中（可以是单帧，也可是多帧）。,2、单击鼠标右键，从弹出的快捷菜单中选择【拷贝帧（CopyFrames）】命令，如图所示，即可将选中的帧复制到剪贴板上。,3、在时间轴上选取

5、粘贴的目标帧，右击该帧，在弹出的快捷菜单中选择【粘贴帧（PasteFrames）】命令，将复制的帧粘贴上去。如果选择的是多帧，则执行【粘贴帧】命令后会把选中的多个帧覆盖。,4.2.4帧的移动和删除,选取一帧或多帧，用鼠标直接将其拖至需要的地方即可移动帧。要删除一个或多个帧，需要先将其选中，然后从快捷菜单中选择【删除帧（RemoveFrames）】命令，使用【剪切帧】命令也可达到删除帧的目的。,4.2.5动画帧的翻转,选择需要翻转的动画帧（可以包括多层，即选取一段动画）右击，从弹出的快捷菜单中选择【翻转帧（ReverseFrames）】命令，可以将动画的播放次序颠倒。,4.2.6关键帧转换为普通

6、帧,要把关键帧转换为普通帧，只需右击该关键帧，从弹出的快捷菜单中选择【清除关键帧（ClearKeyframe）】命令，即可将当前关键帧清除，原来的内容由前面帧的内容取代。,4.2.7制作闪烁字母,具体操作如下：1、新建一个文件，将背景色设置为深蓝色。2、选择【文本工具】，将线条颜色设置为黄色，然后在舞台上输入字母f。3、用【箭头工具】选择文字，将文字打散，使其变成Flash可以处理的矢量图形。,4、执行【修改】【形状（Shape）】【柔化填充边缘（SoftenFillEdges）】命令，打开【柔化填充边缘】对话框，按图所示进行设置。效果如下图所示：,5、选择时间轴上的第5帧，插入关键帧，此时该

7、帧中的内容与第1帧保持相同的内容。6、选择第6帧，插入空白关键帧。再选择第8帧插入普通帧，时间轴如图所示。,7、将1至8帧选中，复制选中的帧。8、右击第9帧，粘贴所复制的帧。,4.3逐帧动画,下面通过现有图片素材来介绍创建逐帧动画的制作方法，具体操作步骤如下：1、新建一个文件，此时的时间轴上的第一帧是个空白关键帧。2、在其他图片处理程序（如Photoshop）中将准备好的图片素材打开，选中后按【Ctrl+C】组合键进行复制。,3、在Flash中，选择第1帧，按【Ctrl+V】组合键进行粘贴，如图所示。,4、用步骤2中同样的方法复制素材的第2幅图片。5、在第2帧处插入一个关键帧，然后将复制的图片

8、粘贴到第2帧中，如图所示。6、执行【控制】中【测试影片】命令测试动画效果。,张瑞杰老师完整Flash视频课程学习地址：（网站制作模块），一个月轻松成为Flash动画制作高手！,4.4运动补间动画,补间动画是相对于逐帧动画而言的，它通过定义动画某一部分的起点和终点的内容，然后由Flash自动生成两端点间各帧（一般称这些帧为补间帧）的内容。,在Flash中可以建立两种补间动画形状补间（ShapeTween）和运动补间（MotionTween），每种都有其自己的特性。本节我们先介绍运动补间动画的制作。,4.4.1创建运动补间动画,一、一个最简单的运动渐变实例跳动的小球,1、制作一个没有边的小球点击“

9、工具箱”中的“椭圆工具”，再修改“描边颜色”，点击下面的中中间的“没有颜色”按钮，设置为不描边状态，修改“填充颜色”为“兰色”，在“工作区”中插入一个正圆（当鼠标十字的圆变大），要保证圆形没有边界。,2、将小球转换为元件使用“黑箭头”选中这个圆形，再选择“修改”菜单中的“转换为元件”，就会弹出如下对话框：录入元件名称，选择图形元件作用，点击“确定”就行了。,注意制作“运动渐变”时一定要把运动的图形对象“转换为元件”，否则渐变将会创建失败；在一个影片中创建的元件，只要该影片没有关闭，则它库中的元件也可以被其它的影片中所使用。我们可以将该层改名为“ball”层,3、制作小球跳动的效果选择第20帧（

10、即把焦点红线移到第20帧上），点击鼠标右键或从“插入”菜单中选择“插入关键帧”，该帧就会变为黑圆点关键帧，在该帧中拖动圆球的位置到工作区的下面，然后再选中第1帧，点击鼠标右键选择“创建动画动作”，则小球第1次落下的做完了，您可以点击“控制”窗口中的“播放”来看效果了。,注意在第1帧和第20帧中小球的位置一定要在一个垂直线上，可以打开“信息浮动面板”来精确定位，以后的所有关键帧中小球的位置也要这样。,选择第40帧，添加关键帧，把小球拖动到第1帧一半左右的高度，再回到第20帧添加动画；选择第55帧，添加关键帧，把小球移到第20帧中的位置，再回到第40帧添加动画；以后依次类推，直到小球停下为止。,4

11、、制作地面点击左边图层区域的“添加图层”按钮，添加一个图层，起名为back，在其中画一条直线，象征地面，位置为第20帧小球的底边位置。画完后，则会自动生成与小球图层同样多的帧。,5、使小球调动更真实可信例如在第40帧位置由于小球升到最高点一般要停顿一下，所以可以在该帧两侧添加两个关键帧，帧中小球的位置比第40帧的小球位置稍低，小球最高点的效果就有了。,6、保存动画点击“保存”可以把动画保存为fla格式，选择“文件”菜单中的“导出影片”可以把动画导出为流行的swf格式。注意两种格式的区别,二、一个复杂一些的例子学校升旗、降旗,1、新建一个文件，然后利用工具箱的工具制作一幅图片，如图所示。,2、新

12、建一个图层【图层2】。3、用【画笔工具】在舞台上绘制一面红旗，将颜色设置为红色，如图所示。,4、选择图层1中的第15帧，插入普通帧。5、选择图层2，在第1帧上将红旗拖到旗杆的下方，按【Ctrl+G】组合键使其成组。6、选择第15帧，插入关键帧，将红旗拖至旗杆上方，如图所示，然后释放鼠标。,7、用鼠标右击图层2的第1帧，从弹出的快捷菜单中选择【创建补间动画（CreateMotionTween）】命令，此时的【时间轴】面板如图所示。,8、下面来制作降旗的动画。在图层1的第60帧处插入普通帧。9、在图层2的第45帧处插入关键帧，然后选中第1帧到第15帧，复制选中的帧。10、用鼠标右击第46帧，将复制

13、的帧粘贴到此处。11、选择第46至60帧，翻转动画帧，使升旗过程变为降旗过程。此时的【时间轴】面板及画面如下图所示。,4.4.2设置运动补间属性,当选中【时间轴】面板中的某帧（尚未创建补间动画的帧）后，属性面板即显示为帧属性面板，如图所示。,该面板中各选项功能如下所述：帧：可以做标签补间：三种形式，无、动作、形状,当在时间轴上选择设置了运动补间的帧，帧属性面板会有所变化，如图示。,运动补间属性面板中各选项的使用具体操作步骤如下：1、接上例中的文件，新建图层3。2、选择新建的图层3的第1帧，按【Ctrl+R】组合键导入一幅图片，如图所示。,3、按【Ctrl+B】组合键将导入的图形打散。,4、从工

14、具箱中选择【套索工具】，从其选项区中选择【魔术棒】工具，单击导入图片的白色背景部分，将其选中，按【Delete】键删除，效果如图所示。,5、将图层3的第1帧中的内容全部选中，按【Ctrl+G】组合键使所有图像成组，成组后的对象会被蓝框框住。将成组后的对象移到舞台的右上角。6、在第60帧处插入关键帧，并将图像移到舞台的左下角，如图所示。,7、选择第1帧，然后在帧属性面板中进行如图所示的设置。8、按【Ctrl+Enter】组合键测试动画效果。,4.5形状补间动画,形状补间动画是指形状逐渐发生变化的动画，一般称为变形动画。一个最简单的形状渐变例子正方形变成圆形,新建一个Flash文件1、在绘图工具箱

15、中选择矩形工具，用矩形工具在场景中画出一个没有边框的红色矩形。这是变形动画的第1帧。2、单击第10帧并按F7键，插入一个空白关键帧，点椭圆工具，在场景中画出一个没有边框的蓝色小球。3、点第一帧，在下边的属性提示中，设置变形动画，选择形状渐变。此时，矩形变圆的动画完成。（播放一下看看）,接着，我们可以将圆形变成汽车，还可以将汽车变成文字等。,4.5.1形状补间的创建,建立变形动画的一般步骤如下：1、新建一个文件，将该文件背景设置为深蓝色。2、用【直线工具】在舞台的左侧绘制一个长方体轮廓，用填充工具为长方体三个面填充上不同的颜色，如图所示。,3、在第40帧处插入关键帧，然后将该帧的长方体删除。4、

16、选择【椭圆工具】，将填充颜色设置为渐变填充色，如图所示。,5、在舞台的右侧绘制一个圆形，用【填充变形】调整渐变填充，结果如图所示。,6、在【时间轴】面板中的第80帧处插入关键帧，将该帧中的圆球删除，选择【矩形工具】，将【笔触颜色】设置为无色，【填充颜色】设置如上图所示，只是将【填充样式】设置为【线性】，绘制一个矩形。接下来在舞台左侧绘制一个矩形。,7、用【箭头工具】将矩形变形为图所示的箭头形状。,8、单击第1帧，将【补间】设置为【形状】，如图所示。,9、用同样的方法将第40帧处的【补间】设置为【形状】，此时的时间轴及舞台如下图所示。,10、按【Ctrl+Enter】组合键，测试动画效果，下图所

17、示为变形动画中的两个画面。,张瑞杰老师完整Flash视频课程学习地址：（网站制作模块），一个月轻松成为Flash动画制作高手！,全网最优秀的平面设计美女专家讲师刘丽娜老师九张DVD原创视频课程，让您两个月内轻松成为平面设计高手！学习地址：,4.5.2形状提示,形状提示是一个有颜色的实心小圆，上面写着一个英文字母，表示物体部位的名称，最多可以用26个英文字母来代表图形上的部位。,利用形状提示来制作开门变形动画的具体操作步骤：1、新建一个文件，导入一幅图片，用【任意变形工具】将导入图片的大小调整为合适大小，如下图所示。,2、新建【图层2】。选择【矩形工具】，将【笔触颜色】设置为无色，【填充颜色】设

18、置为红色，在舞台中绘制一个矩形块，如下图所示。,3、在第60帧处插入关键帧，选择【任意变形工具】，将矩形向左压缩，如图所示。,4、选择第1帧，接着将【属性】面板中的【补间】设置为【形状】。5、选择第1帧，执行【修改】【形状】【添加形状提示（AddShapeHint）】命令，添加形状提示，在舞台上会出现一个写着字母a的红色形状提示。,6、按【Ctrl+Shift+H】组合键再多添加三个图形提示，然后用鼠标将形状提示移动到矩形的四个角上，如图所示。,7、选择渐变的结束帧。将上面的提示移动到变形后的目的位置，此时效果如图所示。,8、再新建一个层，用【矩形工具】在舞台上绘制两个长条矩形，并用渐变色进行填充，形成立体的门柱。在第60帧处插入关键帧，如图所示。,9、执行菜单命令【控制】【播放】播放影片，查看变形效果。,4.6绘图纸模式,FlashMX中提供的绘图纸模式按钮有4个，如图所示。当单击【时间轴】面板下方的前三个绘图纸按钮中的任意一个时，“绘图纸标记”会出现在时间轴上，如图所示。,4.6.1绘图纸外观模式,单击【绘图纸外观（OnionSkin）】按钮，在时间轴标尺上会出现一对黑括号，位于时间轴标尺上的起始游标和终止游标之间的帧在画板上从深到浅显示出来（如图所示）。,用鼠标移动任意一个游标可同时看到更多的帧，如图所示。,4.6.2绘图纸外观轮廓模式,与【绘图纸