“Flash动画的制作”教学案例

“Flash动画的制作”教学案例

[案例引言]：

《高中信息技术课程标准》提出：中小学信息技术的培养目标是“培养学生的信息素养”，就高中阶段而言，信息素养的培养包括三个层面的内涵：1、知识层面，是传统文化素养的延续和拓展。2、意识层面，是对信息与信息技术的认识。3、技术层面，是对信息技能的要求，对信息源及信息工具的了解及运用。

我在中国地图版的《信息技术（必修二）——多媒体技术的应用》的教学过程中，由于多媒体本身的表现丰富，发现学生的求知欲强，学习兴趣浓。但是也有部分学生因为信息技术基础薄弱或习惯于文化课的学习，在操作技术学习方面的方法和能力有所欠缺。在上教材第三单元第二节《音乐动画——梁祝》的实例前，我更担心，因为教材的内容宽泛，前面章节辅垫较少，要想学好这节Flash的综合实例并熟练掌握谈何容易？课前又不好让学生预习，光看书不操作根本不行，况且书上flash还是英文版。怎样教？引导学生怎样学？这两个问题如果处理不好，学生就会产生畏难情绪丧失信心，上了不如不上。所以我打算分为两三个课时进行讲解，自己又特意精心设计了两个实例。

[案例描述]：

上课了，我打开《音乐动画——梁祝》的最终SWF格式效果动画，本想这个展示能引起学生对这节课的关注，结果教室内发出活跃的哄然大笑。

师：“为什么笑？”

生1：“蝴蝶像纸片一样动作僵硬，飞行时有点像被风刮得发飘。”

生2：“这两个蝴蝶最后应该飞出画面，让人留点悬念，在边缘上扑闪翅膀飞不走，非常滑稽，需要点击才动”。

生3：“动画的背景素材模糊不清”。

师：“那你们会不会做呀？你们是否知道这些缺点都是能调整的吗？”

生(跃跃欲试)：“怎么做？老师快做!在哪里调整？”

我本打算激发兴趣后按部就班地演示这个实例的操作步骤，可当时突然改变了主意，认为这个“包裹”暂不打开。

师：“是同学们觉得不满意，这个我想留给大家自己调整！”

生：“那我们没有学呀！”

师：“我先学其他两个类似的例子，完了每人再把这‘受伤’的蝴蝶调整好，使得它‘畅快飞舞’，好不好？”

生：“好！”

大家异口同声，声音洪亮，聚精会神地看着我的“极域”演示。

[具体过程]：

在以往演示实例的过程中，学生对一些概念的理解不透彻致使操作中漏洞百出，这次还要着重强调一些基本概念。其实要把这两三节课的任务完成，学生还是存在一定的难度，因为知识点太多，比如对象的“舞台级”和“遮挡级”的概念（即图像为何分离为何组合）、工具箱中主要各个工具的使用、动作动画过滤帧的建立、引导的生成、影片剪辑和按钮元件的创建、在动作面板中脚本的理解和音乐素材的导入，这些以前学生都做过，但掌握不太扎实。根据实例的需要，这节课只我抓住两个主要关键点：1、引导；2、影片剪辑；其他是为拓展知识面以培养信息素养。以下是实例演示的具体步骤：

实例1:秋水长天

(1)导入素材

①启动Flash8软件,新建一个名为“秋水长天”的动画文件；

②分别将大雁素材和背景素材导入到角色库中。

⑵创建“飞雁”的影片剪辑

①在“插入”下拉菜单中选择“新建元件”，名称“飞雁”，类型为“影片剪辑”（如图1）。②进入“飞雁”的影片剪辑的编辑环境，在时间轴的前4帧中插入4个空白关键帧，分别将bird1.bmp、bird2.bmp、bird3.bmp、bird4.bmp插入的第1帧、第2帧、第3帧和第4帧。③在“窗口”下拉菜单中选择“对齐”选项，打开右边的“对齐”面板，选择“相对于舞台”图标使其处于作用状态，然后分别对这四个关键帧中的图片进行“水平居中”和“垂直居中”对齐，使每一个对象处于舞台中心（图2）。

④在四个动作帧上分别插入一个帧，这样“飞雁”的动作看上去更舒缓。到此，“飞雁”的影片剪辑就做好了，可以作为一个元件在场景中被调用。

⑶制作初步动画

①切换至“场景”状态，将名为qiushui.jpg的图片载入“图层1”上，相对于舞台匹配宽和高，左对齐和上对齐（如图2），在第60帧再插入帧。并把此图层更名为“背景”。②新建图层，更名为“大雁”。将角色库中已做好的“飞雁”元件载入这个图层，并把它调至舞台的左边。再在第60帧插入关键帧，把它调至舞台右端。选择第一帧，创建补建动画。③按Ctrl+Enter键测试动画效果，可调整位置直至满意为止。

⑷创建引导层

①在“大雁”图层上创建运动引导层，更名为“引导大雁”层，在此图层上绘制一根直线，并用工具箱中的“选择”工具对其调整至一定弧度的曲线（如图3）。

②在“大雁”图层上的第1和第60帧中分别移动“飞雁”元件直至中心位置压在引导曲线上。③分别调整首尾帧“飞雁”元件的方向，使之与曲线方向相切，并“调整到路径”。③测试引导动画的效果（如图）。

⑷创建大雁倒影

①在“背景”层上面新建一个图层，更名为“大雁倒影”层，将“飞雁”元件载入该图层。②选用工具箱中的“任意变形工具”将该元件上下翻转，并设置颜色的Alpha值为40%（如图）。③在“大雁倒影”层上第60帧插入关键帧。并将首尾帧对象与“大雁”层首尾帧对象左右对齐。④如“大雁”层创建引导层一样，创建“引导大雁倒影”层，弧度方向与之相反。

⑸创建波纹效果

①将所有图层锁定以避免误编辑，在“背景”层上再新建一个“波纹1”的图层，再将“qiushui.jpg”载入该层，与舞台匹配大小并对齐。

②在“修改”下拉菜单中选择“分离”将这幅图片进行打散处理。③用工具箱中的“椭圆工具”圈选分离后的图片中大雁对象下落时与水面接触的一部分，将其他部分删除，还要将笔触色删除（本操作为绿色的笔触）（如图）。④将椭圆部分的水面转换为图形元件（如图），并把它从第1帧移动到大雁对象下落时的时间帧。⑤在该帧的后面适当位置插入关键帧，缩放其大小至200%，并将其颜色的Apha值设为0。③创建补间动画，这样就有水纹扩散开来并消失的效果。④再建若干个图层，将该段时间帧依次复制，逐次向后调整位置，并建一个“波纹”文件夹，将四个波纹图层放入该文件夹中便于管理。

⑹添加字幕

①在场景中新建一个动画图层，设置与背景相同的帧数；

②将文字运动路径设置为自下而上的直线，使文字实现由屏幕下方上升并翻转的效果直至下落的效果。

⑺添加按钮

①按Ctrl+F8创建一个“重放”的按钮元件。②在按钮元件的编辑界面中的“弹起”帧绘制一个颜色为绿色逐变的椭圆，并输入文字“重放”，形成按钮的造型，如图。③在按钮元件的编辑界面中的“弹起”帧内插入关键帧，并修改椭圆和文

字的颜色，形成按钮造型（如果Flash8软件自带的按钮素材，则可通过执行“窗口”下拉菜单中“公用库”之“按钮”直接调用即可）。

④切换至“场景”编辑界面，新建一个名为“控制播放”的图层，将该层时间轴上的最后一帧设为关键帧，再载入前面制作的“重放”按钮，并调整其位置及大小，使其处于场景的右下角适当位置，和画面和谐统一。⑤选中动画的最后一帧，这里是“文字”图层的最后一帧，执行“窗口”下拉菜单之“动作”选项，或按F9，打开“动作”编辑面板。在“全局变量”的“时间轴控制”中双击stop，产生“stop();”代码（这时发现最后一帧上有“α”标记），可使动画播放到最后一帧时停止播放。⑥选中场景中的“重放”按钮，在“动作”编辑面板中添加一段交互行为的控制代码：on (release) { play();}

⑻测试作品、输出作品

按Ctrl+Enter键既可以测试动画景片，又可以将动画作品输出为SWF格式。执行“文件”“发布设置”，可输出SWF、GIF等格式的文件，如图。具体选择哪一种，主要取决于我们对动画文件的使用需求。能够合理地选择文件输出格式并输出成品，是最终完成一件动画作品的标志。

中断“极域”控制，让学生自己完成，强调要点：这个实例只要做好“飞雁”的影片剪辑并放置在图层上，做一个引导层，调整首尾帧的对象使其中心点压到引导线两端就基本完成任务了。学生经过相互比照，相互学习，举手提问，大部分学生这两点做得非常好！少数学生还做了大雁的倒影。整个演示讲解过程中我每到一个关节点就暂停下来让学生自己操作，然后到学生中间观察他们操作的情况，优先辅导主动提问或接受能力较强的学生以带动周围学生进步。从结果看，学生接受很快。

实例2:蝶舞花间

(1)导入素材

①用Photoshop将蓝色蝴蝶“butterflyB.jpg”通过“颜色替换”处理出一个红色蝴蝶“butterflyR.jpg”。

②启动Flash8软件,新建一个名为“蝶舞花间”的动画文件；

③分别将红蓝蝴蝶“butterflyR.jpg” 、“butterflyB.jpg”和背景图片“background.jpg”及背景音乐“lz2.mp3”导入角色库中。

⑵创建“红飞蝶”和“蓝飞蝶”的影片剪辑

①在“插入”下拉菜单中选择“创建新元件”选项，名称为“红飞蝶”的影片剪辑。

②在影片剪辑元件的环境里将红色蝴蝶“butterflyR.jpg”拖到舞台上，使其相对舞台水平和垂直都居中。并在“修改”下拉菜单中选择“分离”打散图像。

③在工具箱中先择“套索工具”之“魔术棒”选项，把图像外面的颜色选中，按Delete去掉颜色，使边缘透明（注意：有的时候边缘是白色的不容易看出来，换一个背景色就能看出是白色，也要去白。）④边缘颜色处理干净以后，选择“修改”下拉菜单中的“组合”，将图像重新组合成一个整体。⑤在第10帧插入关键帧。⑥再在第5帧插入关键帧。在工具箱中选择“自由变形工具”，按Alt键对称调整蝴蝶两翼，使两翼收缩；或者在“变形”面板中，调整宽度是原来长度是40%。⑦在关键帧之间插入“动作动画”，这样舞动翅膀的“红飞蝶”影片剪辑就做成了。⑧同样方法可以做“蓝飞蝶”的影片剪辑。

⑶制作动画

①切换至“场景”环境下，把背景图片“background.jpg”载入舞台，与舞台匹配大小并居中对齐，把这个图层改名为“花枝”层，在第100帧插入帧。

②新建图层，更名为“红蝴蝶”，在角色库中选择“红飞蝶”的影片剪辑载入该图层，选择“任意变形工具”结合Shift键等比例调整对象大小。在第100帧插入关键帧，并在舞台上移动对象的位置，在两个关键帧之间创建动作动画。按Ctrl+Enter测试是否飞舞并移动。

③创建引导层,命名为“引导红蝴蝶”层，选用工具箱的“钢笔工具”绘制不规则的样条曲线（如图）。④分别将“红蝴蝶“层的首尾帧对象移动至样条曲线两端，使对象的中心点压在样条曲线上。⑤用工具箱中的“任意变形工具”调整对象的方向，使之与曲线的切线方向一致。再将属性面板中的“调整到路径”复选框选中。⑥如上述方法一样，制作蓝色蝴蝶在舞台上按路径飞舞的动画（略）。

⑦为了使得蝴蝶飞舞更得逼真，让红蝴蝶在花枝上小憩几秒。具体做法：在“红蝴蝶”层适当帧上（即经过技头的帧上）插入关键帧1，然后在随后的几帧上再插入关键帧2，去掉中间过渡帧，把帧1复制给帧2就可以了，如图所示。

⑷导入音乐

①新建一个图层，命名为“梁祝”。②选中该图层，在属性面板中的声音下拉列表框中选择“lz2.mp3”。③在同步下拉列表框中选择“开始”。④可以在“编辑”对话框中设置声音效果，如“淡入淡出”等。

⑸测试作品、发布作品（略）

这样一个“蝶舞花间”的音乐动画作品就制作好了。

师：“现在都做好同学的请在极域电子课堂上举手！”

这时发现有四分之三的学生齐刷刷地举手，我选择转播几个学生的作业给大家欣赏，做得很有特色：有的学生把路径改成圆形，有的改成“8”字形，元件也做了调整，个个“飞舞”得畅快淋漓，竟有一个学生下载了一个雁叫的声音素材，插入其中产生“雁过留声”的效果，令人心旷神怡！我做了及时的点评，并给予高度赞扬和鼓励。

师：“没做好的同学继续做，做好的同学自己把课本上‘受伤’的蝴蝶修整一下，好不好！”

生：“好！”

看着他们兴高采烈的样子，我心里非常高兴。于是主要精力放在没做好的同学身上，发现还有少数学生对概念的理解不扎实，故尔做的时候有些困难，看到别人做好了自己干着急。我一边给他们纠正错误，一边安慰他们不要着急。课下我把实例的操作步骤整理成如上的文稿印发给了学生。

[案例反思]：

在这两节连堂的课上，课本实例根本没有演示和讲解，但是大部分学生也能独立完成，这在往常是难以想象的，仅仅是因为我备课充分吗？我觉得还在于要能够抓住学生的心理特征，善于把握学生的审美需求，调动起学生的兴趣，因为兴趣是最好的老师，因势利导，因材施教，积极引导学生轻松畅快地学习。在老师的主导下，把课堂还给学生，既是模仿课，又是研究课，充分发挥学生的主体作用。老师还要尽可能满足学生的诉求，之前在其他班级先上的这堂课，就有学生提出：能否在大雁下滑至湖面时能激起水波？我认为信息技术的教学应该丰富多彩的，是具有开放性的，课下对其进行了修改以契合场景，以使得这节课能更加生动地教学。老师还要是教会学生如何学，让学生自主学习、探究学习，在学习钻研的基础上大胆构思，提升创新能力。要想改进以后的教学，通过这节课，有两点值得深思：第一，信息技术的教学之前老师要能吃透课改精神，课堂的设计要源于教材，又不能被教材束缚了手脚。信息技术未设为高考课程，某种程度反而对信息技术课程的发展为利，为其松了绳索，师生可以不必本本主义，以本为本。在把握教材主线的基础上，综合归整课内外资源，扩充学生知识层面，促进新创意产生。吸取课内外的优秀素材和教法，对教材的处理做到生动、巧妙和得当，充足地准备好了一桶水，才能畅快淋漓地“教”，才能最终落实为学生的一杯水。

第二，信息技术的教学也要根据学生的年龄特点、心理结构和态度情趣创设教学情境，给学生充分思考和展示自我的机会，及时捕捉学生的发散思维，引导深入，提高综合素质，培养综合能力。对接受能力有差异的学生要分层教学,分层辅导,还要发挥学生相互帮助,相互

借鉴,相互影响的作用,使学生在畅快地“学”的同时，也体验到“教”的乐趣，展示自我的乐趣。在整堂课上形成“比、帮、赶、超”的学习氛围。

所以，信息技术的教学,不能仅囿于课本，老师要掌握主动，注重运用多种方法、手段创设情境，培养学生对问题的分析能力、理解能力，在理解基础上提高实践动手能力，进而让学生实现“知行相资以为用”。老师要把课堂适当地还给学生，给学生的“学”留有充分的空间，这样才能达到“教”和“学”完美互动、均衡和谐的境界。

总之，信息技术这门课程同样可以开启学生的智慧，从独特的层面培养学生良好的情感、态度和价值观。相比高中其他课程，这门课实践性较强，不应该把这门课当作陪衬，失去教育学生很好的一个平台。

【素材来源】

“大雁”四幅动作图像：中国和平出版社《信息技术》第二册；

“秋水”图像：网上检索；

“花枝”、“蓝蝴蝶”图像：往年江苏省信息技术会考题库；

“梁祝”音乐：网上检索。

【参考文献】

《信息技术——多媒体技术应用》，主编：祝智庭，中国地图出版社，2005年1月第1版；

《信息技术》第二册，主编：何润伟，中国和平出版社，2003年8月第1版；

《高中技术课程标准教师读本》，主编：胡济良李尚仁，华中师范大学出版社，2004年1月第1版。

仅供个人用于学习、研究；不得用于商业用途。

For personal use only in study and research; not for commercial use.

Nur für den pers?nlichen für Stu dien, Forschung, zu kommerziellen Zwecken verwendet werden.

Pour l 'étude et la recherche uniquement à des fins personnelles; pas à des fins commerciales.

толькодля людей, которые используются для обучения, исследований и не должны использоваться в коммерческих целях.

以下无正文