• 朱本斌 “Flash动画的制作”教学案例
  •           2009/9/9     浏览()     【
  • ——让“教”与“学”两扇翅膀畅快飞舞

    苏州新草桥中学 朱本斌

    [案例引言]:

    《高中信息技术课程标准》提出:中小学信息技术的培养目标是“培养学生的信息素养”,就高中阶段而言,信息素养的培养包括三个层面的内涵: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版。

    附件:蝶舞花间源文件.rar

       秋水长天源文件.rar

       

       

       

  • 返回顶部】 【关闭】 【打印
  相关文章
  • 暂无相关文章
  • 网友评论
  • 登录 现在有条评论 查看全部评论
  • 标题:
  • 内容:
  • 验证码: