使用Flash骨骼工具制作角色动画

1、使用 Flash 骨骼工具制作角色动画 Adobe Flash CS4 专业版提供了一个全新的骨骼工具，可以很便 捷地把符号（Symbol）连接起来，形成父子关系，来实现我们 所说的反向运动（Inverse Kinematics）。 整个骨骼结构也可称 之为 骨架（Armature）。你可以把骨架应用于一系列影片剪辑 （Movie Clip）符号上，或者是原始向量形状上，这样便可以通 过在不同的时间把骨架拖到不同的位置来操纵它们。 这篇文章介绍了如何使用符合和形状创建一个基本的骨骼结 构，并应用这些技术使一个卡通角色在一个场景中走动。 骨骼工具基础 你可以使用骨骼工具来创建影片剪辑的骨架或者是

2、向量形状的 骨架。让我们开始构建一个符号的基本骨架吧： 1. 创建一个新的 Flash 文档，并选择 ActionScript 3.0。骨骼 工具只和 AS 3.0 文档配合使用（见图 1）。 图 1： 在“新建文档”面板中选择 ActionScript 3.0 文件 ： 2. 在舞台（Stage）上画一个对象。在本文范例中，为了让其 简单，我使用矩形工具创建了一个基本的形状。 3. 一旦你创建好了形状以后，把它转换成一个影片剪辑或者 是图形符号。 4. 你需要更多的对象来创建相连的物体链，只需复制刚刚创 建符号即可，按住 Alt 键 （Windows） 或者 Option 键 （Mac OS

3、）并把符号拖动到一个新位置上。Flash 在你每次点击 拖拽的时候都会复制一个实例。多重复几次这个过程，来 创建相同符号的多个实例（见图 2）。 图 2： 水平对齐的同一符号的多个实例 ： 5. 把这些对象连接起来创建骨架。在工具面板（见图 3）中 选择骨骼工具（X）。 图 3：工具面板中的骨骼工具 ： 6. 确定骨架中的父/根符号实例。这个符号实例将会是骨骼的 第一段。拖向下一个符号实例来把它们连接起来。当你松 开鼠标的时候，在两个符号实例中间将会出现一条实线来 表示骨骼段（见图 4）。 图 4： 连接两个符号实例的骨骼段 ： 7. 重复这个过程把第二个符号实例和第三个实例连接起来。 通过不

4、断从一个符号拖向另一个来连接它们，直到所有的 符号实例都用骨骼连接起来了（见图 5）。 图 5： 连接了所有符号实例的完整骨架 ： 8. 接下来的步骤就有趣多了。在工具面板（V）上选择选取工 具，并拖动链条中的最后一节骨骼。通过在舞台上拖动它， 整个骨架都能够实时控制了（见图 6）。 图 6： 为动画准备好了的完整骨架 ： 通过增加 IK （反向运动） 跨度的帧数就很容易给骨架增加动画， 点击并拖拽它的边缘到期望的帧数（见图 7）。把帧指示器指向 指向新的帧数，并把骨架拖动到新的位置上。Flash 将会在当前 帧数上插入一个关键帧，并在 IK 跨度上进行动 作的内插。 图 7： 增长 IK 的

5、跨度并将帧指示器指向最后一帧 ： 祝贺你！你已经能够在 Flash 里面使用骨骼工具创建一个简单的 骨架动画了。 将骨架应用于形状 你也可以使用骨骼工具在整个向量形状内部创建一个骨架。这可 是一个让人激动的创建形状动画的方式，在之前的 Flash 中从未 有过。我通常使用这项技术来为动物角色创建摇尾巴动画。 让我们从一个又高又细的矩形开始吧。你甚至可以使用细部选择 工具（Subselection tool，快捷键 A）把一段变得更窄来做成尾 巴的样子（见图 8）。 图 8： 使用矩阵工具和细部选择工具创建的向量图形 ： 1. 选择骨骼工具（X）。从尾巴的底部（根）开始，在形状内 部点击并向上拖

6、拽，来创建根骨骼（见图 9）。在向形状 中画第一根骨骼的时候，Flash 会把转换为一个 IK 形状对 象。 图 9： 添加了根骨骼后的基本尾巴形状 ： 2. 继续向上一个接一个地创建骨骼，这样它们可以头尾相连 起来。我推荐骨骼逐渐的长度逐渐变短，这样越到尾部关 节会越多。这样就能创建出更切合实际的动作来。当完成 了向尾巴添加骨骼的过程后，它应该看起来如图 10 一般。 图 10： 完成后的形状骨架 ： 3. 使用选取工具 （V） ，拖动位于链条顶端的最后一根骨骼 （在 尾部的最根部）。因为非常直的尾巴看起来并不自然，因 此我们把骨架放置成了类似 S 形，如图 11 所示。 图 11： 骨架的

7、初始位置 ： 4. 在 IK 跨度中添加新的帧，在时间线（Timeline）中点击后 面的帧数并按 F5（插入关键帧），或者将 IK 跨度的边缘 拖到右边。你想要创建一个无缝动画的话，就需要让第一 帧和最后一帧相同才行。 5. 把帧指示器（播放指示器）放到跨度的最后一帧上，按 F6 插入一个关键帧。这样在 IK 跨度的最后会插入一个关键 帧，在关键帧中包含了相同的骨架位置（见图 12）。 图 12： 用于创建无缝循环的头尾关键帧相同的 IK 跨度 ： 6. 将帧指示器放在 IK 跨度的中间，并将骨架放在新的位置 上，如图 13 所示。 图 13： IK 骨架在跨度中点的新位置 ： 7. 为了让

8、尾部摆动更加真实，需要给尾巴加上辅助动作。因 为尾部的动作是从根部通过根骨骼发起的，尾巴的尾端只 是对根骨骼的一个延迟的反作用。为了能创建这样的动 画，把帧指示器放在第一帧初始位置后的几帧之后，并操 纵骨架让尾部朝着根骨骼相反的方向弯曲（见图 14）。 图 14： 在辅助位置上的 IK 骨架 ： 8. 别忘了在 IK 跨度中点之后也加上辅助动作（见图 15）。 图 15： 在 IK 跨度中点后的 IK 骨架辅助位置 ： 播放动画后你会发现，尾巴上的关节越多，在添加了辅助动作 后 就越自然。现在进一步地给它加上缓和。如果不加上的话，动画 就会看起来很机械化。 1. 把帧指示器放在 IK 跨度的头

9、两个关键帧中间。在属性面板 中，使用缓和（Ease）弹出菜单选择缓和的类型。 2. 选好了缓和以后，可以通过点击字符出现的滑动条调整缓 和的强度。缓和将会影响两个关键帧之间的动作。 你可以应用不同类型的缓和，并给每个动作使用不同的缓 和强度，使用帧指示器放置在每组关键帧的中间，选择不 同的缓和预设值，并调整它们每个的强度（如图 16）。 图 16： 在属性面板中选择一种预设的缓和并调整它的强 ： 度 将骨架应用于卡通角色 现在你已经使用 Flash 中的骨骼工具创建了两个不同的 IK 骨 架，接下来就可以将这些技术结合起来为卡通角色创建行走动作 循环。这个示例中设计的角色是一只表情阴郁的猴子。

10、所有他身 体的部分都已经分解成不同图层的符号（见图 17）。 图 17： 用于创建动画的猴子角色 ： 小贴士： 小贴士： 请将你的 Flash 文档设置为 ActionScript 3 和 24fps。 下一步就是如何应用骨架了。凭直觉可能认为用一个骨架将所有 身体部分连接在一起就可以了。不过我发现这并不是最好的方 法，因为这样需要一个非常复杂的骨架而导致难以操作。我更倾 向于为胳膊和腿部单独创建更小的骨架。 腿部动画 腿部是由 3 单独个符号组成（见图 18）。 图 18： 腿部组成 ： 具体想法是这样的，将所有的腿部符号放到一个图形符号中： 1. 选中这 3 个符号，然后按 F8（转换为符

11、号） ，命名为 leg_armature。双击这个符号进入编辑状态。 2. 选中骨骼工具（X）并连接这 3 个腿部对象，以上部的腿符 号作为这个骨架中的根骨骼。完成后的骨架应该是只包括 两块骨骼，就像图 19 所示。 图 19： 通过两块骨骼连接在一起的腿部组件 ： 接下来就是约束每块骨骼的节点旋转。这会限制每块骨骼 关节的旋转范围以避免选转到解剖学上来说不合理的位 置。 3. 直接点击选中一块骨骼。属性面板将更新并弹出关节 （Joint）菜单：旋转和 X/Y 的平移选项。 4. 在关节部分：旋转（Joint:Rotation）选项中，选择约束 （Constrain），使用点击文字出现的滑动条

12、调整旋转所需 的角度范围（见图 20）。 图 20： 经过旋转约束调整的根骨骼 ： 你可能会想一并调整根骨骼的速度。速度影响的是被操纵 时的反应。速度的值越低就相当于给骨骼越高的负重，这 样相对值高的骨骼反应就要迟缓些。我喜欢将速度的值设 得稍微低点，因为这样整个骨架的效果就更自然些（见图 21）。 图 21： 通过调整速度增加每个骨骼的负重 ： 由于三个对象只用 了 2 块骨骼，所以链条中的最后一个对 象更难控制些。因为它没有一个专用的骨骼去进行动作的 约束。有个土办法可以解决这个问题，那就是在骨架中增 加一个额外的对象。这个对象本身是什么都可以，因为最 终不会将其发布到 SWF 文件中。我

13、个人习惯使用的是椭圆 工具（O）绘制的红色圆点（见图 22）。 图 22： 额外增加一个对象，这样脚部就有了自己专用的 ： 骨骼 5. Flash 不允许添加对象到 IK 位置图层，所以需要创建一个 新的图层暂时存放这个对象。 6. 一旦这个对象被放置到靠近骨架链条末端的部分，选择骨 骼工具 （X） 并从当前骨架的末端拖到新对象上。Flash CS4 会自动将该对象移至骨架图层，这样它就变成这个骨骼链 的一部分了（见图 23）。 图 23： 增加额外骨骼后的腿部骨架 ： 7. 现在就要开始行走动作循环的动画部分了。选择视图 > 标 尺（View > Rulers） ，打开文档的标尺

14、视图，然后经过工作 区拖拽标尺画出一条水平指示线。沿着鞋子的底部边缘放 置这条水平线。这将保证行走路线是完全水平的。别忘了 选择视图 > 向导 > 锁定向导（View > Guides > Lock Guides）确保动画过程中向导水平线不会被意外移除。 8. 我喜欢从最前面的位置开始腿部动画，然后再逐步往后。 一共大约 15 帧，将帧指示器设置在中点上，就这个示例而 言，也就是第 8 帧。 9. 将运动鞋沿着水平线拖到右边，同时确保鞋子底部边缘与 水平线完全对齐。 要养成频繁回放动画的习惯，在早期阶段这种做法可以暴 露腿部动画的问题。脚步是以弧线行进的，这是因为骨架

15、并不是沿着 x 或 y 轴移动，这导致行进过程中鞋子会越过 水平线（见图 24）。 图 24： 骨架超出了水平线 ： 修复的方法是，在每一帧里都设置帧指示器，选中鞋子符 号，使用方向键微移直到底部边缘与水平线对齐。 10. 在后续的帧中设置帧指示器并按类似的姿势操作这个骨 架（见图 25）。 图 25： 腿部移回到前进位置的动作序列 ： 11. 腿部动画完成后，必须将骨架链尾部的额外对象隐藏掉。 打开库面板（Control+L 或 Command+L），找到骨架链 尾部的符号。双击该符号，然后右击包含该对象的图层， 将其转换为向导图层。这样额外的对象就不会包括在发布 的文件中了（见图 26）。

16、 图 26： 将该图层转换成向导图层以将其从发布文件中剔 ： 除 完成后的腿部动画应该如图 27 所示 （鼠标在按钮上悬停播 放） 图 27： 完成后的腿部动画（鼠标在按钮上悬停播放） ： 12. 因为腿部动画是嵌在一个符号里的，很容易拷贝粘贴直接 用做第二条腿的动画。这样就不需要在设计另一条腿的动 画，可以节 省大量的时间。只需拷贝腿部符号并将其粘贴 到骨盆图层下面的新图层中。 13. 你可以稍微调整一下亮度，让第二条腿看起来更靠里面。 选择该实例，在属性面板的颜色效果下拉菜单中选择亮 度，拖动滑动条到负值的位置，稍微加深阴影效果。 14. 为了确保第二条腿在不同帧进入行走循环以避免与另一

17、条腿同步动作，最好是在动画的中点开始启动。在循环弹 出菜单的骨架域中填入 8 即可实现此效果（见图 28）。 图 28： 调整亮度以及第二条腿行走循环的起点 ： 15. 复制的腿要比原腿高几个像素，这样看起来两腿就有距 离。你可以沿着 x 轴将后腿往上移一点儿，建议超过身体 的 3/4 即可（见图 29）。 图 29： 完成腿部骨架的猴子角色 ： 手臂动画 接下来的步骤是为角色的手臂加上骨架。这和给腿部加上动画跟 相似：给符号填上骨架和动画，这样就可以复制到其他的手臂上 来节省时间。 手臂和腿部一样，由三个单独的部分组成：上臂、下臂和手（见 图 30）。 图 30： 手臂可以分成三个能用骨骼工

18、具连接起来的符号 ： 如果你想控制手部，就像在腿部骨骼上控制脚一样的话，在链条 的尾部使用一个额外的对象，这样你就能添加第三根骨骼（见图 31）。 图 31： 完成后的角色手臂装配 ： 腿部骨架有 15 帧长。因此，你最好把手臂动画也设定为相同的 长度，这样它们才会完美地协调。 1. 在开始动画之前，在第一帧上设定初始位置。我推荐手臂 的开始位置向前一些。另外，这也是分别选择每个骨骼并 调整旋转约束的好时机（见图 32）。 图 32： 为手臂骨架中每个骨骼调整关节旋转约束 ： 2. 将帧指示器放在 15 帧上并按 F6。这样会在最后一帧插入 一个关键帧，来帮助我们创建无缝循环。 3. 将帧指示

19、器放在跨度的中间，也就是 8 帧附近，然后调整 骨骼，手臂就在一个近似的位置（见图 33）。 图 33： IK 跨度中点的手臂位置 ： 完成了手臂动画之后，应该看上去如图 34 所示（鼠标在按 钮上悬停播放）。 图 34： 完成手臂动画（鼠标在按钮上悬停播放） ： 4. 和腿部相似，将手臂符号通过嵌套动画和角色的身体关联 起来。 5. 复制粘贴手臂符号到一个位于身体下面的新的层上，调整 它的位置和明暗度，就如同你之前在后腿上做的事情一样 （见图 35） 。 图 35： 完成手臂骨架后的猴子角色 ： 尾部动画 猴子尾巴的动画是使用形状骨架来创建的，创建形状则是使用笔 刷工具（B）。图 36 展示

20、了尚未添加骨架时的向量形状。 图 36： 使用笔刷工具绘制的尾部形状 ： 图 37 展示了添加了骨架后的尾部。值得注意的是，根骨骼是最 长的一根 ，离尾巴尖越近，骨骼就越短。这意味着尾巴尖的部分 关节更多，这看上去也更自然。 图 37： 带有完整骨架的尾部形状 ： 尾部动画不需要很复杂，你只需要加入一些基本的动作，让它看 起来有生气即可，不要让它一直拖在角色的后面。 1. 第一步是决定尾部动画要有多少帧。因为手臂和腿部的动 画都是 15 帧，可以让尾部动画的帧数是 15 的倍数，这样 你就能在所有的符号之间创建一个平滑的无缝循环。将尾 部的 IK 跨度调整为 60 帧。 2. 现在把帧指示器放在最后一帧上并按 F6。这样会在