Flash 可以很轻松地进行补间, 但这并不意味着您能够始终依靠它来创作令人叹服的动画。不要误解我的意思: 只要复杂程度不超过在舞台上移动简单的对象, 补间足以完成工作并节省大量时间。

但是, 如果您能够利用补间方法使人物形象更加逼真会如何？如果您能够利用其简易性并使其以其它 Flash 用户所想象不到的方式工作会如何？如果您已经了解了有关补间的任何知识, 然后回过头看了前面 10% 的知识便转向其它内容, 又会如何？这些“如果”将使您更上层楼。

在本课中, 我将介绍 Flash 动画技巧的真正杀手锏, 这种技巧甚至可以创造出一些堪称逼真的 3D 效果。最棒的是, 您绝不需要离开 Flash 环境；您仍在 2D 环境内。您现在正处在一种过渡的维度当中。如果它仍是 2D, 但看起来像 3D, 那么确切地讲, 它到底是什么？

欢迎来到 2.5D 动画世界。

没错, 是 2.5D 动画。这是我起的名字。我并不是说我发明了这种技巧, 但就目前所知, 2.5 D 这一名称是我发明的。

图 28 展示了我的网站www.flashzhizuo.net.cn上的徽标人物。

图 28. 他难道不可爱吗？

图 29 表明我将每个元件放到了它们各自的图层上。我打开了轮廓功能, 因此您可以看到人物身体的各个部位是如何区分开的。这非常重要, 因为在补间过程中, 补间动画要求每个图层上只能有一个元件。如果您试图在同一补间动画的同一图层上放置两个不同的元件, 此补间将会断开。

图 29. 每个元件都有自己的图层

我甚至借此时机对每个图层进行了命名。尽管不必如此, 但为图层命名确实有帮助, 因为, 随着时间轴的增长, 您最终会越来越多地滚动时间轴。这在经常进行文件共享的团队环境中工作时也非常重要。在团队工作环境中, 越有条理越好。

设置时间轴后, 即可开始对人物应用补间动画。例如, 我只为组成人物头部的元件制作了动画, 因此我要确保其它所有图层均被锁定, 以避免更改错误的图层。

转动头部 — 第 1 部分

首先, 我创建了一些关键帧, 我要使头部在这些关键帧中开始及停止转动。单击并从顶部图层垂直拖动到底部图层, 转换成关键帧 (F6)。执行两次此操作, 在关键帧之间保留约 15 至 20 个帧。在此示例中, 我将第 15 帧和第 30 转换成了关键帧 (见图 30)。

图 30. 准备应用补间动画

通过使播放头保留在使人物的头部由转动转为停止的帧上, 我使用“任意变形”工具对舞台上的每一个元件进行了编辑。

请按照我的方法操作。我从其中一只眼睛开始。您需要想象一下在球体 (头部) 上转动的眼睛。如果这是一个真正的 3D 对象, 当一只眼睛靠近您时, 它会变得更大。它的形状也不会像鸡蛋, 因此使其变得宽一些也是很好的想法。由于我的人物的眼睛是由三个不同的元件组成的, 因此我通过按住 Shift 键同时选择了所有这三个元件, 以便对它们进行缩放 (见图 31)。然后, 我使用“任意变形”工具同时对它们进行了缩放。不必担心此时能否做得非常完美。稍后您可以随时对动画进行微调。这几乎是盲人摸象, 因为在应用补间动画前您不能确切知道它的外观将会如何。

图 31. 选择眼睛元件

现在让我们处理鼻子。由于此人物正在转向我们, 任何与我们最近的部位均应从右侧转向左侧。如果它是真正的 3D 对象, 则鼻子将会直接从头部突出来。为使其更加具有真实感, 在将鼻子从右侧移动到左侧时, 我使其略微向下转动了一些 (见图 32)。不要忘记在其靠近查看者时将其放大一点。

图 32. 修改鼻子

然后, 我挪动了另一只眼睛, 同时将其放大, 并使其不太像椭圆形, 而变得更圆一些。我还挪动了两撇眉毛并略微旋转了它们, 同时对它们进行了放大 (见图 33)。

图 33. 修改另一只眼睛

此时, 我将补间动画应用到进行这些编辑所在的每个图层。现在该到展示实际完成的作品以及确定是否需要对其进行进一步调整的时候了。

不要担心, 要实现这种恰当的效果几乎总是要进行大量调整。图 34 展示了人物的头部在该舞台上的转动。

图 34. 转动人物的头部

查看 mudbubble_boy.swf 文件, 查看最终的动画效果 (见图 35)。

图 35. 头部转动的最终动画效果

不错的开始, 是吧？通过使用“任意变形”工具进行一些简单编辑, 您可以开始观看逼真的动画效果。其效果并不完美, 但此时不必使其完美。您可以继续调整元素的缩放、定位及倾斜程度, 直至达到所需的效果为止。

转动头部 — 第 2 部分

接下来, 我针对人物头部的其它资源进一步强调其头部的转动。

此错觉的最重要部分是使查看者相信, 这种扁平的 2D 对象具有体积和质量。您还需要诱使用户的眼睛在动画中感觉到深度。您需要想象此人物是从空间中的各种 3D 对象构建起来的。如果此人物真的在 3D 空间中转动头部, 则前景中内容的行进方向与背景中内容的行进方向相反。为帮助您进行这种想象, 请想象一幅地球在空间中绕其轴进行自转的画面。地球基本以逆时针旋转。这意味着与我们最近的表面是从右向左行进。离我们最远的表面是从左向右行进。我将这种运动关系应用到了人物的头部。

由于头部元件自身只是一个扁平的椭圆形, 我真正需要的是使其倾斜一点。我还选择了将它向右轻推一点。我之所以这样做是因为当有人转过来面向您时, 您看到的左眼右侧的部分会更多。由于此头部形状更与面部特征相比更加靠后, 因此它应向右移动几个像素。不要过于夸大其中的一些移动。这种效果最好利用许多细微移动而不是一些较大更改来实现。正是由于多个细微动画形成了意想不到的整体效果, 其各个部分才构成一个整体。

然后, 将帽檐向人物头部的右侧旋转 (见图 36)。请记住, 后部对象的运动方向与前景中对象的运动方向相反。

图 36. 旋转帽檐

我还使用箭头键向右轻推帽檐, 使之看起来更像是位于人物的颈部之后。

人物的帽子适用于同一原理。我倾斜了帽子, 以便使其在向右移动几个像素的同时变得更薄 (见图 37)。

图 37. 调整帽子

使耳朵倾斜一点, 同时向左上方移动一些 (见图 38)。

图 38. 倾斜耳朵

不要忘记头发。我将头发设计成三个单独的元件, 这样就能够单独对它们进行编辑。当头部转向查看者时, 我使头发朝着人物眼睛的方向向下倾斜, 并使它们变得更短, 就好像它们更加指向查看者 (见图 39)。这在一定程度上会形成透视错觉, 但难以实现。您倾斜以及缩放元件的程度是有限制的。请记住, 尽量保守地通过细微的方式使用此效果会更好。到目前为止, 您只能够推动封套。越少效果越好。

图 39. 倾斜头发

下一步, 将一些补间动画添加到已编辑过的其余图层中。到目前为止, 如果您按照我的方法进行了操作, 请回放获得工作成果。

效果不错, 是吧？您可以清楚地看到他头部的转动, 就好像是一个 3D 对象。请记住, 大多数人物 (例如人) 都有两只耳朵。要使人物的第二只耳朵在头部的右侧转动, 需要在其它所有图层下创建一个新图层。复制现有耳朵, 然后将其粘贴到补间动画中间空白关键帧中的新图层上 (在第 22 帧周围)。然后选择“修改” › “变形” › “水平翻转”, 使其翻转。

将耳朵放置在头部后的右侧位置, 使其约一半的部分突出来。大约是这只耳朵上您需要看到的部分 (见图 40)。

图 40. 定位第二只耳朵

在第 30 帧 (其它所有关键帧所在的位置) 上添加另一个关键帧, 如图 41 所示。

图 41. 添加第二个关键帧

返回到这只耳朵的第一个关键帧, 重新定位几乎完全位于头部之后的耳朵。我已将其它一些图层转换成了轮廓, 以便您能够看到这只耳朵的新位置 (见图 42)。

图 42. 重新定位第二只耳朵

现在, 该应用补间动画了。回放您的动画, 看一下当头部向您“转动”时这只耳朵呈现的效果 (见图 43)。由于这种小细节有助于形成头部成为圆形球体的错觉 (这需要 Flash Player 8) , 因此可以极大地增强头部的真实感。

图 43. 在头部转动过程中耳朵呈现的最终动画效果

请随时清理时间轴, 如果感觉某些地方不太恰当, 则对元件进行调整。这取决于您追求完美的程度以及人物的复杂性。鉴于我在设计中使用的对象数量, 本例中的男孩人物比较复杂。

“自定义缓入/缓出”面板 (仅限 Flash Professional 8)

我想对头部转动进行一次最后的修整。如您所知, 由于速率的恒定, 补间动画看起来具有非常好的静态效果。在初始状态下, 它们看起来非常不稳定。但凭借 Flash Professional 8 中的新功能, 您可以添加一些“缓入和缓出”效果, 使过渡更加柔和。诀窍是如何在单个补间内进行缓入和 缓出。

第一步是应用补间动画。您可以使用以下两种方法中的一种实现这一目的:

• 右键单击两个关键帧之间的帧。从弹出式菜单中选择“创建补间动画”。
• 利用选择工具通过单击和拖动操作选择所有图层, 以黑色突出显示它们。从属性检查器的“补间”下拉菜单中, 选择“动作”。

请注意属性检查器中的“编辑”按钮 (见图 44)。

图 44. 单击“编辑”按钮, 打开“自定义缓入/缓出”面板。

单击此按钮可打开新的“自定义缓入/缓出”面板 (见图 45)。

图 45. 新的“自定义缓入/缓出”面板

与先前版本相比, 利用这种新的“自定义缓入/缓出”面板, 您可以更多地对缓动效果进行控制。“自定义缓入/缓出”面板显示的图形表示动画随时间推移而变化的程度。水平轴表示帧, 而垂直轴表示对象变化的百分比。

图形的曲线指示对象的变化率。曲线呈水平时 (无斜率) , 速率为零；曲线呈垂直时, 则表示对象的运动没有任何缓动或延迟。

如果您选择“为所有属性使用一种设置”复选框, 则会将当前曲线应用到所有属性 (“位置”、“旋转”、“缩放”、“颜色”和“滤镜”)。如果您取消选择此复选框, 可以对每个属性应用单独的曲线, 如下所示:

• 位置: 为舞台上动画对象的位置指定自定义缓入缓出设置。
• 旋转: 为动画对象的旋转指定自定义缓入缓出设置。例如, 可以微调舞台上的动画人物转向用户时速度的快慢。
• 缩放: 为动画对象的缩放指定自定义缓入缓出设置。例如, 您可以更轻松地通过自定义对象的缩放实现以下效果: 对象好像渐渐远离查看者, 再渐渐靠近, 然后再次渐渐离开。
• 颜色: 为应用于动画对象的颜色过渡指定自定义缓入缓出设置。
• 滤镜: 为应用于动画对象的滤镜指定自定义缓入缓出设置。例如, 可以控制模拟光源方向变化的投影缓动设置。
• “播放”和“停止”按钮: 允许您使用“自定义缓入/缓出”对话框中定义的所有当前速率曲线, 预览舞台上的动画。
• “重置”按钮: 允许您将速率曲线重置为默认的线性状态。

单击对角线可以添加新的控制点。通过拖动控制点的位置, 您可以精确控制对象的运动。

使用帧指示器 (用方形手柄表示) , 单击要缓入或缓出 (加速或减速) 对象的位置。单击控制点的手柄 (方形手柄) , 可选择该控制点, 并显示其两侧的正切点 (空心圆圈)。使用鼠标或键盘上的键可以将控制点或正切点拖动到新位置。

提示: 默认情况下, 控制点贴紧至网格。在拖动控制点时按住 X 键可以暂时取消这种贴紧方式。

单击曲线上任何控制点之外的位置可在该曲线上创建新的控制点。单击曲线和控制点之外的任意位置, 可以取消选择当前选择的控制点。

要使动画逐渐开始和逐渐结束, 应调整曲线, 使其类似于图 46。我强烈建议通过创建并编辑控制点和正切点然后使用面板左下角的“停止”和“播放”按钮回放您的动画来进行试验。这不需要很长的时间, 之后您将对曲线与其对动画的影响之间的关系形成良好的感觉。

图 46. 使用这种缓入/缓出路径

现在回放您的动画。请注意头部转动时是如何进行缓入, 而在转动即将结束时又是如何进行缓出的。要创建头部再次转回到原始位置的动画, 您只需要复制第 1 帧中的帧, 然后将它们粘贴在刚创建的补间之后。通过添加补间动画重复同一过程以实现缓入和缓出, 这样就形成了可以非常漂亮地来回转动头部的人物。

应用滤镜

是的, 现在这种不可能在 Flash 中已成为可能。Flash 8 引入了图形滤镜和混合模式, 这受到 Flash 群体的热烈欢迎。您现在可将“投影”、“模糊”、“发光”、“斜角”、“渐变发光”、“渐变斜角”和“调整颜色”等效果应用到任何影片剪辑实例中。通过应用投影可使您的人物妙趣横生。

首先要做的是将您的人物放入影片剪辑元件中。在时间轴中, 通过单击和拖动选择所有图层间的全部帧。 (提示: 从左上角中的第 1 帧开始, 沿对角方向拖动到底部图层上的最后一帧。) 这将以黑色突出显示帧和图层。选择“编辑” › “时间轴” › “复制帧” (或按 Ctrl+At+C) 将整个时间轴复制到“剪贴板”上。 (您还可以右键单击突出显示的帧上的任何位置, 然后从上下文菜单中选择“复制帧”。) 现在, 将该想法保留到下一步。

打开库 (Ctrl+L), 然后从右上方的下拉菜单中选择“新建元件” › “影片剪辑”行为, 然后单击“确定”。您现在已处于此新元件的“编辑”模式中。选择时间轴的第一帧, 然后选择“编辑” › “时间轴” › “粘贴帧” (或按 Ctrl+Alt+V) 粘贴所选择的帧, 如图 47 所示。 (您还可以右键单击第 1 帧, 然后从上下文菜单中选择“粘贴帧”)。

图 47. 右键单击第 1 帧并选择“粘贴帧”

返回到主舞台, 然后创建一个新图层。找到您刚才在库中创建的影片剪辑元件, 然后将其拖到此新图层的舞台上 (见图 48)。

图 48. 将影片剪辑拖到舞台上

删除包含原人物的其它所有图层。此时, 时间轴应该有一个图层和一个包含人物动画的影片剪辑元件。

您能够创建的阴影有两种。标准投影可在略偏于原始实例下方的位置创建阴影。这种效果通常没有层次感, 类似于在墙上或其它平面上投下的阴影。如果您试图获得投射在地面上的阴影, 则其效果不太逼真。要实现更逼真的阴影效果, 您需要额外执行一些简单步骤。

复制该影片剪辑实例, 然后将其放置到原始实例的后面。 (可以将复制的实例放在同一图层中并将其排列在原始实例的后面, 或将其粘贴到原始图层下面的新图层中。)

选择复制的实例, 然后在属性检查器的“滤镜”选项卡中, 从加号 (+) 菜单中选择“投影” (见图 49)。接下来, 将强度层级调整到 45% 左右, 并选择“隐藏对象”。这会隐藏影片剪辑对象, 但会显示“投影滤镜”属性。通过将“品质”设置为“低”、“中”或“高”, 或通过修改模糊量、颜色、角度或模糊效果与原始图形的距离, 可进一步进行调整。

图 49. 应用到复制的影片剪辑实例的“投影”滤镜

为了防止该效果看起来过于类似在原始对象后面的平坦墙面上的投影, 可以使用“任意变形”工具来倾斜已应用滤镜的影片剪辑实例。此技巧需要进行多次尝试, 不断修正错误, 然后才能成功应用。挤压和倾斜实例, 使其投影看起来好像是投射到地板上的影子 (见图 50)。您可能需要重新定位此实例, 才能正确显示其外观。

图 50. 复制的影片剪辑经“任意变形”工具倾斜后的效果

测试影片, 您会看到逼真的效果。

将循环动画与其它多个循环动画相结合, 可以实现一些复杂的视觉效果, 如图 51 所示 (这需要 Flash Player 8)。

图 51. 使用“投影”滤镜实现的 2.5D 效果示例

在此示例中, 您可以看到投影效果是如何将一个令人兴奋的维度添加到动画中的。此动画是包含男孩与狗角色的循环动画的一系列影片剪辑。在以后的文章中, 我将介绍小的动画循环如何能够使您的影片产生连贯的效果。

我希望本文能够帮助您提高自己的 Flash 设计和动画技能。还有更多能够利用 Flash 实现的动画技巧, 例如全动画 (通常指逐帧播放的动画) 、补间形状以及视频或 3D 动画程序中的图像序列。其它设计者和动画制作者那里还有许多很好的插件, 能够加快您的 Flash 工作流程。请等待介绍这些技巧和工具的新文章。