动画编辑器的应用课件

模块九动画编辑器的使用

模块九动画编辑器的使用模块九动画编辑器的使用

重点提示：使用动画编辑器修改补间动画动画预设面板的应用用不同的工具创建和修改对象的移动轨迹

模块九动画编辑器的使用模块五元件、实例和库的应用子模块一动画编辑器介绍

子模块二基于对象的动画工作情境一制作“心相牵”动画

工作情境二制作汽车行驶动画工作情境三制作简易的地球公转动画

模块小结模块训练模块五元件、实例和库的应用子模块一动画编辑器介绍子模块一动画编辑器介绍

动画编辑器的面板位于场景的正下方，如图9-1所示。在动画编辑器中可以实现创建自定义缓动曲线、设置各属性关键帧的值、重置各属性或属性类别、向各个属性和属性类别添加不同的预设缓动等操作。

图9-1动画编辑器面板子模块一动画编辑器介绍动画编辑器的面板位于场景的正子模块一动画编辑器介绍

一、动画编辑器与动画预设1、动画编辑器在Flash中增加了一个我们在以前没见过的面板“动画编辑器”。为了更好的学习动画编辑器的功能，我们通过制作一个实例来进行直观的学习。首先我们创建一个补间动画，用50帧让一个小球在舞台上来回移动。如图9-2所示。制作好动画后，选择时间轴的补间层，打开动画编辑器。

子模块一动画编辑器介绍一、动画编辑器与动画预设子模块一动画编辑器介绍在动画编辑器中，我们可以精确地调整动画的属性值。动画编辑器一共有五个可调项目。最上面的是基本动画栏，如图9-3所示。每个属性在关键帧一栏中都有两个三角形按钮。这些按钮是用来控制跳转到另一个关键帧的，中间菱形按钮用于添加和删除关键帧。

图9-2小球弹跳动画图9-3动画编辑器的“基本动画”选项卡子模块一动画编辑器介绍在动画编辑器中，我们可以精子模块一动画编辑器介绍当我们选择关键帧后，将鼠标放到前面蓝色的数值上会出现双箭头，这时我们就可以左右拖动这个数值，让舞台上的小球移动到我们需要的位置；或者双击这个蓝色数值，在文本框中直接输入数值即可。我们可以对比一下调整前后的数值，如图9-4和9-5所示。图9-4调整前小球的位置图9-5调整后小球的位置子模块一动画编辑器介绍当我们选择关键帧后，将鼠标放到前面子模块一动画编辑器介绍在基本动画的下面，我们可以为补间设置相应属性效果和缓动效果变化。要使用这些效果，我们可以单击右边的“+”，弹出的菜单中有很多内置的效果，可以选一个效果进行添加，如图9-6所示，然后再调整数值即可。

图9-6弹出的缓动菜单子模块一动画编辑器介绍在基本动画的下面，我们可以子模块一动画编辑器介绍在弹出菜单的最下面一项是“自定义”，我们可以自已定义一个缓动效果。如让小球的移动由慢到快，再由快到慢的设置为：单击“自定义”选项，在关键帧中输入数字或调整后面的曲线来定义自已的缓动效果。添加缓动效果后，回到基本动画栏，单击x属性的缓动旁边的倒三角，在弹出的菜单中，就有了刚添加的缓动效果，单击要用的缓动效果将它应用到x属性上。如图9-7所示。图9-7添加的缓动效果子模块一动画编辑器介绍在弹出菜单的最下面一项是“自定子模块一动画编辑器介绍2、动画预设动画预设一共有32项动画效果，它们都放在默认预设中。单击默认预设旁边的三角形，就打开了所有的默认预设。任意选择其中一个动画后，在上面的预览窗口中会出现相应的动画效果。动画预设的功能就像是一种动画的模板，可直接加载到元件上。每个动画预设都包含特定数量的帧。在应用预设时，在时间轴中创建的补间范围将包含此数量的帧。如果目标对象已经应用了不同长度的补间，可在应用预设后，调整时间轴中补间范围的长度。子模块一动画编辑器介绍2、动画预设子模块一动画编辑器介绍

应用动画预设的操作方法有：

①在舞台上选择可补间的对象。②打开“动画预设”面板，在面板中选择预设。③单击面板中的“应用”按钮。④应用动画预设后，动画就会在舞台上影片剪辑的当前位置开始。子模块一动画编辑器介绍应用动画预设的操作方法有：子模块一动画编辑器介绍

二、使用动画预览完成动画编辑与修改如果我们需要创建方便自己使用的补间动画，或将“动画预设”面板中的补间动画进行更改，并将它另存为新的动画预设，那么“动画预设”面板中的“自定义预设文件夹”内会显示出我们所作的操作。如图9-9所示。图9-9自定义预设文件夹子模块一动画编辑器介绍二、使用动画预览完子模块一动画编辑器介绍

将自定义动画另存为预设的操作方法如下：①选择需要另存为动画预设的时间轴中的补间范围，或者在舞台上应用了自定义补间对象和舞台上的运动路径等。②单击“动画预设”面板中的“将选区另存为预设”按钮，如图9-10所示。③新预设将显示在“动画预设”面板中且Flash会将预设另存XML文件。

图9-10“将选区另存为预设”按钮子模块一动画编辑器介绍将自定义动画另存为预设的操图子模块一动画编辑器介绍

在FlashCS4中随附的每个动画预设都包括预览，我们可以在“动画预设”面板中查看预览。操作方法如下：①选择“窗口>动画预设”命令，打开“动画预设”对话框。②从列表中选择一个动画预设，使用鼠标左键单击。③动画在面板顶部的“预览”窗格中播放。④删除文件时，选中要删除的文件在“动画预设”面板下拉菜单中选择删除；也可以单击面板中“删除项目”按钮。子模块一动画编辑器介绍在F子模块一动画编辑器介绍三、动画编辑器对关键帧的控制1、使用属性关键帧通过为每个图形添加、删除和编辑属性关键帧，可以编辑属性曲线的形状。如果要向属性曲线添加属性关键帧，可以将播放指针放在所需的帧中，然后在动画编辑器中单击属性的“添加或删除关键帧”按钮；也可以按住<Ctrl>键并单击要添加属性关键帧的帧中的图形；还可以右键单击属性曲线，然后选择“添加关键帧”。如图9-11所示。

图9-11添加属性关键帧子模块一动画编辑器介绍三、动画编辑器对关键帧的控制子模块一动画编辑器介绍如果要从属性曲线中删除某个属性关键帧，可以按<Ctrl>键并单击属性曲线中该属性关键帧的控制点；也可以右键单击控制点，然后选择“删除关键帧”。如图9-12所示。删除关键帧的控制点状态图9-12删除关键帧子模块一动画编辑器介绍如果要从属性曲线中删除某个子模块一动画编辑器介绍

如果要在转角点模式与平滑点模式之间切换控制点，可以按<Alt>键并单击控制点。当某一控制点处于平滑点模式时，其贝塞尔手柄将会显现并且属性曲线将作为平滑曲线经过该点。当控制点是转角点时，属性曲线在经过控制点时会形成拐角，不显现转角点的贝赛尔手柄。如果要将点设置为平滑点模式，也可以右键单击控制点，然后选择“平滑点”、“平滑右”或“平滑左”选项。如果要将属性关键帧移动到不同的帧，可以通过拖动其控制点来实现，值得注意的是拖动属性关键帧时，不能使其经过后面或前面的关键帧。子模块一动画编辑器介绍如果要在转角点模式与子模块一动画编辑器介绍2、使用浮动属性关键帧浮动属性关键帧的含义是与时间轴中的特定帧无任何联系的关键帧。Flash会自动调整浮动关键帧的位置使整个补间中的运动速度保持一致。浮动关键帧仅适用于空间属性x、y和z。有些时候编辑运动路径，我们会创建一些路径片段，在这些路径片段中元件的运动速度与其他片段中的运动速度会产生差异。这是因为路径片段中的帧数可能会与其他片段中的帧数不同。使用浮动属性关键帧，可以帮助我们确保整个补间中的动画速度的一致性。当我们将属性关键帧设置为浮动后，Flash会在这个补间范围中调整属性关键帧的位置。通过调整，补间对象在补间的每个帧中移动距离就会变得相同。子模块一动画编辑器介绍2、使用浮动属性关子模块一动画编辑器介绍

(1)为整个补间启动浮动关键帧操作方法如下：用鼠标右键单击时间轴中的补间范围，然后在快捷菜单中选择“运动路径>将关键帧切换为浮动”命令。(2)为补间中的单个属性启动浮动关键帧操作方法如下：在“动画编辑器”面板中的属性关键帧上单击鼠标右键，然后在弹出的快捷菜单中选择“运动路径>将关键帧切换为浮动”命令。子模块一动画编辑器介绍(1)为整个补间子模块二基于对象的动画

一、基于对象的动画与补间动画形式的区别基于对象的动画与补间动画形式的区别在于，使用补间动画能够设置对象的属性，它针对的是关键帧；而基于对象动画是将补间直接运用于对象。基于对象的动画也就是补间动画，可以直接看到运动路径，并且我们使用能够调整线条的工具就可以方便地修改。而传统补间动画需要在关键帧中修改元件位置或其他属性才能调整。子模块二基于对象的动画一、基于对象的动画子模块二基于对象的动画二、创建和修改对象的移动轨迹1、使用部分选取工具：在工具栏中选择部分选取工具，框选在运动路径中希望修改的位置。选择后在接角处会有空心锚点，此时我们就可以拖动锚点的手柄进行调整了，如图9-13所示。调整后效果如图9-14所示。

图9-13调整前轨迹图9-14使用部分选取工具调整的轨迹效果子模块二基于对象的动画二、创建和修改对象子模块二基于对象的动画2、使用选择工具：在工具箱中找到“选择工具”将光标移动到运动路径上后，光标会变为带有弧线的箭头。此时，我们就可以通过拖动对运动路径进行调整了。虽然使用选择工具调整运动路径没有其他工具灵活，但是简单的处理还是可以的，修改后的效果如图9-15所示。图9-15使用选择工具调整后效果子模块二基于对象的动画2、使用选择工具：图9-15使用选子模块二基于对象的动画图9-16使用任意变形工具调整后效果3、使用任意变形工具：任意变形工具不仅仅可以用来调整舞台中的图形线条等，还可以用来调整补间的运动路径。在工具箱中找到“任意变形工具”后，点击需要更改的路径调整即可，如图9-16所示。

子模块二基于对象的动画图9-16使用任意变形工具调整后效子模块二基于对象的动画4、使用转换锚点工具：钢笔工具在路径的调整中不能使用，但是在钢笔工具中的转换锚点工具却可以使用。因为钢笔工具需要在补间中绘制，但是补间动画层是不支持绘画的。选择转换锚点工具后，可以通过拖动来修改运动路径，如图9-17所示。图9-17使用转换锚点工具调整后效果子模块二基于对象的动画4、使用转换锚点工具：图9-17使子模块二基于对象的动画5、使用动画编辑器：修改运动路径的方法还有动画编辑器，动画编辑器是会涉及应用对象的。所以我们调整对象的位置属性的同时，运动路径也会随之改变，如图9-18所示。图9-18使用动画编辑器调整后效果子模块二基于对象的动画5、使用动画编辑器：图9-18使用工作情境一制作“心相牵”动画

一、工作情境描述及效果工作情境描述通过制作心相牵的动画，熟练掌握动画预设面板的使用。本例涉及动画预设面板和绘制椭圆等知识。具体分析如表9-1所示：

工作情境一制作“心相牵”动画一、工作情境描述及效果工作情境一制作“心相牵”动画表9-1心相牵动画工作任务分析表知识点功能实现效果椭圆工具的使用:熟练使用工具箱中的各种工具对于创建矢量图非常关键创建Flash矢量图的基础

动画预设面板的使用：掌握后可快速实现各种动画效果

可以将各种动画效果加载在元件上

工作情境一制作“心相牵”动画表9-1心相牵动画工作任工作情境一制作“心相牵”动画工作情境效果心相牵动画的最终效果如图9-19所示。

图9-19心相牵动画的最终效果工作情境一制作“心相牵”动画工作情境效果图9-19心相牵动工作情境一制作“心相牵”动画二、工作情境详解(1)新建一个Flash动画文档。(2)将素材图片导入到舞台，并使其符合舞台大小(3)在工具箱中选择【椭圆工具】，按住<Shift>键拖动绘制一个圆，如图9-20所示。使用【选择工具】，按住<Alt>键拖出两个尖角，这样一个圆形就变成了心的形状，颜色数值如图9-21所示。图9-20绘制圆形图9-21调整新型圆形工作情境一制作“心相牵”动画二、工作情境详解图9-20工作情境一制作“心相牵”动画(4)将绘制好的桃心转换为元件，然后放置到背景中央的位置上，如图9-22所示。(5)选择桃心元件，在窗口中打开【动画预设】面板。找到【脉搏】效果，单击【应用】按钮，如图9-23所示。(6)选中图层1的第30帧，按<F5>键添加关键帧。将红心元件放置到背景中央(7)制作完成，按<Ctrl>+<Enter>键测试动画。

工作情境一制作“心相牵”动画(4)将绘制好的桃心转换为元工作情境一制作“心相牵”动画图9-22将红心元件放置到背景中央图9-23应用动画预设的“脉搏”效果工作情境一制作“心相牵”动画图9-22将红心元件放置到背景工作情境二制作汽车行驶动画

一、工作情境描述及效果

工作情境描述通过制作汽车行驶的动画，熟悉掌握动画编辑器面板的使用。本例涉及动画编辑器和绘制图形等知识。具体分析如表9-2示：工作情境二制作汽车行驶动画一、工作情境描述及效果工作情境二制作汽车行驶动画知识点功能实现效果动画编辑器面板的使用：熟练掌握可以更好创作动画

创作动画重要的工具

图形绘制：熟练掌握绘图技巧可以事半功倍图形绘制是动画制作的基础

表9-2汽车行驶动画工作任务分析表工作情境二制作汽车行驶动画知识点功能工作情境二制作汽车行驶动画工作情境效果汽车行驶的最终效果如图9-24所示。

图9-24汽车行驶的最终效果工作情境二制作汽车行驶动画工作情境效果图9-24汽车行驶的工作情境二制作汽车行驶动画二、工作情境详解(1)新建一个Flash动画文档。(2)利用工具箱中的【椭圆工具】、【矩形工具】、【选择工具】等分别绘制出车身和车轮的图形，如图9-25所示。

图9-25绘制的车身、车轮工作情境二制作汽车行驶动画二、工作情境详解工作情境二制作汽车行驶动画

(3)分别将三个图层中的车身、前车轮、后车轮转换为元件后拖拽到舞台外面，这样做的目的是使人感觉车是从外驶入内的。然后将他们组合。如图9-26所示。(4)选择车身元件，在第40帧处按<F5>键插入帧，并创建补间动画。选择右键快捷菜单中的“插入关键帧>位置”命令，将车上身拖拽到左侧。(5)打开【动画编辑器】面板，添加【缓动】栏中的【停止并启动（快）】命令，如图9-27所示。然后在【基本动画】选项里选择【停止并启动（快）】命令。图9-26组合后的小车图9-27添加缓动效果工作情境二制作汽车行驶动画(3)分别将三个图工作情境二制作汽车行驶动画(6)选择前车轮元件，在第40帧处按<F5>键插入帧，并创建补间动画。选择右键快捷菜单中的“插入关键帧>位置”命令，将前车轮拖拽到左侧，和车身组合。(7)打开【动画编辑器】面板，添加【缓动】栏中的【停止并启动（快）】命令，然后将【旋转z】选项设置为3600度，如图9-29所示。(8)在【动画编辑器】面板中的【基本动画】栏里，选择【停止并启动（快）】命令。(9)用同样的方法设置后车轮的动画效果。(10)制作完成，按<Ctrl>+<Enter>键测试动画。

图9-29设置旋转参数工作情境二制作汽车行驶动画(6)选择前车轮元件工作情境三制作简易的地球公转动画一、工作情境描述及效果

工作情境描述通过创建地球公转的动画，熟练掌握动画编辑器面板的使用。本例涉及元件、创建和修改对象的移动轨迹和动画编辑器等技巧知识。具体分析如表9-3所示：

工作情境三制作简易的地球公转动画一、工作情境描述及效果工作情境三制作简易的地球公转动画知识点功能实现效果动画编辑器面板的使用：熟练掌握可以更好地创作动画创作动画的重要工具元件使用：弄清楚元件与实例的关系可简化影片编辑，将多次使用的元素定义为元件表9-3地球公转动画工作任务分析表创建和修改对象的移动轨迹：掌握多种创建和修改的方法可快速修改运动路径可快速完成对象运动路径的设置工作情境三制作简易的地球公转动画知识点功工作情境三制作简易的地球公转动画工作情境效果地球公转动画的最终效果如图9-30所示。

图9-30地球公转动画的最终效果工作情境三制作简易的地球公转动画工作情境效果图9-30地球工作情境三制作简易的地球公转动画二、工作情境详解(1)新建一个Flash动画文档。(2)将地球、太阳图片导入到库，并设置其属性。(3)将库中的太阳元件拖拽到舞台中，使用工具箱的【任意变形工具】更改尺寸。(4)添加地球图层，将地球元件拖拽到舞台中太阳元件的上方，使用【任意变形工具】更改尺寸。如图9-32所示。

工作情境三制作简易的地球公转动画二、工作情境详解工作情境三制作简易的地球公转动画(5)在图层1的第150帧处单击右键选择【插入关键帧】命令。(6)在图层2的第150帧处插入帧，并创建补间动画。然后在右键的快捷菜单中选择“插入关键帧>位置”命令。如图9-33所示。图9-31更改太阳图片图9-32更改地球图片工作情境三制作简易的地球公转动画(5)在图层1的第150工作情境三制作简易的地球公转动画

(7)在时间轴对应太阳元件的下方的帧处选择“插入关键帧>位置”命令，然后将地球元件拖拽到太阳元件的下方。如图9-34所示。

图9-33插入关键帧图9-34设置地球路径工作情