当前位置:首页 >> 理学 >> 第六章 遮罩层动画的制作

第六章 遮罩层动画的制作


第六章

遮罩层动画的制作

6.1 理解遮罩层动画的作用和特点 教学目标
? ? 遮罩层的创建要点和技巧; 制作简单遮罩层动画;

要求
理解遮罩层的概念和作用,了解遮罩层和被遮罩层的关系、可使用的动画元素和效果, 掌握编辑遮罩层的方法,能制作常见遮罩动画效果。

重点与难点
理解遮罩层的概念及作用,了解遮罩层和被遮罩层的关系及可使用的动画元素掌握创 建、编辑遮罩层的方法和技巧。

案例 1:探照灯 【案例欣赏】

【案例分析】
在做此实例要用到补间动画,和遮罩动画,了解哪层是遮罩层。以及元件的创建。

【操作演示】
① 新建 flash 文件,背景设置为黑色。图层一的属性设置为“文字层” 。选择“文本工

具” ,字体大小为“72” ,字体设置为“华文彩云” ,字体颜色为“绿色” 。然后在舞台中 输入“电脑爱好者”五个字。



单击第 50 帧,按 F5 插入一个普通帧,按 CTRL+8 新建一个名为 ball 的影片剪辑,

选取“画图工具” ,画一个无边框,填充色为白色放射状渐变色的圆,如图 8-1-2



回到场景中,添加一个新的图层,命名为探照灯。 (注意:文字层在探照灯曾德上

面) 。单击探照灯层,将符号 ball 拖到舞台最左边。 ④ 在“探照灯”层的第 30 帧处按 F6 插入一个关键帧,这一帧小球在舞台的最左边,

在第 50 帧处按 F6 插入一个关键帧,这一帧小球在舞台的最右边,并做补间动画。如图 8-1-3

⑤ ⑥

在文字层上单击鼠标右键,在菜单中选择遮罩。即用文字来遮罩探照灯。 按 Ctrl+S 保存。

【课堂讲解】
8.1.1 遮罩层与被遮罩层的概念及作用
“遮罩”,顾名思义就是遮挡住下面的对象。首先我在红板(遮罩层)上挖一个洞,把它 放在蓝板(被遮罩层)之上,随着红板的移动,大家可以观察到的一个蓝色圆洞在移动,这 说明我们是透过红板上的这个洞看到下面的内容的。这个洞(元件)是透光区,所在层为遮 罩层。它就像一张不透明的纸遮住它下面的图层,使你看不到下面图层中的内容。而在遮罩 层中的图片或文字,就像是在这张纸上开的孔,透过它就可以看到下面图层中的内容,这就 是遮罩动画的原理。 遮罩层跟其他层一样可以在帧里绘图, 但是只是在有图形的位置才有遮罩效果, 没有图

像的部位什么也没有,但遮罩层里的图像不会显示,只起遮罩作用; 在 Flash8.0 动画中, “遮罩”主要有 2 种用途,一个作用是用在整个场景或一个特定区域,使场景外的对象或特 定区域外的对象不可见, 另一个作用是用来遮罩住某一元件的一部分, 从而实现一些特殊的 效果。遮罩层中的图形对象在播放时是看不到的,遮罩层中的内容可以是按钮、影片剪辑、 图形、位图、文字等,但不能使用线条,如果一定要用线条,可以将线条转化为“填充” 。 被遮罩层中的对象只能透过遮罩层中的对象被看到。 在被遮罩层, 可以使用按钮, 影片剪辑, 图形,位图,文字,线条。

【实践与拓展】
根据本例介绍的方法,自行制作舞台灯光,浪漫烟花。

8.2 遮罩层动画的典型应用 案例 1:放大镜效果 【案例欣赏】

【案例分析】
在此实例中用到的图层较多,要熟练掌握遮罩层的设置。

【操作演示】
① 新建 flash 文件,背景设置为蓝色。图层一的属性设置为“小字层” 。选择“文本工

具” ,字体大小为“30” ,字体设置为“华文行楷” ,字体颜色为“黄色” 。然后在舞台中 输入“海枯石烂”四个字。单击第 25 帧,按 F5 插入一个普通帧. ② 新建图层,命名为“圆 1” 。选取“画图工具” ,画一个无边框,与背景颜色相同的

圆。并将其保存为元件,命名为“圆” 。将圆拖到舞台最左边。在“圆 1”层的第 25 帧 处按 F6 插入一个关键帧,这一帧圆在舞台的右边。 ③ 新建图层,命名为“大字” 。选择“文本工具” ,字体大小为“60” ,字体设置为“华

文行楷” ,字体颜色为“黄色” 。然后在舞台中输入“海枯石烂”四个字。覆盖在“小图

层”的四个字上面。单击第 25 帧,按 F5 插入一个普通帧。 ④ 新建图层,命名为“圆 2” 。将原件“圆”拖入场景中,第一帧将圆拖到舞台最左

边。在“圆 1”层的第 25 帧处按 F6 插入一个关键帧,这一帧圆在舞台的右边。 ⑤ 新建图层,命名为“放大镜” 。用“画图工具”画一个放大镜。



在第 1 帧处,放大镜的位置与第 1 帧大圆小圆的位置将同。单击第 25 帧,按 F6

插入一个关键帧,放大镜的位置与第 25 帧大圆小圆的位置将同。如图 8-2-3



将圆 2 设置为遮罩层。并给图层做补间。如图 8-2-2



按 Ctrl+S 保存。

【课堂讲解】
8.2.1 创建遮罩的方法和技巧
在 Flash CS4 中没有一个专门的按钮来创建遮罩层,遮罩层其实是由普通图层转化 的。你只要在某个图层上单击右键,在弹出菜单中把“遮罩”前打个勾,该图层就会生成 遮罩层,“层图标”就会从普通层图标变为遮罩层图标,系统会自动把遮罩层下面的一层 关联为“被遮罩层”,在缩进的同时图标也发生变化,如果你想关联更多层被遮罩,只要把 这些层拖到被遮罩层下面就行了。

【实践与拓展】
根据本例介绍的方法,自行制作百叶窗。

案例 2:水波纹效果 【案例欣赏】

【案例分忻】
在本实例的制作过程中, 使用椭圆工具绘制椭圆并创造形状补间动画, 然后将椭圆所在 的层设置为遮罩层。

【操作演示】
① 新建 flash 文件,执行“文件”|“导入”|“导入到舞台”命令,将一幅湖水图片导

入到舞台。新建图层 2,将图层一第一帧复制到图层 2 的第一帧。 ② 新建图层三,使用椭圆工具在湖水中绘制一些无边框,填充色为任意色,大小不一

的椭圆。



在“图层 2”与“图层 3”的第 35 帧处插入帧,在“图层 3”的第 35 帧处插入“关

键帧” ,并将该帧的内容向右移动 100 个像素左右。然后建立补间动画。 ④ 选中“图层 2”第一帧处的图片,将其像上移动 3 个像素。然后选中“图层 3” ,单

击鼠标右键,在弹出的菜单中选择“遮罩层”命令。



按 Ctrl+S 保存文件。

【课堂讲解】
8.2.2 创建和取消遮罩层
遮罩层是由普通图层转换而来的。只要在某个图层上右击,在弹出的快捷键菜单中选择 遮罩层命令,该层就会成为遮罩层。取消遮罩层的方法一样,只要在某个图层上右击,在弹 出的快捷键菜单中选择取消遮罩命令,该层就会成为普通层。

【实践与拓展】
根据本例介绍的方法,自行制作水中倒影。

案例 3:辉光文字效果 【案例欣赏】

【案例分忻】
一道白光迅速掠过一排文字, 这是我们经常在广告和电视中看到的效果。 你想不想知道 它们是怎么制作出来的呢?其实很简单, 利用前面学过的知识就可轻易地做出这个效果, 下 面,让我们动手试一试。

【操作演示】
① 新建 Flash 文件, 创建“我要学做闪客”元件。执行【插入】|【新建元件】

命令,新建一个图形元件,名称为“我要学做闪客”。单击工具箱中的【文字工具】 , 在场景中输入“我要学做闪客”六个字,在【属性】面板中,设置文字参数如图所示。

② 选中字体,执行【修改】|【分离】命令二次,把字体打散,再选择【颜料桶工具】 , 把字体中心填充成红色。文字效果如图所示。

③ 创建“辉光”元件。执行【插入】|【新建元件】命令,新建一个图形元件,名称为 “辉光”。执行【窗口】|【设计面板】|【混色器】命令,打开【混色器】面板,设置 【填充样式】为线性,将三个色标全部设置为白色,第一和第三个的【Alpha】值为零, 中间的为 74%(你可按需设置) ,设置完后,在场景中画一个无边矩形,大小为 40×230, 如图所示。

④ 创建动画。单击时间轴右上角的【场景 1】按钮,切换到主场景。创建【底层文字】 。 将【图层 1】重新命名为【底层文字】 。从库里把“我要学做闪客”的元件拖到场景中, 在第 60 帧处添加普通帧,这一层起显示文字的作用。步骤 2 创建被遮罩层。新建一个 【辉光】图层,从库里把“辉光”元件拖到场景中,放在“我要学做闪客”元件实例的 左边。选择工具栏上的【任意变形工具】 ,单击【选项】中的【旋转与倾斜】按钮,将 鼠标放在“辉光”元件实例的任意一个角,拖动鼠标旋转一定有角度,使“辉光”元件 实例产生一定的倾斜度。在第 30、60 帧处添加关键帧,在第 30 帧处把“辉光”元件实 例拖到“我要学做闪客”元件实例的右边,在第 1 帧和第 30 帧处建立动作补间动画, 如图所示。

⑤ 创建遮罩层。新建一个【遮罩层】图层,复制【底层文字】层的第一帧中的元件实 例,选择【遮罩层】的第 1 帧,执行【编辑】|【粘贴到当前位置】命令,用鼠标右键 单击【遮罩层】 ,选择【遮罩层】 ,设置此层为遮罩层,这一层的作用是用字体做遮罩元 素,用它来控制辉光在场景中出现的大小和位置。最终时间轴如图所示:



按 Ctrl+S 保存。

【课堂讲解】
6.2.3 线条作遮罩,将线条转换为填充
在 Flash 中,不允许对线条做遮照操作,我们必须先把线转换为填充。 转换为填充的方法是在工具栏选择箭头工具框选 F 边框线, 然后选择“修改”菜单形状子项 下的“将线条转换成填充”命令。

【实践与拓展】
根据本例介绍的方法,自行制作百叶窗效果。

案例 4:滚动字幕 【案例欣赏】

【案例分析】
在 Flash 中图层与图层之间的关系不仅是上面图层挡住下面的图层,而且还是互相制约 的,其中遮罩层与被遮罩层的关系就是这样的。这里通过一个简单的例子“滚动字幕”,来加

以说明。本实例如图所示,一段优美的诗文从舞台的右侧缓缓进入,到达舞台合适位置时自 动消失。

【操作演示】
① ② 启动 Flash,新建 Flash 文档,在时间轴上将图层 1 改名为“背景”。 选择菜单栏“文件→导入→导入到舞台”命令,找到我们事先准备好的图片,将其导

入到舞台。 ③ 新建图层 2,命名为“文字”。 选择工具栏中文字工具在舞台上单击输入文字, 。文

字输入之后,单击工具栏中的选择图标,选中文字后把它移至舞台的右侧。



在背景层第 168 帧处单击右键,插入帧。在文字层第 84 帧单击右键,插入关键帧。

把舞台上的文字移到舞台中,移动文字的同时按住 Shift 键可以水平移动。 ⑤ 选择文字层 1-84 帧之间任意一帧, 单击右键创建补间动画。 在该层第 168 帧单击

右键插入关键帧。把文字继续向左移(要同时按住 Shift 键来拖移文字,注意和前一位 置的关系,文字整体应在前一位置的左侧)在 84-168 帧之间任意一帧,单击右键创建 补间动画。



把文字层加锁,新建图层 3,命名为“遮罩”层。选择工具栏中矩形工具

,笔

触色设为无, 填充色任意色, 在舞台上画一矩形, 矩形的大小应和文字整体大小相同 (不 能小于文字整体,否则遮不住的) ,可以先在舞台右侧文字之上画矩形,然后把其移到

舞台中。 ⑦ 选择遮罩层,单击右键,选择遮罩层。时间轴如图所示

⑧ 小结:

此时,动画基本完成。保存并按下 Ctrl+Enter 键,测试动画效果!


赞助商链接
更多相关文档:

第12周模块二Flash动画制作第6节 《层的应用》教学设计...

然后 重点介绍有代表意义的 Flash 引导层动画和遮罩层动画的制作方法。 轨迹动画...爱祖国情感 四、教学理念和方法 教材第六节内容围绕教学主题——层展开教学活动...

第六章多媒体应用FLASH

flash制作MTV 11页 1财富值如要投诉违规内容,请到百度文库投诉中心;如要提出功能...Flash 中有普通层、引导层、遮罩层和被遮罩层四种图层 类型。 ④ 编辑按钮:...

遮罩动画之“水流效果制作”

强调 了在进行遮罩动画制作时,首先 要确定好遮罩层与被遮罩层,并 且通过具体...第六章特殊动画制 作遮罩动画制作 图形(图像) 、动画、 课件,解说 提出任务...

《FLASH动画》课程实施性教学大纲

章 节 名 制作图层动画 制作遮罩层动画 制作引导层动画 称 总课时 12 6 6 ...第六章 §6-1 §6-2 §6-2 第七章 §7-1 §7-2 §7-3 §7-4 ...

个人精心设计的遮罩动画教案

“FLASH 遮罩效果”教学设计一、教材分析 本节课以高等教育出版社的《FLASH 动画设计与制作第六章单元活动的教 学内容为依据。 本节课的教学内容是 FLASH 的“...

动画制作讲稿

动画制作讲稿_IT/计算机_专业资料。动画制作 第 1 页共 41 页 动画制作教学大纲...第四章 基本动画类型。 第五章 引导线和遮罩层动画基础。 *第六章 声音和...

第六章 FLASH 5练习题2

第六章 动画制作 一、填空题: 1、Flash 是一种...必须由 补间(关键帧) 动画中的 运动引导层 来完成...3、制作一个文字遮罩动画。 今日推荐 68份文档 ...

Flash动画设计与应用

掌握引导层与运动引导层动画的制作方法; 2、掌握遮罩层的使用方法和应用技巧; ...第一章 第二章 第三章 第四章 第五章 第六章 第七章 第八章 第九章 ...

Flash动画制作考试大纲

第三章 Flash 动画制作 考试内容与要求: 掌握逐帧动画、变形动画、补间动画、遮罩动画、引导 线动画等五类动画的创建方法与应用技巧,能够综合应用这 五类动画技巧...

《Flash CS6二维动画制作》复习题

广州市广播电视大学附设职业技术学校《Flash CS6 二维动画制作》复习题一、 ...答:遮罩层就象一个幕布,其下面图层的图形被其遮挡不能显示 出来。如果在遮罩层...

更多相关标签:
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com