案例11：江南水乡——遮罩动画（课件）-《Animate CC动画制作案例教程》（电子工业出版社第2版）同步精品课堂

江南水乡——遮罩动画 -案例11- Animate CC动画制作案例教程 电工版第二版 案例描述 通过设置遮罩，制作“江南水乡”的风景展示动画，效果如图所示。 案例分析 以琵琶面板部分的圆弧形区域作为遮罩层，以风景和人物的图像作为被遮罩层。 01 利用补间动画实现被遮罩层风景和人物的透明度、大小及位置的变化。 02 操作流程演示 第一部分 操作流程演示 1.在animate中新建ActionScript 3.0文档，设置舞台大小为“500×400”像素。按【Ctrl+S】组合键保存文件，命名为“江南水乡.fla”。 操作流程演示 2.把“图层_1”重命名为“背景”，执行菜单“文件”→“导入”→“导入到舞台”命令，导入图片素材“背景.jpg”至舞台，将其缩放到与舞台尺寸相同。选中“背景”图层的第300帧，按F5键插入帧。锁定该图层。 操作流程演示 3.在“背景”图层之上创建新图层，命名为“琵琶”。导入图片素材“琵琶.png”至舞台，将其调整到合适的大小及位置，效果如图所示。 操作流程演示 4.在“琵琶”图层之上创建新图层，命名为“遮罩”。利用“线条工具”“选择工具”“颜料桶工具”绘制如图所示的图形（图形的填充颜色任意）。 操作流程演示 5.按【Ctrl+F8】组合键新建图形元件，命名为“风景”。执行菜单“文件”→“导入”→“导入到舞台”命令，导入素材“风景. jpg”。 操作流程演示 5.返回场景1，用同样的方法，新建名称为“人物”的图形元件，并将素材“人物. jpg”导入舞台。 操作流程演示 6.返回场景1，在“遮罩”层的下方创建新图层，命名为“被遮罩”。选中“被遮罩”层的第1帧，将库中的“风景”元件拖至舞台，调整合适的大小及位置，效果如图所示。 操作流程演示 7.在“被遮罩”层的第70帧、140帧位置分别插入关键帧。选中第1帧中的“风景”元件，将元件的“Alpha”值调整为“0%”。选中第140帧中的元件，调整其大小及位置，效果如图所示。 操作流程演示 8.选择第1~70帧之间的任一帧，单击鼠标右键，在弹出的快捷菜单中选择“创建传统补间”命令。用同样的方法，在第70~140帧中间创建传统补间。 操作流程演示 9.在“被遮罩”层的第150帧位置插入关键帧，选中“风景”元件，单击鼠标右键，在弹出的快捷菜单中选择“交换元件”命令，将“风景”元件交换为“人物”元件，参考如图所示效果调整其大小及位置。 操作流程演示 10.分别在第220帧、290帧位置插入关键帧。选中第150帧中的“人物”元件，将元件的“Alpha”值调整为“0%”。选中第290帧中的“人物”元件，参考如图所示效果调整其大小及位置。 操作流程演示 11.分别在第150~220帧、220~290帧中间创建传统补间。 操作流程演示 12.在“遮罩”层名称上单击鼠标右键，在弹出的快捷菜单中选择“遮罩层”命令，此时“被遮罩”层会自动缩进。遮罩效果如图所示。 操作流程演示 13.按【Ctrl+S】组合键保存文件，按【Ctrl+Enter】组合键测试影片。播放效果如图所示。 分组实践 第二部分 分组实践 布置任务：在学生端电脑完成案例制作，可根据小组讨论结果适当添加有趣效果。 巩固练习 随堂练习 1. 在“江南水乡”案例中，制作“琵琶风景”的效果，最适合使用（ ） A. 逐帧动画 B. 传统补间动画 C. 遮罩动画 D. 补间形状动画 【答案】C 【解析】 遮罩动画通过一个琵琶面板部分的圆弧形区域作为遮罩层，来控制下层图片的显示区域。 随堂练习 2. 遮罩动画的基本原理是（ ） A. 上层遮罩层的填充区域，决定了下层被遮罩层内容的可见范围 B. 下层内容遮盖上层内容 C. 两层内容混合显示 D. 只有遮罩层的内容可见 【答案】A 【解析】 在遮罩关系中，位于上方的遮罩层像一个“琵琶”，其图形（填充区域）是“透明”的，允许其正下方的被遮罩层内容透过显示；遮罩层的空白区域则是“不透明”的，会遮住被遮罩层的内容。 随堂练习 3. 在遮罩动画中，哪个图层定义了“琵琶”的形状？（ ） A. 被遮罩层 B. 遮罩层 C. 背景层 D. 引导层 【答案】B 【解析】 遮罩层中的图形轮廓定义了动态“琵琶”的形状和位置，被遮罩层中的内容（如琵琶纹理）只有透过这个“琵琶”才能被看到。 随堂练习 4. 要创建遮罩动画，至少需要几个图层？（ ） A. 1个 B. 2个 C. 3个 D. 4个 【答案】B 【解析】 遮罩动画至少需要两个图层：一个遮罩层（在上方）和一个被遮罩层（在下方并与之链接）。 随堂练习 5. 将普通图层设置为遮罩层的正确操作是（ ） A. 右键图层 → “遮罩层” B. 双击图层图标 → 选择“遮罩” C. 将图层拖到最上方 D. 在属性面板中更改图层类型 【答案】A 【解析】 右键单击要作为遮罩的图层，从上下文菜单中选择“遮罩层”，这是最直接的方法。设置后，该图层图标会变为遮罩层图标，其下方的图层会自动缩进成为被遮罩层。 随堂练习 6. 在遮罩动画中，遮罩层图形的什么属性决定了最终显示效果？（ ） A. 填充颜色 B. 填充区域（形状） C. 笔触颜色 D. 笔触粗细 【答案】B 【解析】 只有遮罩层中图形的填充区域才会产生遮罩效果。填充区域的形状、大小和位置决定了“琵琶”的形态。笔触（线条）在遮罩中不起作用。 THANKS 谢谢观看 $