Flash中的遮罩动画效果

Flash 中的遮罩动画效果中的遮罩动画效果 教案教案 教学目标教学目标 1 通过实例教学使学生理解 Flash 中遮罩的含义及原理 2 通过实例教学使学生学会遮罩图层的建立和遮罩效果的实现方法 3 使学生学会在排序面板中对对象进行排序 4 学会分析他人的 Flash 作品并学习其中使用的技术 技巧 5 通过整个教学过程 培养学生的自学能力与小组合作 创新精神 教学内容教学内容 1 FLASH 中遮罩动画效果 2 FLASH 中遮罩动画的原理 3 遮罩层的定义 4 遮罩动画的实现过程 教学重点及难点教学重点及难点 1 遮罩原理 2 遮罩动画的制作步骤 教学方法教学方法 1 利用多媒体课件教学 2 以实例演示为设计思想 3 通过实例教学 使学生掌握设计方法 教材教材 中文版 Flash MX2004 标准教程 张继皇等编著 海洋出版社 教学参考书教学参考书 中文版 Flash MX2004 基础教程与操作实录 金超编著 清华大学出版 社 课时安排 课时安排 45 分钟 教学过程教学过程 一 教学引入 一 教学引入 展示遮罩动画作品 1 探照灯效果 2 电影文字 3 鼠标拖曳效果 4 百叶窗效果 二 教学内容 二 教学内容 一 一 探探照照灯灯效效果果 的实现的实现 1 探照灯效果 的实现步骤 步骤一 先启动FLASH cs3 在启动界面中选择 创建新项目 FLASH 文 档 步骤二 点击 修改 文档 或CTRL J 设置文档属性如图1 所示 图 1 步骤三 选择文字工具 并在属性面板 设置文字的属性 如图 2所示 图 2 步骤四 新建一个层 在这一层用画圆工具 绘制一个不带边线的圆形做 为遮罩 颜色可任选 并将绘制好的圆转换成 图形类图符 步骤五 设置新建层的属性为 遮罩层 并改图层名称为 遮罩层 注 在此处注意观察遮罩效果 解释遮罩原理 步骤六 把实例圆拖到文字的左面 如图 3所示 图 3 步骤七 在文字层的第25帧单击鼠标右键插入帧 或按 F5 键 如图4所示 图 4 步骤八 在遮罩层的第25帧单击鼠标右键插入关键帧 或按 F6键 并将圆 拖至文字的右端 步骤九 遮罩层 设置补间动画 动作动画 如图 5 所示 图 5 步骤十 保存FLASH 文档 测试 导出影片 2 遮罩的原理 1 遮罩是需要通过两层实现的 上一层叫遮罩层 下一层叫被遮罩层 2 遮罩结果显示的是二层的叠加部分 上一层决定看到的形状 下一层 决定看到的内容 我们通常也把遮罩层叫做 透通区 即透过上一层看下一层 的内容 3 遮罩显示结果的色彩由被遮罩层的色彩决定 即可通过辩别色彩的来 源来确定哪一层为被遮罩层 3 提出问题 1 在刚才的动画中 如果改变两层的顺序 再利用 遮 罩 效果 制作出的动画会有什么改变 4 给出 5 分钟时间由学生动手仿照老师完成探照灯效果 5 选择优秀作品展示并回答所提出的问题 二 二 电影文字电影文字 动画的实现动画的实现 1 电影文字的操作步骤 步骤一 新建 FLASH 文档 按 CTRL J 电影幕布属性修改为长条形 宽为 400 像素 高为 100 像素 步骤二 选择文字工具 并在属性面板 设置文字的属性 输入文字内 容 步骤三 新建图层2 导入一幅图画 文件 导入 导入到舞台 步骤四 把图层2 拖至图层1下方 步骤五 图层1第30帧按F5 键 插入帧 并将图层1 设置为遮罩层 步骤六 图层2导入的图像如图6所示 将图像的下边界与文字的下边界对齐 图 6 步骤七 在图层2 第30 帧处按F6 键 插入关键帧 将图像的上边界与文字 的上边界对齐 并创建运动动画 如图 7所示 图 7 步骤八 保存FLASH 文档 测试 导出影片 2 提出问题 2 只有遮罩层才能设置动画吗 3 遮罩原理的补充 遮罩层与被遮罩层都可以设置动画 三 遮罩效果 MTV 字幕 1 演示MTV 字幕效果 2 分析MTV字幕的形成 MTV字幕的实现需要三个层 分别为静态的文字层 动态的文字层和遮罩层 3 操作步骤 步骤一 新建 FLASH 文档 按 CTRL J 电影幕布属性修改为长条形 宽为 400 像素 高为 100 像素 步骤二 选择文字工具 并在属性面板 设置文字的属性 输入文字内 容 如图8所示 图 8 步骤三 新建图层2 复制图层1 的文字内容到图层2 与图层出不穷文字内容 对齐 更改图层2 文字颜色为红色 步骤四 新建图层 命名为 遮罩层 在这一层 选择矩形工具 画一个 无边线的 和图层2 一个汉字大小一样的蓝色矩形 如图 9 所示 图 9 步骤五 图层1 图层2第30帧按F5 键 插入帧 步骤六 在图层3 第15 帧处 插入关键帧 并将矩形变形为覆盖 宁静的夏天 五个字的矩形条 如图10 所示 图 10 步骤七 点击图层3 第1帧处在属性面板设置补间动画为形状动画 步骤八 在图层3第20帧处 插入关键帧 画一个矩形 覆盖 天 字 如图 11 所示 图 11 步骤九 在图层3第20帧处 插入关键帧 将覆盖 天 字的矩形变形为覆盖 天空中繁星点点 的矩形条 如图12所示 图 12 步骤十 图层3 设置为遮罩层 步骤十一 保存FLASH 文档 测试 导出影片 三 总结三 总结 本节课主要讲解如何利用 Flash 中的遮罩来制作动画 通过这