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

Adobe Flash CS4 专业版提供了一个全新的骨骼工具，可以很便捷地把符号（Symbol）连接起来，形成父子关系，来实现我们所说的反向运动（Inverse Kinematics）。 整个骨骼结构也可称之为
骨架（Armature）。你可以把骨架应用于一系列影片剪辑（Movie Clip）符号上，或者是原始向量形状上，这样便可以通过在不同的时间把骨架拖到不同的位置来操纵它们。

这篇文章介绍了如何使用符合和形状创建一个基本的骨骼结构，并应用这些技术使一个卡通角色在一个场景中走动。

骨骼工具基础

你可以使用骨骼工具来创建影片剪辑的骨架或者是向量形状的骨架。让我们开始构建一个符号的基本骨架吧：

创建一个新的Flash文档，并选择ActionScript 3.0。骨骼工具只和AS 3.0文档配合使用（见图1）。



图1： 在“新建文档”面板中选择ActionScript 3.0文件

在舞台（Stage）上画一个对象。在本文范例中，为了让其简单，我使用矩形工具创建了一个基本的形状。
一旦你创建好了形状以后，把它转换成一个影片剪辑或者是图形符号。
你需要更多的对象来创建相连的物体链，只需复制刚刚创建符号即可，按住Alt键（Windows）或者Option键（Mac OS）并把符号拖动到一个新位置上。Flash在你每次点击拖拽的时候都会复制一个实例。多重复几次这个过程，来创建相同符号的多个实例（见图2）。



图2： 水平对齐的同一符号的多个实例

把这些对象连接起来创建骨架。在工具面板（见图3）中选择骨骼工具（X）。



图3：工具面板中的骨骼工具

确定骨架中的父/根符号实例。这个符号实例将会是骨骼的第一段。拖向下一个符号实例来把它们连接起来。当你松开鼠标的时候，在两个符号实例中间将会出现一条实线来表示骨骼段（见图4）。



图4： 连接两个符号实例的骨骼段

重复这个过程把第二个符号实例和第三个实例连接起来。通过不断从一个符号拖向另一个来连接它们，直到所有的符号实例都用骨骼连接起来了（见图5）。



图5： 连接了所有符号实例的完整骨架

接下来的步骤就有趣多了。在工具面板（V）上选择选取工具，并拖动链条中的最后一节骨骼。通过在舞台上拖动它，整个骨架都能够实时控制了（见图6）。



图6： 为动画准备好了的完整骨架

通过增加IK（反向运动）跨度的帧数就很容易给骨架增加动画，点击并拖拽它的边缘到期望的帧数（见图7）。把帧指示器指向指向新的帧数，并把骨架拖动到新的位置上。Flash将会在当前帧数上插入一个关键帧，并在IK跨度上进行动作的内插。



图7： 增长IK的跨度并将帧指示器指向最后一帧

祝贺你！你已经能够在Flash里面使用骨骼工具创建一个简单的骨架动画了。

将骨架应用于形状

你也可以使用骨骼工具在整个向量形状内部创建一个骨架。这可是一个让人激动的创建形状动画的方式，在之前的Flash中从未有过。我通常使用这项技术来为动物角色创建摇尾巴动画。

让我们从一个又高又细的矩形开始吧。你甚至可以使用细部选择工具（Subselection tool，快捷键A）把一段变得更窄来做成尾巴的样子（见图8）。



图8： 使用矩阵工具和细部选择工具创建的向量图形

选择骨骼工具（X）。从尾巴的底部（根）开始，在形状内部点击并向上拖拽，来创建根骨骼（见图9）。在向形状中画第一根骨骼的时候，Flash会把转换为一个IK形状对象。



图9： 添加了根骨骼后的基本尾巴形状

继续向上一个接一个地创建骨骼，这样它们可以头尾相连起来。我推荐骨骼逐渐的长度逐渐变短，这样越到尾部关节会越多。这样就能创建出更切合实际的动作来。当完成了向尾巴添加骨骼的过程后，它应该看起来如图10一般。



图10： 完成后的形状骨架

使用选取工具（V），拖动位于链条顶端的最后一根骨骼（在尾部的最根部）。因为非常直的尾巴看起来并不自然，因此我们把骨架放置成了类似S形，如图11所示。



图11： 骨架的初始位置

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



图12： 用于创建无缝循环的头尾关键帧相同的IK跨度

将帧指示器放在IK跨度的中间，并将骨架放在新的位置上，如图13所示。



图13： IK骨架在跨度中点的新位置

为了让尾部摆动更加真实，需要给尾巴加上辅助动作。因为尾部的动作是从根部通过根骨骼发起的，尾巴的尾端只是对根骨骼的一个延迟的反作用。为了能创建这样的动画，把帧指示器放在第一帧初始位置后的几帧之后，并操纵骨架让尾部朝着根骨骼相反的方向弯曲（见图14）。



图14： 在辅助位置上的IK骨架

别忘了在IK跨度中点之后也加上辅助动作（见图15）。



图15： 在IK跨度中点后的IK骨架辅助位置

播放动画后你会发现，尾巴上的关节越多，在添加了辅助动作后就越自然。现在进一步地给它加上缓和。如果不加上的话，动画就会看起来很机械化。

把帧指示器放在IK跨度的头两个关键帧中间。在属性面板中，使用缓和（Ease）弹出菜单选择缓和的类型。
选好了缓和以后，可以通过点击字符出现的滑动条调整缓和的强度。缓和将会影响两个关键帧之间的动作。
你可以应用不同类型的缓和，并给每个动作使用不同的缓和强度，使用帧指示器放置在每组关键帧的中间，选择不同的缓和预设值，并调整它们每个的强度（如图16）。



图16： 在属性面板中选择一种预设的缓和并调整它的强度

 
 
 
 

将骨架应用于卡通角色

现在你已经使用Flash中的骨骼工具创建了两个不同的IK骨架，接下来就可以将这些技术结合起来为卡通角色创建行走动作循环。这个示例中设计的角色是一只表情阴郁的猴子。所有他身体的部分都已经分解成不同图层的符号（见图17）。



图17： 用于创建动画的猴子角色

小贴士： 请将你的Flash文档设置为ActionScript 3和24fps。
下一步就是如何应用骨架了。凭直觉可能认为用一个骨架将所有身体部分连接在一起就可以了。不过我发现这并不是最好的方法，因为这样需要一个非常复杂的骨架而导致难以操作。我更倾向于为胳膊和腿部单独创建更小的骨架。

腿部动画

腿部是由3单独个符号组成（见图18）。



图18： 腿部组成

具体想法是这样的，将所有的腿部符号放到一个图形符号中：

选中这3个符号，然后按F8（转换为符号），命名为leg_armature。双击这个符号进入编辑状态。
选中骨骼工具（X）并连接这3个腿部对象，以上部的腿符号作为这个骨架中的根骨骼。完成后的骨架应该是只包括两块骨骼，就像图19所示。



图19： 通过两块骨骼连接在一起的腿部组件

接下来就是约束每块骨骼的节点旋转。这会限制每块骨骼关节的旋转范围以避免选转到解剖学上来说不合理的位置。

直接点击选中一块骨骼。属性面板将更新并弹出关节（Joint）菜单：旋转和X/Y的平移选项。
在关节部分：旋转（Joint:Rotation）选项中，选择约束（Constrain），使用点击文字出现的滑动条调整旋转所需的角度范围（见图20）。



图20： 经过旋转约束调整的根骨骼

你可能会想一并调整根骨骼的速度。速度影响的是被操纵时的反应。速度的值越低就相当于给骨骼越高的负重，这样相对值高的骨骼反应就要迟缓些。我喜欢将速度的值设得稍微低点，因为这样整个骨架的效果就更自然些（见图21）。



图21： 通过调整速度增加每个骨骼的负重

由于三个对象只用了2块骨骼，所以链条中的最后一个对象更难控制些。因为它没有一个专用的骨骼去进行动作的约束。有个土办法可以解决这个问题，那就是在骨架中增加一个额外的对象。这个对象本身是什么都可以，因为最终不会将其发布到SWF文件中。我个人习惯使用的是椭圆工具（O）绘制的红色圆点（见图22）。



图22： 额外增加一个对象，这样脚部就有了自己专用的骨骼

Flash不允许添加对象到IK位置图层，所以需要创建一个新的图层暂时存放这个对象。
一旦这个对象被放置到靠近骨架链条末端的部分，选择骨骼工具（X）并从当前骨架的末端拖到新对象上。Flash CS4会自动将该对象移至骨架图层，这样它就变成这个骨骼链的一部分了（见图23）。



图23： 增加额外骨骼后的腿部骨架

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



图24： 骨架超出了水平线

修复的方法是，在每一帧里都设置帧指示器，选中鞋子符号，使用方向键微移直到底部边缘与水平线对齐。

在后续的帧中设置帧指示器并按类似的姿势操作这个骨架（见图25）。



图25： 腿部移回到前进位置的动作序列

腿部动画完成后，必须将骨架链尾部的额外对象隐藏掉。打开库面板（Control+L或Command+L），找到骨架链尾部的符号。双击该符号，然后右击包含该对象的图层，将其转换为向导图层。这样额外的对象就不会包括在发布的文件中了（见图26）。



图26： 将该图层转换成向导图层以将其从发布文件中剔除

完成后的腿部动画应该如图27所示（鼠标在按钮上悬停播放）

因为腿部动画是嵌在一个符号里的，很容易拷贝粘贴直接用做第二条腿的动画。这样就不需要在设计另一条腿的动画，可以节省大量的时间。只需拷贝腿部符号并将其粘贴到骨盆图层下面的新图层中。
你可以稍微调整一下亮度，让第二条腿看起来更靠里面。选择该实例，在属性面板的颜色效果下拉菜单中选择亮度，拖动滑动条到负值的位置，稍微加深阴影效果。
为了确保第二条腿在不同帧进入行走循环以避免与另一条腿同步动作，最好是在动画的中点开始启动。在循环弹出菜单的骨架域中填入8即可实现此效果（见图28）。



图28： 调整亮度以及第二条腿行走循环的起点

复制的腿要比原腿高几个像素，这样看起来两腿就有距离。你可以沿着x轴将后腿往上移一点儿，建议超过身体的3/4即可（见图29）。



图29： 完成腿部骨架的猴子角色

手臂动画

接下来的步骤是为角色的手臂加上骨架。这和给腿部加上动画跟相似：给符号填上骨架和动画，这样就可以复制到其他的手臂上来节省时间。

手臂和腿部一样，由三个单独的部分组成：上臂、下臂和手（见图30）。



图30： 手臂可以分成三个能用骨骼工具连接起来的符号

如果你想控制手部，就像在腿部骨骼上控制脚一样的话，在链条的尾部使用一个额外的对象，这样你就能添加第三根骨骼（见图31）。



图31： 完成后的角色手臂装配

腿部骨架有15帧长。因此，你最好把手臂动画也设定为相同的长度，这样它们才会完美地协调。

在开始动画之前，在第一帧上设定初始位置。我推荐手臂的开始位置向前一些。另外，这也是分别选择每个骨骼并调整旋转约束的好时机（见图32）。



图32： 为手臂骨架中每个骨骼调整关节旋转约束

将帧指示器放在15帧上并按F6。这样会在最后一帧插入一个关键帧，来帮助我们创建无缝循环。
将帧指示器放在跨度的中间，也就是8帧附近，然后调整骨骼，手臂就在一个近似的位置（见图33）。



图33： IK跨度中点的手臂位置

完成了手臂动画之后，应该看上去如图34所示（鼠标在按钮上悬停播放）。

和腿部相似，将手臂符号通过嵌套动画和角色的身体关联起来。
复制粘贴手臂符号到一个位于身体下面的新的层上，调整它的位置和明暗度，就如同你之前在后腿上做的事情一样（见图35）。



图35： 完成手臂骨架后的猴子角色

尾部动画

猴子尾巴的动画是使用形状骨架来创建的，创建形状则是使用笔刷工具（B）。图36展示了尚未添加骨架时的向量形状。



图36： 使用笔刷工具绘制的尾部形状

图37展示了添加了骨架后的尾部。值得注意的是，根骨骼是最长的一根，离尾巴尖越近，骨骼就越短。这意味着尾巴尖的部分关节更多，这看上去也更自然。



图37： 带有完整骨架的尾部形状

尾部动画不需要很复杂，你只需要加入一些基本的动作，让它看起来有生气即可，不要让它一直拖在角色的后面。

第一步是决定尾部动画要有多少帧。因为手臂和腿部的动画都是15帧，可以让尾部动画的帧数是15的倍数，这样你就能在所有的符号之间创建一个平滑的无缝循环。将尾部的IK跨度调整为60帧。
现在把帧指示器放在最后一帧上并按F6。这样会在尾部动画中插入第二个关键帧，该帧和第一帧相同，这样就确保了循环是无缝的。
将帧选择器指向第15帧，拖动链条的最后一根骨骼来操纵尾部骨架（见图38）。



图38： 操纵尾部骨骼

不要忘记为尾部骨架增加辅助动作，图39展示了四个我在尾部动画中用到的主要位置。



图39： 四个尾部骨架关键位置

行走动作循环动画

到了这个阶段，你已经有了足够的东西来为角色创建一个行走动作循环了。最后的技术是把整个角色嵌套到一个符号中去。这样做的好处是，可以在舞台中重新放置角色、缩放、旋转以及创建运动动画。

选择整个角色并按F键（转换为符号），为符号起名字，并在类型的下拉框中选择图形（Graphic），点击OK（见图40）。



图40： 转换为符号对话框

在时间线上增加一个新层，打开库面板（Control+L或者Command+L）并将一个新的符号实例拖到舞台上。
右击符号并在弹出菜单中选择创建运动动画（见图41）。



图41： 在右击弹出菜单中选择创建运动动画

Flash CS4专业版的动作模型会将新的运动动画应用于包含符号的层上。因为这种运动动画是基于对象的，所以你不再需要在时间线上手工插入关键帧。把播放指示器放在新的一帧上并在舞台上放置符号。Flash会自动为你创建适合的关键帧并提供一个样条插值路径供你编辑以满足你的特定需求。图42展示了最终的行走动作循环动画。