动画技术与应用

第四章第四章 动画技术与应用动画技术与应用（二）（二）Flash基本动画制作一、一、Flash8中的基本动画分类中的基本动画分类n n逐帧动画逐帧动画逐帧动画逐帧动画：自己创建每一帧的内容。时间轴上的每一帧都：自己创建每一帧的内容。时间轴上的每一帧都是关键帧。是关键帧。n n补间动画补间动画补间动画补间动画：自己制作好若干关键帧，由：自己制作好若干关键帧，由FlashFlash自动生成各中自动生成各中间帧，使得画面从一个关键帧过渡到另一个关键帧。两个间帧，使得画面从一个关键帧过渡到另一个关键帧。两个关键帧分别定义了该动画序列的起始和终止状态，中间帧关键帧分别定义了该动画序列的起始和终止状态，中间帧自动产生动画效果。在自动产生动画效果。在FlashFlash中，补间动画又可分为补间动中，补间动画又可分为补间动作和补间形状动画两种。作和补间形状动画两种。n n补间动作补间动作：在一个时间点定义一个：在一个时间点定义一个实例实例的位置、大小和旋转角度的位置、大小和旋转角度等属性，然后在另一个时间点改变这些属性。也可以沿着路径应等属性，然后在另一个时间点改变这些属性。也可以沿着路径应用补间动作，形成曲线运动的效果。用补间动作，形成曲线运动的效果。n n补间形状补间形状：在一个时间点绘制一个：在一个时间点绘制一个形状形状，然后在另一个时间点更，然后在另一个时间点更改该形状或绘制另一个形状，改该形状或绘制另一个形状，FlashFlash会自动生成二者之间形状变化会自动生成二者之间形状变化的帧来创建动画。的帧来创建动画。n n时间轴特效动画时间轴特效动画时间轴特效动画时间轴特效动画：是从：是从Flash MX 2004Flash MX 2004开始新提供的一种制开始新提供的一种制作动画的方法，可以很容易地将对象制作为动画。只需选作动画的方法，可以很容易地将对象制作为动画。只需选择对象，然后选择一种特效并制定参数即可。择对象，然后选择一种特效并制定参数即可。二、元件与实例二、元件与实例n n元件n n在在FlashFlash中，元件是可以重复使用的对象，只创中，元件是可以重复使用的对象，只创建一次，然后可以在整部影片中反复使用。建一次，然后可以在整部影片中反复使用。n n元件可以是一个形状，也可以是动画，并且所元件可以是一个形状，也可以是动画，并且所创建的元件都自动成为库中的一部分。创建的元件都自动成为库中的一部分。n n不管被引用多少次，元件引用对文件大小都只不管被引用多少次，元件引用对文件大小都只有很小的影响。因而使用元件可以大大缩小文有很小的影响。因而使用元件可以大大缩小文件的大小，加快影片的播放速度。件的大小，加快影片的播放速度。n n“影片剪辑影片剪辑”元件、元件、“按钮按钮”元件元件 、“图形图形”元件元件n n每个元件都有唯一的时间轴、舞台和图层每个元件都有唯一的时间轴、舞台和图层二、元件与实例二、元件与实例n n创建元件：创建元件：n n“插入插入-新建元件新建元件”菜单，设置元件名称和类型后，点击菜单，设置元件名称和类型后，点击“确定确定”进入元件编辑舞台编辑元件（进入元件编辑舞台编辑元件（Ctrl+F8Ctrl+F8）n n由舞台中的对象进行转换：选中舞台中的一个或多个元素，选择由舞台中的对象进行转换：选中舞台中的一个或多个元素，选择“修改修改-转换为元件转换为元件”，设置名称、类型、注册点（，设置名称、类型、注册点（F8F8）n n转换元件类型：库面板中选中元件，右键菜单中转换元件类型：库面板中选中元件，右键菜单中 “类型类型”中选择新类型中选择新类型n n复制元件：库面板中库面板菜单和元件右键菜单中的复制元件：库面板中库面板菜单和元件右键菜单中的“直直接复制接复制”菜单；或者选定一个元件的实例，选用菜单；或者选定一个元件的实例，选用“修改修改-元件元件-直接复制元件直接复制元件”菜单菜单n n编辑元件：编辑元件：n n舞台中直接双击元件实例或选中实例，右键菜单中选舞台中直接双击元件实例或选中实例，右键菜单中选“在当前位在当前位置编辑置编辑”n n舞台选中实例，右键菜单中选舞台选中实例，右键菜单中选“在新窗口中编辑在新窗口中编辑”n n库面板中，选中元件后右键菜单中选择库面板中，选中元件后右键菜单中选择“编辑编辑”，或直接双击元，或直接双击元件图例件图例二、元件与实例二、元件与实例n n实例n n创建完一个元件之后，就可以在影片中的任何创建完一个元件之后，就可以在影片中的任何需要的地方，包括其他元件内，创建该元件的需要的地方，包括其他元件内，创建该元件的实例了。实例了。n n创建实例就是将元件从创建实例就是将元件从“库库”面板拖到舞台中，面板拖到舞台中，实例是元件在舞台中的具体体现实例是元件在舞台中的具体体现n n实例是对元件的引用，编辑元件会更新它的所实例是对元件的引用，编辑元件会更新它的所有实例，这样可以减少用户的工作量。但每个有实例，这样可以减少用户的工作量。但每个实例都具有独立属性，对元件的一个实例的更实例都具有独立属性，对元件的一个实例的更新只能应用于该实例，不影响元件及元件的其新只能应用于该实例，不影响元件及元件的其他实例。他实例。三、导入外部素材三、导入外部素材n n“文件-导入-导入到库”n n位图位图n n修改位图属性修改位图属性n n视频视频n n声音声音n n声音效果声音效果n n同步方式同步方式四、逐帧动画四、逐帧动画n n逐帧动画在时间轴上表现为连续的关键帧，其原理是在“连续的关键帧”中分解动画动作，连续播放而形成动画。n n由于需要绘制每一帧的内容，利用这种方法制作动画工作量非常大，而且最终输出文件量也很大。n n但是这种方法制作出来的动画效果非常好，适合于表现很细腻的动画。实例实例转动的时钟转动的时钟n n步骤：n n新建新建flashflash文档文档n n图层图层1 1第一帧处绘制时钟外形，第第一帧处绘制时钟外形，第360360帧处插入帧处插入普通帧（普通帧（F5F5），将时间延续到此位置），将时间延续到此位置n n在新建图层在新建图层2 2上绘制分针，上绘制分针，F8F8将其转换为元件。将其转换为元件。将分针放置在时钟中心，调整其旋转中心点到将分针放置在时钟中心，调整其旋转中心点到时钟中心，从第二帧至第时钟中心，从第二帧至第3030帧依次添加关键帧帧依次添加关键帧（F6F6），每一帧处将分针旋转），每一帧处将分针旋转1212度。复制度。复制130130帧，在第帧，在第31,61,91,121,151,181,211,241,271,301,33131,61,91,121,151,181,211,241,271,301,331帧处粘贴帧处粘贴n n在新建图层在新建图层3 3上绘制时针，上绘制时针，F8F8将其转换为元件。将其转换为元件。将时针针放置在时钟中心，调整其旋转中心点将时针针放置在时钟中心，调整其旋转中心点到时钟中心，在第到时钟中心，在第31,61,91,121,151,181,211,31,61,91,121,151,181,211,241,271,301,331241,271,301,331帧处依次添加关键帧（帧处依次添加关键帧（F6F6），），每一帧处将时针旋转每一帧处将时针旋转3030度。度。n nCtrl+EnterCtrl+Enter演示动画效果演示动画效果五、动作补间动画五、动作补间动画n n在一个时间点（帧）定义一个实例位置、大小、旋转、颜色、透明度等属性，然后在另一个时间点（帧）改变这些属性，制作补间可以自动生成中间过渡变化的补间帧。n n应用动作补间动画的对象必须是元件的实例，离散的图形对象不能应用动作补间。实例渐隐渐现的动画效果n n步骤：步骤：n n新建新建flashflash文档文档n n新建图形元件新建图形元件flashflash，输入字符，输入字符“FLASHFLASH”，字体，字体ArialBlackArialBlack，字号，字号3030；将字符完全打散（；将字符完全打散（Ctrl+B)Ctrl+B)n n回到场景中，将元件拖入舞台创建实例。在第回到场景中，将元件拖入舞台创建实例。在第3030帧插入帧插入关键帧，将实例对象旋转关键帧，将实例对象旋转180180度度n n将第将第130130帧都选中（帧都选中（shift+shift+鼠标拖动），创建补间动画鼠标拖动），创建补间动画（右键菜单），观看效果（右键菜单），观看效果（Ctrl+Enter Ctrl+Enter）n n选中第选中第3030帧，属性面板中颜色选项中选择帧，属性面板中颜色选项中选择AlphaAlpha调整到调整到0%0%，重新观看动画效果，重新观看动画效果实例残影效果n n步骤：n n新建新建flashflash文档，按照上一实例制作逐渐消失文文档，按照上一实例制作逐渐消失文字效果字效果n n添加三个图层，删除图层添加三个图层，删除图层2 2，3 3，4 4的所有帧，复的所有帧，复制图层制图层1 1中的所有帧到这三个图层中中的所有帧到这三个图层中n n将层在时间轴上依次错开三帧将层在时间轴上依次错开三帧n n添加图层添加图层5 5，删除图层，删除图层5 5的所有帧，复制图层的所有帧，复制图层1 1中中的第一帧到图层的第一帧到图层5 5的第一帧的第一帧n nCtr+EnterCtr+Enter观看效果观看效果六、引导路径动画六、引导路径动画n n通过添加引导层创建复杂曲线运动效果n n基本步骤：n n创建元件创建元件n n将元件实例化，制作直线运动补间动画将元件实例化，制作直线运动补间动画n n为图层添加引导层，在引导层中绘制曲线路径为图层添加引导层，在引导层中绘制曲线路径n n在第一帧和最后一帧调整元件实例位置，将其在第一帧和最后一帧调整元件实例位置，将其中心点与引导路径起点和终点对齐中心点与引导路径起点和终点对齐实例实例蝴蝶飞舞蝴蝶飞舞n n步骤步骤n n新建新建flashflash文档文档n n导入素材图片到库中，并将其在舞台实例化导入素材图片到库中，并将其在舞台实例化n n第第3030帧插入关键帧，调整蝴蝶位置，中间帧插入补间动帧插入关键帧，调整蝴蝶位置，中间帧插入补间动画，勾选画，勾选“调整到路径调整到路径”n n选中图层选中图层1 1，右键菜单中点选，右键菜单中点选“添加引导层添加引导层”n n在引导层的第一帧中用铅笔绘制曲线路径在引导层的第一帧中用铅笔绘制曲线路径n n在第一帧和最后一帧，将蝴蝶实例的中心点与引导路在第一帧和最后一帧，将蝴蝶实例的中心点与引导路径的起点和终点对齐径的起点和终点对齐n nCtrl+EnterCtrl+Enter观看效果观看效果实例实例两只蝴蝶两只蝴蝶n n步骤步骤n n新建新建flashflash文档文档n n导入素材图片导入素材图片草坪草坪到库中到库中n n在图层在图层1 1中拖入图片草坪，中拖入图片草坪，调整图片到与舞台大小一致调整图片到与舞台大小一致调整图片到与舞台大小一致调整图片到与舞台大小一致，并在并在第第3030帧帧插入普通帧插入普通帧n n按照前面的方法添加图层按照前面的方法添加图层2 2及其引导层，制作一只蝴蝶及其引导层，制作一只蝴蝶飞舞飞舞的效果的效果n n类似类似地地添加图添加图层层3 3及其及其引导层引导层，调整蝴蝶大小以及引导调整蝴蝶大小以及引导路径，制作另外一只蝴蝶飞舞路径，制作另外一只蝴蝶飞舞的效果的效果n nCtrl+EnterCtrl+Enter查看动画效果查看动画效果七、形状补间动画七、形状补间动画n n通过形状补间可以创建形状变化的效果，使一个通过形状补间可以创建形状变化的效果，使一个形状随着时间变化成另外一个形状。补间形状也形状随着时间变化成另外一个形状。补间形状也可以根据形状、位置、大小、颜色的不同制作出可以根据形状、位置、大小、颜色的不同制作出补间动画的效果。补间动画的效果。n n注意，注意，应用应用应用应用 动作补间动作补间动作补间动作补间 的对象一定是的对象一定是的对象一定是的对象一定是 元件的实例元件的实例元件的实例元件的实例，而，而应用应用应用应用 形状补间形状补间形状补间形状补间 的对象一定是的对象一定是的对象一定是的对象一定是 离散状态的图离散状态的图离散状态的图离散状态的图形形形形。要对组、实例或位图图像应用形状补间，必。要对组、实例或位图图像应用形状补间，必须首先将这些对象分离；要对文本应用形状补间，须首先将这些对象分离；要对文本应用形状补间，则必须先将文本分离。则必须先将文本分离。实例显示软件装载进程条n n步骤：步骤：n n新建新建flashflash文档，更改舞台尺寸为文档，更改舞台尺寸为500 x200500 x200，背景为灰色，背景为灰色n n绘制安装画面，用矩形工具绘制方框，并在方框上方绘制安装画面，用矩形工具绘制方框，并在方框上方书写书写“正在安装，请稍候正在安装，请稍候”。选中第。选中第4040帧，添加普帧，添加普通帧通帧n n新建图层新建图层2 2，在第，在第1 1帧用矩形工具绘制蓝色小方框，注意帧用矩形工具绘制蓝色小方框，注意删除笔触，仅留下蓝色填充区域删除笔触，仅留下蓝色填充区域删除笔触，仅留下蓝色填充区域删除笔触，仅留下蓝色填充区域n n在图层在图层2 2的第的第4040帧添加关键帧，利用任意变形工具将蓝帧添加关键帧，利用任意变形工具将蓝色小方框拖拉到与图层色小方框拖拉到与图层1 1的方框一样长，并用蓝色到浅的方框一样长，并用蓝色到浅蓝的渐变色填充，注意蓝的渐变色填充，注意用填充变形工具调整用填充变形工具调整用填充变形工具调整用填充变形工具调整渐变色渐变色渐变色渐变色n n选择图层选择图层2 2的第一帧，的第一帧，属性面板属性面板属性面板属性面板中创建补间形状动画中创建补间形状动画n nCtrl+EnterCtrl+Enter观看效果观看效果实例使用形状提示n n步骤：步骤：n n新建新建flashflash文档文档n n在第在第1 1帧输入字符帧输入字符I I，字体为，字体为ArialBlackArialBlack，字号为，字号为140140n n在第在第4040帧插入关键帧，输入字符帧插入关键帧，输入字符Z Zn n将第将第1 1帧和第帧和第4040帧中的字符分离，并插入补间形状，查帧中的字符分离，并插入补间形状，查看动画效果看动画效果n n选中第选中第1 1帧，选择帧，选择“修改修改-形状形状-添加形状提示添加形状提示”，此，此时时flashflash自动生成一个控制点自动生成一个控制点a a，同样方法生成控制点，同样方法生成控制点b b。n n分别将第分别将第1 1帧和第帧和第4040帧的两个控制点拖到字符的左上和帧的两个控制点拖到字符的左上和右下角右下角n n预览动画效果预览动画效果八、遮罩动画八、遮罩动画n n遮罩动画是使用遮罩层产生的遮罩效果而实现的遮罩动画是使用遮罩层产生的遮罩效果而实现的动画。遮罩层是一种特殊的图层，透过遮罩层上动画。遮罩层是一种特殊的图层，透过遮罩层上的遮罩对象可以看到它下面的各层对象。在遮罩的遮罩对象可以看到它下面的各层对象。在遮罩层中，任何填充区域都是完全透明的，而任何非层中，任何填充区域都是完全透明的，而任何非填充区域都是不透明的。填充区域都是不透明的。n n遮罩层上的遮罩对象可以是填充的形状、文字对遮罩层上的遮罩对象可以是填充的形状、文字对象、图形元件的实例或影片剪辑；可以是静态对象、图形元件的实例或影片剪辑；可以是静态对象也可以是动态对象，这将对遮罩效果产生直接象也可以是动态对象，这将对遮罩效果产生直接影响。影响。实例实例简单遮罩效果简单遮罩效果n n步骤：步骤：n n新建新建flashflash文档文档n n创建图形元件创建图形元件wordword，输入字符，输入字符“遮罩动画效果演示遮罩动画效果演示”，黑体，黑，黑体，黑色，色，7070号号n n创建图形元件创建图形元件ballball，绘制直径，绘制直径160160个像素的正圆，并用彩虹渐变色个像素的正圆，并用彩虹渐变色填充填充n n图层图层1 1中，将元件中，将元件wordword实例化，添加图层实例化，添加图层2 2，将元件，将元件ballball实例化实例化n n就打开对齐面板（就打开对齐面板（Ctr+KCtr+K），将两个实例都全选上，并相对于舞台），将两个实例都全选上，并相对于舞台居中对齐（选择居中对齐（选择“水平中齐水平中齐”）n n选中图层选中图层2 2，右键菜单中选择遮罩层，将其变成遮罩层，观察效果，右键菜单中选择遮罩层，将其变成遮罩层，观察效果n n取消图层取消图层2 2的遮罩层属性，将其拖移到图层的遮罩层属性，将其拖移到图层1 1下方，将图层下方，将图层1 1设为遮设为遮罩层，观看效果罩层，观看效果n n在图层在图层2 2的第的第3030帧插入关键帧，将图层帧插入关键帧，将图层1 1也延续到第也延续到第3030帧帧n n解锁图层解锁图层2 2并调整图层并调整图层2 2中第中第1 1帧和帧和3030帧中帧中ballball实例的位置，创建补间实例的位置，创建补间动画，重新锁定图层动画，重新锁定图层2 2后预览动画效果后预览动画效果实例实例卷轴画卷轴画n n步骤：步骤：n n新建新建flashflash文档文档n n导入图片导入图片“背景背景”和和“张大千张大千”到库中到库中n n图层图层1 1中，将背景图片拖入舞台，调整大小与舞台相同并打散，输中，将背景图片拖入舞台，调整大小与舞台相同并打散，输入文字入文字“张大千作品赏析张大千作品赏析”；矩形工具拖出一个黑色矩形，作为；矩形工具拖出一个黑色矩形，作为画的展示背景画的展示背景n n创建图形元件创建图形元件“卷轴卷轴”，编辑窗口中利用渐变填充制作立体卷轴，编辑窗口中利用渐变填充制作立体卷轴元件元件n n图层图层1 1中的第一帧，创建卷轴的一个实例放在黑色矩形上方，将图中的第一帧，创建卷轴的一个实例放在黑色矩形上方，将图层层1 1的第的第8080帧插入帧帧插入帧n n添加图层添加图层2 2，将图片，将图片“张大千张大千”拖入舞台，调整大小放在黑色矩形拖入舞台，调整大小放在黑色矩形框中间框中间n n添加图层添加图层3 3，在第一帧用矩形工具绘制蓝色小长方形，宽度比画作，在第一帧用矩形工具绘制蓝色小长方形，宽度比画作宽度略宽，放在卷轴紧下方，第宽度略宽，放在卷轴紧下方，第8080帧插入关键帧，用任意变形工帧插入关键帧，用任意变形工具调整蓝色长方形高度与画作高度等同。插入补间形状动画。将具调整蓝色长方形高度与画作高度等同。插入补间形状动画。将图层图层3 3设为遮罩层设为遮罩层n n添加图层添加图层4 4，创建另一个卷轴实例，放在第一个卷轴下方。第，创建另一个卷轴实例，放在第一个卷轴下方。第8080帧帧创建关键帧，调整卷轴位置到画作下方，插入补间动作动画。创建关键帧，调整卷轴位置到画作下方，插入补间动作动画。n n预览动画效果预览动画效果九、基本动画实验九、基本动画实验水波涟漪水波涟漪一、实验目的一、实验目的 掌握元件的创建，图层与帧的复制、粘贴等操作。掌握元件的创建，图层与帧的复制、粘贴等操作。综合使用运动补间和形状补间动画。综合使用运动补间和形状补间动画。二、实验内容二、实验内容 制作水滴下落、水波波纹扩大和溅出水珠的动画制作水滴下落、水波波纹扩大和溅出水珠的动画效果。在基本图形绘制的基础上，通过改变填充效果。在基本图形绘制的基础上，通过改变填充色和设置色和设置AlphaAlpha值，制作水滴、波纹和水珠的颜色值，制作水滴、波纹和水珠的颜色效果；通过使用运动补间和形状补间动画来完成效果；通过使用运动补间和形状补间动画来完成水滴下落和波纹荡漾的效果。水滴下落和波纹荡漾的效果。三、实验素材（无）三、实验素材（无）四、实验步骤四、实验步骤n n步骤：步骤：n n利用补间形状动画创建波纹扩展的元件利用补间形状动画创建波纹扩展的元件n n创建水滴元件创建水滴元件n n场景中图层场景中图层1 1第第1 1帧拖入水滴元件，放在舞台上方中间，第帧拖入水滴元件，放在舞台上方中间，第7 7帧插入帧插入关键帧，将水滴实例垂直拖到舞台中下方，插补动作补间关键帧，将水滴实例垂直拖到舞台中下方，插补动作补间n n新建图层新建图层2 2，图层，图层2 2中第中第7 7帧拖入波纹元件，第帧拖入波纹元件，第3636帧插入关键帧，选帧插入关键帧，选中波纹实例，属性面板中调整其中波纹实例，属性面板中调整其AlphaAlpha值为值为0 0，第，第7 7帧和第帧和第3636帧间插帧间插补动作补间补动作补间n n新建新建4 4个新图层，删除它们的所有帧。复制图层个新图层，删除它们的所有帧。复制图层2 2中的第中的第736736帧，帧，分别粘贴到图层分别粘贴到图层3434的第的第13,19,25,3113,19,25,31帧处帧处n n新建图层新建图层7 7，第，第8 8帧插入关键帧，拖入水珠实例，放置于波纹边缘，帧插入关键帧，拖入水珠实例，放置于波纹边缘，调整合适大小。在第调整合适大小。在第1212帧和第帧和第1414帧插入关键帧，调整水珠位置和帧插入关键帧，调整水珠位置和AlphaAlpha值，插补动作补间，制作水珠跳跃效果值，插补动作补间，制作水珠跳跃效果n n新建图层新建图层8 8和和9 9，同样方法添加两外两个水珠跳跃效果，同样方法添加两外两个水珠跳跃效果