遮罩层
遮罩层的原理
六、遮罩层1、遮罩层的原理您可能见过刻有各种图形的镂空木制窗户，只有在镂空的图形中您才能看到外面的景色。
在Flash中，遮罩层的作用就是一扇镂空的窗户，在该层中画出图形后，当它在其它层上移过时，只有遮罩层上画有图形的区域才能看到后面层中的图形，从而产生一些特殊的效果。
2、一个简单的遮罩层的应用先作一个被遮罩层，修改层名为“word”，使用“工具箱”中的“文本工具”在“工作区”中添加一句文本，例如“徐州师范大学”，显示“字符浮动面板”，把字体改为楷体，字号改为60以上，再把文本拖到“工作区”正中，选中第60帧，点击鼠标右键选择“插入帧”，使动画长度变为60帧，锁定该层。
新建一层，起名为“mask”，从第1帧到第30帧创建一个圆形的“运动渐变”，圆形要求比文本中的字要高，移动轨迹从文本左边到右边，再从第31帧到第60帧创建一个长方形的“形状渐变”，从一个小的长方形到一个大的长方形，从文本右下角到覆盖整个文本；建好这两个渐变后，在图层管理窗口中选中该层，点击鼠标右键，从弹出菜单中选择“遮蔽”，则该层变为“word”层的遮罩层，“播放”看一下效果。
3、另一个遮罩的实例制作过程第一步：新建影片新建一个电影文件，导入一张你喜欢的图片,利用任意变形工具使其放大到和舞台一样的大。
第二步：创建遮罩层1、点插入菜单下的新建元件，性质为图形，利用矩形工具在舞台中央拖一矩形，颜色任意。
2、回到场景，新建图层2，打开窗口菜单下的库，将正方形拖出到舞台中央，利用任意变形工具使其缩小，这时此正方形默认在第一帧。
3、在第20帧按F6插入关键帧，调整此正方形到整个舞台。
在图层1第20帧按f6插入关键帧。
4、回到图层2的第一帧，在属性面板建立运动动画，并把旋转调为顺时针，次数为15、点（选）中图层2，点鼠标右键，选择遮罩层，此时第一层自动显示为被遮罩图标内缩。
第三步：测试和保存影片1、按Ctrl+Enter测试影片2、分别执行“文件/保存”和“文件/导出影片”命令保存和导出影片文件名分别是：fm.fla和fm.swf七、制作按钮1、Flashmx制作按钮的特点在Flashmx中可以制作多种多样的按钮，按钮在各种网页中出现的几率很大，它一般分为四态按钮和两态按钮，四态按钮是按钮有一般状态、鼠标经过时状态、鼠标按下时状态和鼠标按下后再经过时状态，而两态按钮就代表只有前两种状态。
遮罩层上课讲义
遮罩层
遮罩层：可以将与遮罩层相链接的图形中的图像遮盖起来。
用户可以将多个层组合放在一个遮罩层下，以创建出多样的效果。
在LightBox中，遮罩层的作用是把焦点限制在高亮层上，原理是通过一个绝对定位的层（通常使用div），设置它的宽度和高度以致能覆盖整个屏幕（包括缩放和滚动浏览器的情况下），再给它设置一个比较高的zIndex 来层叠在原有内容之上（但要比高亮层小），这样用户就只能点到这个层之上的内容了。
遮罩层的创建
1. 创造一个普通图层,并在其上创造一个对象.此处导入一个图象2在选中刚刚创建的图层,在单击时间轴左下角的新建图层按钮,在选种的普通图层的上边建立一个新的普通图层.3. 在新建的普通图层上绘制图形与输入文字,作为遮罩层中挖空区域4. 将鼠标指针移到遮罩的名字处,单击鼠标右建,调出图层快捷菜单,单击该快捷菜单中的"遮罩层"菜单命令.此时,选中的普通图层的名字会向右缩进,表示已经被它上面的遮罩层所联系,成为被遮罩图层
设置遮罩后
遮罩层就会为图形提供一个区域（图形所占的区域，比如一个圆所占的区域就是这个圆），提供这个区域能使人看到被遮罩层的元素。
而在区域外是看不到被遮罩层上的图形元素的（可以说被蒙住了，所以也有把遮罩说成蒙版的）
遮罩层：
可以将与遮罩层相链接的图形中的图像遮盖起来。
用户可以将多个层组合放在一个遮罩层下，以创建出多样的效果。
遮罩层讲义
第十二步：为所有场景中的按钮实例设 置action动作 （1）将目标场景切换到“探照灯效果”， 选中“按钮1”实例，打开“动作——按 钮”面板，双击动作工具箱中的“动作| 影片控制|goto”命令，在“场景”下拉 列表中选择“探照灯效果”，如下图所示。 “打字机效果”和“波动效果”场景中的 “按钮1”实例设置同样的action命令。 （作用为无论在哪个场景中，只要单击 “按钮1”实例即可跳转到“探照灯效果” 场景并开始播放动画内容。）
LOGO
实验4 遮照层的设计应用
学习及实践目标：
1
理解遮罩层的概念
2
掌握遮照层技术动画作品中使用及应用
3
熟练掌握遮照层设计文字效果 ，举一反三
遮罩层的概念
遮照层是Flash动画中一种特殊的图层，有些书上称之为 “蒙板”或“Mask层”。遮照层的原理是在一个普通图 层上方建立一个新的图层，然后在这个新建的图层上挖出 一个“洞”，观众只能通过这个新图层上的“洞”，看到 底下图层上的内容，底下的图层一般称之为“被遮照层”， 上面的图层称之为“遮照层”，而遮照层上的“洞”，一 般是颜色形状。一个遮照层下面可以有多个被遮照层。如 下图所示：
（3）选中球色矩形，使用“复制”和“粘贴”按钮，在舞 台中放置其它6个球色矩形，如下图所示：
第八步：在场景1舞台使用元件创建使的图层1 重命名为“金属边框”，然后按下F11键， 打开作品素材库，将“金属边框”图形元件 拖曳到场景舞台上创建出该元件的实例，并 在属性面板中将实例的宽度和高度设置350 像素和200像素，再单击选中“金属边框” 图层的第40帧处帧格，按下F5键插入1个帧， 最后锁定图层。完成后如下页图所示：
（2）单击选中“遮照层”图层的 第1帧，按delete键将该关键帧中 的“正圆形”实例删除，然后从素 材库中拖出“水平矩形”实例，将 实例条调整大小后，置于舞台左侧 外部（与“文字”实例在同一垂直 高度），完成后如下图所示：
遮罩
1、遮罩的原理是什么？遮罩层好比黑夜中的一支手电筒，照在哪儿（指被遮罩层）哪儿就显现。
第一步：创建两个图层，命名，一个是遮罩层，一个是被遮罩层；第二步：在被遮罩层图层输入文字“闪吧，我的最爱”；第三步：在遮罩层随便画一个形状，例如一个圆；第四步：此步最关键。
点击遮罩层图层，右键选择“遮罩层”。
2、遮罩层运动起来，就象探照灯一样的效果，应如何做？第一步：把上面的圆转换为图形元件；第二步：在第15帧处插入关键帧，选中元件，把它放在场景的最右端，在两帧之间右键选择“创建补间动画”，选中第1帧，右键选择“复制帧”，在第30帧处粘贴帧，在第15帧和第30帧处右键选择“创建补间动画”；第三步：把被遮罩层的帧延长到第30处；范例：源文件3、遮罩层随鼠标移动而移动应怎样做？第一步：选中问题1的遮罩层，右键选择“遮罩层”，去掉前面的勾，此时取消了遮罩；选中圆，右键选择“转换为元件”，在弹出的对话框中选择“影片剪辑”，在主场景中给它个实例名mask_mc。
第二步：选中被遮罩层上的文字，同样转换为影片剪辑元件，实例名为_mc第三步：新建图层，名为“动作”，选中第一帧，写如下代码：_mc.setMask(mask_mc);//设置_mc被mask_mc遮罩mask_mc.onEnterFrame = function() {//mask_mc在运行每一帧时执行函数this._x = _xmouse;this._y = _ymouse;//mask_mc的坐标等于鼠标的坐标};范例：源文件4、遮罩层随鼠标移动有缓冲的效果应如何做？把问题3的第三步代码改为：_mc.setMask(mask_mc);var speed:Number = 5;//申明变量mask_mc.onEnterFrame = function() {this._x += (_xmouse-this._x)/speed;//让遮罩层缓冲运动this._y += (_ymouse-this._y)/speed;};范例：源文件5、某对象的边框一闪而过的效果怎么做？下面以效果2为例详解其制作过程第一步：创建三个图层，从上到下名称分别为“边框”、“矩形”、“文字”。
第7讲遮罩层
• （2）构成遮罩和被遮罩层的元素
• 遮罩层中的内容可以是按钮、影片剪辑、图形、 位图、文字等，但不能使用线条，如果一定要用 线条，可以将线条转化为“填充”。
• 被遮罩层中的对象只能透过遮罩层中的对象被看 到。在被遮罩层，可以使用任何对象。
• 然后执行【窗口】|【设计面板】|【变形】命令， 打开变形面板，选中【旋转】，角度为15度，连 续按下【复制并应用变形】按钮，在场景中复制
出的效果如图所示。在时间轴的关键帧上点一下， 选中全部图形，执行【修改】|【分散】命令，把 线条打散，再执行【修改】|【形状】|【将线条转 化为填充】命令，将线条转变为形状。
放大镜效果
• 图层1为原像 • 图层2为放大像 • 图层3为遮罩（运动的小球之类）
图片放大镜
• 图层1为小图MC:small、图层2为放大图MC:big、 图层3为遮罩MC:mirror
• 加AS控制：
– mirror.startDrag(true,0,0,355,451); – _root.onMouseMove =function(){ – big._x能放置动态文本。
实例：X透视
• 需要用到的AS： • _root.a._x = _xmouse; • _root.a._y = _ymouse; • start("_root.a", true); • 允许用户拖动指定的影片剪辑。 • 在同一时间只有一个影片剪辑是可拖动的。
• 各层是怎么安排的？ • 从下往上依次是：
big._width)*_root._xmouse/small._width; – big._y=(small._height-
big._height)*_root._ymouse/small._height; –}
HTML实现遮罩层的方法HTML中如何使用遮罩层
HTML实现遮罩层的⽅法HTML中如何使⽤遮罩层Web页⾯中使⽤遮罩层，可防⽌重复操作，提⽰loading；也可以模拟弹出模态窗⼝。
实现思路：⼀个DIV作为遮罩层，⼀个DIV显⽰loading动态GIF图⽚。
在下⾯的⽰例代码中，同时展⽰了如何在iframe⼦页⾯中调⽤显⽰和隐藏遮罩层。
⽰例代码：index.htmlXML/HTML Code复制内容到剪贴板1. <!DOCTYPE html>2. <html lang="zh-CN">3. <head>4. <meta charset="utf-8">5. <meta http-equiv="X-UA-Commpatible" content="IE=edge">6. <title>HTML遮罩层</title>7. <link rel="stylesheet" href="css/index.css">8. </head>9. <body>10. <div class="header" id="header">11. <div class="title-outer">12. <span class="title">13. HTML遮罩层使⽤14. </span>15. </div>16. </div>17. <div class="body" id="body">18. <iframe id="iframeRight" name="iframeRight" width="100%" height="100%"19. scrolling="no" frameborder="0"20. style="border: 0px;margin: 0px; padding: 0px; width: 100%; height: 100%;overflow: hidden;"21. onload="rightIFrameLoad(this)" src="body.html"></iframe>22. </div>23.24. <!-- 遮罩层DIV -->25. <div id="overlay" class="overlay"></div>26. <!-- Loading提⽰ DIV -->27. <div id="loadingTip" class="loading-tip">28. <img src="images/loading.gif" />29. </div>30.31. <!-- 模拟模态窗⼝DIV -->32. <div class="modal" id="modalDiv"></div>33.34. <script type='text/javascript' src="js/jquery-1.10.2.js"></script>35. <script type="text/javascript" src="js/index.js"></script>36. </body>37. </html>index.cssCSS Code复制内容到剪贴板1. * {2. margin: 0;3. padding: 0;4. }5.6. html, body {7. width: 100%;8. height: 100%;9. font-size: 14px;10. }11.12. div.header {13. width: 100%;14. height: 100px;15. border-bottom: 1px dashed blue;16. }17.18. div.title-outer {19. position: relative;20. top: 50%;21. height: 30px;22. }23. span.title {24. text-align: left;25. position: relative;26. left: 3%;27. top: -50%;28. font-size: 22px;29. }30.31. div.body {32. width: 100%;33. }34. .overlay {35. position: absolute;36. top: 0px;37. left: 0px;38. z-index: 10001;39. display:none;40. filter:alpha(opacity=60);41. background-color: #777;42. opacity: 0.5;43. -moz-opacity: 0.5;44. }45. .loading-tip {46. z-index: 10002;47. position: fixed;48. display:none;49. }50. .loading-tip img {51. width:100px;52. height:100px;53. }54.55. .modal {56. position:absolute;57. width: 600px;58. height: 360px;59. border: 1px solid rgba(0, 0, 0, 0.2);60. box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);61. display: none;62. z-index: 10003;63. border-radius: 6px;64. }65.index.jsJavaScript Code复制内容到剪贴板1. function rightIFrameLoad(iframe) {2. var pHeight = getWindowInnerHeight() - $('#header').height() - 5;3.4. $('div.body').height(pHeight);5. console.log(pHeight);6.7. }8.9. // 浏览器兼容取得浏览器可视区⾼度10. function getWindowInnerHeight() {11. var winHeight = window.innerHeight12. || (document.documentElement && document.documentElement.clientHeight)13. || (document.body && document.body.clientHeight);14. return winHeight;15.16. }17.18. // 浏览器兼容取得浏览器可视区宽度19. function getWindowInnerWidth() {20. var winWidth = window.innerWidth21. || (document.documentElement && document.documentElement.clientWidth)22. || (document.body && document.body.clientWidth);23. return winWidth;24.25. }26.27. /**28. * 显⽰遮罩层29. */30. function showOverlay() {31. // 遮罩层宽⾼分别为页⾯内容的宽⾼32. $('.overlay').css({'height':$(document).height(),'width':$(document).width()});33. $('.overlay').show();34. }35.36. /**37. * 显⽰Loading提⽰38. */39. function showLoading() {40. // 先显⽰遮罩层41. showOverlay();42. // Loading提⽰窗⼝居中43. $("#loadingTip").css('top',44. (getWindowInnerHeight() - $("#loadingTip").height()) / 2 + 'px');45. $("#loadingTip").css('left',46. (getWindowInnerWidth() - $("#loadingTip").width()) / 2 + 'px');47.48. $("#loadingTip").show();49. $(document).scroll(function() {50. return false;51. });52. }53.54. /**55. * 隐藏Loading提⽰56. */57. function hideLoading() {58. $('.overlay').hide();59. $("#loadingTip").hide();60. $(document).scroll(function() {61. return true;62. });63. }64.65. /**66. * 模拟弹出模态窗⼝DIV67. * @param innerHtml 模态窗⼝HTML内容68. */69. function showModal(innerHtml) {70. // 取得显⽰模拟模态窗⼝⽤DIV71. var dialog = $('#modalDiv');72.73. // 设置内容74. dialog.html(innerHtml);75.76. // 模态窗⼝DIV窗⼝居中77. dialog.css({78. 'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px',79. 'left' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px'80. });81.82. // 窗⼝DIV圆⾓83. dialog.find('.modal-container').css('border-radius','6px');84.85. // 模态窗⼝关闭按钮事件86. dialog.find('.btn-close').click(function(){87. closeModal();88. });89.90. // 显⽰遮罩层91. showOverlay();92.93. // 显⽰遮罩层94. dialog.show();95. }96.97. /**98. * 模拟关闭模态窗⼝DIV99. */100. function closeModal() {101. $('.overlay').hide();102. $('#modalDiv').hide();103. $('#modalDiv').html('');104. }body.htmlXML/HTML Code复制内容到剪贴板1. <!DOCTYPE html>2. <html lang="zh-CN">3. <head>4. <meta charset="utf-8">5. <meta http-equiv="X-UA-Commpatible" content="IE=edge">6. <title>body 页⾯</title>7. <style type="text/css">8. * {9. margin: 0;10. padding: 0;11. }12.13. html, body {14. width: 100%;15. height: 100%;16. }17.18. .outer {19. width: 200px;20. height: 120px;21. position: relative;22. top: 50%;23. left: 50%;24. }25.26. .inner {27. width: 200px;28. height: 120px;29. position: relative;30. top: -50%;31. left: -50%;32. }33.34. .button {35. width: 200px;36. height: 40px;37. position: relative;38. }39.40. .button#btnShowLoading {41. top: 0;42. }43.44. .button#btnShowModal {45. top: 30%;46. }47.48. </style>49. <script type="text/javascript">50.51. function showOverlay() {52. // 调⽤⽗窗⼝显⽰遮罩层和Loading提⽰53. window.top.window.showLoading();54.55. // 使⽤定时器模拟关闭Loading提⽰56. setTimeout(function() {57. window.top.window.hideLoading();58. }, 3000);59.60. }61.62. function showModal() {63. // 调⽤⽗窗⼝⽅法模拟弹出模态窗⼝64. window.top.showModal($('#modalContent').html());65. }66.67. </script>68. </head>69. <body>70. <div class='outer'>71. <div class='inner'>72. <button id='btnShowLoading' class='button' onclick='showOverlay();'>点击弹出遮罩层</button>73. <button id='btnShowModal' class='button' onclick='showModal();'>点击弹出模态窗⼝</button>74. </div>75. </div>76.77. <!-- 模态窗⼝内容DIV，将本页⾯DIV内容设置到⽗窗⼝DIV上并模态显⽰ -->78. <div id='modalContent' style='display: none;'>79. <div class='modal-container' style='width: 100%;height: 100%;background-color: white;'>80. <div style='width: 100%;height: 49px;position: relative;left: 50%;top: 50%;'>81. <span style='font-size: 36px; width: 100%; text-align:center; display: inline-block; position:inherit; left: -50%;top: -50%;'>模态窗⼝1</span>82. </div>83. <button class='btn-close' style='width: 100px; height: 30px; position: absolute; right: 30px; bottom: 20px;'>关闭</button>84. </div>85. </div>86. <script type='text/javascript' src="js/jquery-1.10.2.js"></script>87. </body>88. </html>89.运⾏结果：初始化显⽰遮罩层和Loading提⽰显⽰遮罩层和模拟弹出模态窗⼝以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。
Flash课件制作-5-遮罩层实例
1像素，并在其后插入空白关键帧。
2. 制作完整的百叶窗影片剪辑元件，把单片百叶窗复制
进来，注意用“信息面板”保持对齐。
3. 在场景中，图层1放入图片1，图层2放入图片2，图层 3放入完整的百叶窗元件，右击设置为“遮罩层。”
Flash课件制作-简单动画 实例：半径画圆
要点： 1.新建一个图形元件，名为“半径”，把此线段的左端点 的坐标设置为（0，0）。 2.回到场景，在图层1中的第一帧，拖放入“半径”，把 它的变形点设置在左侧端点。在第20帧，按F6。回到 第一帧，设置移动动画，顺时针转1次。 3.在图层2中，绘制一个圆形，无填充色。圆形的半径与 图层1的半径相等。 4.新建图层3，在每个帧中逐个按F6，并用笔刷涂抹圆形 的边缘，右击图层3，设置“遮罩层”。
Flash课件制作-简单动画 实例：水波流动效果
要点： 1.新建一个图形元件，名为“波纹”，绘制一系列无边框 矩形长条。 2.新建一影片元件“波纹移动”，添加波纹实例，制作上 下来回移动的效果
3.在图层1中，添加一个图片
4.新建图层2，添加相同图片，与图层1图片位置适当错开 4.新建图层3，添加波纹移动实例，调整位置大小，设置 “遮罩层”。
Flash课件制作-简单动画 实例：彩色字幕
要点：
1. 在图层1上绘制一个大矩形，略小于文档尺寸，设置彩
虹渐变。
2. 在图层2上键入大段文字。使文字从下向上移动。
3. 把图层2设置为遮罩层。
Flash课件制作-简单动画 实例：渐隐字幕
要点：
被遮罩层填充白色透明-黑色-白色透明渐变
Flash课件制作-简单动画
实例：探照灯效果文字
1.新建一个文件。选择【修改】/【文档】,将背景色设置为红色。 2.在编辑区输入文字“FLASH探照灯效果”。 3.在图层1上，在第30帧插入“帧”，延伸第1帧显示文字。 4.在元件库中建立一个椭圆元件：线条为无色，填充色为蓝色。 5.新建图层2，将小圆实例拖放到文字前方；在第30帧插入一个关 键帧，并把小球移到文字的最末端。 6. 在图层2上创建移动动画； 7.把图层2设置为“遮罩层” 。
Flash动画制作之—制作遮罩层动画ppt课件
图8-29 图层效果
图8-30 导入图片
4、选中“背景”图层的第1帧，按下Ctrl+Alt+C 快捷键复制该帧， 选中“被遮罩”图层的第1帧，按下Ctrl+Alt+V快捷键进行粘贴 帧操作 。
19
5、选中“被遮罩”图层的第1帧舞台中的图片，按下Ctrl+B 快捷键将 图片打散，然后删除多余部分，保留水流部分图形，如图8-31所示 。
（10）至此流水特效制作完成，保存并测试影片，得到如图8-23所 示的效果 。
图8-22 完成“海水流动”元件的创建 图8-23 完成海水流动动画
观看动画发现，整个动画只有水流效果，画面动画不够 丰富有趣，下面针对此问题为动画场景添加两只飞翔的 海鸥 。
15
3、导入海鸥 。 （1）设置图层如图8-24所示 。
遮罩层中的对象必须是色块、文字、符号、影片剪辑元件 （MovieClip）、按钮或群组对象，而被遮层不受限制
4
8.1.2 范例解析（一）──创建遮罩层动画练习
请同学们在老师的带领下进一步熟悉遮罩层动画的创建方法 和原理，并按要求完成以下操作 。
1、绘制镜片图形。 （1）打开教学资源中的“素材\第8讲\眼镜反光特效\制作模板.fla”，
如图8-6所示。 （2）在“眼镜”图层之上新建一个图层，并重命名为“镜片”层。 （3）在“镜片”图层上利用【线条】工具和【选择】工具绘制出眼
镜的两个镜片形状，如图8-7所示 。
图8-6 打开制作模板
图8-7 绘制镜片图形
5
2、制作反光效果。 （1）在“眼镜”图层之上新建图层并重命名为“光效”层。 （2）选择【矩形】工具，在【属性】面板中设置【填充颜色】为
第5帧场景效果
遮罩层动画教学课件
遮罩层动画教学课件遮罩层动画教学课件遮罩层动画，具体是通过设置遮罩层及其关联图层中对象的位移、形变来产生一些特殊的动画效果,小编收集了遮罩层动画教学课件，欢迎阅读。
教学目标知识与技能：1、使学生理解遮罩动画中遮罩的含义及原理2、学会遮罩图层的建立和遮罩效果的实现方法3、能够独立制作遮罩动画方法与过程：提问调动学生思维，观察动画原理，再通过实例演示教学，让学生了解制作原理充分发挥自己的创意情感态度价值观：1、感受用Flash制作作品的乐趣，激发学生兴趣2、感受动画制作的奇妙，培养学生的合作、探究精神教学重点：遮罩的含义以及遮罩效果的制作方法教学难点：理解遮罩层与被遮罩层之间的关系计划课时 1课时教学过程一、导入播放遮罩动画实例(探照灯、画卷、水中倒影)二、新授1、提问打开探照灯源文件，让学生主要观察遮罩层和被遮罩层回答问题师：通过观察源文件你发现什么没有?生：光图层的探照灯经过的地方文字亮图层的内容显示，其余部分不显示!师：回答的`很好!这就是我们这节课要讲的动画效果---遮罩动画2、遮罩的原理：遮罩层好比黑夜中的一支手电筒，照在哪儿(指被遮罩层)哪儿就显现。
遮罩层决定形状，被遮罩层决定显示的内容!遮罩层与被遮罩层：(1)遮罩层：图形(2)被遮罩层：被挡住的图片或文字(最终看到的内容)3、实例制作---探照灯效果【演示】(1)运行Flash，设置文档属性，背景黑色(2)把图层1命名为“文字亮”图层，在第1帧键入静态文本“欢迎学习遮罩动画”，文本颜色白色，并拷贝(3)新建图层“文字暗”，单击右键【粘贴到当前位置】命令，把欢迎学习遮罩动画粘贴到原来位置。
并改变文本颜色为深灰(4)新建一个图形元件，命名为“光”。
在编辑区里面画一个放射状填充的圆形(5)返回到场景1，新建图层“遮罩”层。
把“光”图形元件拖动到第1帧，调整其在场景中的位置(6)在“遮罩”图层的第70帧插入关键帧，并调整场景中“光”图形元件的位置。
遮罩层名词解释
遮罩层名词解释
遮罩层是一种常见的网络设计技术，用于在网页中覆盖在其他元素之上，起到显示、隐藏、保护和交互的作用。
本文将详细解释遮罩层的定义、用途和实现方式。
正文
遮罩层（Masking Layer）是指在网页设计中，使用一个半透明的层覆盖在其他元素之上的技术。
遮罩层可以通过设置不透明度来控制显示的透明度，可以用于实现各种效果，如显示或隐藏元素、保护元素、创建弹出框等。
遮罩层的用途非常广泛。
在网页设计中，常常需要实现一些交互效果，比如鼠标悬停时显示提示信息、点击按钮弹出遮罩层表单等。
遮罩层可以通过设置透明度来实现文本或图片的淡入淡出效果，使页面看起来更加流畅和美观。
此外，遮罩层还可以用于保护敏感信息，例如密码输入框、支付页面等，通过遮罩层可以防止用户信息被偷窥或屏幕截图。
实现遮罩层的方式有多种。
一种常见的方式是使用CSS和HTML。
可以通过设置一个背景色为半透明的容器，并设置其位置、大小和层级关系，从而覆盖在其他元素之上。
通过设置容器的透明度属性，可以控制遮罩层的透明程度。
另一种方式是使用JavaScript和jQuery 等脚本语言来实现遮罩层。
这种方式更加灵活，可以实现更多的交互效果，比如点击遮罩层关闭弹出框。
总之，遮罩层是一种在网页设计中常见的技术，用于实现显示、隐藏、保护和交互等功能。
通过设置透明度属性或使用脚本语言，可以轻松实现遮罩层效果。
在实际应用中，需要根据具体的需求选择合适的实现方式，并注意遮罩层的透明度、位置和层级关系，以达到最好的效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
中的内容可以是图形、文字、影片剪辑、位图等，但不能
使用线条，如果一定要用线条，可以“将线条转化为填 充”。遮罩层中的对象就像一个“窗口”，能够透过这些 窗口看到“被遮罩层”中的对象。由于遮罩层中的对象是 不可见的，在遮罩层中绘制的图形的颜色、渐变属性以及
位图等内容都不会显示出来。
在遮罩层中还可以使用形状补间动画、运动补间动画， 创作出更富有想象力的遮罩动画。
例子：
1、使用图形遮罩；
2、使用文本遮罩； 3、使用影片剪辑遮罩；
4、使用位图遮罩；
5、使用“将线条转化为填充”遮罩。
(3)在设计动画的过程中，只有将遮罩层和被遮罩层同时 锁定，才能看到遮罩的效果。
创建遮罩层
Flash中没有专门的创建遮罩层的按钮(像创建引导层
那样)。遮罩层其实是由普通图层转化来的。创建遮罩层的基 本方法是：在将作为遮罩的图层上右击，在弹出的快捷菜单 中选择“遮罩层”选项，该图层就会成为遮罩层。转换为遮 罩层的图层的图标会从普通层图标，变为遮罩层图标，同时 系统会自动把紧挨在遮罩层下方的一层关联为“被遮罩层”， 被遮罩层的图标向右缩进，如果要关联更多被遮罩的图层， 只要把这些图层拖到该遮罩层下面就可以了。
遮罩层的特点如下：
ቤተ መጻሕፍቲ ባይዱ
(1)一个遮罩层能够影响其下方的多个被遮罩的图层，
但不能用一个遮罩层遮罩另一个遮罩层。 (2)遮罩层在播放动画时是看不见的，只能看到遮罩的效 果。因此，在遮罩层中主要是设置对象的大小和形状，而 不必设置对象的渐变色、透明度等其他属性。例如，可以
将遮罩层中的对象颜色设置为黑色，更便于区分。