资源简介

项目9 骨骼动画
一、教学目标
1.理解并掌握骨骼动画的概念；
2.掌握骨骼动画的制作。
二、课时分配
本项目共3个任务，安排4课时。
三、教学重点
本项目重点介绍了骨骼动画的概念和制作方法。在Flash中，可以在影片剪辑元件实例上或形状内部创建骨骼，制作关节链，利用关节链可以改变对象或图形的姿势，使运动对象按骨骼的运动方式运动。利用骨骼动画功能可以使对象按照复杂而自然的方式运动，快速、简便地创建人物运动、表情等各种复杂动画。
四、教学难点
1.掌握骨骼动画的概念和制作方法。
2. 运用骨骼动画快速、简便地创建人物运动。
五、教学内容
任务一 骨骼动画与反向运动
骨骼动画是使用“骨头”来运动一个模型，而不是通过手动编辑和移动每个顶点或面而实现的动画。
（一）骨骼动画的概念
目前动画制作方式分为顶点动画和骨骼动画两种。
顶点动画是制作了动画模型后，在不同帧上设置模型的特定姿态，然后通过在帧之间插值的方法，生成平滑的动画效果。前面章节中讲到的补间动画就属于顶点动画。
骨骼动画（bones animation）是在动画模型中加入骨骼组成的骨架结构，通过改变骨骼的方向和位置生成动画。骨骼动画可以更简单、更快速地创建人物的动作、表情等动画。
在骨骼动画中需要先在对象上创建骨骼，形成关节链，然后移动关节链中骨骼的位置、改变骨骼方向，使对象具有不同姿势，产生动画。
在骨骼动画中，骨骼运动方式又分为正向运动和反向运动两种。正向运动指在关节链中父物体运动时，子物体随父物体运动，而子物体运动时，父物体不受子物体影响。使用正向运动设置物体动作时，需要从父物体开始，逐层设置所有子物体的角度和位置。反向运动指在关节链中子物体运动时，与之相连的父物体一起运动。如果使用反向运动方式设置物体运动，只需要设置子物体的位置和角度，父物体将自动调整角度和位置。
（二）为元件实例添加骨骼
创建骨骼动画的第一步是定义对象的骨骼。“骨骼工具”可以向影片剪辑元件实例、图形元件实例和按钮元件实例添加骨骼，每个元件实例可添加一个骨骼。
添加骨骼前，需要在舞台上排列好元件实例，向元件实例添加骨骼后，系统会创建一个链接实例链，链接实例链可以是线性结构或分支结构。
【例9-1】 骨骼动画
（1）新建一个Flash文档，并选择ActionScript 3.0，命名为“骨骼动画.fla”。
（2）选择“矩形”工具，在舞台上绘制一个基本的形状并把它转换成图形元件，命名为“矩形”。
（3）将刚绘制的矩形在舞台上复制几个实例。
（4）在“工具”面板上选择“骨骼工具”，从第一个实例拖向下一个实例把它们连接起来。当松开鼠标时，在两个实例中间将会出现一条实线来表示骨骼段。
（5）重复步骤（4），把相邻两个实例都用骨骼连接起来了。
（6）在“工具”面板上选择“选择工具”，拖动链条中的任意一节骨骼，可改变舞台上所有实例的位置和状态，如图9-4所示。
（三）为形状添加骨骼
使用“骨骼工具”还可以向形状或绘制对象内部添加骨骼。
为形状添加骨骼之前，必须先在舞台上绘制形状并选择所有需要添加骨骼的形状。
【例9-2】手臂
（1）新建一个Flash文档，命名为“手臂.fla”。
（2）将素材文件夹中的“手臂.jpg”导入到库，将该图片拖动到舞台，并执行“修改”→“位图”→“转换位图为矢量图”，将手臂图片转换为矢量图。
（3）使用“选择工具”选定手臂图形。
（4）选择工具箱中的“骨骼工具”，从手臂上部肩关节处向肘关节处拖动鼠标，制作上臂骨骼。
（5）选择骨骼工具，分别由手臂肘关节处到腕关节处，由腕关节处到手心处拖动鼠标，添加骨骼。
（6）使用“选择工具”分别移动上臂、前臂和手，改变手臂状态，查看手臂运动效果，如图9-7所示。
任务二 编辑骨骼
创建骨骼后，可以选择创建的骨骼，并对骨骼以及关联的对象进行编辑。本任务重点介绍对常见的骨骼如何编辑。
（一）编辑骨架和对象
使用“选择工具”单击骨骼将选定骨骼，选定的骨骼用蓝色显示，骨架中的其他骨骼用红色显示，使用“选择工具”双击骨骼，可以选定所有骨骼。选定骨骼后，“属性”面板中将显示选定骨骼的属性。其中，按钮可以用来选择“上一个同级”、“下一个同级”、“子级”和“父级”骨骼。
单击姿势图层中包含骨骼的帧，可以选择整个骨架以及相关元件实例，属性面板中显示骨架属性，如图9-9所示。
单击与骨架相连的元件实例，可以选择连接到骨骼的元件实例，此时属性面板中显示元件实例属性。
要改变骨骼的位置，可以拖动骨骼，对应骨骼和关联的元件实例以及子级骨骼将绕关节点旋转。如果要将某个骨骼与其子级骨骼一起旋转而不移动父级骨骼，需要按住Shift并拖动该骨骼。
拖动与骨骼连接的元件实例，可以使元件实例绕父骨骼关节点旋转。
选定骨骼后按Delete键，可以将骨骼及其所有子级骨骼删除。如果要删除所有骨骼，则需要选定IK形状或元件骨架中的任何元件实例，执行“修改”→“分离”命令。
为元件实例创建骨骼连接时，元件实例的变形点会自动移动到骨骼连接点上。若要改变骨骼头、尾部的位置，需使用“任意变形工具”调整元件实例的变形点。
按住Alt键拖动元件实例或使用“任意变形工具”拖动元件实例可以单独移动元件实例而不影响其他元件实例，此时骨骼连接点也将和元件实例一同移动。
（二）约束联接
为对象创建骨骼后，Flash默认骨骼可以做任意角度旋转，不能沿X、Y轴移动。但在骨骼动画中有时需要限制骨骼的动画，例如手肘关节运动时，骨骼应该限制在一个角度范围内旋转。如果要使骨骼完成更逼真的运动，可以在骨骼的“属性”面板中设置IK运动约束，启用、禁用和约束骨骼的旋转角度、沿X或Y轴的运动距离以及骨骼运动速度。启用X轴或Y轴运动时，骨骼可以不限度数地沿X轴或Y轴移动，而且父级骨骼的长度将随之改变以适应运动。
（三）编辑IK形状
向形状内部添加骨骼后，所有的形状会转换为IK形状并和骨骼一起移动到新的姿势图层中。如果要改变骨骼的位置，可以使用“部分选取工具”移动骨骼的端点。如果要改变IK形状，则需要使用“部分选取工具”或“钢笔工具”对IK形状边界线进行修改。
使用“部分选择工具”单击IK形状边界，会出现蓝色边界和控制点。此时，拖动控制点可以改变IK形状。单击边界线上没有控制点的部分，可以添加新的控制点，新控制点将自动与离它最近的骨骼绑定。
【例9-3】带有骨骼的花
（1）新建一个Flash文档，命名为“带有骨骼的花.fla”。
（2）在舞台中央使用“多角星形工具”绘制一个五角星。
（3）选定五角星，使用“骨骼工具”在五角星中创建骨骼。
（4）使用“部分选取工具”单击选择五角星轮廓，在选定五角星右角上边沿上的控制点并拖动，将直线边改变为曲线。采用同样的方法拖动五角星右角下边沿上的控制点及控制点的滑杆，将右角的另一条边改为曲线所示。
（5）使用“添加锚点工具”单击五角星轮廓，在五角星上角轮廓两侧轮廓线上分别单击，添加控制点。使用“部分选取工具”分别拖动添加两个控制点，改变五角星上角轮廓。
（6）重复步骤（4）和（5）的操作，将五角星其余三个角也修改为曲线边，完成带有骨骼的花朵，如图9-14所示。
（7）保存并测试动画。
（8）使用“选择工具”分别移动左、右侧骨骼，各花瓣上的控制点将跟随骨骼移动，从而影响图形轮廓，如图8-15所示。
（四）将骨骼绑定到形状点
在IK形状中，形状边沿上的控制点自动与离该点最近的骨骼绑定，骨骼的运动带动控制点运动，从而使IK形状发生改变。但这种默认绑定方式有时使IK形状不能按正确的方式改变，这时就需要使用“绑定工具”对骨骼和形状控制点之间的连接进行修改，使骨骼能正确控制形状的变化。
使用“绑定工具”单击骨骼，可以看到IK形状的边沿线和控制点，如图9-16所示。其中，选定的骨骼用红色线表示，只绑定到选定骨骼的控制点用黄色正方形表示，除了绑定到选定骨骼，还绑定到其他骨骼的控制点用黄色三角表示，未绑定到选定骨骼的控制点用蓝色正方形表示。此时按住Shift键并单击蓝色控制点，或按住Shift键由选定骨骼向蓝色控制点拖动，可以将未绑定到选定骨骼的控制点绑定到选定骨骼上。按住Ctrl键并单击黄色控制点，或按住Ctrl键由选定骨骼向黄色控制点拖动鼠标可以取消选定骨骼和控制点之间的绑定。
使用“绑定工具”单击控制点，可以选定控制点，此时控制点用红色显示，与该控制点连接的骨骼用黄色显示。此时将控制点向其他骨骼拖动，可以将控制点绑定到其他骨骼。按住Shift键的同时单击其他骨骼可以向控制点添加绑定的骨骼。按住Ctrl键单击黄色骨骼可以取消控制点与骨骼的绑定。
任务三 制作骨骼动画
“骨骼动画使运动的角色更趋于真实性, 增加观众的真实感，骨骼动画制作时，只需移动模型中的一根骨骼,顶点将能随之而变。本任务重点介绍如何创建骨骼动画。
（一）在时间轴中对骨架进行动画处理
在对象上创建IK骨架后，可以在姿势图层添加帧、关键帧，创建骨骼动画。姿势图层中的关键帧称为姿势。右键单击姿势图层中的帧，执行“插入姿势”命令，或选定姿势图层中的帧后按F6键，可以在姿势图层中添加姿势。在姿势中使用“选择工具”重新定位骨架在舞台上的位置后，Flash将在两个姿势之间自动产生基于骨骼位置的补间动画。
【例9-4】摆臂动画
（1）打开例9-2中建立的“手臂.fla”文件。
（2）分别在时间轴“骨架_1”层第30帧和第60帧右击，在弹出的快捷菜单中执行“插入姿势”命令，插入两个姿势帧，姿势帧之间的帧变为绿色，系统自动生成补间动画。
（3）选择第30帧的姿势，在舞台上修改手臂骨骼位置，改变手臂动作。
（4）播放动画，手臂摆动动画如图9-18所示。
（二）在骨骼动画中实现其他补间效果
在IK姿势图层中只能对骨骼位置产生补间动画，对对象的其他属性无法产生补间。所以如果要对IK对象的位置、变形、色彩效果或滤镜等属性进行补间需要将骨架及其关联的对象包含在影片剪辑元件或图形元件中，在使用“插入”→“补间动画”命令和“动画编辑器”对元件的属性进行动画处理。
【例9-5】手臂前进动画
（1）打开例9?4中建立的“摆臂.fla”文件。
（2）选择“骨架_1”图层第1帧，在舞台上使用右键单击手臂，执行“转换为元件”命令，将手臂摆动动画转换为元件，命名为“摆臂”。此时主时间轴上原来的“骨架_1”图层自动由姿势图层转换为普通图层。
（3）删除主时间轴上的“骨架_1”图层。
（4）双击“库”面板中的“摆臂”元件，在图层1中绘制一个矩形。使用“任意变形工具”将矩形修改为梯形，制作人物身体。在图层1第60帧处插入帧，使身体画面持续到第60帧。
（5）单击舞台左上角“场景1”按钮，返回主场景。
（6）在主时间轴图层1第1帧中将手臂移动到舞台左侧。在第120帧处插入关键帧，并将手臂移动到舞台右侧。
（7）执行“插入”→“传统补间”命令，创建手臂从左向右前进动画，如图9-19所示。
（三） 制作可以使用ActionScript 3.0进行动画处理的骨架
如果计划使用ActionScript 3.0对IK骨架进行动画处理，在姿势图层中就不能创建骨骼动画，即骨架在姿势图层中只能有一个姿势，且姿势应位于姿势图层的第1帧中。另外，使用ActionScript 3.0只能控制连接到形状或影片剪辑实例的IK骨架，无法控制连接到图形或按钮元件实例的骨架。
制作可以使用ActionScript 3.0进行动画处理的骨架步骤如下。
（1）使用“选择工具”，在姿势图层中选择姿势帧数。
（2）在属性面板的“类型”选项中选择“运行时”。
（3）在ActionScript 3.0中使用属性面板中显示的骨架名称对骨架进行引用和动画处理。
六、上机实战
【例9-6】皮影
（1）新建Flash文档，名为“皮影.fla”，将文档属性中的背景色设为红色。
（2）执行“文件”→“导入”→“导入到库”，将素材“皮影”导入到库。
（3）新建影片剪辑元件，名为“皮影人物”，将“皮影”拖入影片剪辑元件。
（4）执行“修改”→“分离”，将皮影图片分离打散，选择“套索工具”中的“魔术棒”，去除皮影图片的背景。
（5）选择“部分选择工具”，切割人物的各部分，分别转换为影片剪辑元件。
（6）将各部分的影片剪辑放置好，然后选中所有元件，再将其转换为影片剪辑命名为“皮影”。
（7）选择“工具箱”中的“骨骼工具”按钮，然后在右手上创建好骨骼。
（8）选择骨架1，将其命名为“右手”，并在该图层中的第15帧和第30帧处分别插入姿势。
（9）选择第15帧，修改皮影右手臂的位置。
（10）重复步骤（6）～(8),分别给皮影的右脚、左脚和头部创建骨骼。
（11）返回场景1，在图层1上绘制背景。
（12）新建图层2，将影片剪辑元件“皮影”拖入舞台，放置在舞台最右边，在图层1的第100帧处插入帧，在图层2的第100帧处插入关键帧。
（13）选中图层2的第100帧，将皮影元件平移到舞台最左边，选择图层2的第1帧，创建传统补间动画。
（14）保存并测试影片，“皮影”动画效果如图9-25所示。
PAGE

展开更多......

收起↑