模块四基础动画制作.ppt

《模块四基础动画制作.ppt》由会员分享，可在线阅读，更多相关《模块四基础动画制作.ppt（49页珍藏版）》请在三一办公上搜索。

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

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

3、sh文件（ActionScript3.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“导入”对话框,在“导

4、入”对话框中选择本书的配套素材“第四章/逐帧动画/素材”目录下的“麦兜1.jpg”图形文件，然后单击“打开”按钮，将其导入到舞台。,因导入目录下的文件是一组系列文件，则弹出如图4-6所示的询问对话框，单击“是”按钮将序列文件全部导入，此时Flash会自动把该图片序列按序号以逐帧形式导入到场景中，如图4-7所示。,图4-6 导入序列文件的询问对话框,图4-7 导入的序列动画在场景的上方形成逐帧动画,单击菜单栏中的“控制”“测试影片”命令，或者按CtrlEnter组合键，对影片进行测试，效果如图4-8所示。,图4-8 影片测试效果,(2)创建逐帧动画,1、我们也可以利用鼠标或者手写板，在Flash

5、中绘制一帧帧的矢量图形来生成逐帧动画。也可以用文字来做帧中的对象，实现文字的跳跃、闪烁等特效。2、实例操作 飞翔的海鸥、打字效果,下面以制作打字效果为例讲解逐帧动画,启动Flash CS3，建立一个Flash文档。单击菜单栏中的“修改”“文档”命令，在弹出的“文档属性”对话框中设置舞台的宽度为“600像素”，高度为“200像素”，背景色设置为“黑色”，其他均为默认值，如图4-26所示。,图4-26“文档属性”对话框,选择“文本”工具（），并在“属性”面板中设置字体为“隶书”，字体大小为50，字体颜色为“蓝色”，粗体，对齐方式为左对齐，其他均为默认值，如图4-27所示。,图4-26“文档属性”对

6、话框,在舞台上输入文字“模拟打字效果”，然后按快捷键Ctrl B把段落文字分离成单个的文字，如图4-28所示。,图4-28 输入文字,单击菜单栏中的“修改”“时间轴”“分散到图层”命令，把单个的文字分散到不同的图层，然后把变成空层的“图层1”删除，如图4-29所示。,图4-28 输入文字,选择“模”图层的第1帧，按住鼠标左键，把该关键帧拖到该层的第3帧；用同样的方法，把“拟”图层第1帧处的关键帧拖到该层的第6帧；把“打”图层第1帧处的关键帧拖到该层的第9帧；把“字”图层第1帧处的关键帧拖到该层的第12帧；把“效”图层第1帧处的关键帧拖到该层的第15帧；把“果”图层第1帧处的关键帧拖到该层的第1

7、8帧，此时“时间轴”面板如图4-30所示。,图4-30 移动关键帧的位置图,在“时间轴”面板中，选择“模”图层的第25帧，按住键盘上的Shift键，选择“果”图层的第25帧，将所有图层的第25帧都选中，然后按键盘上的F5键，在所有图层的第25帧都插入普通帧，效果如图4-31所示。,4-31 完整的打字效果,单击菜单栏中的“控制”“测试影片”命令，对影片进行测试，效果如图4-32所示。,图4-32 影片测试效果,2、动画补间动画的制作,动画补间动画是Flash中最常使用的一种动画形式，使用动画补间动画可以制作出对象的移动、旋转、色彩、放大缩小、透明度等变化的动画。在动画补间动画中使用的对象只能是

8、元件，包括影片剪辑、图形元件、按钮等，除了元件，其他元素包括文本都不能创建动画补间动画。其他矢量图、位图、文本等都必须要转换成元件，才可以利用它们制作动画补间动画。在制作动画补间动画时，每一段动画中只能使用一个对象，如果同一时间要实现多个不同对象的运动，可以使用多个层来实现多个对象的动画补间。,(1)、动画补间动画简介,(2)在Flash CS3中创建动画补间动画的两种方法：,在动画的两个关键帧之间选择任意一帧，然后单击鼠标右键，在弹出来的快捷菜单中选择“创建补间动画”命令，就可以创建出动画补间动画，如图4-33所示。虽然采用这种方法创建动画补间动画表面上不用元件实例也可以，但是Flash会在

9、库面板中自动生成“补间1”、“补间2”的图形元件，这对元件的管理不利。,图4-33 右键弹出菜单,在动画的两个关键帧之间选择任意一帧，然后在“属性”面板中的“补间”下拉菜单中选择“动画”选项就可以创建动画补间动画，如图4-34所示。,图4-34“属性”面板,在创建动画补间动画时，如果动画创建成功，在两个关键帧之间会形成一个具有淡蓝色背景的实线箭头，如图4-35所示；如果如果在两个关键帧之间形成的是一条虚线，如图4-36所示，说明动画没有创建成功，原因可能是动画的对象不是同一个对象，也可能是关键帧丢失或者动画对象的类型不对。,图4-35 创建成功的动画补间动画,图4-36 创建失败的动画补间动画

10、,（2）、动画补间动画的参数设置,在创建动画补间动画后，在“时间轴”面板上单击动画的起始帧，打开“属性”面板，在“属性”面板上可以看到如图4-37所示的选项。,图4-37 动画补间动画的参数,1、“缓动”选项,该项用于设置对象的运动方式，即加速运动或减速运动。在“0”边有一个滑动条，单击后上下拉动滑条或填入具体的数据，动画补间动画会随之发生相应的变化。输入-1到-100之间的数值，动画运动的速度由慢到快，朝运动结束的方向加速度补间。输入1到100之间的数值，动画运动的速度由快到慢，朝运动结束的方向减速度补间。默认情况下，补间帧之间的变化速率是不变的，即“0”。,2、“旋转”选项,该项用于设置运

11、动对象的旋转方式，其下拉菜单有4个选项。无：禁止元件实例旋转。自动：使元件实例根据起始帧与结束帧上的放置角度，自动进行旋转。顺时针：使元件实例在运动时顺时针旋转相应的圈数。逆时针：使元件实例在运动时逆时针旋转相应的圈数。,3、“调整到路径”复选框,选中该复选框，将对象的基线调整到运动路径，此项功能是用于引导线运动的，我们将在下一章介绍它。,4、“同步”复选框,选中该复选框，可以使图形元件实例内部动画的播放和舞台中的动画播放同步。,5、“贴紧”复选框,选中该复选框，可以根据注册点将动画对象吸附 到运动路径上，此项功能也是用于引导线运动的。,（3）、几种渐变动画,1、位移渐变动画 位移渐变动画是指

12、动画对象从一个位置移动到另外一个位置的动画效果。在制作这种类型的动画时可以创建两个关键帧，在这两个关键帧中放置需要运动的对象，然后在这两帧中分别把对象放置到运动的起点和终点上，最后在这两个关键帧中创建动画补间动画，就可以完成对象的位移动画。下面通过一个“运动的小球”的动画来说明对象位移动画的制作方法，具体操作步骤如下 启动Flash CS3，建立一个Flash文档。,单击菜单栏中的“修改”“文档”命令，在弹出的“文档属性”对话框中设置舞台的宽度为“500像素”，高度为“200像素”，其他均为默认值，如图4-38所示。,图4-38“文档属性”对话框,选择“椭圆”工具，在“属性”面板中设置其笔触颜

13、色为无（），填充为一个红色的放射状渐变填充（），如图4-39所示，按住Shift键在舞台的最左面拖出一个正圆，如图4-40所示。,图4-39“属性”面板,图4-40 绘制素材小球,选中绘制好的小球，单击菜单栏中的“修改”“转换为元件”命令，在弹出来的“转换为元件”对话框中，设置名称为“小球”，类型为“图形”，如图4-41所示。,图4-41“转换为元件”对话框,选择在“时间轴”面板上“图层1”的第30帧，在键盘上单击F6键，在第30帧插入关键帧，此时第30帧的关键帧上产生了和第1帧完全相同的副本。,在“图层1”的第30帧处按住Shift键把舞台上的“小球”元件水平拖动舞台的最右面，如图4-42所

14、示。,图4-42 改变第30帧小球的位置,在“图层1”的第1帧和第30帧之间选择任意一帧，在“属性”面板中的“补间”下拉菜单中选择“动画”选项，设置缓动的值为-60，如图4-43所示。,图4-43“属性”面板,单击菜单栏中的“控制”“测试影片”命令，对影片进行测试，效果如图4-44所示。,图4-44 影片测试效果,2、旋转渐变动画,旋转渐变动画就是设置动画对象如何转动，在制作此类动画补间动画时，应注意动画对象的类型必须是元件的形式。对象的旋转一般都是通过“属性”面板进行设置的，通过“属性”面板我们可以设置对象旋转的方向和旋转的次数等属性。前面的“运动的小球”动画我们在测试时可以看到小球只是水平

15、向右运动，与现实中球的运动规律不符，下面我们就前面的“运动的小球”动画进行修改，让小球在水平运动的同时再旋转，使小球的运动更自然。具体操作步骤如下：,接上例的文件，在“图层1”的第1帧和第30帧之间选择任意一帧，在“属性”面板中的“旋转”下拉菜单中选择“顺时针”，3次，如图4-45所示。,图4-45“属性”面板,按CtrlEnter组合键，对影片进行测试，效果如图4-46所示。,图4-46 影片测试效果,3、色彩渐变动画,色彩渐变动画就是设置对象颜色、亮度、透明值的变化动画，对象色彩渐变的补间动画与对象旋转渐变的补间动画一样，对象类型必须是元件的形式，因为只有元件的实例才能设置色彩的变化，其他

16、对象不能。实例操作：“星空”动画,4、大小渐变动画,对象的大小渐变动画主要指对象形状上的变化，如对象 的大小、扭曲、水平和垂直翻转等。在制作大小渐变动画时，对象也必须是元件形式。实例操作：“大海”的实例动画。,3、形状渐变动画的制作,形状补间动画是补间动画的另一种表现形式，它的作用是使一种物体的形状变化为另外一种形状，在形状变化的同时颜色、位置等也可以随之变化。形状补间动画与动画补间动画的不同在于，形状补间动画是对两个不同的图形对象来进行补间，而动画补间动画是针对同一个对象的不同变化来进行补间的。因此在形状补间动画中作用的动画对象只能是图形，所以在使用形状变形时，无需也不能把绘制好的形状转换为

17、元件，如果要使用现有的元件或文字创建形状补间动画，也要先将元件实例或文字通过按CtrlB分离后才能实现。虽然形状补间动画也能实现对象的移动、放大缩小、色彩、透明度等变化，但是在通常是情况下一般不会使用形状补间动画来创建这些变化，而是通过动画补间动画来实现，这是因为使用形状补间创建动画，Flash在保存时会记录每一个关键帧上的图形，文件体积较大，而动画补间动画中通常使用的是元件，Flash只要记录一次就可以了。所以在制作动画时，如果能用动画补间动画实现的变化最好不要使用形状补间动画。,（1）、简介,（2）创建形状补间动画有以下两种方法：,在动画的两个关键帧之间选择任意一帧，然后单击鼠标右键，在弹

18、出来的快捷菜单中选择“创建补间形状”命令，就可以创建出形状补间动画，如图4-75所示。,图4-75 右键弹出菜单,在动画的两个关键帧之间选择任意一帧，然后在“属性”面板中的“补间”下拉菜单中选择“形状”选项就可以创建形状补间动画，如图4-76所示。,图4-76“属性”面板,在创建形状补间动画时，如果动画创建成功，在两个关键帧之间会形成一个具有淡绿色背景的实线箭头，如图4-77所示；如果如果在两个关键帧之间形成的是一条虚线，如图4-78所示，说明动画没有创建成功，可能是动画对象不是图形，需要将它转化为一个图形。,图4-77 创建成功的形状补间动画,图4-78 创建失败的形状补间动画,（3）形状补

19、间动画的参数设置,在创建形状补间动画后，在“时间轴”面板上单击动画的起始帧，打开“属性”面板，在“属性”面板上可以看到如图4-79所示的选项。,图4-79 形状补间动画的参数,“缓动”选项：这个选项的作用和动画补间动画一样，在此不再赘述。,2.“混合”选项：“混合”选项的作用是设置动画中间的形状变化模式的。,分布式：使创建的动画的中间形状比较平滑和不规则。角形：使创建的动画的中间形状保留明显的角和直线。,（4）形状渐变动画,1、形状补间动画和动画补间动画类似，也是在两个关键帧之间创建动画。在Flash中，只需要绘制发生变化的两个图形，然后在两个关键帧上设置形状补间模式，就可以产生一系列的 2、

20、下面通过一个简单的“变形”的动画来介绍创建形状补间动画的方法 启动Flash CS3，建立一个Flash文档。选择“椭圆”工具，在“属性”面板中设置其笔触颜色 为无（），填充为一个红色的放射状渐变填充（），如图4-80所示，按住Shift键在舞台中央绘制一个立体圆形，如图4-81所示。,选择第20帧，在键盘上敲击F7键，在第20帧插入空白关键帧。这里不使用“插入关键帧”的原因是，“插入关键帧”会复制第一帧的图形，在这里我们不需要。,图4-80“属性”面板,图4-81 绘制立体圆形,在第20帧，选择“多角星形”工具，在“属性”面板中设置其填充颜色为蓝色的放射状渐变填充（），如图4-82所示。,图

21、4-82“属性”面板,点击“属性”面板上的选项按钮，打开“工具设置”对话框，设置样式为“星形”，如图4-83所示。在舞台中央绘制一个蓝色的五角星，如图4-84所示。,图4-83“工具设置”对话框,图4-84 绘制五角星,第1帧和第20帧之间选择任意一帧，在“属性”面板中的“补间”下拉菜单中选择“形状”选项，如图4-85所示。,图4-85“属性”面板,单击菜单栏中的“控制”“测试影片”命令，对影片进行测试，效果如图4-86所示。,图4-86 影片测试效果,（5）添加形状提示,虽然形状补间动画制作起来很简单，但是当前后图形差异比较大时变形效果较差。为了能使变形效果按照自己的意愿变化，可以使用“形状

22、提示”功能，在“起始形状”和“结束形状”中添加一些相应的参考点，使对象之间的变形不是随机的，而是有规律的。实例操作：“翻书”的动画,“翻书”的动画,2、选择“矩形”工具，在“属性”面板中设置其笔触颜色为黑色，笔触高度为1，填充颜色为黄色（值为#FF6600），如图4-87所示，在工作区中央绘制两个带边框的矩形，调整两个矩形的位置，效果如图4-88所示。,1、启动Flash CS3，建立一个Flash文档。,图4-87“属性”面板,图4-88 舞台中的效果图,3、选择“图层1”的第40帧，敲击键盘上的F5键，插入普通帧，设置动画的播放时间为40帧，然后在“时间轴”面板中将“图层1”重命名为“封面

23、”并将其锁定，然后在“封面”图层上方新建一个图层并将其命名为“右页”。,4、选择“右页”图层的第一帧，运用“矩形”工具，先在“属性”面板中设置其填充颜色为灰白色（#CCCCCC），然后在舞台上绘制一个矩形，调整其位置，效果如图4-89所示。,图4-89 舞台中的效果,5、单击“时间轴”面板上的“插入图层”按钮，新建一个名称为“左页”的图层，将“右页”图层锁定，在“左页”图层绘制矩形并调整其位置，效果如图4-90所示。,图4-90 舞台中的效果,6将“左页”图层锁定，新建一个名为“翻动页”的图层。选中“翻动页”图层的第40帧，按F7键插入空白关键帧，此时“时间轴”面板效果如图4-91所示。,图4

24、-91 时间轴,7、选择“翻动页”图层的第1帧，使用“矩形”工具，先在“属性”面板中设置其笔触颜色无（），然后在工作区中央绘制一个和“右页”上的矩形大小相同、位置一致的矩形。,8、在“翻动页”图层的第40帧绘制一个和“左页”上的矩形大小相同、位置一致的矩形。,9、单击“翻动页”图层的第10帧，按F7键插入空白关键帧，然后使用“矩形”工具，在“属性”面板中设置其笔触颜色无（），填充颜色为灰白色（#CCCC99），在工作区中绘制一个矩形，再利用选择工具和任意变形工具调整矩形的形状和位置，效果如图4-92所示。对30帧做同样的操作，效果如图4-93。,10、第1帧和第10帧之间选择任意一帧，在“属性

25、”面板中的“补间”下拉菜单中选择“形状”选项，如图4-94所示，创建形状补间动画。分别在第10帧和第30帧、第30帧和第40帧之间创建形状补间动画。,图4-92 第10帧,图4-93 第30帧,图4-94“属性”面板,11、选择第1帧，单击菜单栏中的“修改”“形状”“添加形状提示”命令，或者按CtrlShiftH键，添加形状提示，此时舞台上会出现一个写着字母a的红色形状提示。反复按CtrlShiftH键再添加三个形状提示，然后用鼠标将形状提示符号移动到矩形的四个角，如图4-95所示。,图4-95 在第1帧上添加形状提示,12、选择第10帧，会看到在图形的中心处也有提示。将这些提示移动到变形后的

26、目的位置，此时该提示会变成绿色，如图4-96所示。,图4-96 在第10帧上的形状提示,13、采用同样的方法给第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 影片测试效果,15、关于形状提示符的使用，还要注意一下几点：,最好将“形状提示”按同样的转动方向放置，并且确保“形状提示”的排列顺序合乎逻辑。“形状提示”可以连续添加，当最多只能添加26个。“形状提示”要在形状的边缘才能作用，如果在设置“形状提示”后仍然无效，可以用“缩放”工具放大图形进行调整，确保“形状提示”位于图形的边缘。要删除所有的“形状提示”，可以单击菜单栏的“修改”“形状”“删除所有提示”，如果要删除单个“形状提示”，可以在“形状提示”上单击鼠标右键，在弹出的菜单中选择“删除提示”命令。,