Flash动画片制作完全分解──基本的动画制作(1)

网络与通信

通过运用上一节学习的知识,并经过一段辛苦的手绘过程,我们现在已经拥有了将在动画短片中使用的所有素材。但是这些素材只是一张张静止的矢量图片而已,这样可不行,怎样才能使它动起来呢?
由于篇幅所限,笔者不可能将所有的动画片段的制作都讲解一遍,大家在学习的时候也不应当生搬硬套,而应当将重点放在掌握制作的方法上。因此,笔者将从帧动画、Motion动画、Shape动画以及AS动画这4种基本动画类型中各选取一例进行详细的分解。

帧动画

我们以“汉良说话”的动画片段为例进行讲解。此动画的效果为:汉良的嘴不停地开启、闭合,并配以一定的手势。

步骤1:

打开Flash MX,在Library面板中找到我们绘制好的矢量图“汉良”((图1))。鼠标双击它,开始编辑。

图1
图1

步骤2:

在时间轴上我们可以看到,在绘制这个图像时我们已经将任务的各个关键部位分别绘制在不同的层上,这样可以有效地提高我们工作的效率。在每一层的第5帧上按下键盘F6键,新建一个关键帧((图2))。

图2
图2

步骤3:

鼠标右键单击“嘴巴”这一层,在弹出的菜单中选择Hide Other可以将其他图层全部隐藏起来,以方便我们对当前层的编辑((图3))。这时我们可以看到在屏幕上只显示出嘴巴的形状。

图3
图3

步骤4:

鼠标单击第5帧,开始对这一帧进行编辑。在工具栏上选择Arrow Tool,将整个嘴巴的轮廓全部选中,按下键盘上的Del键删除。再在工具栏上选择Pencil Tool绘制一条曲线(即嘴唇闭合时的形状),注意此曲线的位置与删除掉的嘴巴的位置应当相同((图4))。

图4
图4

步骤5:

同样的方法开始编辑“脚趾”层,单击第5帧,首先选择右脚的脚趾图形,然后在工具栏选择上Transform Tool((图5)),拖曳边框顶点将此图形位置改变为水平((图6))。

图5
图5
图6
图6

步骤6:

在保证“脚趾”层没有设置为Hide状态的情况下,鼠标单击“身体”层上眼睛图标使其处于显示状态,这样我们可以参考“脚趾”的位置来修正“身体”的位置((图7))。单击“身体”层的第5帧,可以看到由于我们已经修改了“脚趾”的位置,所以“身体”与“脚趾”之间出现了空白,现在要做的就是将它们重新连接起来((图8))。

图7
图7
图8
图8

步骤7:

在工具栏上选择Arrow Tool,拖曳“身体”图形的裤脚处的框线,尽量保证线条的柔和,将它向下拖曳,再进行一些细节的修改,最后的效果如((图9))所示。

图9
图9

步骤8:

对于其他图层不需要进行大的改动,但是要注意的是,由于我们制作的这个动画效果是人物在晃动自己的身体,因此其他部分应当有些许的位置与角度变化才会显得真实,我们只需要将其他图层的元件使用Transform Tool 稍稍旋转一下即可。最后如((图10)0)所示。你可以按下键盘上的“Shift+Enter”来测试动画片段的播放。

图10
图10

Shape动画

我们以“太阳”的动画片段为例进行讲解。此动画的效果为:太阳火焰的形状不断发生变化,如同随风而动。在这里要提醒大家的是Shape动画要求必须使用图形进行制作,所以在制作前请一定确认你编辑的是图形还是元件(Symbol)。

步骤1:

在Library中双击“太阳”元件,开始进行编辑((图11)1)。在第15帧与30帧建立关键帧((图12)2)。

图11
图11
图12
图12

步骤2:

鼠标单击第15帧,在工具栏上选择Arrow Tool,将鼠标移动接近太阳火焰的边缘,这时鼠标的箭头下将出现一个圆形弧线,这表明我们可以拖曳鼠标改变图形的形状,你可以多试几次以掌握其中的规律。一般来说,在按下鼠标后向边缘外侧拖曳鼠标可以将图形的框线向外扩展形成弧状突起,而按下鼠标后向边缘内侧拖曳鼠标可以将图形的框线向内压缩形成弧状凹陷。

步骤3:

在完成以上的操作后,我们可以得到一个与先前完全不同的火焰形状((图13)3)。使用鼠标在第1帧到第15帧的任意一帧单击,然后点击工作区域下方的Properties面板上的Tween后的下拉框,在弹出的下拉菜单中选择Shape((图14)4)。这样就在第1帧到第15帧间建立了Shape动画。同样的方法在第15帧到第30帧间建立Shape动画。

图13
图13
图14
图14

步骤4:

我们完成了“太阳”动画的制作,按下键盘上的“Shift+Enter”来测试动画片段的播放,可以看到太阳火焰的形状不断发生变化,很有点飘逸的感觉。

总结

在这一节中我们学习了如何制作帧动画与Shape形变动画。大家应当多加练习,搞清楚动画的实现原理。下一节我们将详细讲解Motion动画与AS动画片段的制作。
编后:本连载教程作品示范地址:http://qqflash.tencent.com/cgi-bin/qqflash/show.cgi?id=295