第二章 FLASH入门动画
第十三节 放大镜效果
在这一节中,我们将利用上一节学过的遮罩来实现一个放大镜的效果。因为讲解所需的图片比较多,所以载入时间也许会长一些,还请大家多等一会儿,因为这一节的内容既重要又有趣,不学可惜了耶。上面的示例做得还不错吧,呵呵,也花了我不少时间呢。现在我就一步一步地来详细说明制作过程。
新建一个文件。按Ctrl-M把电影属性设置为525 px X 120
px,天蓝色背景。
选绘图工具栏中的文字工具,用黑体48号字选择白色在工作区中间写上“新闪光时代”五个字。略微放大这几个字到如下图所示大小,怎么放大不用我多说了吧。双击这一层文字“Layer
1”,将名字改为“Background Text”。
在这一层上新建一个层,命名为“Magnified Text”,这一层将用于显示放大了的文字。还用文字工具选黑体72号字,用稍有些灰的白色在这一层仍写上“新闪光时代”五个字。颜色的选用是根据物理上光学的知识,放大后的字会损失一部分光线,所以选择稍灰暗一些的颜色。现在两层文字重叠在一起。我们的思路是当放大镜从待放大的字的左端移到右端,也就是滑过这五个字时,在放大镜里也正好同步显示这五个字,但问题是这两层中的文字不一样长度,这就需要我们在动画过程中还要稍稍向左移动这一层上的文字,使得两层中的文字起点和终点尽量接近。方法如下:
在Magnified Text层里把72号字的左端移动到下图所示的位置上,使两层中的文字左端位置比较接近。
然后我们在第40帧里按F6生成关键帧。在Background Text层里的第40帧按F5保持第1帧的内容。回到Magnified
Text层里的第40帧上,用键盘上的方向键把文字向左移动到下图所示位置上。然后在第1帧双击鼠标左键设置从第1帧到第40帧的运动渐变。
下面我们来设置遮罩层使放大的文字在特定的区域里才能显示。在最上面新建一个层,起名为“Mask Top Text”,如果新建层不在最上面,把它拖到最上面即可。用椭圆工具画一个不带边线的圆,代表放大镜,颜色无所谓,直径比放大层中文字要稍大一些,位置如下图所示。当设置此层为遮罩层后,只有圆形中的被遮罩层的内容才能被显示出来。
为了方便调用,用箭头工具选取圆,按F8把它转换为图形类图符。在这一层的第40帧按F6插入关键帧,并把圆向右移动到下图所示位置。双击第1帧设置帧属性为运动渐变。在这一层上点鼠标右键,在弹出的菜单上选Mask设为遮罩层,这时下面放大的文字所在层自动成为被遮罩层。
现在我们来观察一下效果。按Ctrl-Enter发现随着圆形的移动,放大的效果已经出来了。不过放大的文字下方却还可以看得到背景文字,这是不真实的,所以我们还要再改进一些。
看来我们得对最下面的背景文字也加一个遮罩层,让代表放大镜的圆所过之处的背景文字不被显示。选择Background
Text层,点 新建一个层,新建的层将位于最下面的文字层上方,给它起名为“Mask
Bottom Text”。
在这一层上,我们用矩形工具,以任意填充色(不要与圆的颜色相同)绘出一个不带边线的矩形,长度约为1050
px,也就是电影属性设置的长度的2倍,宽度大约110 px,把它放在如下图所示的位置上。因为这个矩形太长了,这里放不下所以缩小了一半显示。由于这个矩形所在层的缘故,它遮住了下面的背景文字层,而放大的文字层及其遮罩层上的内容可以显示出来。
现在我们把放大的文字所在层隐藏起来,让编辑区里只能看见矩形和圆形。选择圆形,按Ctrl-C复制,然后把圆所在层也隐藏起来。选择矩形所在层,按Ctrl+Shift-V把圆形复制到这一层原来的位置上,按Ctrl-B把它打散,如下图所示:
然后我们用箭头工具在圆的外面拉出一个比矩形的高度要大一些的框选中矩形的一部分和整个圆,见下图。这一步的作用是使圆和矩形融合在一起。
在矩形外点一下,取消对这部分区域的选择,再一次用鼠标点选圆形,按Delete键把圆删除,得到下面所示的图形:
这是一个镂空的色带,与以前所讲不同的是,这次镂空的部分是一个图形而不是文字。而且,我们用它来作遮罩时,有形体的部分下面的内容将正常显示,而中间被镂空的部分下的内容无法显示出来,这实际上与镂空的概念是截然相反的,但这个效果正是我们希望的。
用箭头工具拉一个大框套住全部矩形,按F8把它转换为图形类图符,以方便调用。在矩形所在层的的第40帧按F6新建一个关键帧。把这个镂空的矩形移到下图所示位置。这个位置的确定是由代表放大镜的圆的位置所决定的。我们可以对圆所在层恢复显示,让镂空的矩形中间的空洞在第40帧正好对准代表放大镜的圆。在矩形所在层的第1帧设置帧属性为运动渐变。然后,用鼠标右键点击这一层,在弹出的菜单中选择Mask。
现在我们再来看一下结果,按下Ctrl-Enter发现,放大镜效果已经是非常明显的了。为了产生更好的效果,我们再来动手做一个放大镜加上去,使得效果真加逼真一些。
按Ctrl-F8新建一个图形类图符。进入图符编辑画面,按下Ctrl-L打开图库窗口。从预览窗口中把圆形图符拖动在编辑区中,使它中心的十字与编辑区中心的十字重合。按下Ctrl-B把它打散,再按Ctrl-X把它剪切到剪帖板中。
我们再从预览窗口中拖一个圆形图符到编辑画面中,将它的中心与编辑区中心的十字重合,如下图一所示。在圆上点鼠标右键选Scale。拉动右下角的手柄把圆放大一点,发现圆的中心并没有移动,见下图二。按Ctrl-B把圆打散,用颜料桶工具给圆填充黑色,如图三所示。
然后,我们按Ctrl+Shift-V把刚才剪取的圆粘帖到原来的位置上,在图形外面点一下,如图四所示,这时两个圆已经很好地融合在一起了。点取中间浅黄色的圆,按Delete键把它删掉,就得到图五中所示的图形。如果愿意,我们还可以用墨水瓶工具给图五中的图形加上适当颜色的轮廓线。
现在,放大镜的透镜部分我们已经做好了,下面来制作手柄。还是在透镜的编辑窗口下,在另一个区域里选择矩形工具拉出一个如下图六所示的用从暗黑到黑的线性渐进色填充的矩形。然后我们用箭头工具将其下面的三条边拉出一些弧度来,见图七。在手柄上点鼠标右键选Rotate将手柄旋转一个角度,见图八。现在我们就把手柄也做好了。如果对手柄的粗细不满意,还可以适当放缩。图九是手柄的最终样式。
把手柄移动到透镜下方适当位置处,就得到了完整的放大镜,见下图。
回到主场景,在最上面新建一个层,在这个层上把放大镜图符调入,同样在40帧插入关键帧,在第1帧设置运动渐变。使从第1到第40帧里,放大镜的透镜始终与Mask
Top Text层中的圆形位置重合。这样,我们的工作就基本上做完了。
为了使动画更连续,我们在第80帧插入关键帧,并制作放大镜移回的动画。这个大家自己完成吧。对了,因为电影属性中背景不够大,我们还需要按Ctrl-M把高度设置为210
px。这样一个完整的放大镜动画就全部做好了。做好后的时间轴应如下图所示。
这一节的内容比较多,不过也很有趣,所讲到的方法我们在以后的动画制作中也会经常用到。从这个示例中,大家也可以很好地体会遮罩的用法。这里是该示例的源文件 。