Flash实验指导(二十).doc

实验二十 遮罩动画【实验步骤与指导】1、镜头特效动画，请注意以下几点：（1）在“图层1”上把素材图片拖入场景，为了后面镜头效果比较明显，调整图片大小使它的高度与文档相同，并设置图片水平方向左对齐、垂直方向居中对齐。（2）在第50帧插入关键帧，使图片水平方向右对齐、垂直方向居中对齐。并创建补间动画。（3）新建一个图层，在第1帧绘制一个无框矩形，填充任意色。调整矩形的尺寸使它和文档相同，水平方向左对齐、垂直方向居中对齐。（4）设置图层2为“遮罩层”。这时一个由左到右的镜头制作完成。（5）接着制作镜头由远拉近的效果： 在图层1的第100帧插入关键帧，将图片放大3-5倍，并放置在合适的位置上。 选择第40帧，创建补间动画。 在图层2的第100帧延长帧。2、百叶窗切换效果。该动画关键点在以窗格条达到遮罩效果。（1）在图层1中放置1.jpg，调整图片尺寸大小和文档相同；新建图层2，放置2.jpg，调整图片尺寸大小和文档相同。（2）新建影片剪辑，命名为“窗格条”，用“矩形工具”画一个无框矩形，填充色任意。设置矩形大小为550*50。（3）在第40帧插入关键帧，设置矩形高度为1，选择第1帧，设置“补间”为“形状”。（4）再新建一个影片剪辑元件，命名为“水平百叶窗”，把“窗格条”拖进舞台，按住Ctrl不松手，复制粘贴9个，一一排列整齐。（5）回到场景中，新建图层3，把“百叶窗”元件拖入场景，用“对齐面板”使该元件刚好覆盖场景，并将该层设置为“遮罩层”。3、动态按钮的制作。（1）新建一个FLASH文档。（2）制作立体的圆： 选择“插入”菜单“新建元件”，新建一个名为“圆”的图形元件。 把当前图层命名为“大圆”，选择工具箱中的“椭圆工具”，设置边框线的“笔触高度”为5、“笔触颜色”为黑色，填充色为由白到黑的放射状，画一个正圆，通过颜料桶工具点击圆的左上区域，相对舞台水平、垂直对齐。如图19-4所示。 图19-5图19-4复制大圆，新建一个图层，命名为“小圆”，在该层的第1帧上选择“编辑”菜单“粘贴到当前位置”，这样就在新的图层上得到一个一模一样的大圆。此时打开“变形面板”，把缩放比例调为70%，通过颜料桶工具点击圆的右下区域，删除小圆的边框线，如图19-5所示。图19-7 箭头的绘制过程图19-6这样就得到一个有立体感的圆。（3）绘制动态箭头： 新建一个名为“箭头”的图形元件。 使用“矩形工具”、“选择工具”绘制一个没有边框的箭头形状，填充色任意。绘制过程如图19-7所示。注意：平行四边形通过变形面板的倾斜完成，通过复制平行四边形，然后用菜单“修改”“变形”-“水平翻转”得到箭头。图19-8 变形面板 新建一个名为“动态箭头”的影片剪辑元件。把“箭头”元件拖入舞台，移动到中心位置。在第20帧插入关键帧，并把箭头向右平行移动一段距离，并在“变形”面板中将箭头放大200%，然后在“属性面板”中设置Alpha为0%。如图19-8、19-9所示。图19-9 设置透明度 在影片剪辑中新建一个图层，在第10帧插入空白关键帧。把“箭头”元件拖入舞台，移动到中心位置。在第30帧插入关键帧，并把箭头向右平行移动一段距离，并在“变形”面板中将箭头放大140%，然后在“属性面板”中设置Alpha为0%。 按Enter观看影片剪辑的效果。（4）创建动态按钮： 新建一个按钮元件。 把图层1更名为“立体圆”，拖动“圆”元件进入场景，位于中央。 图19-10 图19-11 新建一个名为“变色圆”的图层，在“指针经过”帧插入空白关键帧，用椭圆工具画一个无框的、填充色为由白到蓝的放射状渐变的、尺寸比中间那个小圆略小的一个正圆。如图19-10示。 新建图层“箭头”，在“指针经过”帧插入空白关键帧，把“动态箭头”影片剪辑元件拖入舞台，调整合适的尺寸放置在圆的左边。然后复制三份，使用“变形面板”中的旋转90度、“修改”菜单中的“水平翻转”、“垂直翻转”等调整到圆的上、下、右位置上。如图19-11所示。图19-12 按钮元件的时间轴面板（5）在“立体圆”、“变色圆”图层的“按下”帧、“点击”帧延长帧。如图19-12所示。（6）回到场景1，将元件1按钮拖动到舞台中央，测试影片。【进一步练习】“水漂字”呈现的是文字在水波中飘荡的效果。在制作“水漂字”的过程中，巧妙的运用遮罩技术来产生一些特别的视觉效果。1、新建一个Flash文档，在属性面板中设置其尺寸为600*200像素，选择天蓝色（#0099FF）作为背景色。按“Ctrl+F8”键打开“创建新元件”面板，新建一图形元件，并命名为“文字”，在“文字”符号的场景中写下“水漂文字”几个字，通过属性面板，设置文本的字体为宋体、大小为80，颜色为#FF8C40。按2次“Ctrl+B”键分离成形状。2、制作“遮罩”层。按照第1步的方法，新建一图形元件，并命名为“遮罩条”，进入图形元件“遮罩条”的编辑状态，打开“混色器”面板，并进行如图19-13的设置，即中间白两边蓝的效果，“混色器面板”如图19-13所示。3用矩形工具拉出一个宽为50 px；高为100 px的矩形，然后再粘贴这个矩形遮罩，并使它们连续排列，“遮罩条”最终设置如图19-14（蓝色黑色区域为场景，以下同）所示。 图19-13 混色器面板 图19-14“遮罩条”效果图4、回到主场景，新建两个图层，并分别命名为“前景文字”和“遮罩文字”，并把“图层1”层改名为“遮罩”，调整图层的排列顺序，这时时间轴窗口如图19-15所示。5、按“Ctrl+L”键打开库，把“文字”符号拖拽到“前景文字”层中，创建相应的实例，并调整到适当的位置。接着选中文字按“Ctrl+C”键复制，并按“Ctrl+Shift+V”键原位复制到“遮罩文字”层中。6、把两个文字层都锁住，然后把库中的“遮罩条”符号拖拽到“遮罩”层中，创建一个实例，并调整到适当的位置。效果如图19-16所示。 图19-15 时间轴窗口 图19-16 效果图7、按住鼠标左键连续点选“前景文字”层、“遮罩文字”层、“遮罩”层的第50帧，按“F5”键。接着选中“遮罩”层的第50帧按“F6”键插入关键帧。鼠标右键单击“遮罩”层的第1帧，在弹出面板中选择“创建补间动画”命令。接着把“遮罩”层第50帧中的“遮罩”往左移动。如图19-17所示。图19-17 “遮罩”层左移的效果图8、右键单击“遮罩文字”层，选