05第五讲FlashMX教程遮罩的技巧(二)

第五讲FlashMX教程——遮罩控制技术(二)名称：Flash遮罩控制技术课时：2课时（教学）＋2课时（实验）教学目标：掌握遮罩的使用方法，学习不同条件下的遮罩控制技术。主要内容：扩展的遮罩应用类型，深入学习遮罩的使用技巧，掌握不同的典型遮罩效果。一、概念提要：1、Flash中的遮罩比Photoshop中的遮罩更为强大的地方在于支持动画的运动。不光背景层内的图像可以是运动的，遮罩本身可以运动，如可以在遮罩层内应用图形直接设置运动，也可以把运动图形制作成影片剪辑（MC）产生运动效果。这罩层中使用的图像对象可以是shape、Graphic、Moiveclip1等，尤其是Moiveclip的应用，使我们甚至可以通过编程的方式来控制遮罩的运动，如此一来，遮罩可创建的效果范围就被大大拓展了。2、Moiveclip的特性影片剪辑片断（Moiveclip）是一种元件。作为元件，最基本的功能就是我们可以把它们重复从元件库中拖到舞台上，从而产生多个副本。但这也带来新的问题，尽管这个影片剪辑有它的元件名，但在舞台中的多个副本，它们的元件名是相同的，如果我们需要使某个特定的元件副本作出不同于其它副本的动作，例如副本1运动而副本2静止，那该怎么办呢？因此，Flash允许舞台中的每一个副本具有一个“实例名”（instancename）用以区分2。Moiveclip支持动作脚本（action），当我们使用动作脚本指定某一影片剪辑的动作时，实例名就必不可少了。二、实例学习Flash中典型的遮罩效果应该有不少，很难把它们归类，在各种应用技巧中，除了直接的运动设置以外，最主要的就是Moiveclip的应用，而且由于Moiveclip支持actionscript，所以我们可以通过action来生成或控制遮罩运动。此外，由于Flash中的遮罩不支持透明度，所以对于常见的透明渐变之类的效果，制作就不得不使用一些迂回的方式。下面我们将分别学习遮罩透明渐变的效果、使用Moiveclip作为遮罩、通过action来控制遮罩运动的例子。更重要的是希望通过这些例子的学习，大家能够举一反三，创建出更多的不同效果来。（一）逆向思维——透明渐变的效果例一：淡入淡出的文字效果预览成品：这是一个通过遮罩控制技术生成的动画，文字从下至上，淡入淡出，就像常见的影视字幕显示的形式。1、使用默认设置创建一个新的文档。在菜单中打开修改—文档命令，把背景色改为黑色。2、使用矩形工具绘制一个340X380的矩形，放在舞台中央的位置。3、保持矩形处于被选择状态。打开混色器控制面板，选择线性填充。在色彩渐变条中间的位置增加一个滑快，颜色选择白色，alpha值100%。修改最左侧的颜色滑块，颜色选择白色，alpha值0%。修改最右侧的颜色滑块，修改设置和最左侧相同。如图5-1。1按钮理论上也可以被作为遮罩图形使用，但由于按钮的功能主要体现在鼠标动作上而不是图形上，所以在遮罩层中使用按钮就变得没有必要了。2Flash中具有实例名的对象还有按钮、动态文本、输入文本，图形元件没有实例名，因为它不支持action。图5-1图5-24、点选左侧工具栏中的“填充变形工具”按钮，点击矩形修改渐变方向，按住角上的圆点图标拖动可以旋转调整渐变方向，按住边上的方点图标拖动可以调整渐变长度。修改后效果如图5-2。5、添加一个新的图层2。点选工具栏中的文字工具，在属性栏中选择“静态文本”，“AvantGardeMdBt”字体，18点，颜色任意，设置如图5-3。图5-36、键入相应的文字，如图5-4。为了调整行距，按下属性栏中的“格式”按钮，设置行距12pt，如图5-5。图5-4图5-57、移动文字块的位置，使它的上端位置处于底层矩形的下端下面。在第60帧按F6键复制这个关键帧，并把它的底部位置移动到矩形的上端上面。这样，文字块在运动时就可以穿过整个矩形。8、选中第1帧，在属性栏中设置补间类型为“动作”。其它保持默认不变。9、来到图层1，选中第60帧按F5键创建补间帧。（否则，后面就看不到了）10、右键点击图层2，在弹出的菜单中选择“遮罩层”。Ok，可以按Ctrl+Enter键测试影片的效果了。总结：此例中，运用了逆向的思维，由于Flash中的遮罩不支持透明度，所以在背景层中绘制一个带有渐变透明的底图，而把文字作为遮罩图形使用，并使之运动。此外，请注意对文字的补间运动类型设置，尽管它不是Graphic元件，但在Flash中，文字的运动，补间类型设置必须是“动作”，而不能是“形状”，除非你把文字打散成shape形状。（二）使用影片剪辑的遮罩控制例三：仿制大众汽车网站广告预览成品：这又是一个通过遮罩控制技术生成的动画，汽车会交错显示彩色画面和线图的效果。1、使用默认设置创建一个新的文档。2、使用插入—新建元件命令，新建一个Graphic对象的元件并命名为“car_color”。然后执行菜单命令“文件—导入—导入到舞台”，在相应的路径中找到提供的素材图片car001.jpg。如图5-6。图5-6图5-73、使用同样的方法新建一个Graphic元件并命名为“car_line”。然后执行文件—导入—导入到舞台命令，导入素材图片car002.jpg。如图5-7。（素材图片car002是在Coreldraw中根据car001描绘出的）绘制大众标志(如图5-8)图5-8图5-94、新建一个Graphic元件并命名为“logo”。首先选择椭圆工具绘制一个120X120的正圆，选中该圆，在属性面板中设置填充色#333399并删除轮廓。5、按Ctrl+C键复制该圆，再按Ctrl+Shift+V键粘贴到相同位置，注意不要取消选择，在变形面板中缩小至70%，从工具栏中选择墨水瓶工具，在图形的边缘线上单击为它添加轮廓，然后在属性面板中设置轮廓色为白色，10点粗细。6、新建一个图层，选择钢笔工具，参照图5-8画一个“V”字形，在属性面板中设置轮廓色为白色，10点粗细。按Ctrl+D键再制，注意不要取消选择，执行修改—变形—水平翻转命令，然后调整到对称的位置。7、再新建一个图层，在中间的位置画一个小的矩形，颜色和底色相同，覆盖在标志的中心位置，完成标志的制作。8、新建一个Graphic元件并命名为“arch”。使用椭圆工具，利用Flash中图形层叠的特性造型，效果如图5-9。绘制作为遮罩使用的影片剪辑元件9、新建一个MC元件并命名为“maskmc”。首先选择矩形工具绘制一个450X350的矩形，删除轮廓，颜色任意。然后在第60帧按F6键复制这个关键帧。10、回到在第1帧，利用箭头工具在矩形上选择局部条形形状并删除，效果如图5-10。11、到第60帧，用同样的方法修改矩形成为一些条状组合，效果如图5-11。（形状可以随意）然后选中第1帧，在属性栏中设置补间类型为“动作”。其它保持默认不变。图5-10图5-1112、点击时间轴上的“场景1”按钮，进入场景。重命名图层1为“color”。从元件库中选择car_color拖到舞台中放在该图层上。打开“变形面板”，把该元件缩小到70%。（原图形较大）13、添加一个新的图层并命名为“line”。从元件库中选择car_line拖到舞台中放在该图层上，同样缩小到70%。注意，两个图像位置应该完全吻合，这一点可以通过在属性栏中键入相同的X、Y轴坐标值来准确定位。14、再添加一个新的图层并命名为“mask”。从元件库中选择maskmc拖到舞台上，注意它的大小和位置应该能够完全覆盖下面图层中的图片。15、添加一个新的图层并命名为“bg”，用来放置一些修饰的背景图形。从元件库中选择logo、arch拖到这个图层上，放到如图5-12所示的位置。参照这个插图，最后再画一个30%灰色的椭圆以及两根细线，完成背景的制作。图5-1216、右键点击图层“mask”，在弹出的菜单中选择“遮罩层”。完整的时间轴上应该显示如图5-13图5-13Ok，可以按Ctrl+Enter键测试影片的效果了。总结：此例中，在被遮罩层下又增加了一个背景图像，没有被遮罩的区域显示这个图层的图像，而遮罩的区域则显示上层的图像，因而显示了不同效果的图像。此外，本例中的遮罩是一个影片剪辑，这也是一种常用的方式。（三）使用action的遮罩控制例三：放大镜预览成品：这又是一个通过遮罩控制技术生成的动画，鼠标移动过的地方，显示的地图会被放大。1、使用默认设置创建一个新的文档。2、使用插入—新建元件命令，新建一个Graphic对象的元件并命名为“guan”。然后执行菜单命令“文件—导入—导入到舞台”，在相应的路径中找到提供的素材图片guan1.jpg。3、再次新建元件，选择影片剪辑类型并命名为“zoom1”。然后使用椭圆工具绘制一个100X100的正圆，删除轮廓线，颜色任意。4、点击时间轴上的“场景1”按钮，进入场景。重命名图层1为“background1”。从元件库中选择guan拖到舞台中放在该图层上。打开“变形面板”，把该元件放大到250%，注意元件的中心点放在场景的中心位置。5、添加一个新的图层并命名为“background2”。从元件库中再次选择guan拖到舞台中放在该图层上。6、再添加一个新的图层并命名为“zoommask”。从元件库中把zoom1元件拖到场景中，放在舞台区域以外的地方。重新选中这个元件，在属性栏中“实例名”一栏键入“z1”。如图5-14。图5-14解释：实例名是舞台中每个影片剪辑元件唯一的识别名称，目的是在action中确定执行的对象。图5-157、右键点击图层zoommask，在弹出的菜单中选择“遮罩层”。8、再添加一个新的图层并命名为“action”。打开动作控制面板，按下按钮，选择“全局函数—影片剪辑控制—startDrag”，如图5-15。在startDrag();语句的括号内键入z1,true。完整语句如下：startDrag(z1,true);解释：这是一个产生鼠标跟随效果的语句，z1是进行鼠标跟随的mc元件的实例名，必不可少（在步骤6中设置的）。如图5-16。图5-16这个语句有两个用法。一个是锁定中心（lockcenter），也就是跟随的mc元件中心始终定位在鼠标的落点上。标准的用法是：startDrag(实例名,true/false);//true表示跟随鼠标位置的绝对中心；false表示元件保持以相对位置跟随鼠标，即元件在舞台中放置的位置和动画开始时鼠标所在的相对位置。另一个是限定在矩形框内,即鼠标跟随的运动被限制在给定的矩形框内，矩形框以外的区域，mc元件不再跟随鼠标。标准的用法是：startDrag(实例名,l,t,r,b);//后面的四个参数依次分别表示矩形原点x轴坐标，Y轴坐标，矩形的宽度距离，高度距离。9、时间轴上个图层应该如图5-17。图5-1710、Ok，可以按Ctrl+Enter键测试影片的效果了。总结：1、此例中，在被遮罩层下又增加了一个背景图像，没有被遮罩的区域显示这个图层的图像，而遮罩的区域则显示上层的图像，即放大了的图像。2、此例中，应用action来控制遮罩图层的图像（mc元件）。因此要注意两点，一是mc元件实例名的概念；二是startDrag();语句的用法，掌握这个语句，还可以创建出更多、更复杂的鼠标跟随效果。进阶：制作效果更精美的放大镜上面的放大镜效果你已经看到了，不过很粗糙，还有些问题，没有放大镜本身的图像，而且放大的区域似乎和放大的位置不对应，是不是？下面我们就要通过action的控制来修改它，制作一个真实的效果。首先，要有一个放大镜的图像，此外，被放大的区域要和放大镜所在的位置对应起来。1、把你场景中所有的东西都统统删除，包括时间轴上的图层、帧，就像新建了一个文件，但区别在于保留了元件库中的所有内容，省去你重复创建元件的操作。2、使用插入—新建元件命令，新建一个MC元件并命名为“zoom2”。绘制图形如图5-18，然后添加一个新图层，在镂空圆形的位置上画一个同样大小的圆形，在混色器上选择射线填充，调整渐变如图5-19，制做一个透明玻璃的效果。图5-18图5-19注意：放大镜中心的镂