《flashcs3动画制作基础与案例教程教学课件作者温俊芹教学讲义第4章基础动画制作》由会员分享，可在线阅读，更多相关《flashcs3动画制作基础与案例教程教学课件作者温俊芹教学讲义第4章基础动画制作（39页珍藏版）》请在金锄头文库上搜索。
1、第四章 基础动画制作第四章 基础动画制作在前面的模块中，我们已经介绍了Flash CS3的工作界面、基本工具和动作制作的基本知识，相信读者对Flash CS3已经有了一个初步的认识。在本模块中，我们将带来读者正式进入Flash的主要部分动画的制作。Flash最主要的功能就是制作动画，在Flash中可以制作各种动画：自行播放的动画、交互式动画。作为一个矢量动画制作软件，Flash比其他动画软件要简单易学，没有很复杂的操作，只要掌握一些基本的动画制作技巧，就可以制作出很精彩的动画。在本次课中，我们将介绍一些基本的Flash动画制作方法，后面的模块讲解的动画都将以本模块的基本动画为基础，希望读者认真
2、学习本模块的内容。第一部分 学习要求一 应知目标1. 了解逐帧动画的概念2. 了解动画补间动画的概念3. 了解形状补间动画的概念二 应会目标1. 能够独立制作逐帧动画2. 能够独立制作动画补间动画3. 能够独立制作形状补间动画三 预备知识1. 熟悉Flash CS3的工作环境和Flash CS3的基本操作2. 掌握Flash CS3工具箱中各种功能强大的绘图、编辑和辅助工具的使用3. 了解元件、实例和库的概念，掌握图形、影片剪辑和按钮这三种元件的制作方法四 课时安排项目学时教学方式（参考）1预习课余预习本课相关的知识，并能完成本次课的项目实例操作。2课堂讲解2学时. 介绍动画形成的基本原理。.
3、 重点介绍逐帧动画、动画补间动画和形状补间动画的制作方法。. 介绍三种动画的区别。3实训练习2学时. 按照操作步骤，自己完成综合制作。. 参考课堂上教师讲解的操作步骤，完成实践训练中的项目内容。. 有实力的同学继续完成职岗演练中的项目内容。第二部分 课堂讲解4.1 动画的基础知识我们看到的Flash动画与影片类似，都是由一帧一帧的画面所组成，当连续快速播放这些画面时，由于人们视觉的暂留现象，就会认为这些连续播放的画面变成了流畅的动画。如果每秒钟播放的画面数越多，即动画的帧频越高，动画的播放速度就越快，则播放的画面也就越流畅。Flash中默认的帧频为“12帧/秒”，我们可以通过调整帧频的值来获得
4、比较流畅的画面效果。以前制作动画的过程非常复杂，需要将每一帧上的画面全部绘制出来，有了Flash后，制作动画就变的简单了，我们只需要将动画画面中的关键部分绘制出来，中间的动画过程可以交给Flash完成，从而大大减少了制作动画的工作量。因此，在Flash动画的制作过程中，由于制作方法和生成原理的不同，可以将Flash动画分成逐帧动画和补间动画两种。而补间动画又可以分为动画补间动画和形状补间动画两种。u 逐帧动画：逐帧动画是一种传统的动画形式，制作起来比较繁琐。此类动画完全由关键帧组成，每个关键帧都可以进行单独编辑，它需要用户对物体运动的基本规律有深入的了解，并且具有一定的绘图基础。利用逐帧动画可
5、以做出任意的动画效果，但是由于每个关键帧都要进行编辑，所以逐帧动画工作量很大，而且制作出来的作品文件容量也很大。u 动画补间动画：动画补间动画可以完成对象的移动、缩放、旋转、变色等形式的动画效果。构成动画补间动画的元素是元件，除了元件，其他元素包括文本都不能创建动画补间动画。u 形状补间动画：形状补间动画可以完成图形的移动、缩放、形状渐变、色彩渐变等动画，它的作用对象只能是图形。和一般的动画补间动画有所不同，在使用形状变形时，不需要把绘制好的形状转换为元件，如果要使用元件实例创建形状补间动画，也要将改实例通过按快捷键CtrlB分离后才可以实现。4.2 逐帧动画的制作逐帧动画是Flash动画中最
6、基本的动画形式，只需要掌握插入关键帧的方法就可以制作逐帧动画，但制作一个好的逐帧动画需要掌握物体运动规律和有好的绘画基础。下面我们就介绍在Flash中创建逐帧动画的方法。4.2.1 直接导入生成逐帧动画我们可以将绘制好的jpg、png等格式的静态图片连续导入到Flash中来建立一段逐帧动画，也可以通过导入gif序列图像、swf动画文件等的方法来建立一段逐帧动画。下面通过一个“麦兜”的例子来讲解导入一个序列的图片生成逐帧动画的制作方法，项目实例4-1：导入一个序列的图片生成逐帧动画具体操作步骤如下：（1）启动Flash CS3，出现Flash CS3窗口，如图4-1所示，在“新建”中选择“Fla
7、sh文件（ActionScript3.0）”，建立一个新文档，如图4-2所示。图4 -1 Flash CS3开始窗口图4 -2 新建Flash文档（2）单击“属性”面板上“大小”处的位置，如图4-3所示。图4 -3 “属性”面板（3）在弹出的“文档属性”对话框中设置舞台的宽度为“200像素”、高度为“300像素”、背景色为“白色”，其他均为默认值，如图4-4所示。 图4 -4 “文档属性”对话框 图4 -5 “导入”对话框（4）单击“文档属性”对话框中的“确定”按钮，完成对文档属性的各项设置。图4 -6 导入序列文件的询问对话框图4 -7 导入的序列动画在场景的上方形成逐帧动画（5）单击菜单栏
8、中的“文件”“导入”“导入到舞台”命令，或者按“CrtlR”组合键，打开“导入”对话框，如图4-5所示。（6）在“导入”对话框中选择本书的配套素材“第四章/逐帧动画/素材”目录下的“麦兜1.jpg”图形文件，然后单击“打开”按钮，将其导入到舞台。（7）因导入目录下的文件是一组系列文件，则弹出如图4-6所示的询问对话框，单击“是”按钮将序列文件全部导入，此时Flash会自动把该图片序列按序号以逐帧形式导入到场景中，如图4-7所示。 （8）单击菜单栏中的“控制”“测试影片”命令，或者按CtrlEnter组合键，对影片进行测试，效果如图4-8所示。 图4 -8 影片测试效果4.2.2 创建逐帧动画除
9、了可以通过导入序列图片来生成逐帧动画外，我们还可以利用鼠标或者手写板，在Flash中绘制一帧帧的矢量图形来生成逐帧动画。也可以用文字来做帧中的对象，实现文字的跳跃、闪烁等特效。1. 逐帧动画飞翔的海鸥在“飞翔的海鸥”动画中，我们没有直接在场景中制作，而是在影片剪辑中制作，然后再将影片剪辑拖到场景中，这样安排动画制作的好处在于影片剪辑在播放时不会受到主场景的控制，因此不管主场景有多少帧，影片剪辑都会按照它自己的时间轴循环播放下去。另外影片剪辑放置到场景中后，还可以对此影片剪辑的实例进行编辑，如缩放、旋转、变形等，甚至可以将此影片剪辑作为一个动画对象，在场景中继续制作动画，从而制作出更复杂的动画。
10、通过本例子的学习，读者能掌握到一些影片剪辑的用法，对前面讲解的元件与实例的知识进行巩固。项目实例4-2：绘制一个逐帧动画飞翔的海鸥。具体操作步骤如下：（1）启动Flash CS3，建立一个Flash文档。（2）单击菜单栏中的“修改”“文档”命令，在弹出的“文档属性”对话框中设置舞台的宽度为“400像素”，高度为“400像素”，其他均为默认值，如图4-9所示。 （3）单击“文档属性”对话框中的“确定”按钮，完成对文档属性的各项设置。（4）单击菜单栏中的“插入”“新建元件”命令，在弹出的“创建新元件”对话框中，设置名称为“海鸥”，类型为“影片剪辑”，如图4-10所示。（5）进入“海鸥”元件编辑窗口
11、中，选择“铅笔”工具，并在“属性”面板中设置笔触的颜色为“黑色”，笔触的粗细为“1”，如图4-11所示。 图4 -9 “文档属性”对话框 图4 -10 “创建新元件”对话框图4 -11 “属性”面板（6）运用“铅笔”工具，绘制出海鸥的头和身体，如图4-12所示。 图4 -12 绘制的头和身体轮廓图 4 -13 填充颜色后的效果图（7）选择“颜料桶”工具，分别将海鸥的嘴填充为“黄色”（#FF9900），眼睛填充为“蓝色”（#233349），其他部分填充为“白色”，并把多余的线条删除，填充后的效果如图4-13所示。（8）在“时间轴”面板中将“图层1”重命名为“头和身体”并将其锁定，然后在“头和身体
12、”图层上方新建一个图层并将其命名为“翅膀”，如图4-14所示。图4 -14 新建图层（9）在“翅膀”图层运用“铅笔”工具，绘制出海鸥的翅膀，如图4-15所示。 图4 -15 绘制翅膀 图4 -16 填充翅膀（10）选择“颜料桶”工具，将海鸥翅膀填充为“蓝色”（#233349），其他部分填充为“白色”，并把多余的线条删除，填充后的效果如图4-16所示。（11）锁定“翅膀”图层并在其上方新建一个图层，将新建图层重命名为“尾巴”，如图4-17所示。图4 -17 新建图层（12）在“尾巴”图层运用“铅笔”工具，绘制出海鸥的尾巴，并运用“颜料桶”工具，将尾巴填充为“白色”，如图4-18所示。图4 -18
13、 绘制尾巴（13）分别在“时间轴”面板中选择“头和身体”和“尾巴”图层中的第4帧，然后在此帧处单击鼠标右键，在弹出来的快捷菜单中选择“插入帧”命令，或者敲击键盘上的F5键，在两个图层的第4帧出创建出普通帧，让“头和身体”和“尾巴”图层中的图形可以显示4帧的时间，如图4-19所示。图4 -19 插入普通帧（14）在“时间轴”面板选择“翅膀”图层中的第2帧，然后在此帧处单击鼠标右键，在弹出来的快捷菜单中选择“插入空白关键帧”命令，或者敲击键盘上的F7键，在第2帧创建空白关键帧，然后采用和前面绘制翅膀一样的方法绘制翅膀水平的第1个动作，绘制后效果如图4-20所示。（15）在“翅膀”图层的第3帧插入空
14、白关键帧，然后绘制翅膀向上扬的动作，如图4-21所示。 图4 -20 翅膀水平的第1个动作 图4 -21 翅膀上扬的动作（16）在“翅膀”图层的第4帧插入空白关键帧，然后绘制翅膀水平的第2个动作，如图4-22所示。 图4 -22 翅膀水平的第2个动作（17）单击按钮，切换到场景中。（18）单击菜单栏中的“窗口”“库”命令，或者敲击键盘上的CtrlL键，打开库面板。（19）在“库”面板中选择“海鸥”影片剪辑元件，将此元件拖到场景的舞台中，如图4-23，使用“任意变形”工具对其进行适当的旋转和缩小，如图4-24所示。 图4 -23 没变化的“海鸥”元件 图4 -24 旋转和缩小后的“海鸥”元件（2
15、0）单击菜单栏中的“控制”“测试影片”命令，或者按CtrlEnter组合键，对影片进行测试，效果如图4-25所示。 图4 -25 影片测试效果2. 逐帧动画打字效果在一些影视作品的片头，经常会见到模拟打字效果的字幕，下面我们就用逐帧动画来实现一个常见的打字动画效果。在“打字效果”动画中，我们把文字分别放置在不同的图层，这样做的好处在于在内容很多的情况下无需进行繁琐的手工复制。项目实例4-2：制作一个打字效果的逐帧动画具体操作步骤如下：（1）启动Flash CS3，建立一个Flash文档。（2）单击菜单栏中的“修改”“文档”命令，在弹出的“文档属性”对话框中设置舞台的宽度为“600像素”，高度为“200像素”，背景色设置为“黑色”，其他均为默认值，如图4-26所示。
