第4章基础动画制作.ppt

《第4章基础动画制作.ppt》由会员分享，可在线阅读，更多相关《第4章基础动画制作.ppt（49页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、本章要点l逐帧动画 l动画补间动画 l形状补间动画一、动画的基础知识1、逐帧动画： 逐帧动画完全由关键帧组成，每个关键帧都可以进行单独编辑，它需要用户对物体运动的基本规律有深入的了解，并且具有一定的绘图基础。利用逐帧动画可以做出任意的动画效果，但是由于每个关键帧都要进行编辑，所以逐帧动画工作量很大，而且制作出来的作品文件容量也很大。2、动画补间动画： 动画补间动画可以完成对象的移动、缩放、旋转、变色等形式的动画效果。构成动画补间动画的元素是元件，除了元件，其他元素包括文本都不能创建动画补间动画。3、形状补间动画： 形状补间动画可以完成图形的移动、缩放、形状渐变、色彩渐变等动画，它的作用对象只能

2、是图形。和一般的动画补间动画有所不同，在使用形状变形时，不需要把绘制好的形状转换为元件，如果要使用元件实例创建形状补间动画，也要将改实例通过按快捷键CtrlB分离后才可以实现。二、动画的制作1、逐帧动画的制作(1)、直接导入生成逐帧动画1、我们可以将绘制好的jpg、png等格式的静态图片连续导 入到 Flash中来建立一段逐帧动画,也可以通过导入gif序列图像、swf动画文件等的方法来建立一段逐帧动画 2、下面通过一个“麦兜”的例子来讲解导入一个序列的图片生成逐帧动画的制作方法:启动Flash CS3，出现Flash CS3窗口，如图4-1所示，在“新建”中选择“Flash文件（ActionS

3、cript3.0）”，建立一个新文档，如图4-2所示。图4 -1 Flash CS3开始窗口图4 -2 新建Flash文档单击“属性”面板上“大小”处的位置，如图4-3所示。图4 -3 “属性”面板在弹出的“文档属性”对话框中设置舞台的宽度为“200像素”、高度为“300像素”、背景色为“白色”，其他均为默认值，如图4-4所示。 图4 -4 “文档属性”对话框 单击菜单栏中的“文件”“导入”“导入到舞台”命令，或者按“CrtlR”组合键，打开“导入”对话框，如图4-5所示。图4 -5 “导入”对话框 在“导入”对话框中选择本书的配套素材“第四章/逐帧动画/素材”目录下的“麦兜1.jpg”图形文

4、件，然后单击“打开”按钮，将其导入到舞台。 因导入目录下的文件是一组系列文件，则弹出如图4-6所示的询问对话框，单击“是”按钮将序列文件全部导入，此时Flash会自动把该图片序列按序号以逐帧形式导入到场景中，如图4-7所示。图4 -6 导入序列文件的询问对话框 图4 -7 导入的序列动画在场景的上方形成逐帧动画 单击菜单栏中的“控制”“测试影片”命令，或者按CtrlEnter组合键，对影片进行测试，效果如图4-8所示。 图4 -8 影片测试效果1、我们也可以利用鼠标或者手写板，在Flash中绘制一帧帧的矢量图形来生成逐帧动画。也可以用文字来做帧中的对象，实现文字的跳跃、闪烁等特效。2、实例操作

5、 飞翔的海鸥 、打字效果 启动Flash CS3，建立一个Flash文档。 单击菜单栏中的“修改”“文档”命令，在弹出的“文档属性”对话框中设置舞台的宽度为“600像素”，高度为“200像素”，背景色设置为“黑色”，其他均为默认值，如图4-26所示。图4 -26 “文档属性”对话框 选择“文本”工具（），并在“属性”面板中设置字体为“隶书”，字体大小为50 ，字体颜色为“蓝色” ，粗体，对齐方式为左对齐，其他均为默认值，如图4-27所示。图4 -26 “文档属性”对话框在舞台上输入文字“模拟打字效果”，然后按快捷键Ctrl B把段落文字分离成单个的文字，如图4-28所示。图4 -28 输入文字

6、 单击菜单栏中的“修改”“时间轴”“分散到图层”命令，把单个的文字分散到不同的图层，然后把变成空层的“图层1”删除，如图4-29所示。图4 -28 输入文字 选择“模”图层的第1帧，按住鼠标左键，把该关键帧拖到该层的第3帧；用同样的方法，把“拟”图层第1帧处的关键帧拖到该层的第6帧；把“打”图层第1帧处的关键帧拖到该层的第9帧；把“字”图层第1帧处的关键帧拖到该层的第12帧；把“效”图层第1帧处的关键帧拖到该层的第15帧；把“果”图层第1帧处的关键帧拖到该层的第18帧，此时“时间轴”面板如图4-30所示。图4 -30 移动关键帧的位置图 在“时间轴”面板中，选择“模”图层的第25帧，按住键盘上

7、的Shift键，选择“果”图层的第25帧，将所有图层的第25帧都选中，然后按键盘上的F5键，在所有图层的第25帧都插入普通帧，效果如图4-31所示。 4 -31 完整的打字效果 单击菜单栏中的“控制”“测试影片”命令，对影片进行测试，效果如图4-32所示 图4 -32 影片测试效果 动画补间动画是Flash中最常使用的一种动画形式， 使用动画补间动画可以制作出对象的移动、旋转、色彩、放大缩小、透明度等变化的动画。在动画补间动画中使用的对象只能是元件，包括影片剪辑、图形元件、按钮等，除了元件，其他元素包括文本都不能创建动画补间动画。其他矢量图、位图、文本等都必须要转换成元件，才可以利用它们制作动

8、画补间动画。在制作动画补间动画时，每一段动画中只能使用一个对象，如果同一时间要实现多个不同对象的运动，可以使用多个层来实现多个对象的动画补间。(1)、动画补间动画简介、动画补间动画简介在动画的两个关键帧之间选择任意一帧，然后单击鼠标右键，在弹出来的快捷菜单中选择“创建补间动画”命令，就可以创建出动画补间动画，如图4-33所示。虽然采用这种方法创建动画补间动画表面上不用元件实例也可以，但是Flash会在库面板中自动生成“补间1”、“补间2”的图形元件，这对元件的管理不利。图图4 -33 右键弹出菜单右键弹出菜单在动画的两个关键帧之间选择任意一帧，然后在“属性”面板中的“补间”下拉菜单中选择“动画

9、”选项就可以创建动画补间动画，如图4-34所示。图4 -34 “属性”面板在创建动画补间动画时，如果动画创建成功，在两个关键帧之间会形成一个具有淡蓝色背景的实线箭头，如图4-35所示；如果如果在两个关键帧之间形成的是一条虚线，如图4-36所示，说明动画没有创建成功，原因可能是动画的对象不是同一个对象，也可能是关键帧丢失或者动画对象的类型不对。图4 -35 创建成功的动画补间动画图4 -36 创建失败的动画补间动画 在创建动画补间动画后，在“时间轴”面板上单击动画的起始帧，打开“属性”面板，在“属性”面板上可以看到如图4-37所示的选项。图4 -37 动画补间动画的参数l该项用于设置对象的运动方

10、式，即加速运动或减速运动。在“0”边有一个滑动条，单击后上下拉动滑条或填入具体的数据，动画补间动画会随之发生相应的变化。l输入-1到-100之间的数值，动画运动的速度由慢到快，朝运动结束的方向加速度补间。l输入1到100之间的数值，动画运动的速度由快到慢，朝运动结束的方向减速度补间。l默认情况下，补间帧之间的变化速率是不变的，即“0”。 该项用于设置运动对象的旋转方式，其下拉菜单有4个选项。无：禁止元件实例旋转。l自动：使元件实例根据起始帧与结束帧上的放置角度，自动进行旋转。l顺时针：使元件实例在运动时顺时针旋转相应的圈数。l逆时针：使元件实例在运动时逆时针旋转相应的圈数。 选中该复选框，将对

11、象的基线调整到运动路径，此项功能是用于引导线运动的，我们将在下一章介绍它。选中该复选框，可以使图形元件实例内部动画的播放和舞台中的动画播放同步。选中该复选框，可以根据注册点将动画对象吸附 到运动路径上，此项功能也是用于引导线运动的。1、位移渐变动画位移渐变动画 位移渐变动画是指动画对象从一个位置移动到另外一个位置的动画效果。在制作这种类型的动画时可以创建两个关键帧，在这两个关键帧中放置需要运动的对象，然后在这两帧中分别把对象放置到运动的起点和终点上，最后在这两个关键帧中创建动画补间动画，就可以完成对象的位移动画。 下面通过一个“运动的小球”的动画来说明对象位移动画的制作方法，具体操作步骤如下

12、单击菜单栏中的“修改”“文档”命令，在弹出的“文档属性”对话框中设置舞台的宽度为“500像素”，高度为“200像素”，其他均为默认值，如图4-38所示。图4 -38 “文档属性”对话框选择“椭圆”工具，在“属性”面板中设置其笔触颜色为无（），填充为一个红色的放射状渐变填充（），如图4-39所示，按住Shift键在舞台的最左面拖出一个正圆，如图4-40所示。图4 -39 “属性”面板图4 -40 绘制素材小球 选中绘制好的小球，单击菜单栏中的“修改”“转换为元件”命令，在弹出来的“转换为元件”对话框中，设置名称为“小球”，类型为“图形”，如图4-41所示。图4 -41 “转换为元件”对话框选择在

13、“时间轴”面板上“图层1”的第30帧，在键盘上单击F6键，在第30帧插入关键帧，此时第30帧的关键帧上产生了和第1帧完全相同的副本。 在“图层1”的第30帧处按住Shift键把舞台上的“小球”元件水平拖动舞台的最右面，如图4-42所示。图4 -42 改变第30帧小球的位置图4 -43 “属性”面板 图4 -44 影片测试效果 旋转渐变动画就是设置动画对象如何转动，在制作此类动画补间动画时，应注意动画对象的类型必须是元件的形式。对象的旋转一般都是通过“属性”面板进行设置的，通过“属性”面板我们可以设置对象旋转的方向和旋转的次数等属性。前面的“运动的小球”动画我们在测试时可以看到小球只是水平向右运

14、动，与现实中球的运动规律不符，下面我们就前面的“运动的小球”动画进行修改，让小球在水平运动的同时再旋转，使小球的运动更自然。具体操作步骤如下： 图4 -45 “属性”面板按CtrlEnter组合键，对影片进行测试，效果如图4-46所示。 图4 -46 影片测试效果l色彩渐变动画就是设置对象颜色、亮度、透明值的变化动画，对象色彩渐变的补间动画与对象旋转渐变的补间动画一样，对象类型必须是元件的形式，因为只有元件的实例才能设置色彩的变化，其他对象不能。l实例操作： “星空”动画 l 对象的大小渐变动画主要指对象形状上的变化，如对象 的大小、扭曲、水平和垂直翻转等。在制作大小渐变动画时，对象也必须是元

15、件形式。 l实例操作：“大海”的实例动画 。形状补间动画是补间动画的另一种表现形式，它的作用是使一种物体的形状变化为另外一种形状，在形状变化的同时颜色、位置等也可以随之变化。形状补间动画与动画补间动画的不同在于，形状补间动画是对两个不同的图形对象来进行补间，而动画补间动画是针对同一个对象的不同变化来进行补间的。因此在形状补间动画中作用的动画对象只能是图形，所以在使用形状变形时，无需也不能把绘制好的形状转换为元件，如果要使用现有的元件或文字创建形状补间动画，也要先将元件实例或文字通过按CtrlB分离后才能实现。虽然形状补间动画也能实现对象的移动、放大缩小、色彩、透明度等变化，但是在通常是情况下一

16、般不会使用形状补间动画来创建这些变化，而是通过动画补间动画来实现，这是因为使用形状补间创建动画，Flash在保存时会记录每一个关键帧上的图形，文件体积较大，而动画补间动画中通常使用的是元件，Flash只要记录一次就可以了。所以在制作动画时，如果能用动画补间动画实现的变化最好不要使用形状补间动画。（1）、简介在动画的两个关键帧之间选择任意一帧，然后单击鼠标右键，在弹出来的快捷菜单中选择“创建补间形状”命令，就可以创建出形状补间动画，如图4-75所示。图4 -75 右键弹出菜单在动画的两个关键帧之间选择任意一帧，然后在“属性”面板中的“补间”下拉菜单中选择“形状”选项就可以创建形状补间动画，如图4

17、-76所示。图4 -76 “属性”面板在创建形状补间动画时，如果动画创建成功，在两个关键帧之间会形成一个具有淡绿色背景的实线箭头，如图4-77所示；如果如果在两个关键帧之间形成的是一条虚线，如图4-78所示，说明动画没有创建成功，可能是动画对象不是图形，需要将它转化为一个图形。图4 -77 创建成功的形状补间动画图4 -78 创建失败的形状补间动画 在创建形状补间动画后，在“时间轴”面板上单击动画的起始帧，打开“属性”面板，在“属性”面板上可以看到如图4-79所示的选项。图4 -79 形状补间动画的参数1. “缓动”选项：这个选项的作用和动画补间动画一样，在此不再赘述。2.“混合”选项：“混合

18、”选项的作用是设置动画中间的形状变化模式的。分布式：使创建的动画的中间形状比较平滑和不规则。角形：使创建的动画的中间形状保留明显的角和直线。 1、形状补间动画和动画补间动画类似，也是在两个关键帧之间创建动画。在Flash中，只需要绘制发生变化的两个图形，然后在两个关键帧上设置形状补间模式，就可以产生一系列的 2、下面通过一个简单的“变形”的动画来介绍创建形状补间动画的方法 启动Flash CS3，建立一个Flash文档。 选择“椭圆”工具，在“属性”面板中设置其笔触颜色 为无（），填充为一个红色的放射状渐变填充（），如图4-80所示，按住Shift键在舞台中央绘制一个立体圆形，如图4-81所示

19、。 选择第20帧，在键盘上敲击F7键，在第20帧插入空白关键帧。这里不使用“插入关键帧”的原因是，“插入关键帧”会复制第一帧的图形，在这里我们不需要。图4 -80 “属性”面板图4 -81 绘制立体圆形 在第20帧，选择“多角星形”工具，在“属性”面板中设置其填充颜色为蓝色的放射状渐变填充（），如图4-82所示。图4 -82 “属性”面板点击“属性”面板上的选项按钮，打开“工具设置”对话框，设置样式为“星形”，如图4-83所示。在舞台中央绘制一个蓝色的五角星，如图4-84所示。 图4 -83 “工具设置”对话框 图4 -84 绘制五角星 第1帧和第20帧之间选择任意一帧，在“属性”面板中的“补

20、间”下拉菜单中选择“形状”选项，如图4-85所示。图4 -85 “属性”面板单击菜单栏中的“控制”“测试影片”命令，对影片进行测试，效果如图4-86所示。 图4 -86 影片测试效果l 虽然形状补间动画制作起来很简单，但是当前后图形差异比较大时变形效果较差。为了能使变形效果按照自己的意愿变化，可以使用“形状提示”功能，在“起始形状”和“结束形状”中添加一些相应的参考点，使对象之间的变形不是随机的，而是有规律的。l实例操作：“翻书”的动画 2、选择“矩形”工具，在“属性”面板中设置其笔触颜色为黑色，笔触高度为1，填充颜色为黄色（值为#FF6600），如图4-87所示，在工作区中央绘制两个带边框的

21、矩形，调整两个矩形的位置，效果如图4-88所示。1、启动Flash CS3，建立一个Flash文档。图4 -87 “属性”面板图4 -88 舞台中的效果图 3、选择“图层1”的第40帧，敲击键盘上的F5键，插入普通帧，设置动画的播放时间为40帧，然后在“时间轴”面板中将“图层1”重命名为“封面”并将其锁定，然后在“封面”图层上方新建一个图层并将其命名为“右页”。4、选择“右页”图层的第一帧，运用“矩形”工具，先在“属性”面板中设置其填充颜色为灰白色（#CCCCCC），然后在舞台上绘制一个矩形，调整其位置，效果如图4-89所示。图4 -89 舞台中的效果5、单击“时间轴”面板上的“插入图层”按钮

22、，新建一个名称为“左页”的图层，将“右页”图层锁定，在“左页”图层绘制矩形并调整其位置，效果如图4-90所示。图4 -90 舞台中的效果6将“左页”图层锁定，新建一个名为“翻动页”的图层。选中“翻动页”图层的第40帧，按F7键插入空白关键帧，此时“时间轴”面板效果如图4-91所示。图4 -91 时间轴 7、选择“翻动页”图层的第1帧，使用“矩形”工具，先在“属性”面板中设置其笔触颜色无（），然后在工作区中央绘制一个和“右页”上的矩形大小相同、位置一致的矩形。8、在“翻动页”图层的第40帧绘制一个和“左页”上的矩形大小相同、位置一致的矩形。9、单击“翻动页”图层的第10帧，按F7键插入空白关键帧

23、，然后使用“矩形”工具，在“属性”面板中设置其笔触颜色无（），填充颜色为灰白色（#CCCC99），在工作区中绘制一个矩形，再利用选择工具和任意变形工具调整矩形的形状和位置，效果如图4-92所示。对30帧做同样的操作，效果如图4-93。 10、第1帧和第10帧之间选择任意一帧，在“属性”面板中的“补间”下拉菜单中选择“形状”选项，如图4-94所示，创建形状补间动画。分别在第10帧和第30帧、第30帧和第40帧之间创建形状补间动画。 图4 -92 第10帧 图4 -93 第30帧 图4 -94 “属性”面板图4 -95 在第1帧上添加形状提示图4 -96 在第10帧上的形状提示 13、采用同样的方

24、法给第10帧和第30帧、第30帧和第40帧之间的两段动画添加形状提示，其效果图如图4-97、4-98、4-99和图4-100所示。 图4 -97 在第10帧上添加形状提示图 4 -98 在第10帧上的形状提示 图4 -99 在第30帧上添加形状提示 图4 -100 在第40帧上的形状提示 14、单击菜单栏中的“控制”“测试影片”命令，对影片进行测试，效果如图4-101所示 图4 -101 影片测试效果提示：如果在设置了“形状提示”后又移动了对象，那么要重新调整“形状提示”的位置，因为“形状提示”是不会随对象而移动的。图4 -101 影片测试效果l最好将“形状提示”按同样的转动方向放置，并且确保“形状提示”的排列顺序合乎逻辑。l“形状提示”可以连续添加，当最多只能添加26个。l“形状提示”要在形状的边缘才能作用，如果在设置“形状提示”后仍然无效，可以用“缩放”工具放大图形进行调整，确保“形状提示”位于图形的边缘。l要删除所有的“形状提示”，可以单击菜单栏的“修改”“形状”“删除所有提示”，如果要删除单个“形状提示”，可以在“形状提示”上单击鼠标右键，在弹出的菜单中选择“删除提示”命令。