Flash文字遮罩动画

1、学科学科Flash动画制作动画制作 4.194.20 星期星期四四五五 检查检查 签字签字 邱少华邱少华 班级班级计应计应16计应计应16 节次节次1-21-2 课题课题Flash文字遮罩动画文字遮罩动画课的类型课的类型理论，上机理论，上机 教具教具 挂图挂图 多媒体教学多媒体教学作业作业上机操作上机操作 教学教学 环节环节 时间时间 分配分配 1.组织教学时间组织教学时间2-44.归纳小结时间归纳小结时间2-4 2.复习导入时间复习导入时间2-35.作业布置时间作业布置时间2-3 3.讲授新课时间讲授新课时间86-906.上机操作时间上机操作时间100 教学教学 后记后记 机电系机电系 授课

2、人：曾松元 Page 3 教学重难点教学目标教学内容教学方法 结束播放结束播放教学过程教学过程 教学目标教学目标 了解遮罩层的了解遮罩层的 工作原理和图标；工作原理和图标； 掌握文字遮罩掌握文字遮罩 动画的制作要点。动画的制作要点。 技能目标技能目标知识目标知识目标情感目标情感目标 掌握创建文掌握创建文 字遮罩动画的方字遮罩动画的方 法；法； 培养学生培养学生 想象能力和合作想象能力和合作 能力。能力。 激发学生学习激发学生学习 动画的兴趣，培动画的兴趣，培 养学生的动手能养学生的动手能 力和创造力，体力和创造力，体 验成功的喜悦。验成功的喜悦。 Page 4 教学重难点教学目标教学内容教学方

3、法 结束播放结束播放教学过程教学过程 理解遮罩层与被遮罩层的概念。理解遮罩层与被遮罩层的概念。 理解遮罩动画产生的设计原理。理解遮罩动画产生的设计原理。 了解多层遮罩动画的运用。了解多层遮罩动画的运用。 掌握使用遮罩原理制作文字遮罩动画的方掌握使用遮罩原理制作文字遮罩动画的方 法和技巧。法和技巧。 了解复杂文字遮罩动画设计的方法和技巧。了解复杂文字遮罩动画设计的方法和技巧。 教学内容教学内容 Page 5 教学重难点教学目标教学内容教学方法 结束播放结束播放教学过程教学过程 教学重、难点教学重、难点 重重 点点 难难 点点 学习遮罩动画的概念、学习遮罩动画的概念、 各种表现形式和制作技巧。各种

4、表现形式和制作技巧。 了解文字遮罩动画的了解文字遮罩动画的 制作方法，结合实践巧妙制作方法，结合实践巧妙 地运用遮罩设计制作出各地运用遮罩设计制作出各 种文字遮罩动画效果。种文字遮罩动画效果。 分析遮罩层内容的分析遮罩层内容的 形状。形状。 掌握使用遮罩原理掌握使用遮罩原理 制作动画的方法和技巧。制作动画的方法和技巧。 了解复杂文字动画了解复杂文字动画 设计的方法和技巧。设计的方法和技巧。 Page 6 教学重难点教学目标教学内容教学方法 结束播放结束播放教学过程教学过程 教学方法采用教学方法采用任务驱动法、实例演示法、任务驱动法、实例演示法、 讲解点拨法讲解点拨法。 教学手段采用教学手段采用

5、教师多媒体教学教师多媒体教学，学生上机学生上机 实践实践的教学练一体化方式。的教学练一体化方式。 教学方法教学方法 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 7 娄底技师学院机电系 Flash CS3Flash CS3 本讲的教学过程本讲的教学过程 利用遮罩制作的一个探照灯效果利用遮罩制作的一个探照灯效果（通过拖动圆来改变可看（通过拖动圆来改变可看 的内容）的内容） Flash CS3 返回返回 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画

6、实例 结束播放结束播放 Page 8 娄底技师学院机电系 Flash CS3Flash CS3 目录目录 基本原理基本原理 原理实例原理实例 实现方法实现方法 基本构成基本构成 遮罩动画的基本概念遮罩动画的基本概念 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 9 娄底技师学院机电系 Flash CS3Flash CS3 遮罩遮罩动画动画的基本原理的基本原理 遮罩遮罩作为一个专有名词来源印刷领域，作为一个专有名词来源印刷领域， 可以把它看作是一个带孔的画布，孔可以可以把它看作是一个带孔的画布，孔可以 是

7、任意的形状，遮盖在具有丰富动画内容是任意的形状，遮盖在具有丰富动画内容 的图层之上，然后通过这个画布中的孔来的图层之上，然后通过这个画布中的孔来 观看被画布覆盖的其他动画层中的运动对观看被画布覆盖的其他动画层中的运动对 象，这就是象，这就是遮罩遮罩的基本原理，而这个孔也的基本原理，而这个孔也 就是用户要绘制编辑的区域。就是用户要绘制编辑的区域。 返回返回 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 10 娄底技师学院机电系 Flash CS3Flash CS3 先来看两个遮罩的范例，如图所示，不论是左

8、先来看两个遮罩的范例，如图所示，不论是左 侧图中在单色背景上，还是右侧图中在图片上，都侧图中在单色背景上，还是右侧图中在图片上，都 是以一个不规则的图形作为遮罩，控制另一幅图片是以一个不规则的图形作为遮罩，控制另一幅图片 的显示区域。的显示区域。 遮罩原理实例遮罩原理实例 返回返回 Flash CS3 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 11 娄底技师学院机电系 Flash CS3Flash CS3 遮罩动画就是使用一个动画层遮住下一个动画遮罩动画就是使用一个动画层遮住下一个动画 层的一部分或

9、全部，使其部分或全部显示出来的动层的一部分或全部，使其部分或全部显示出来的动 画。要创建遮罩动画，至少需要有两层，一层作为画。要创建遮罩动画，至少需要有两层，一层作为 遮罩层遮罩层，一层作为一层作为被遮罩层被遮罩层。 遮罩动画的构成遮罩动画的构成 遮罩层遮罩层 被遮罩层被遮罩层 注：注：一个遮罩层下可以有多个被遮罩层！一个遮罩层下可以有多个被遮罩层！ 下一张下一张返回返回 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 12 娄底技师学院机电系 Flash CS3Flash CS3 说明：说明： 遮罩项目

10、可以是遮罩项目可以是填充的形状填充的形状、文字对象、图形元、文字对象、图形元 件的实例或影片剪辑。件的实例或影片剪辑。 将多个图层组织在一个遮罩层下可创建更加复杂将多个图层组织在一个遮罩层下可创建更加复杂 的遮罩效果。的遮罩效果。 若要创建动态效果，可以让若要创建动态效果，可以让遮罩层或被遮罩层动遮罩层或被遮罩层动 起来起来。对于用作遮罩的填充形状，可以使用补间形状；。对于用作遮罩的填充形状，可以使用补间形状； 对于类型对象、图形实例或影片剪辑，可以使用补间对于类型对象、图形实例或影片剪辑，可以使用补间 动画。动画。 遮罩遮罩动画动画的构成的构成 疑问？疑问？轮廓线制作的图形 可不可以用做遮罩

11、项目？ 疑问？疑问？ 遮罩层动起来的 效果和被遮罩层动起来的 动画效果有什么不同？ 返回返回 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 13 娄底技师学院机电系 Flash CS3Flash CS3 制作遮罩动画的具体操作如下。制作遮罩动画的具体操作如下。 （1）在普通层中创建要显示的内容。）在普通层中创建要显示的内容。 （2）在普通层上方新建一个图层，在其）在普通层上方新建一个图层，在其 中创建一个对象或一段动画用来遮罩对象。中创建一个对象或一段动画用来遮罩对象。 （3）将上方的图层转换为遮罩层即

12、可完）将上方的图层转换为遮罩层即可完 成一个遮罩动画的创建。成一个遮罩动画的创建。 遮罩动画的实现方法遮罩动画的实现方法 疑问？疑问？ ：遮罩动画效果 的颜色、形状、大小、动作 是取决于遮罩层还是被遮罩 层中的对象。 Flash CS3 返回返回 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 14 娄底技师学院机电系 Flash CS3Flash CS3 文字遮罩动画实例文字遮罩动画实例 文字遮罩动画实例文字遮罩动画实例 波动文字波动文字 任意位置文字任意位置文字 反色文字反色文字 变色文字变色文字 炫

13、动文字炫动文字 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 15 娄底技师学院机电系 Flash CS3Flash CS3 文字遮罩动画实例文字遮罩动画实例 波动文字波动文字 波动文字的动画效果：波动文字的动画效果： 在文字在文字1层输入文字。层输入文字。 在文字在文字2层复制文字层复制文字1层的文字并粘贴在当前位置。层的文字并粘贴在当前位置。 再插入一个图层，并将其置于最底层，然后制做如图所示矩形再插入一个图层，并将其置于最底层，然后制做如图所示矩形 条（高度和长度都要大于文字），并转换成元件，在相

14、应位置插条（高度和长度都要大于文字），并转换成元件，在相应位置插 入关键帧，在两个关键帧将矩形条的左边分别对齐文字入关键帧，在两个关键帧将矩形条的左边分别对齐文字1的最左的最左 边和最右边，并创建补间动画。边和最右边，并创建补间动画。 将文字将文字1层设为遮罩层。层设为遮罩层。 【设计思路】【设计思路】 Flash CS3 返回返回 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 16 娄底技师学院机电系 Flash CS3Flash CS3 炫动文字炫动文字 炫动文字的动画效果：炫动文字的动画效果： 在

15、最底层选取一幅图片做背景，并将图层转换成元件。在最底层选取一幅图片做背景，并将图层转换成元件。 插入一个新图层，并输入文字。插入一个新图层，并输入文字。 在图片层的相应帧插入关键帧，并在两个关键帧的位置分别在图片层的相应帧插入关键帧，并在两个关键帧的位置分别 将图片的不同端对齐文字，然后创建补间动画。将图片的不同端对齐文字，然后创建补间动画。 将文字所在的层设为遮罩层。将文字所在的层设为遮罩层。 时间轴的设置如下图所示：时间轴的设置如下图所示： 【设计思路】【设计思路】 Flash CS3 返回返回 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动

16、画实例动画实例 结束播放结束播放 Page 17 娄底技师学院机电系 Flash CS3Flash CS3 变色文字变色文字 变色文字的动画效果：变色文字的动画效果： 在最底层（文字在最底层（文字1）录入文字，并设置文字为想要的颜色。）录入文字，并设置文字为想要的颜色。 插入一个图层（文字插入一个图层（文字2），并将最底层的文字复制到该的同），并将最底层的文字复制到该的同 一位置，并设置为另一种颜色。一位置，并设置为另一种颜色。 再插入一个图层（遮罩条），用矩形工具划一高和长都大于再插入一个图层（遮罩条），用矩形工具划一高和长都大于 文字的的长矩形，并转换成元件，然后在该层相应位置插入文字的的

17、长矩形，并转换成元件，然后在该层相应位置插入 关键帧。关键帧。 在两个关键帧将矩形条的左边分别对齐文字在两个关键帧将矩形条的左边分别对齐文字2的最左边和最的最左边和最 右边，并创建补间动画，然后将该层设为遮罩层。右边，并创建补间动画，然后将该层设为遮罩层。 【设计思路】【设计思路】 Flash CS3 返回返回 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 18 娄底技师学院机电系 Flash CS3Flash CS3 反色文字反色文字 反色文字的动画效果：反色文字的动画效果： 在图层在图层1画一矩形，

18、并设左右两边画一矩形，并设左右两边 颜色为黑白两色。颜色为黑白两色。 在图层在图层2上复制图层上复制图层1的矩形到当前位置，并将其水平翻转。的矩形到当前位置，并将其水平翻转。 在图层在图层3中输入文字并转换成元件，然后在相应帧插入关中输入文字并转换成元件，然后在相应帧插入关 键帧，并在第一帧将文字移到矩形左边，在最后一个关键帧键帧，并在第一帧将文字移到矩形左边，在最后一个关键帧 将文字移到矩形中间，创建补间动画。将文字移到矩形中间，创建补间动画。 将图层将图层3设为遮罩层。设为遮罩层。 【设计思路】【设计思路】 思考思考：能不能实现红绿两种颜色的文字。能不能实现红绿两种颜色的文字。 Flash

19、 CS3 返回返回 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播放结束播放 Page 19 娄底技师学院机电系 Flash CS3Flash CS3 舞台任意位置显示文字舞台任意位置显示文字 舞台任意位置显示文字的动画效果：舞台任意位置显示文字的动画效果： 在最底层选取一幅图片做背在最底层选取一幅图片做背 景。景。 插入一个文字层，然后输入插入一个文字层，然后输入 一段文字，并转换为元件。一段文字，并转换为元件。 插入一个形状图层，并在相插入一个形状图层，并在相 应位置画一矩形，宽度和高度应位置画一矩形，宽度和高度 最好大于文字块的大小。最好大于文字块的大小。 在文字层相应位置插入关键在文字层相应位置插入关键 帧，第一帧将文字移到矩形块帧，第一帧将文字移到矩形块 下面，第二关键帧文字移到矩下面，第二关键帧文字移到矩 形块的上面，创建补间动画。形块的上面，创建补间动画。 将形状图层设为遮罩层。将形状图层设为遮罩层。 【设计思路】【设计思路】 返回返回 Flash CS3 教学过程教学过程 文字遮罩动画文字遮罩动画 小小 结结 上机实习上机实习 基本概念基本概念 动画实例动画实例 结束播