初中信息技术教科版八年级下册第六课 遮罩动画图片ppt课件

第六课  遮罩动画

教学目标

（一）知识与技能

1了解遮罩层及被遮罩层的含义。

2制作遮罩动画。

3遮罩动画与其他动画的综合运用。

（二）过程与方法

通过学生自主学习和合作探究，培养学生运用遮罩动画技术解决实际问题的能力。

（三）情感态度价值观

培养学生养成严谨的学习态度和团结协作的精神，提升素质，发展个性。

教学重难点

如何创建路径动画和遮罩效果。

教学过程

导入：思考：窗外的世界、望远镜里的乾坤可以使用什么技术完成?

一、遮罩层及被遮罩层

打开素材文件夹中的文件“遮罩.fla＂，在“背景”层上方新建一个图层，命名为“遮罩”，新建一个名为“遮罩”的元件，并绘制一个圆形，将“遮罩”元件拖放至“遮罩”图层，右击“遮罩”图层，在快捷菜单中选中“属性”，打开“属性”面板，如“图6-1‘遮罩’图层”所示。

选择“遮罩层”，就将当前画有圆形的这个图层设置为遮罩层。设置完成时间轴变化如“图6-2遮罩图层的时间轴显示”所示。

表示此图层为遮罩层，  表示此图层为被遮罩层，被遮罩层在遮层下

以一定缩进显示。遮罩层设置前后的舞台变化效果如“图6-3遮罩效果”所示。

遮罩层可将被遮罩层中的部分内容隐藏，只显示遮罩层图像轮廓内的内容。可见，遮罩的作用是使被遮罩图层的内容部分显示。被遮罩层提供显示内容，遮罩层提供显示形状，两者相互作用形成了最终效果。

二、遮罩动画及其制作

通常情况下只有遮罩和其他动画制作方法相结合，才能形成遮罩动画。

？想一想  “比较1.swf”和“比较2.swf＂这两个动画分别有几个图层，各图层分别是什么内容?判断两个动画是遮层在变化还是被遮罩层在变化，使用的是什么补间动画。

遮罩动画配合动画补间动画，实现遮罩效果是比较常见的。“比较1.swf”和“比较2.swf”都是使用了遮罩动画和动画补间动画相配合完成的。

1.遮罩动画与动画补间动画配合使用

思考:动画有几个图层?哪个图层在变化?这种变化用什么动画能够实现?

“比较1.swf”就是运用遮加动画补间动画实现的。分析动画的图层结构:动画有两个图层，遮罩层提供被遮罩层的显示形状，遮罩形状即圆形。因圆形的位置发生了变化，故圆形所在遮罩层需要制作补间动画。背景图层相对于窗口并没有位置和大小的变化。具体操作步骤如下。

(1)导入背景图片。

(2)新建图形元件“背景”和“遮罩”，并制作两元件。其中，“遮單”元件的绘制如“图6-4绘制‘遮罩’元件的形状”所示。

(3)新建“背景”和“遮”两个图层，“遮罩”图层在上。

(4)将“背景”元件拖放至“背景”图层，并延长至第120帧。

(5)锁定“背景”图层，将“遮罩”元件拖放至“遮”图层第1帧，在第120帧“新建关键帧”，调整“遮罩”元件的位置，使其与第1帧的位置不同，在两之间创建动画补间动画。

(6)右击“遮罩”图层，在快捷单中将其设置为“遮罩层”。

(7)测试、调试并保存。

通常，除了遮罩层和被遮罩层，还会増加一些辅助的图层，进一步完善视觉效果。若希望表现望远镜镜头的效果，则可以増加镜框;若希製表现从窗口看出去的效果，则可以増加“窗框”。实现方法:在最上层增加“窗框”图层并将制作好的“窗框”元件在此图层实现和“遮罩”图层完全一样的运动。

提示    “窗框”元件的制作

(1)为了保证“窗框”和“遮單”所用圆大小一致，可以复制“遮罩”元件，将其重命名为“窗框”。

(2)“窗框”的内部必须是透明的，这样才能显示出下层图层的内容。因此，需要将圆形外加边框，并将填充颜色删除。双击“窗框”元件，进入编辑状态，选择“墨水瓶工具”，单击圆形边缘即可为图形加边框;使用“选择工具”，将圆形内部填充色删除。

(3)使用“选择工具”，选中圆形边框，打开“属性”面板，调整线条粗细至合适大小。

(4)使用“矩形工具”绘制边框稍细一点的正方形(边框黑色，无填充颜色)并将其内接在圆形中。使用变形工具，将此正方形旋转45度并复制，如“图6-5窗框元件的制作”所示。

练一练    打开文件“遮罩动补.fla”和“被遮罩动补.fla”，分析遮动画的制作方法，尝试制作与动画补间动画配合的遮动画。

2.遮罩动画与形状补间动画配合使用

遮动画和形状补间动画联合使用时，通常形状补间动画会放在遮层如制作打开的卷轴画、打开或关闭的折扇等。

？想一想    打开文件“遮罩形补.fla＂，分析有几个图层。它们的空间关系如何?使用的是什么动画?

制作打开的卷轴画的步骤如下。

(1)制作最底层“背景”图层，因为这层没有变化，所以只在第一帧有关键帧，并延续到动画结束。

(2)制作控制“背景”图层显示的“遮罩”图层，在此图层制作形状补间动画，起始关键帧和结束关键帧如“图6-6起始关键帧”和“图6-7结束关键帧”所示。注意确认两个关键帧的图形都是分离状态。遮形状由小矩形变为大矩形，也就是对“背景”图层的可见内容展开越来越多。

(3)增加画轴以丰富画面效果。右画轴始终保持不动，左画轴是一个从右向左的动画补间。两个画轴是两种不同的运动状态，因此，需要两个图层来实现。完成后作品的时间轴如“图6-8时间轴”所示。

练一练  仿照“遮罩形补.fla＂，制作类似的遮罩加形状补间动画。

思考与练习

1尝试给第三课网站标题动画或第五课象形文字演变动画添加遮罩效果。

2讨论你所见过的 Flash动画是否有交互效果。

课堂小结

这节课，我们了解遮罩层及被遮罩层的含义，学习、体验制作遮罩动画和遮罩动画与其他动画的综合运用知识，通过自主学习和合作探究，培养了我们运用遮罩动画技术解决实际问题的能力和严谨的学习态度、团结协作的精神。

板书设计

遮罩层及被遮罩层

遮罩动画     遮罩动画及其制作

遮罩动画与其他动画的综合运用

课后反思