Flash动画学习指南九：预设与自定义

转自：http://bbs.9ria.com/thread-76129-1-1.html

要求：

• 预备知识：
  对Flash工作区的基本了解
• 需要的工具：
  Flash Professional CS4 (下载)
• 示例：
  motion-is-awesomer.zip
• 用户等级：
  初级
  

      缓动指的是动画过程中逐渐的加速或减速，这样可以使你的的补间动画看起来更真是或更自然。也许你会运用缓动来实现某种特殊的运动，如随机移动、小球回弹，从而使动画任务完成的更快速与简单。举个例子，你可以使用一种缓和的缓动曲线，通过不断调整改变速率，来实现一种更自然的加速或减速。你甚至可以使用缓动来为你的各种属性创建随机效果，比如为物体的x、y值添加缓动来实现随机抖动，或者为物体的alpha值添加缓动来实现随机闪烁。
为补间动画添加预设和自定义
      Flash提供了两种方法来运用缓动到补间动画：1、通过动画属性监测器中的缓动滑块来为你所创建的补间动画指定一个缓动值；2、使用动画编辑器为一个或多个属性应用预设缓动或自定义缓动。（如图50）

图50. 该SWF文件演示了以下缓动：上方实例通过动画属性面板来应用常规缓动（aka简单减速）；中间实例应用了正弦波形预设缓动；底部实例应用了自定义缓动。从右向左运动的垂直线没有应用任何缓动。
      如果你之前用过flash CS4版本，该版本中的缓动和现在的有所不同，不过这也是你的优势之一。查阅Flash CS4与之前版本的对比，请参考Motion migration guide for Flash CS4 Professional。学习如何在Flash CS4中创建缓动，请继续阅读。
使用动画属性监测器面板
使用动画属性面板来为补间动画应用缓动：

• 创建一个文件，命名为motionease.fla。
• 用任意绘图工具绘制一个图形，单击时间轴上的帧，选中所有图形，然后右键选择“创建补间动画”。（单击OK将绘制的图形转换为元件）。时间轴上自动添加到了24帧（对应帧频数量），如果有必要，可以拖动补间的最后一帧，以确保时间轴上至少有24帧。
• 将播放头移动到补间的最后一帧，然后移动舞台上的实例到另外一个位置。
• 选中补间路径，然后在动画属性面板（窗口>属性）中拖动“缓动”的数值（缓动右侧的蓝色数值）或者输入一个数值，来调整补间动画的缓动值。
  
  • 缓动值在-1和-100之间，表示补间动画缓慢开始并不断加速。
  • 缓动值在1和100之间，表示补间动画快速开始并不断减速。
    
• 执行“控制 > 测试影片”来测试动画效果。注意观察舞台上补间的路径点是如何变化的。（如图51所示）
  

 
图 51. 这个蜜蜂从右向左运动，一旦设置了缓动，补间路径的点会有所更新。越靠近补间动画的结尾，点越密集，因为作者设置的补间动画效果是快速开始并不断减速（缓动移出）。
使用动画编辑器
使用动画编辑器来应用预设缓动到补间动画：

• 在前一个练习中选中要应用缓动的实例，或者打开bounce-ease.fla文件。
• 在时间轴上选中补间，并打开动画编辑器面板。
• 找到缓动分类，单击“添加”按钮，然后在菜单中选择“弹入”。一个弹入的缓动预设就被添加到补间实例上了，并且缓动分类里的所有缓动效果对于各个属性来说都是可用的。你可以通过热点文本来改变预设值（回弹的次数）。你的改动反映在有右侧虚线上，但是右侧的虚线图是不可编辑的。
• 找到基本动画分类中的Y属性这一行，然后在下拉菜单中选择“弹入”。
        这样你就将弹入缓动应用到Y属性上了，并且自动更新到了舞台上的缓动实例上（你可以拖动播放头来检查效果）。也许你也注意到在Y属性这行的两个变化：热点文本值变为只读的，Y属性的右侧曲线图中出现了虚线曲线图（如图52）。热点文本值有所变动，因为动画模型来控制你的实例的缓动动画，并且热点文本值反映了缓动（不可编辑）值。虚线曲线反映了补间过程的值。如果你拖动实现（可编辑）曲线上的任意属性的关键帧，热点文本值将会改变。
   
  图 52 应用弹入效果到Y属性上。
• 回到缓动分类这里，将弹入的次数改为5
  

      注意观察，与Y属性的曲线图一样，弹入缓动的曲线图也有所变动。再次拖动时间轴看一下变动后的动画效果。你可以在本系列的素材文件中找到这个效果的最终版文件，文件名为bounce-ease-finished.fla。
动画编辑器中的缓动
      在前一个练习中，当你为一个动画添加缓动的时候，你可以看到添加按钮中有一个预设缓动的列表。除了自定义缓动之外，所有的缓动都是预设好的并且不可编辑，除了预设缓动的整体值之外。举例来说，你可以通过选择1至100的值来设定弹性缓动的弹力，设定实例的回弹次数，或者设定实例缓动移出的速度。
      一旦对图形化的属性应用了任何缓动，该属性的热点文本值就变为灰选，不可更改。主要是因为热点文本值是显示补间动画的实际缓动值，但缓动是不可编辑的。热点文本值（补间动画数值）是由补间公式来控制的，所以它的很多值都是被限定好的。不过，你可以在右侧曲线图中通过控制点或者其他贝塞尔曲线编辑工具来编辑实线曲线。或者你可以先取消缓动并使用热点文本来设置数值，然后再添加缓动来看一下你改动后的结果。
设置缓动属性来快速实现动画
      如果你使用过低版本的Flash，也许你设置过一些淡入淡出的补间动画，甚至你用过ActionScript来实现一些缓动公式并应用到你的实例上。Flash CS4使得应用缓动公式到缓动中变的非常简单、可视化，并且允许应用这些公式到单一属性上。本节主要为你介绍一些有趣的效果，并且让你通过使用缓动预设在几分钟内完成这些效果。你可以在你的工作中应用这些技术，并且完成更大范围内的效果。
为动画位置应用缓动：

• 打开素材源码中的“ease-position.fla”文件。看一下这个简单的动画，如果有必要可以拖动时间轴来查看。
• 选中时间轴上的补间区段，打开动画编辑器。
• 找到缓动分类，单击添加按钮并选择正弦缓动。
• 更改正弦波形缓动值为4.
• 找到基本动画下面的Y属性，选择正玹缓动。注意右侧曲线图中虚线曲线变化表示实际缓动值的变化（如图53）。
• 回到舞台，查看舞台上的动画路径，执行“控制 > 测试影片”来预览动画。
   
  图 53 应用正弦波到Y属性
  

为颜色效果属性应用缓动

• 打开素材源码中的“ease-color.fla”文件。看一下舞台上的动画，如果有必要可以拖动时间轴来查看。
• 选中时间轴上的补间区段，打开动画编辑器。
• 找到颜色效果分类，在添加菜单中选择Alpha。
• 将播放头移到最后一帧并添加关键帧。设置热点文本值为80.
• 将播放头移到第一帧，并调整数热点文本值为40.这样补间缓动的alpha值就在40%~80%之间。
• 找到缓动分类，单击添加按钮并选择“随机”效果。
• 将其热点文本值更改为20.
• 回到Alpha属性处，在缓动一栏选择随机效果。注意右侧曲线图中虚线曲线，表示补间值在40%~80%之间。
• 回到舞台，查看舞台上的动画路径，执行“控制 > 测试影片”来预览动画（如图54）。
  
  图 54 该SWF文件应用缓动来实现透明度在40%~80%之间重复变化的动画。这个动画不需要关键帧。
  

为补间动画添加自定义缓动
      自定义缓动允许你使用动画编辑器中的曲线图来创建自己的缓动，然后你可以应用自定义缓动到补间实例的任意属性上。（如图55）
      自定义缓动曲线图表示随时间变化的运动情况。水平方向表示各帧，垂直方向表示补间变化百分比。第一个值表示动画0%时的状态，最后一个关键帧可以设定在0%至100%之间。曲线图中曲线的斜率表示补间实例的变化速率。如果你在曲线图中创建一个水平的线（没有斜率），表示变化速率为0；如果你在曲线图中创建一个垂直的线，则表示瞬间的变化速率。
为补间实例添加一个自定义缓动：

• 创建一个补间动画，或者打开“motion-tween.fla”文件。
• 选中时间轴上的补间区间，打开动画编辑器面板。
• 找到缓动分类，单击添加按钮，在菜单中选择自定义选项。
• 这个操作用来为补间实例添加一个自定义缓动（如图55），之后也可以为各个属性选择该自定义缓动。自定义缓动的默认值是一个常量速度，你可以将其编辑成任意效果。
   
  图 55 编辑自定义缓动曲线图来设定你想要的缓动效果。
  

修改与应用自定义缓动
      你可以通过动画编辑器中其他属性曲线图中标准贝塞尔曲线编辑控制工具来编辑自定义缓动。如何使用这些控制工具，可以参看Modifying keyframes (control points) in graphs。
      你可以在基本动画下面的各个属性中选择应用自定义缓动，和使用预设缓动是一个道理，可以参考Adding preset and custom eases to motion tweens.。
以下练习展示了自定义缓动曲线图的一个另外且非常有用的独特特性。

• 打开素材源码中的“custom-ease.fla”文件。
• 选中时间轴上的补间区间，打开动画编辑器面板。可以看到已经有一个自定义缓动被应用到了补间上。
• 定位到缓动分类，并找到自定义缓动。单击该缓动效果，展开它。
• 将播放头移动到补间的第40帧，对应X、Y属性的关键帧。
• 单击添加关键帧按钮。
• 拖动此关键帧上下移动来观察其在曲线图中的百分比变化。
• 在X、Y属性中的缓动列选择自定义缓动。观察曲线图中自定义缓动曲线是如何与X、Y属性曲线在各关键帧上重合的。
• 拖动各个关键帧上的操作手柄，或者第一个与最后一个操作手柄，来改变缓动曲线。可以看到缓动曲线与X、Y曲线依然在各关键帧上重合（如图56）。
   
  图 56. X、Y属性应用自定义缓动后的曲线图
• 返回缓动分类中的自定义缓动曲线图。上下拖动第40帧上的关键帧，同时观察X、Y属性中曲线图的变化（如图57）。
   
  图 57. 一旦你拖动关键帧到新的位置，X、Y属性的曲线图中缓动曲线就与X、Y曲线不在关键帧处重合。随之，缓动曲线会与运动路径上的其他点重合。
• 重新拖动关键帧到两条曲线的重合点。这样缓动动画就与控件属性重新再关键帧上重合。测试动画看一下效果。
  使用此特性可以帮助你在关键帧之间使用自定义缓动。如果想了解更多的关于关键帧之间的缓动，可以阅读“Using eases with your tweens”这一节教程。
  

复制与保存自定义缓动
      显而易见的是，你也许希望在其他的补间实例上重用你的自定义缓动，甚至重用在其它文档中。 下面介绍两种不同的方法来实现重用自定义缓动。
      第一种简单地方法是右键单击自定义缓动曲线图中的空白处（除缓动曲线之外的地方），选择复制曲线。然后在第二个实例上，添加一个新的自定义缓动，右键单击自定义缓动曲线图的空白处，选择粘贴曲线。这样就把曲线图复制到了任何一个非空间属性的曲线图上。
      第二种方法是在动画预设面板中保存自定义缓动。这样做有两个好处：可以在任何文档中方便的使用它；也可以将其给其他flash用户来使用。然而，这样做也有其局限性，因为补间中的其他属性一同也被保存，比如补间的长度。一般来说，人们总是希望创建一个自定义缓动并重用在没有任何动画属性的补间实例上，然后再将其应用其他基本实例上。也就是说，它会同时应用动画效果，所以你需要在应用预设缓动后再重新调整补间区间的大小。