第三课
Flash形变动画
一、教学目标：
（一）知识目标：
1、通过分析形变动画的例子，理解动画的原理；
2、通过模仿老师演示的形变动画过程，掌握制作形变动画的方法；
3、通过综合实践活动课，使学生能够掌握形变技巧并应用到实践中去，形成能力。
（二）过程与方法目标：
1、采取教师讲解与学生创作相结合的办法进行学习
2、用评价来提升学生作品的质量及创新意识
（三）情感态度与价值观
通过小组学习与合作，让学生体会到合作的重要意见，从而指导学生合作就是成功的基础。
二、教学重点：
1、理解形变动画制作的原理；
2、掌握制作形变动画的方法；
三、教学难点：
作品中的形变动画的应用过程。
四、课时安排：
2课时
五、课题引入
请同学们观看动画，并说出你有什么想法呢，（学生回答：动画是怎么做出来的，很神奇）今天我们就带着大家的种种疑问与困惑来学习FLASH形变动画。
六、新课讲述
（一）形变动画原理
这是一种常见的形变动画，它的原理是将一个动画的形状发生变化，把每一处的变化都用形变描绘出来，Flash将关键帧连续播放，形成形变动画效果。
（二）制作形变动画
知道了形变动画的原理，体验形变动画制作过程，这是一个形变动画典型事例——“一个圆形变成方形”。我来演示一下这个动画的制作过程。
教师演示：
1、创建影片文档
执行【文件】|【新建】命令；
2、用椭圆工具在工作区中画一个圆。在时间轴的第40帧处插入一个空白关键帧，再用矩形工具在工作区中再画一个方形，回到时间轴的第一帧，找到属性面板，补间中选反形状，
3
、测试存盘
执行【控制】|【测试影片】命令，观察本例swf文件生成的动画有无问题，如果满意，执行【文件】|【保存】命令，将文件保存成“形变动画.fla”文件存盘，如果要导出Flash的播放文件，执行【导出】|【导出影片】命令保存成“跑动的火柴人.swf”文件。
任务驱动，分组合作实践，创作作品
1、通过老师刚刚的演示，相信同学们对制作逐帧动画已经有了一定的认识，那么接下来就让我们亲自体验一下吧！
2、对操作有困难的学生，可以参照素材，素材放在学生机桌面上
“素材”文件夹内。
（三）制作由一个圆形变成文字
刚才大家制作的很好，那么思考这样一个问题，如何让一个圆形变成文字，用刚才老师讲解的方法行不行呢，请同学们先自己独立完成，并说你的想法与遇到的困难。
七、总结
我们有了这么精美的形变动画作品，如果再给它配以背景，我们的作品就会更饱满，大家回去思考如何修饰已制作好的flash逐帧动画的背景。
八、作业
使用形变动画制作一个文字“理想”变成“现实”的形变小动画
。第二课
逐帧动画
教学目标：
1、理解逐帧动画的制作方法。
2、能够导入静态图片。
3、会根据需要插入或删除帧。
4、掌握测试影片并调整动画的方法。
5、培养学生的审美能力，激发学生的探究兴趣和创新精神，让学生体验制作动画的乐趣。
教学重点：
1、能够导入静态图片。
2、会根据需要插入或删除帧。
教学难点：
测试和调整动画播放。
教学疑点：
关键帧、空白关键帧、普通帧的区别
教学方法：演示法、观察法、实践法、自学法
课
时：2课时
教学过程：
一、导入
帧——是进行flash动画制作的最基本的单位，每一个精彩的flash动画都是由很多个精心雕琢的帧构成的。我们共同来回顾一下上节课提到的帧主要有哪几种类型？
（播放）
关键帧——顾名思义，有关键内容的帧。
空白关键帧——空白关键帧是没有包含舞台上的实例内容的关键帧。
普通帧——在时间轴上能显示实例对象，但不能对实例对象进行编辑操作的帧。
这节课我们就共同来学习“模仿传统手工动画的方式，每一帧都由手工绘制或导入图片完成的动画称为逐帧动画”。赶快和老师一起用Flash逐帧做一匹行走的马。
二、新课
（播放）教师提前做好的逐帧动画《行走的马》演示。
逐帧动画所需要的素材既可以直接在Flash的舞台上绘制，也可以提前准备。要求是，从第2幅画面开始，每一幅都是上一幅的后续，两幅画面之间有着微小的差别。动作分解的越细，将来生成的动画就越细腻。
教师操作，学生观察（用已准备好的马的静态图片）
（一）、导入图片制作逐帧动画
1：启动Flash，新建一个Flash文档。（观察图层和帧）
2：执行[文件]导入到舞台菜单命令，出现“导入”对话框。
3：选定要导入的图片文件horse-1.png，单击“打开”按钮将其导入Flash文档，并显示在舞台上的默认位置。（观察帧的变化，空心圆点变成实心圆点，成为关键帧）
4：执行【插入】→【时间轴】→【空白关键帧】菜单命令，插入一个空白关键帧，模仿第二、三步的操作将后续的一张图片导入该帧。（教师演示到此，播放操作步骤供学生参照，练习导入多幅静态图片。）
过渡：动画的所有帧及其包含的图片都导入到舞台后，动画就基本完成了，可以在Flash中播放。为了获得更好的播放效果，需要对动画进一步的测试和调整。（播放）
（二）、测试和调整动画
1：执行【控制】→【测试影片】菜单命令，进入动画测试状态，以欣赏者的身份观赏动画。
师：怎么样？看到一匹行走的马了吗？祝贺同学们第一步都成功了！
（播放）观赏学生作品一
师：观察作品，有没有不完美之处？
（1）动画播放偏快，需要进行调整。（播放）
2：在时间轴的帧控制区单击选定第1帧，执行【插入】→【时间轴】→【帧】菜单命令，在第一帧的后面插入一个帧。[普通帧]
让学生在每个关键帧的后面均插入2个普通帧，使马的走动速度接近实际。
（2）动画位于舞台的左上角（播放）
学生调整动画的位置，重新测试。
（播放）学生作品欣赏，发现有调整好的，有的调整后图像有“跳来跳去”的现象。
提问调整好的学生采用的调整方法。（播放）
方法一：设置成相同坐标值
这种方法调整精确但非常麻烦
提问调整“跳来跳去”的学生采用的调整方法。（播放）
方法二：鼠标播放
这种方法调整不够精确。
有没有一种即快捷又能精确调整的方法呢？（播放）
方法三：使用“绘图纸工具”
（播放）使用绘图纸工具调整的步骤。
学生参照步骤，利用绘图纸工具调整图像的位置，重新测试。
3：插入图层，导入背景图片。
[图层就像透明的醋酸纤维薄片一样，在舞台上一层层地向上叠加。可以在图层上绘制和编辑对象，而不会影响其它图层上的对象。如果一个图层上没有内容，那么就可以透过它看到下面的图层。]
(播放)创建逐帧动画的几种方法
（1）用导入的静态图片建立逐帧动画
（2）导入gif等序列图像
（3）文字逐帧动画
（4）绘制矢量逐帧动画
三、作品欣赏（播放）
四、学生练习
让学生利用“素材库”制作一个简单的Flash动画，在其中运用所学的逐帧动画的制作方法。
有以下几个选题供选择：
选题一：模仿马行走动画制作“奔跑的豹子”
选题二：使用逐帧动画制作一个数字10~1的倒计时小动画。
五、小结
这节课我们共同学习了导入静态图片制作逐帧动画，除了导入静态图片外，还可以导入序列图像、输入文字或手工绘制来制作逐帧动画，由于逐帧动画对画面一帧一帧地处理，所以具有非常大的灵活性，几乎可以表现任何想表现的内容。希望同学们勤加练习，大胆实践，制作出更多更好的优秀的作品。第四课
奇特的遮罩动画
教学目标：1、通过分析遮罩动画的例子，理解动画的原理；
2、通过模仿老师演示的遮罩动画过程，掌握制作遮罩动画的方法；
教学重点：
1、能够导入静态图片。
2、遮罩图层的应用。
教学难点：
测试和调整动画播放。
教学方法：演示法、观察法、实践法、自学法
课时安排：2课时
一、实验要求
制作一个地球自转的效果。
二、实验步骤
1.制作方法
遮罩图层的应用
2.作品构思
利用遮罩图层功能可以使动画场景外的内容或某些指定区域以外的内容不可见，也可以用来盖住某些实例的部分内容，实现各种丰富的特殊效果。
3.操作步骤
1）新建一个动画，宽度为“200px”，高度为“200px”，背景色为“蓝色”。保存为“地球自转.fla”。
2）新建“地球”图形元件。
3）编辑“地球”图形元件。选取“椭圆工具”，设置笔触颜色为“无”，“填充色”可任意选择，设置完后绘制一个无边框的正圆。选取“选择工具”，选中正圆，打开“属性”面板，设置图片的宽和高都是100像素，使圆位于场景的中心处。
4）设定地球的颜色。如图所示。
5）绘制“地图”图形元件。可以直接在flash中绘制，也可以用其他绘图工具软件绘制，不过，最好是矢量图。如图所示。
6）编辑场景。把“图层1”重命名为“地图”，新建图层“地球”，选中第1帧，将地球元件拖动到场景中。
7）设置运动效果。选中图层“地图”的第1帧，移动编辑区中地图的位置。选中第40帧，再次移动地图在编辑区中的位置。如图所示。最后建立运动渐变效果。在第1帧到第40帧之间创建补间动画。
第1帧
第40帧
8）设置遮罩效果。把图层“地球”设置为遮罩层。地球旋转效果已经制作完成，按ctrl+enter快捷键，观赏效果。
9）建立“背景”图层。测试中发现地球不见了，怎么让它显现出来呢？在“地图”图层下面增加一个图层“背景”，发现“背景”图层变成了被遮罩层，往下往右拖动背景图层，使它变成普通图层。然后将“地球”图形元件拖动到“背景”图层中，位置与“地球”图层中的图片位置一致。
10）添加立体效果。创建一个“颜色”图形元件，进入图形元件的编辑场景。选取“椭圆工具”，设置“笔触颜色”为无，填充色可任意选择，设置完后绘制一个无边框的正圆。选中绘制的正圆，打开“混色器”面板，选择填充类型为“放射”，左端的色标设置为白色，右边的色标设置为淡黄色，并调整色标位置。如图所示。
回到场景，从“库”面板中拖出“颜色”元件，在“属性”面板中打开“颜色”下拉列表，选择“Alpha”，设置为50%。并适当调整实例的位置，如图所示。
至此，制作完毕，按ctrl+enter快捷键，观赏动画效果。
三、练习
根据操作步骤完成地球自转第六课
简单的运动动画
教学目标：1、通过分析运动动画的例子，理解动画的原理；
2、通过模仿老师演示的形变动画过程，掌握制作运动动画的方法；
3、通过综合实践活动课，使学生能够掌握运动技巧并应用到实践中去，形成能力。
教学重点：
1、能够导入静态图片。
2、引导层的应用。
教学难点：
测试和调整动画播放。
教学方法：演示法、观察法、实践法、自学法
课时安排：3课时
一、实验要求
制作一个在蓝天白云之间，一架飞机在展翅翱翔的效果。
二、实验步骤
1.制作方法：
引导图层的应用
2.作品构思：
利用引导层，在这个图层中有一条辅助线作为运动路径，可以设置让一架飞机沿着这条路径运动。
3.操作步骤
1）新建一个动画，宽度为“500px”，高度为“400px”，背景色为“蓝色”。保存为“翱翔的飞机.fla”。
2）导入图片。将“蓝天白云.jpg”图像导入到库中。
3）绘制“背景”图层。将“图层1”命名为“背景”，将“蓝天白云”图像元件拖入到场景中。（注意：为了表现蓝天白云流动的动态效果，我们需要将4个“蓝天白云”图片拼接成一个足够长的背景图片，在拼接过程中，为了让图片在连接处更连贯，可以选择“修改”-）“变形”-〉“水平翻转”），如图所示。
水平翻转前的图片拼接效果图
水平翻转后的图片拼接效果图
单击第60帧，插入一个关键帧。然后创建第1帧到第60帧的运动补间动画。测试一下，看看效果。
4）设置飞行动画。新增一个图层，将图层命名为“飞机”。导入“蓝色飞机”元件到库面板中（“文件”—>“导入”—）“打开外部库”命令，选中“飞机.fla”文件）。把库中的“蓝色飞机”拖到场景中，选取“任意变形工具”，将飞机旋转并缩小，最后调整到背景的右上角。如图所示。
5）绘制引导线。选中“飞机”图层，单击“添加引导层”按钮，在“飞机”图层的上方新增加了一个引导图层。选中引导层的第1帧，选取“铅笔工具”，在“选项”中选择“平滑”，在场景中绘制一条比较圆滑的螺旋线，作为飞机飞行的路线，如图所示。
6）添加被引导对象。制作“引导路径动画”时，最主要的操作是使一个运动对象“附着”在“引导线”上。操作前要先按下工具箱中的“对齐对象”按钮，然后选取“选择工具”，选中“被引导线”层上的第1帧，把该帧中的对象调整到“引导线”的开始端。选中动画的最后一帧，用鼠标把对象调整到引导线的末端。在被引导层上创建运动补间动画。（注意：被引导对象的起点、终点的2个中心点一定要对准“引导线”的2个端头）
至此，制作完毕，按ctrl+enter快捷键，观赏动画效果。
三、课堂练习
1、沿直线运动动画
2005年10月12日，在酒泉卫星发射中心，随着点火按钮的按下，神舟六号顺利升空，给人们留下了深刻的印象。请同学们用沿直线运动动画模拟火箭升空过程。
2、沿路径运动动画
火箭升空后，要进行转弯，最后将飞船和航天员送入太空预定轨道。请同学们用沿路径运动动画模拟火箭转弯过程。第五课
交互动画
教学目标：1、通过分析交互动画的例子，理解动画的原理；
2、通过模仿老师演示的动画过程，掌握制作交互动画的方法；
3、通过综合实践活动课，使学生能够掌握交互动画的技巧并应用到实践中去，形成能力。
教学重点：
1、能够导入静态图片。
2、按钮的应用。
教学难点：
测试和调整动画播放。
教学方法：演示法、观察法、实践法、自学法
课时安排：2课时
一、实验要求
制作一个蝴蝶在花间自由的飞舞，其中我们可以通过设置不同功能的按钮来控制蝴蝶飞舞的状态，包括“播放”、“前进”、“后退”、“停止”、“继续”等。
二、实验步骤
1.制作方法
按钮的应用
2.作品构思
按钮是交互动画的灵魂，按钮元件用于创建响应鼠标单击、滑过或其他动作的交互式按钮，是制作交互式动画的基础。
3.操作步骤
1）新建一个动画，保存为“飞舞的蝴蝶.fla”。
2）创建5个按钮。5个按钮分别为“播放”按钮、“停止”按钮，“继续”按钮，“前进”按钮、“后退”按钮。以“播放”按钮为例，打开新建元件对话框，名称为播放，新建按钮元件。进入按钮编辑状态，分别在按钮的“弹起”和“指针经过“区中插入关键帧，分别绘制大小相同，颜色不同，位置相同的按钮。如图所示。
按以上步骤，分别创建“停止”按钮，“继续”按钮，“前进”按钮、“后退”按钮。
3）制作“蝴蝶飞舞”影片剪辑。新建影片剪辑元件，名称为“蝴蝶飞舞”。创建两个图层，制作蝴蝶沿任意路径运动的动作效果。（制作步骤类似实验3-5，省略。注意：两个图层都从第2帧开始创建关键帧）
单击“蝴蝶”图层的第1帧，打开“动作”面板，设置stop（）动作。
将“蝴蝶”图层最后一帧，设置gotoAndPlay（2）动作。
到此，“蝴蝶飞舞”影片剪辑制作完成。
4）新建4个图层。
1层：“边框”层，如图所示。
2层：“花草背景”层，如图所示。
3层：“蝴蝶飞舞”影片剪辑图层，将库面板的蝴蝶飞舞影片剪辑拖入到该图层，打开属性面板，设置实例实例名称为fly。
4层：按钮层，拖入五个按钮至该图层。如图所示。
5）设置按钮动作。
“播放”按钮动作设置，如图所示。
“停止”按钮动作设置，如图所示。
“继续”按钮动作设置，如图所示。
“前进”按钮动作设置，如图所示。
“后退”按钮动作设置，如图所示。
6）选中各图层的第60帧，插入普通帧。调整各图层的前后位置及各图层舞台中元件的位置。
至此，制作完毕，按ctrl+enter快捷键，观赏动画效果。
三、练习
通过学习，学生合作完成：制作通过按钮和帧进行交互的动画，模拟控制火箭点火的过程。第一课
认识FLASH动画
学习目标：1、学会启动FLASH的方法
2、认识FLASH工作界面
3、动画制作的基本概念
4、学习制作简单的动画
重、难点：认识FLASH的工作界面、学习制作简单的动画。
课时安排：2课时
教学过程：
一、导入：
同学们，你们小时候看电视最喜欢看什么节目呀？
对了，很多同学都喜欢看动画片。比如说《米老鼠和唐老鸭》、《西游记》、《葫芦娃》等等。那么，接下来，我们一起来欣赏一段精彩的动画片，这段动画与我们前天开展的活动是有关系的。那么，这么精彩的动画是用怎么制作出来的呢？
是的，用计算机做出来的。那是用什么软件做出来的呢？用我们以前学过的WPS、WORD能做出来吗？不能。这就要用到我们今天所学习的一个新的软件《FLASH》。
二、新课
1、FLASH的特点
FLASH是一个功能强大、简单易学的网页动画制作工具。用FLASH制作出来的动画不但占用的空间小，而且动画品质高，不管怎样放大、缩小，它都清晰可见。
FLASH动画的迷人之处还在于我们可以通过点击按钮，选择菜单来控制动画播放，甚至可以制作成小游戏。
正是有了这些优点，使得FLASH在网络上非常流行。
下面，我们就一起来学习FLASH8的使用。
2、启动FLASH8。
①单击“开始”→“程序”→“Macromedia
Flash8”→“Flash8”即可。（叫学生上台操作）
启动后将出现 FLASH8的编辑窗口。
3、FLASH8编辑窗口的介绍
菜单栏
常用工具栏、控制工具栏（动画播放的控制工具栏）
绘图工具栏（放置了各种绘图及编辑工具）、辅助选项
图层区、时间轴（可以设置动画的播放状况）
浮动面板（可以用来控制各种设置）
编辑区（可以直接在这里绘图或摆放一些图片、文字、按钮、动画等进行编辑）
视图比例、状态栏（显示所选的工具等状态）
4、试一试：教师先隐藏常用工具栏、控制工具栏和状态栏，要求学生显示出这三个菜单栏。
（选择“窗口”菜单→“工具栏”→“主要栏”、“状态栏”和“控制栏”。）
5、动画制作的基本概念
①先出示5张静态的连续图片，再出示5张图片所组成的动画。
② 得出结论：动画是将一张张静态的图片，通过软件连续的播放产生影像的动态效果。
③ 其原理是：因为单张图片快速而且连续的播放，会让我们的眼睛产生“视觉暂留”的现象，我们会感到图片中的物体正在动作，而FLASH就是采用这种原理制作动画的。
6、简单动画的制作
①提问：如果动画中的每张图片都要用手工去画，那将会怎样？（工作量会很大）而FLASH5有一个强大的功能，那就是……？对了，它会自动建立动画动作。
② 现在我们一起用FLASH8来制作一个简单的动画。
例：让一架飞机在屏幕上飞过。
步骤1：“窗口”→“共享图库”→“Movie
Clips影片夹”，打开“动画影片图库”。
步骤2：选择图库中的“Biplane”，用鼠标将飞机拖到编辑区中的左边。注意：这时在时间轴中的图层1的第1帧中会出现一个实心的黑点，这就是关键帧。
步骤3：在图层1的第10帧处，单击鼠标右键，在弹出的快捷菜单中选择“插件关键帧”。并用鼠标将飞机拖到编辑区的右边。
步骤4：单击图层的第1帧，单击鼠标右键，在弹出的快捷菜单中选择“创建动画动作”。在时间轴的第1帧至第10帧会出现一个箭头。
步骤5：单击控制栏中的“播放”按钮，可以看到飞机从屏幕的左边飞向右边。也可以按Ctrl+Enter键，来看看动画的测试效果，要退出测试画面，单击窗口右上方的“关闭”按钮。
7、保存文件。
① 单击“文件”→“保存”或工具栏上的“保存”按钮。
② 注意：FLASH文件的扩展名为“.fla”，生成的动画文件的扩展名为“.swf”。
