动画编辑器的应用ppt课件.ppt

模块九 动画编辑器的使用,模块九 动画编辑器的使用,重点提示：使用动画编辑器修改补间动画 动画预设面板的应用 用不同的工具创建和修改对象的移动轨迹,模块五 元件、实例和库的应用,子模块一 动画编辑器介绍 子模块二 基于对象的动画工作情境一制作“心相牵”动画 工作情境二制作汽车行驶动画工作情境三制作简易的地球公转动画 模 块 小 结模 块 训 练,子模块一 动画编辑器介绍,动画编辑器的面板位于场景的正下方，如图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项动画效果，它们都放在默认预设中。单击默认预设旁边的三角形，就打开了所有的默认预设。任意选择其中一个动画后，在上面的预览窗口中会出现相应的动画效果。 动画预设的功能就像是一种动画的模板，可直接加载到元件上。每个动画预设都包含特定数量的帧。在应用预设时，在时间轴中创建的补间范围将包含此数量的帧。如果目标对象已经应用了不同长度的补间，可在应用预设后，调整时间轴中补间范围的长度。,子模块一 动画编辑器介绍,应用动画预设的操作方法有： 在舞台上选择可补间的对象。 打开“动画预设”面板，在面板中选择预设。 单击面板中的“应用”按钮。 应用动画预设后，动画就会在舞台上影片剪辑的当前位置开始。,子模块一 动画编辑器介绍,二、使用动画预览完成动画编辑与修改 如果我们需要创建方便自己使用的补间动画，或将“动画预设”面板中的补间动画进行更改，并将它另存为新的动画预设，那么“动画预设”面板中的“自定义预设文件夹”内会显示出我们所作的操作。如图9-9所示。,图9-9自定义预设文件夹,子模块一 动画编辑器介绍,将自定义动画另存为预设的操作方法如下： 选择需要另存为动画预设的时间轴中的补间范围，或者在舞台上应用了自定义补间对象和舞台上的运动路径等。 单击“动画预设”面板中的“将选区另存为预设”按钮，如图9-10所示。 新预设将显示在“动画预设”面板中且Flash会将预设另存XML文件。,图9-10“将选区另存为预设”按钮,子模块一 动画编辑器介绍,在Flash CS4中随附的每个动画预设都包括预览，我们可以在“动画预设”面板中查看预览。操作方法如下： 选择“窗口动画预设”命令，打开“动画预设”对话框。 从列表中选择一个动画预设，使用鼠标左键单击。 动画在面板顶部的“预览”窗格中播放。 删除文件时，选中要删除的文件在“动画预设”面板下拉菜单中选择删除；也可以单击面板中“删除项目”按钮。,子模块一 动画编辑器介绍,三、动画编辑器对关键帧的控制 1、使用属性关键帧 通过为每个图形添加、删除和编辑属性关键帧，可以编辑属性曲线的形状。 如果要向属性曲线添加属性关键帧，可以将播放指针放在所需的帧中，然后在动画编辑器中单击属性的“添加或删除关键帧”按钮；也可以按住键并单击要添加属性关键帧的帧中的图形；还可以右键单击属性曲线，然后选择“添加关键帧”。如图9-11所示。,图9-11添加属性关键帧,子模块一 动画编辑器介绍,如果要从属性曲线中删除某个属性关键帧，可以按 键并单击属性曲线中该属性关键帧的控制点；也可以右键单击控制点，然后选择“删除关键帧”。如图9-12所示。,子模块一 动画编辑器介绍,如果要在转角点模式与平滑点模式之间切换控制点，可以按键并单击控制点。当某一控制点处于平滑点模式时，其贝塞尔手柄将会显现并且属性曲线将作为平滑曲线经过该点。当控制点是转角点时，属性曲线在经过控制点时会形成拐角，不显现转角点的贝赛尔手柄。 如果要将点设置为平滑点模式，也可以右键单击控制点，然后选择“平滑点”、“平滑右”或“平滑左”选项。 如果要将属性关键帧移动到不同的帧，可以通过拖动其控制点来实现，值得注意的是拖动属性关键帧时，不能使其经过后面或前面的关键帧。,子模块一 动画编辑器介绍,2、使用浮动属性关键帧 浮动属性关键帧的含义是与时间轴中的特定帧无任何联系的关键帧。Flash会自动调整浮动关键帧的位置使整个补间中的运动速度保持一致。 浮动关键帧仅适用于空间属性x、y和z。有些时候编辑运动路径，我们会创建一些路径片段，在这些路径片段中元件的运动速度与其他片段中的运动速度会产生差异。这是因为路径片段中的帧数可能会与其他片段中的帧数不同。使用浮动属性关键帧，可以帮助我们确保整个补间中的动画速度的一致性。当我们将属性关键帧设置为浮动后，Flash会在这个补间范围中调整属性关键帧的位置。通过调整，补间对象在补间的每个帧中移动距离就会变得相同。,子模块一 动画编辑器介绍,(1) 为整个补间启动浮动关键帧操作方法如下： 用鼠标右键单击时间轴中的补间范围，然后在快捷菜单中选择“运动路径将关键帧切换为浮动”命令。 (2) 为补间中的单个属性启动浮动关键帧操作方法如下： 在“动画编辑器”面板中的属性关键帧上单击鼠标右键，然后在弹出的快捷菜单中选择“运动路径将关键帧切换为浮动”命令。,子模块二 基于对象的动画,一、基于对象的动画与补间动画形式的区别 基于对象的动画与补间动画形式的区别在于，使用补间动画能够设置对象的属性，它针对的是关键帧；而基于对象动画是将补间直接运用于对象。 基于对象的动画也就是补间动画，可以直接看到运动路径，并且我们使用能够调整线条的工具就可以方便地修改。而传统补间动画需要在关键帧中修改元件位置或其他属性才能调整。,子模块二 基于对象的动画,二、创建和修改对象的移动轨迹 1、使用部分选取工具： 在工具栏中选择部分选取工具，框选在运动路径中希望修改的位置。选择后在接角处会有空心锚点，此时我们就可以拖动锚点的手柄进行调整了，如图9-13所示。调整后效果如图9-14所示。,图9-13调整前轨迹 图9-14使用部分选取工具调整的轨迹效果,子模块二 基于对象的动画,2、使用选择工具：在工具箱中找到“选择工具”将光标移动到运动路径上后，光标会变为带有弧线的箭头。此时，我们就可以通过拖动对运动路径进行调整了。虽然使用选择工具调整运动路径没有其他工具灵活，但是简单的处理还是可以的，修改后的效果如图9-15所示。,图9-15使用选择工具调整后效果,子模块二 基于对象的动画,图9-16使用任意变形工具调整后效果,3、使用任意变形工具：任意变形工具不仅仅可以用来调整舞台中的图形线条等，还可以用来调整补间的运动路径。在工具箱中找到“任意变形工具”后，点击需要更改的路径调整即可，如图9-16所示。,子模块二 基于对象的动画,4、使用转换锚点工具：钢笔工具在路径的调整中不能使用，但是在钢笔工具中的转换锚点工具却可以使用。因为钢笔工具需要在补间中绘制，但是补间动画层是不支持绘画的。选择转换锚点工具后，可以通过拖动来修改运动路径，如图9-17所示。,图9-17使用转换锚点工具调整后效果,子模块二 基于对象的动画,5、使用动画编辑器：修改运动路径的方法还有动画编辑器，动画编辑器是会涉及应用对象的。所以我们调整对象的位置属性的同时，运动路径也会随之改变，如图9-18所示。,图9-18使用动画编辑器调整后效果,工作情境一制作“心相牵”动画,一、工作情境描述及效果工作情境描述 通过制作心相牵的动画，熟练掌握动画预设面板的使用。本例涉及动画预设面板和绘制椭圆等知识。具体分析如表9-1所示：,工作情境一制作“心相牵”动画,表 9-1 心相牵动画工作任务分析表,工作情境一制作“心相牵”动画,工作情境效果心相牵动画的最终效果如图9-19所示。,图9-19心相牵动画的最终效果,工作情境一制作“心相牵”动画,二、工作情境详解 (1) 新建一个Flash动画文档。 (2) 将素材图片导入到舞台，并使其符合舞台大小 (3) 在工具箱中选择【椭圆工具】，按住键拖动绘制一个圆，如图9-20所示。使用【选择工具】，按住键拖出两个尖角，这样一个圆形就变成了心的形状，颜色数值如图9-21所示。,图9-20绘制圆形 图9-21调整新型圆形,工作情境一制作“心相牵”动画,(4) 将绘制好的桃心转换为元件，然后放置到背景中央的位置上，如图9-22所示。(5) 选择桃心元件，在窗口中打开【动画预设】面板。找到【脉搏】效果，单击【应用】按钮，如图9-23所示。(6) 选中图层1的第30帧，按键添加关键帧。将红心元件放置到背景中央 (7) 制作完成，按+键测试动画。,工作情境一制作“心相牵”动画,图9-22将红心元件放置到背景中央 图9-23应用动画预设的“脉搏”效果,工作情境二制作汽车行驶动画,一、工作情境描述及效果 工作情境描述 通过制作汽车行驶的动画，熟悉掌握动画编辑器面板的使用。本例涉及动画编辑器和绘制图形等知识。 具体分析如表9-2示：,工作情境二制作汽车行驶动画,表 9-2 汽车行驶动画工作任务分析表,工作情境二制作汽车行驶动画,工作情境效果汽车行驶的最终效果如图9-24所示。,图9-24汽车行驶的最终效果,工作情境二制作汽车行驶动画,二、工作情境详解(1) 新建一个Flash动画文档。(2) 利用工具箱中的【椭圆工具】、【矩形工具】、【选择工具】等分别绘制出车身和车轮的图形，如图9-25所示。,图9-25绘制的车身、车轮,工作情境二制作汽车行驶动画,(3) 分别将三个图层中的车身、前车轮、后车轮转换为元件后拖拽到舞台外面，这样做的目的是使人感觉车是从外驶入内的。然后将他们组合。如图9-26所示。 (4) 选择车身元件，在第40帧处按键插入帧，并创建补间动画。选择右键快捷菜单中的 “插入关键帧位置”命令，将车上身拖拽到左侧。 (5) 打开【动画编辑器】面板，添加【缓动】栏中的【停止并启动（快）】命令，如图9-27所示。然后在【基本动画】选项里选择【停止并启动（快）】命令。,图9-26 组合后的小车 图9-27添加缓动效果,工作情境二制作汽车行驶动画,(6) 选择前车轮元件，在第40帧处按键插入帧，并创建补间动画。选择右键快捷菜单中的“插入关键帧位置”命令，将前车轮拖拽到左侧，和车身组合。 (7) 打开【动画编辑器】面板，添加【缓动】栏中的【停止并启动（快）】命令 ，然后将【旋转z】选项设置为3600度，如图9-29所示。 (8) 在【动画编辑器】面板中的【基本动画】栏里，选择【停止并启动（快）】命令。 (9) 用同样的方法设置后车轮的动画效果。 (10) 制作完成，按+键测试动画。,图9-29设置旋转参数,工作情境三制作简易的地球公转动画,一、工作情境描述及效果 工作情境描述 通过创建地球公转的动画，熟练掌握动画编辑器面板的使用。本例涉及元件、创建和修改对象的移动轨迹和动画编辑器等技巧知识。具体分析如表9-3所示：,工作情境三制作简易的地球公转动画,表 9-3 地球公转动画工作任务分析表,工作情境三制作简易的地球公转动画,工作情境效果地球公转动画的最终效果如图9-30所示。,图9-30地球公转动画的最终效果,工作情境三制作简易的地球公转动画,二、工作情境详解(1) 新建一个Flash动画文档。(2) 将地球、太阳图片导入到库，并设置其属性。(3) 将库中的太阳元件拖拽到舞台中，使用工具箱的【任意变形工具】更改尺寸。 (4) 添加地球图层，将地球元件拖拽到舞台中太阳元件的上方，使用【任意变形工具】更改尺寸。如图9-32所示。,工作情境三制作简易的地球公转动画,(5) 在图层1的第150帧处单击右键选择【插入关键帧】命令。(6) 在图层2的第150帧处插入帧，并创建补间动画。然后在右键的快捷菜单中选择“插入关键帧位置”命令。如图9-33所示。,图9-31更改太阳图片 图9-32更改地球图片,工作情境三制作简易的地球公转动画,(7) 在时间轴对应太阳元件的下方的帧处选择“插入关键帧位置”命令，然后将地球元件拖拽到太阳元件的下方。如图9-34所示。,图9-33插入关键帧图 9-34设置地球路径,工作情境三制作简易的地球公转动画,(8) 在时间轴对应太阳元件的左侧的帧处选择“插入关键帧位置”命令，然后将地球元件拖拽到太阳元件的左侧。如图9-35所示。 (9) 使用【选择工具】将运动路径修改成弧形，如图9-36所示。,图9-35设置左侧路径 图9-36改变运动路径,工作情境三制作简易的地球公转动画,(10) 用同样的方法设置地球元件在太阳元件右侧的运动路径。也可以通过调整【动画编辑器】的属性曲线改变运动路径。运动路径设置完成如图9-37所示。图9-37完整路径 (11) 打开【动画编辑器】面板，在【旋转】选项中将地球元件的旋转值设置为360。如图9-38所示。 (12) 制作完成，按+键测试动画。,图9-37完整路径 图9-38设置旋转Z值,模 块 小 结,动画编辑器和动画预设是Flash CS4中的新特性。在本章中我们通过一个实例详细的学习了这两个面板的使用方法，并了解了通过动画预设面板我们可以将平时经常用到的动画模式存储起来。掌握这些知识对于大家制作复杂的动画打下了良好的基础，希望大家多多尝试，尽快熟练运用这两个面板。,模 块 训 练,1.请制作一个如图9-39所示的图片旋转渐变的动画。,图9-39神奇世界,2.请制作一个如图9-40和图9-41所示的颤动着行驶的汽车动画。,图9-40车身 图9-41轮胎,模 块 训 练,3请在如图9-42所示的背景图片上制作出红丝带飘飘的动画。,图9-42雪景,