实验七(续).doc

实验七（续） 遮罩层的应用（续）

【实例41】卷轴画
本实例的效果为一幅卷轴画卷，纵向展开又收起的效果。
原理分析：建三个层：最上层为下卷轴，创建两段移动渐变动画：一段从上至下移动，另一段从下至上移动；中间层为遮罩层，创建两段形状渐变动画：一段由小矩形变为大矩形，另一段由大矩形变为小矩形；被遮罩层为静态不动的上卷轴和其下方的画布。
主要步骤：
（1）建立两个图形元件：卷轴和画布。
卷轴元件：画一黄色矩形，调整其左右两边线为弧形；再画一白色矩形，也调整其左右两边线为弧形；然后将白色矩形放置黄色矩形之上，过程如下图1所示。

图1
画布元件：画一有填充色矩形，然后导入图片文件“41国画.jpg”，调整两者的大小和位置，使之效果如下图2所示。

图2
（2）返回“场景1”，建立三个图层，如下图3所示。

图3
（3）“上卷轴和画布”层：将“卷轴”和“画布”元件拖入舞台，调整两者大小和位置，如下图4所示。然后复制上卷轴，再在第90帧处插入帧，最后锁定图层。

图4
（4）“下卷轴”层：粘贴上卷轴，调整其位置如下图5所示。

图5
然后在第15帧插入关键帧，在第15帧至第45帧创建移动渐变动画，第15帧下卷轴的位置如上图5所示，第45帧下卷轴的位置如下图6所示。

图6
鼠标右键单击第45帧，删除补间。
在第60帧插入关键帧，在第60帧至第90帧创建移动渐变动画，第60帧下卷轴的位置如上图6所示，第90帧下卷轴的位置如上图5所示。
最后锁定图层。
（5）“遮罩矩形”层：画一黑色矩形，宽度与卷轴宽度相等，高度为上下卷轴高度的和，位置如下图7所示。

图7
然后在第15帧插入关键帧，在第15帧至第45帧创建形状渐变动画，第15帧黑色矩形的位置和大小如上图7所示，第45帧黑色矩形的位置和大小如下图8所示。（第45帧只下拉黑色矩形的下边线）

图8
鼠标右键单击第45帧，删除补间。
在第60帧插入关键帧，在第60帧至第90帧创建形状渐变动画，第60帧黑色矩形的位置和大小如上图8所示，第90帧黑色矩形的位置和大小如上图7所示。（第90帧只上拉黑色矩形的下边线）
最后锁定图层。
最后三个图层的时间轴如下图9所示。

图9
（6）保存文件，文件名为“41卷轴画.fla”。
（7）测试影片，生成文件“41卷轴画.swf”。

【实例42】百叶窗
本实例的效果为百叶窗的效果切换两张图片。
原理分析：三个层：其中最下层为普通层（一般层），放置一张图片；中间层为被遮罩层，放置另一张图片；最上层为遮罩层（百叶窗），百叶窗为复制粘贴出的多个叶片，叶片为一段移动渐变动画，开始帧为一个黑色矩形，结束帧渐变为一条直线。叶片的渐变制作是最关键的操作步骤。
主要步骤：
（1）设置舞台大小为800 px X 600 px，建立如下图10 所示的三个图层。

图10
（2）将素材文件“42图片1.jpg”和“42图片2.jpg”导入到库。
（3）（此步骤为关键步骤）新建一个名为“叶片”的影片剪辑元件：舞台中央绘制一个黑色矩形，如下图11所示，在第1帧至第15帧创建移动渐变动画。在第15帧，将黑色矩形用“任意变形”工具调整为一条直线，如下图12所示。然后在第16帧插入空白关键帧。接着将第15帧复制粘贴到第30帧（鼠标右键点第15帧，复制帧，鼠标右键点第30帧，粘贴帧），将第1帧复制粘贴到第45帧，（粘贴后，在第30帧至第45帧若无移动渐变动画，要创建）。最后在第60帧插入帧。最后的时间轴如下图13所示。

图11

图12

图13
说明：此步骤中，上图13中，第15帧至第30帧处的画面停顿方法，与上一实例“卷轴画”中，上图9中，第45帧至第60帧处的画面停顿方法，可以达到同样的画面停顿效果，方法不同而已。
（4）新建一个名为“百叶窗”的影片剪辑元件：将上一步做好的“叶片”元件拖入舞台，复制粘贴多个，上下依次排列，如下图14所示。

图14
（5）返回“场景1”：将库中的“42图片1.jpg”拖至“图片1”图层舞台中央，“42图片2.jpg”拖至“图片2”图层舞台中央，“百叶窗”影片剪辑元件拖至“遮罩百叶窗”图层舞台中央，并调整其大小与位置，使其完全覆盖舞台。
（6）保存文件，文件名为“42百叶窗.fla”。
（7）测试影片，生成文件“42百叶窗.swf”。

【实例43】海水微波
本实例的效果为图片中的海水具有流动效果。
原理分析：三个层：最下层为整张图片，作为背景；其上层为抠图抠出的海水（因为只有海水动，其他景物不动），海水的位置相对其在原图片中的位置应有很小的位移，该层作为被遮罩层；最上层为遮罩层，为若干个上下排列的高度很小的矩形，上下任意两矩形间留有很小的空隙，所有矩形（及空隙）由上至下创建移动渐变。
主要步骤：
（1）建立三个图层，如下图15所示。

图15
（2）“背景图”层：舞台视图比例改为50%（），导入素材文件“43大海.jpg”至舞台，调整舞台大小与图片大小相等，将图片居中舞台放置，复制图片，第30帧处插入帧，锁定图层，隐藏图层。
（3）“海水”层：Ctrl+Shift+V粘贴图片，Ctrl+B打散，用套索工具、橡皮擦工具、Delete键等工具，将图片中除海水以外的景物删除，即抠图抠出海水，如下图16所示。（注意：可适当放大舞台视图比例，使抠图效果精细）。

图16
然后鼠标框选整个图形，键盘下方向键使之向下稍作移动。
第30帧插入帧，锁定图层。
（4）“遮罩矩形”层：画一高度很小的黑色矩形（宽度为整个海水的宽度），复制粘贴出若干个同样的矩形，上下排列，相邻的两个矩形中间留有很小的空隙，调整所有矩形位置，使其覆盖整个海水图案（海水上方多盖住一些），如下图17所示。

图17
在第1帧至第30帧创建移动渐变动画，第30帧处将所有黑色矩形向下移动一小段距离（不要露出海水图案）。
（5）保存文件，文件名为“43海水微波.fla”。
（6）测试影片，生成文件“43海水微波.swf”。

【实例44】小溪流水
（1）模仿上一实例“海水微波”的方法，制作小溪流水的动态效果。
（2）所需素材：文件“44小溪.bmp”。
（3）遮罩矩形只需覆盖住抠图抠出来的小溪图案即可。
（4）抠出的小溪图案，可能需要上下左右方向键多次微调其位置，多次测试，方能使效果逼真。
（5）保存文件，文件名为“44小溪流水.fla”。
（6）测试影片，生成文件“44小溪流水.swf”。

【实例45】放大镜鼠标跟随
本实例效果为一透明圆形跟随鼠标在图片上移动，透明圆形模拟放大镜效果。本实例运用了遮罩和动作脚本（程序代码）。
原理分析：四个层：最下层为背景层（一般层），为原始图片，其上层为被遮罩层，内容为等比放大后的原始图片，再上一层为遮罩层，内容为一圆形，再上一层为代码层（一般层），内容为动作脚本（ActionScript）。
主要步骤：
（1）舞台大小设置为600px X 480px，建立如下图18所示的四个层。

图18
（2）“背景图”层：导入素材文件“45诗词.jpg”至舞台，相对舞台居中，复制图片，锁定图层。
（3）“放大图”层：Ctrl+Shift+V，粘贴图片，执行“修改/变形/缩放和旋转”菜单命令，将图片放大为120%，锁定图层。
（4）“mask”层：画一黑色无边线正圆形，如下图19所示。

图19
然后将正圆形转换为影片剪辑元件，名字为“mask”。
再鼠标左键单击正圆形，在舞台下方的属性面板中，将实例名称命名为“mask”。如下图20红色线框中所示。

图20
（5）“AS”层：单击窗口最下方的动作面板，在右方的空白区域，输入如下代码：（复制粘贴即可）
onMouseMove = function()
{ mask._x = _root._xmouse-mask._width/2;
mask._y = _root._ymouse-mask._height/2;
}
（6）保存文件，文件名为“45放大镜鼠标跟随.fla”。
（7）测试影片，生成文件“45放大镜鼠标跟随.swf”。
说明：请简单分析一下“AS”层中的代码。

7