高手学习指南
PHP教程
第二章 FLASH入门动画 第十二节 遮罩
这一节我们来学习遮罩。这是一个比较简单但应用广泛的技术。如果运用得当,可以产生某些特殊的效果。上面的例子就是遮罩的一种表现形式。下面我们来看一下它是怎么实现的。
首先,新建一个Flash文件。按Ctrl-M把电影属性修改为长条形,大约400X100,背景选天蓝色。
然后,选文字工具在场景中输入“新闪光时代”几个字。设置字的颜色为白色,字体为隶书,调整字号至合适大小。
新建一个层,这个层应该在文字层的上面。在该层中用椭圆工具绘制一个圆形,颜色无所谓,但要求其直径要大于刚才输入的文字高度。选中圆,按F8把它转换成一个图形类图符,因为我们在后面要多次调用。当然,不转换也可以,只不过在圆渐变运动时,要选择形体渐变,而不是运动渐变。不论是用图符还是用形体,效果都一样。
这里用图符。把圆拖到文字的左面如下图所示: 然后我们还在这一层第25帧按下F6键新建一个关键帧,再在第50帧按下F6键。现在这两帧都和第1帧具有相同的内容。我们还在打算让圆先从左向右移动到文字右端,再移回文字左端。所以在第25帧,我们用键盘上的方向右键把圆从左端移到文字右端,见下图。移动时可以按下Shift键,这样移动起来会快一些。用键盘而不用鼠标移动的好处是移动后无需进行水平对齐。 在圆所在层的第1帧,双击鼠标左键,设置渐变方式为运动渐变,怎么设不用我再多说了吧。同样,在第25帧也如是操作。因为第50帧和第1帧内容相同,所以不需要再做什么。
在圆所在层点鼠标右键,在弹出的菜单中选择Mask,也就是把这一层变为遮罩层,而下面的文字层也自动变成为被遮罩层。
我们注意到文字只在第1帧里有内容,为了在整个动画过程中文字都能显示出来,我们在文字层的第50帧按F5键,这样该层所有帧的内容将和第1帧相同。
好了,现在我们来看一看效果,应该差不多了,遮罩的感觉已经有了。现在大家应该明白为什么圆是什么颜色无关紧要了吧。因为遮罩就是把遮罩层中对象以外的部分遮盖住,而只显示透过对象的被遮罩层的内容。所以我们看到的文字的颜色是被遮罩层的,与遮罩层无关。
为了使动画的效果更明显一些,我们可以在最下面放上浅一些颜色的文字做底色。我们选中圆所在层,再点新建一个层,把这个新建的层拖到最下面来。在文字层中选中文字,按Ctrl-C复制,再回到最下层,按Ctrl+Shift-V把文字粘帖到原来的位置上。在文字上双击鼠标左键,进入实例属性对话框。在Color标签下把Alpha值改到50或以下,让文字显得透明一些。你也可以把文字打散再填充灰蓝一些的颜色。然后我们选中第50帧,按F5键,让之间所有帧的内容与第1帧相同。
现在动画的效果是不是更好一些了呢? 咦,这个东东我们不是在前面做过了吗,怎么又拿出来了?呵呵,先别急,上面这个例子的效果的确在前面的第十节里出现过,也就是文字的镂空效果。不过相同的效果可以用不同的方法来实现,我们现在就介绍用遮罩来实现文字镂空效果的方法。
大家还记得第十节中我们用的是什么方法吗?简单地说,那一节中我们先要做一个镂空的色带,也就是先要画一个和电影属性中的设置同样大小的矩形覆盖背景,矩形的填充色和我网页的背景色相同,再在上面写上文字,把文字打散融于这个矩形中,再把文字删掉就形成了镂空。然后让图片在下面移动,就可以得到上面的效果。
那么如果我们用遮罩又该怎样实现呢?其实,方法就更简单了。首先,我们先按Ctrl-M把电影文件的属性设置成与第十节中这个例子同样的宽度和高度,将背景色设置为与网页背景色相同的天蓝色。在设置电影文件属性的背景色时,因为Flash中只提供了部分颜色可供选择,如果没有自己想要的颜色怎么办呢?这里提供一个小窍门。下面的颜色面板是我们在按下Ctrl-M,点击Background所对应的Color按钮后所得的背景色选择面板。 先随便选一个颜色退出电影属性设置。然后我们点绘图工具栏中的颜料桶工具,也可以点矩形,椭圆或笔刷工具等,在其下的参数修改器中找改颜色的按钮,进入颜色选择面板。点进入颜色设置对话框,在Solid标签下,我们按New新建一个色值,使用颜色区选择一种颜色或直接在R,G,B输入框中填上色值,我在这里分别填上0,112,170,如下图所示,在预览窗口可以看到现在的颜色已经和我网页的背景色一样了。按Change把设好的颜色保存下来。点颜色设置窗口右上角的X关掉这个窗口。
再按Ctrl-M进入电影属性设置面板,点Background下对应的颜色按钮,进入背景色选择面板,这时我们发现刚才新建好的天蓝色已经出现在颜色选择面板的最下方了,如下图所示,选择它就行了。
现在背景色已经设置成我们需要的颜色了。然后,我们在这一层上写上文字“新闪光时代”,字体字号及位置与第十节中镂空效果的文字相同。
新建一个层,把这个层拖到文字层的下面来。还把上次用的图片放到这一层中,且使该层的内容和设置与第十节中镂空效果示例中的图片层完全一致。
现在我们在文字层的第40帧按F5键,保持文字在这40帧里的持续显示。然后我们在文字层的点鼠标右键,在弹出的窗口中选Mask,则图片层自动成为被遮罩层。设置好的时间轴窗口如下图所示:
现在我们来看一下效果。按Ctrl-Enter。怎么样,和第十节我们讲过的效果一样吧。这种方法好象还要简单些。与我们这一节开头的那个示例比较一下,看看两者有什么不同。是的,本节开头的示例中是移动遮罩层中的对象,而这个示例是移动被遮罩层中的对象,这样就会形成截然不同的效果了。看来,灵活运用相同的技术,我们也可以产生风格各异的效果来。这里是这个示例的源文件。