师:同学们,今天我们学习初三年级广州版信息技术第一章动画制作的第二节——形状补间动画。本节课我们有以下学习目标:了解Flash补间动画与传统逐帧动画的区别;掌握形状补间动画的制作方法,知道其对象是离散的,且至少要两个关键帧;理解空白关键帧、延长帧、普通帧、过渡帧的概念;掌握形状补间动画速度改变、暂停、文字形变等制作技巧;了解Flash绘图工具的使用。
上节课我们学习了逐帧动画,它是模拟传统手工绘制一系列画面,连续显示产生动画效果。比如小孩跑步的例子,逐帧动画每一帧都是有画面内容的关键帧,需要绘制每一帧画面,适合制作复杂细腻的动画,像小鸟飞翔、人的行走等。
那有没有简便的动画制作方法呢?我们来看这个从正方形变成圆形的形变动画。从动画文件能看到,这个动画只有开始和结束两个关键帧,中间的帧显示呈箭头形式,这种动画我们叫补间动画。补间动画主要通过输入和编辑关键帧,计算和生成中间帧,定义和显示运动路径等实现动画效果。像这个正方形变圆形的形状渐变,我们只需定义好相邻两个关键帧,分别在开始和结束帧处画好正方形和圆形,通过创建补间动画方式就能自动完成两个关键帧之间的渐变过程。
对比这两个例子,逐帧动画时间轴上每一帧都是有画面内容的关键帧,每一帧画面不同,且每个关键帧画面都有更改,工作量大,Flash为保存每一帧完整的值,生成的文件很大。而补间动画只定义相邻两个关键帧,中间渐变过程由计算机自动生成,所以Flash只保存帧之间更改的值,最大限度减少了生成文件的大小。
Flash可以创建两种类型的补间动画:形状补间和动画补间。形状补间是由一种形状变为另一种形状;动画补间是指定对象的位置、大小、颜色等性质改变的动画。这节课我们主要学习形状补间。
话说当年孙悟空大闹天宫和二郎神斗法回到花果山,孙悟空精通72变,看看他变的水果二郎神能不能认出来。下面我们用形状补间动画帮孙悟空制作这个魔术水果。先分析任务步骤,这个动画是从苹果变成西瓜,再变成香蕉。我们需要定义好三个关键帧,分别是第一帧的苹果、第10帧的西瓜和第20帧的香蕉,然后在各个关键帧之间创建形状补间,最后增加背景底层。
首先绘制各关键帧水果。在图层一第一帧画苹果,单击新建文件,单击文件保存,选择保存路径,改名为“魔术水果.fla”保存文件。单击第一帧,长按左键点击矩形工具,选择椭圆工具,调出窗口菜单的颜色面板,单击笔触颜色,设置边框颜色为黑色,单击填充颜色类型选择放射状,双击第一个滑块,单击白色,双击第二个滑块,设置成红色,拖动调整红色滑块的位置,这样苹果的颜色和高光点颜色就设置好了,能看到填充颜色已是设置好的放射状颜色样本。在舞台中拖动左键画出一个红色圆形,单击部分选取工具,单击选中红色圆形,拖动圆边框的上端控制点,把圆形拉成心形。选取颜料桶工具,在圆形上单击调整高光点的位置。单击刷子工具,选择填充颜色为黑色,调整刷子大小,画出苹果的蒂,苹果就完成了。
接着在第10帧绘制西瓜。选择第10帧,按右键选择插入空白关键帧,选择椭圆工具,设置笔触颜色为黑色,填充颜色为无色,这样就能画出边框是黑色没有填充颜色的椭圆形状。在舞台拖出一个西瓜轮廓,画上瓜脐。选择铅笔工具,把铅笔模式设置为墨水,在西瓜内部画上不规则的瓜纹。用颜料桶工具给西瓜填上颜色,设置填充颜色为较深的绿色,设置颜料桶工具的空隙大小为封闭大空隙。填充瓜纹和瓜脐颜色,设置填充颜色为浅一点的绿色,用颜料桶一一填充瓜皮部分的底色,西瓜就完成了。
最后在第20帧绘制香蕉。在第20帧按右键插入空白关键帧,选择刷子工具设置,填充颜色为黑色,刷子大小选择合适的大小,在舞台用刷子工具画出香蕉的形状,然后将填充颜色改为黄色,用颜料桶工具给香蕉填上黄色,香蕉就画好了。
绘制好三种水果后,给三个关键帧之间设置补间动画。点击选择工具,在第一帧和第10帧之间任意一帧,右键选择创建补间形状,就能看到完成了苹果到西瓜的形状补间动画。同样地,将第10帧和第20帧之间设置补间形状,可以看到时间轴上分别出现从前一个关键帧指向下一关键帧的箭头形状,补间的时间轴背景颜色变成浅绿色。
最后给水果渐变添加背景。选择文件导入到库,把本地电脑里的图像文件导入到Flash中,打开库面板,能看到已经导入到库里的背景图片。在时间轴左下角按新建图层按钮,将新建的图层拖到最下面一层,双击图层名称,修改图层名称为“背景”。选择背景层第一帧,从库面板中把背景图片拖到舞台,在属性面板中输入图片的宽度和高度,按回车确认,用选择工具调整图片位置,使背景图适合舞台的大小。回到水果渐变层,选择关键帧拖动调整水果的位置,用任意变形工具调整水果的大小。
把鼠标定位到第一帧,按回车键,就可以在文件内播放动画。最后单击文件菜单的保存命令,保存动画文件。
我们总结一下形状补间动画的制作步骤:首先定义开始和结束两个关键帧,把形变的两个形状编辑好,在两个关键帧之间创建形状补间。
有的同学可能觉得水果变化速度太快,怎么改变形状补间的变化速度呢?同学们还记得上节课学过的帧率吗?帧率就是单位时间内播放帧的多少,原来帧率是每秒12帧,把帧频数值调低到每秒6帧,能看到每秒播放的图片数减少了,动画播放就变慢了。所以可以通过改变帧频的数值来改变形状补间的变化速度,帧频越大,动画越快;帧频越小,动画越慢。播放速度和播放的帧数时间有关,还有什么方法可以改变这两个参数来改变变化速度呢?
没错,左边的水果渐变动画持续时间是20帧,如果把动画过程延长,同样的动画过程用更多的帧数来完成,动画持续时间就长,速度就会相应变慢。具体操作如下,选中第20帧拖动到第60帧,再选择第10帧,拖动到第30帧,这样动画在时间轴上延长了,速度明显变慢。所以改变形状补间的变化速度有两个方法:一是改变帧频数值;二是延长或缩短形状补间动画在时间轴上的帧数。
再来看看这两个动画对比,左边水果切换太快,刚变成第二种水果,马上又开始形变。怎样才能实现在一种水果变成另一种水果之前,先停留一会再继续变形呢?
