用flash创建形状补间动画

计算机动画制作(三)

——用flash创建形状补间动画

教材分析

本课教学内容是教材第四章第三单元·“动画制作”中的“制作基本动画”第三课时－－“形状补间动画”。“动画制作”对高一的学生来说还是有一定难度的，但学生的兴趣非常浓厚；本课主要学习形状补间动画的制作方法，比较形状补间动画与动作补间动画的区别；形状补间动画是本单元的教学重点和难点，其中掌握“形状补间动画”的制作方法及“形状补间动画”与“动作补间动画的区别”又是本节课的重点和难点。

教学内容分析

本节课的教学内容为形状补间动画制作，针对实际情况，具体将以3个任务围绕教学目标开展教学：任务1：“图形—图形”间的形状补间动画——圆变矩形；任务2：“图形—文字”间的形状补间动画；任务3：“文字—图片”间的形状补间动画。三个任务的设计代表不同的类型，切合学生的学习思路，激发学生的学习兴趣，由浅入深，层层提高。

教学目标

一、知识与技能：

1、理解形状补间动画的概念，掌握其制作方法；

2、掌握将位图转换为矢量图的操作方法，了解位图在形状补间动画中为何要矢量化；

3、认识形状补间动画与动作补间动画的区别

二、过程与方法：

通过自主探究、任务驱动，发现问题、解决问题，来掌握形状补间动画的制作方法。

三、情感态度与价值观：

培养学生的动手能力、想象力、创造力、审美能力及互助精神。

教学重难点

重点：形状补间动画的制作方法；形状补间动画与动作补间动画的区别；掌握位图矢量化方法

难点：形状补间动画的制作方法；形状补间动画与动作补间动画的区别；了解图片矢量化的原因

教学过程与设计意图

情景导入

教师复习提问创建移动渐变动画的基本步骤。

第一步：创建起始帧；第二步：创建结束帧；第三步：创建动作补间。

补间动画有两种，我们刚才看到的只是补间动画中的一种，我们来看属性面板中的内容，这种动画叫做动作补间动画或者叫动画补间，还有一种叫什么补间动画呢？

教师演示：补间属性面板中的“补间”选项，形状补间动画。（动作补间，形状补间）教师播放“奥运”和“翻书”的补间小动画给学生欣赏,由此引入形状补间动画。学生回忆所学过的内容，了解本课的任务。

设计意图：激发学生学习本节课的兴趣。

讲授新课

师：那么，现在就请同学们先跟我去认识一下什么是“形状补间动画”、它的功能以及特点(课件) ；

1.形状补间动画的概念：使一个对象逐渐变成另一个对象，实现两个对象间(颜色、位置、大小、形状)的平滑过渡。

2.形状补间动画的功能：

?主要用于复杂的，不规则的变形.

?也可以用于大小缩放

?颜色与透明度的变化

3.形状补间动画的特点：

?帧区域是淡绿色的

?开始帧和结束帧必须是关键帧.

?形变动画中关键帧对象不能是元件或群组,应用之前一定要先把元件打散(分离).

?变形动画库中不会产生补间元件.

?变形过程的关键帧对象要尽量平滑过度,减少折角,可减少变形纠结现象.

设计意图：让学生有概念认识

师：了解了概念以后，我们一起来制作一个简单的形状补间动画。

（讲解）以“椭圆—矩形”为例简单讲授制作过程。

(提示) flash中绘制的图不需要转化为元件，因为它要发生形状的变化。

教师在讲授“椭圆—矩形”时，先故意犯错，等学生纠错后再讲正确方法（区分移动补间动画的制作方法）；

设计意图：让学生对形状补间动画的制作过程有系统的认识，故意犯错可以让学生记忆加深，学生对老师的错误会记得很牢。

师：下面请同学们完成任务一，教师先示范一次。

生：完成任务一：实现“图形—图形”间的形状补间动画，并以“自己的姓名1.fla”

保存在桌面(形状可以自选)。建议：制作矩形——>五角星间的形状补间动画。

制作五角星提示：点击工具箱中（长按左键）选择“多角星形工具”，然后打开“属性”面板，点击“选项”，修改“工具设置”属性对话框。图形的颜色设置可以打开“窗口”菜

单，点击“设计面板”→“混色器”自由选择颜色。

设计意图：让学生掌握基本的形状补间动画制作方法。

师：我们刚刚制作的是两个图形之间的变换，那图形能不能变成文字呢？是否只要改一下最后一个关键帧的内容就可以了么？

我们一起来试一试。结果发现时间轴上出现虚线，提示补间动画设置不成功。这时将最后一个关键帧应用“分离”命令后即可变成实线。

生：完成任务二：实现“图形—文字”间的形状补间动画，导出影片并以“自己的姓名2.swf”保存在桌面。

(疑难帮助):查看FLASH菜单栏：“帮助”→“使用Flash创建动画”→“关于补间动画”

对象“分离”提示：首先使用“选择工具”（退出“文本工具”），选中时间轴上需要创建形状补间动画的关键帧，再右键单击舞台上的对象→“分离”；

导出影片提示：“文件”菜单→导出→导出影片

生：完成任务三：实现“图片—文字”间形状补间动画，导出影片并以“自己的姓名3.swf”保存在桌面。（“劳动最光荣”图片变成“节日快乐”文字。）导入图片提示：

1、打开“文件“菜单→“导入”→“导入到库”，选择文件并打开；

2、打开：“窗口”菜单→“库”面板，将需要的对象拖到舞台。

师：请一位学生演示自己的作品：对该作品进行点评。

排难解疑：

师：在完成任务三时，很多同学都碰到了问题：

问题1、文字、图片的形状补间动画无法实现？

(解难)：教师以“劳动最光荣”图片变成文字“节日快乐”为例讲解图片、文字必须分离打散。

图片从库中拖出来后必须执行将位图矢量化。(注意为了使形状补间动画更加逼真，请将不需要的点状删除)。

问题2：位图为何要矢量化？

(解难): 有的同学非常爱动脑筋，导入位图与flash绘制的图片不一样吗？干嘛要矢量化，这是因为位图用二维象素矩阵描述，而矢量图用指令集合描述；他们的存储结构不同，因此必须矢量化，这样才能进行形状补间动画。

设计意图：归纳后，避免学生在这些问题上再次出错，而且能有一个系统的了解。

师：(展示) 教师再展示几副优秀作品

小结

师(提问) 形状补间和动作补间的区别？

请学生回答，然后教师总结。(课件)

这节课我们学习了图形、文字、图片之间相互变化的形状补间动画，我们一起总结一下创建形状补间动画的方法及我们需要注意的地方：

分别创建开始与结束关键帧（两个对象），注意结束关键帧是空白关键帧，动画的对象必须要“分离”打散；

单击两个关键帧之间的任何一帧，在帧属性面版中“补间”→“形状”；

形状补间动画不能用“创建补间动画命令”，若不小心应用, 会出现虚线，可将首尾两个关键帧应用“分离”命令，再将库中多余元件删除.也可用历史记录撤消操作。

教学反思

在本节课中，学生学习的兴趣和积极性很高，充分领略到了Flash软件的神奇。在老师的引导下学生能积极主动参与到教学中来，学生对形状补间动画原理的理解掌握较好，在自主探究、动手实践中，基本掌握了形状补间动画的制作要领和步骤。

本节课存在的问题是部分学生在进行文字形状补间动画时急于动手操作，忘记对文字进行二次分离；虽然在学习中学生能模仿老师进行操作，但学生的想象力和创新精神还不够，对问题举一反三的能力还需要进一步培养。

教学建议：这堂课采用了“教师讲，学生听”的传统模式，是"学"跟着"教"走，学生很容易在新鲜感和兴趣感过去之后产生枯燥的消极想法。如果在后面再加一个有趣的实例如“花儿开放”等，以分组合作的方式让学生自己去探索完成，效果可能会更好些。