【大学课件】Flash遮罩层动画.ppt
,Flash-遮罩层动画,http:/,学习目标,了解遮罩层动画的基本功能熟练掌握绘制遮罩层动画的基本方法,http:/,知识要点,http:/,Flash 动画制作,遮罩动画,在Flash中，图层有一种遮罩图层。想象一下，我们现在正透过窗户观看窗外的美景，我们所看的只是窗户这个范围，其他的景物都被墙壁遮住了。Flash中的遮罩与此现象非常类似。遮罩动画是通过遮罩层来完成的。遮罩的原理就是将某层作为遮罩，遮罩层下的一层是被遮罩层，而只有遮罩层上的填充色块下面的内容可见，色块本身是不可见的。作为遮罩层的对象可以是填充的形状、文字对象、图形元件和影片剪辑元件。,http:/,遮罩动画,对于一些特殊的动画效果，如聚光灯、淡入淡出效果、水波等，都可以通过Flash的遮罩功能来实现。,http:/,http:/,遮罩动画的概念,遮罩层和引导层一样，是Flash中特殊的图层。合理地使用遮罩层可以创建出丰富多彩的动画效果。在现实中我们可以看到很多类似遮罩的情况，比如说通过望远镜我们只能看到一部分景物。在Flash中，可以通过遮罩层来定义其下面的图层中对象的可见区域。遮罩层是一种很特殊的图层，可以将下面的图层屏蔽，而下方的被遮罩层只能显示上方遮罩层图形区域大小的内容。,http:/,制作如图所示的动态文字效果。,http:/,制作“动感文字”,本例将遮罩原理用于制作动感文字，在文字的轮廓中将出现流云的运动效果，避免文字过于呆板和单调，增加其美感，最终设计效果如图所示。,【设计目标】,http:/,使用一幅静态图片制作流水效果，参考图片如图所示。,http:/,“水中倒影效果”,利用遮罩原理可以表达很多动画效果。例如，“水”是动画中常用的主题，波光粼粼的水面、水中美丽的倒影、流动的小溪以及“飞流直下三千尺”的瀑布都是动画设计师宠爱的题材。本例将进一步加深对遮罩效果的理解，掌握在影片剪辑中制作遮罩效果的方法。,【设计目标】,http:/,“瀑布效果”,遮罩动画的原理就是透过遮罩层物体的形状看到被遮罩层物体的内容，因此要使图片中静止的瀑布“动起来”，而其他区域的景色则保持不变，应该分两步来处理。首先分离瀑布流水。然后给流水添加遮罩效果。,【设计思路】,http:/,利用遮罩制作放大镜效果，如图所示。,http:/,遮罩动画的概念,一个遮罩效果的实现至少需要两个图层，上面的图层是遮罩层，下面的图层是被遮罩层，如图所示，其中“图层2”是遮罩层，“图层1”是被遮罩层。与普通层不同的是，在具有遮罩层的场景中，只能通过遮罩层上对象的形状，才可以看到被遮罩层上的内容。,http:/,1.创建遮罩层动画的两种方法,在“时间轴”面板中，选择要设置为遮罩层的图层，单击鼠标右键，在弹出来的快捷菜单中选择“遮罩层”命令，就可以添加遮罩，如图所示：在“时间轴”面板中，双击要作为“遮罩层”的图层的图标，会弹处“图层属性”对话框，在对话框中选择类型为“遮罩层”，此时图层图标会变为形状。然后双击要作为“被遮罩层”的图层的图标，会弹出“图层属性”对话框，在对话框的类型栏里面选择“被遮罩”，然后单击“确定”按钮，即可以和“遮罩层”建立链接。,http:/,8.1 遮罩层动画原理,8.1.1 知识点讲解,在开始对遮罩层动画进行典型案例分析之前，首先来学习遮罩层动画的创建方法及其原理，为后续的提高打下理论基础。,一、创建遮罩层。,图8-1 两个图层的遮罩,图8-2 用鼠标右键创建遮罩层,图8-3【图层属性】对话框,http:/,取消遮罩层动画的三种方法,在“时间轴”面板中，将“被遮罩层”拖动到“遮罩层”的上方，就可以取消遮罩层动画。可以通过设置“遮罩层”的图层属性来取消遮罩层动画。在“时间轴”面板中，双击“遮罩层”的图标，会弹出“图层属性”对话框，在对话框的类型栏里面选择“一般”，然后单击“确定”按钮，即可以断开和“被遮罩层”建立的链接。在“时间轴”面板上，选择“遮罩层”，单击鼠标右键，在弹出来的快捷菜单中选择“遮罩层”命令。,http:/,使用遮罩原理创建复杂动画,遮罩层中有动画对象存在的地方都会产生一个孔，与其链接的被遮罩层相应区域中的对象可以显示出来；而没有动画对象的地方会产生一个罩子，遮住链接层相应区域中的对象。利用这个原理再辅之以其他动画设计方法，可以制作出更多富有创意的设计作品。本任务将创建两个具有实用价值的动画作品。,http:/,遮罩原理（注意事项）,遮罩层中的对象必须是色块、文字、符号、影片剪辑元件（MovieClip）、按钮或群组对象，而被遮层不受限制.,图8-4 遮罩前的效果,图8-5 遮罩后的效果,http:/,“地球旋转效果”,首先制作蓝色方格背景。然后制作半透明圆形球体作为遮罩层。接着利用勾勒出来的大陆版块作为被遮罩层。圆形球体是不运动的，但如果让被遮罩的大陆版块运动起来，圆形球体看起来就是运动的。对大陆版块要分正面和背面，因此需要使用多个被遮罩层。,【设计思路】,http:/,案例：模拟“物体在管道中下落的效果”,使用遮罩效果模拟现实生活中物体在管道中下落的运动效果，动画中使用简单的箭头图形来代表物体和管道，物体以不变的速度在管道中下落，在转弯处自动改变方向，最后的设计效果如图所示。,【设计效果】,http:/,【设计思路】,箭头物体在拐弯处转折的流畅性。本例采用两段无缝隙的遮罩动画来处理。箭头物体在下落的过程中始终处于窗口的视野范围内。本例让箭头的下落和管道的上升处于同步状态。,http:/,案例：制作“卷轴展开效果”,本例利用了两个遮罩。清晰图片逐渐覆盖模糊图片的遮罩。卷轴移动效果的遮罩。两个遮罩始终保持同步。,【设计思路】,本例将创建一个卷轴慢慢展开的动画，设计中使用卷轴中图画的模糊效果图作为背景，随着卷轴慢慢展开，模糊的图画逐渐清晰，具有强烈的视觉冲击效果，最后的设计效果如图所示。,【设计效果】,http:/,案例：制作“眼镜反光”特效,图8-15 最终效果,http:/,案例：制作“海边美景”,http:/,8.2 多层遮罩动画,通过前面一节课的学习，相信同学们已经掌握了遮罩层动画的创建方法和设计原理，在本小节中，将使用多层遮罩层动画来制作复杂的Flash动画。,8.2.1 知识点讲解,将普通图层拖动到遮罩层或被遮罩层的下面，即可将普通图层转化为其被遮罩层，在一组遮罩中，遮罩层只能有一个，而被遮罩层可以有多个，那就是多层遮罩，如图8-33所示，其中“图层2”为遮罩层，其余的所有图层都是被遮罩层。,图8-33 多层遮罩,http:/,多层遮罩的创建注意事项：,要使用多层遮罩动画做出精美的动画作品应该注意以下几点。1、从现实生活中寻找创作灵感。2、使用遮罩层动画来模拟表达创意。3、多种动画技术结合使用。4、在制作过程中不断完善自己的作品。,http:/,8.2.2 范例解析制作“镜花水月”,拼图游戏曾一度风靡全球，是老少皆宜的一种娱乐方式。本案例将通过多层遮罩动画，创造魔幻镜子拼图的效果，在充满乐趣的轻松的氛围下，带领读者感受唯美的遮罩动画的奥妙。其制作思路及效果如图8-34所示。,打开模板,制作拼图动画,制作遮罩动画,最终效果2,最终效果1,制作清晰图片遮罩效果,图8-34 制作思路及效果,http:/,8.2.3 课堂练习制作“断桥遗梦”,请同学们使用经典案例“镜花水月”中制作影片剪辑遮罩动画的类似方法，制作一个“断桥遗梦”的场景。在动画中，一面镜子映出一座古桥流水的画卷，被突然下落的石头砸中，产生裂纹，最后散为碎片，只留下梦境一般的一座古桥留在记忆的画面中。其效果图如图8-61所示。,1、打开教学资源中的“素材第8讲断桥遗梦断桥遗梦-模板.fla”文件，【库】面板及场景效果如图8-62所示。,图8-61 效果图,http:/,实例：“七彩文字”（p149-151）,1、启动Flash CS3，建立一个Flash文档。2、选择“矩形”工具，在“属性”面板中设置其笔触颜色为无（），填充颜色为七彩的线性填充 3、选择绘制好的矩形，按CtrlG键将其组合。4、选择“时间轴”面板，将“图层1”锁定，在其上面新建一个图层，图层名称为“图层 2”。5、选择“文本”工具（），并在“属性”面板中设置字体为“隶书”，字体大小为50，其他均为默认值 6、在舞台上输入文字“七彩文字”。7、在“时间轴”面板中，选择“图层 2”，单击鼠标右键，在弹出来的快捷菜单中选择“遮罩层”命令，将其设置为遮罩层。8、选择“图层 2”的第30帧，按F5键，插入普通帧，设置动画的播放时间为30帧。9、解除“图层 1”的锁定，选择“图层 1”的第30帧，按F6键，插入关键帧。选择第30帧处的矩形，将其向左移一定的位置。10、在“图层 1”图层的第1帧和第30帧之间选择任意一帧，在“属性”面板中的“补间”下拉菜单中选择“动画”选项。11、按CtrlEnter键，对影片进行测试。,http:/,案例：“图片浏览”（p149-151）,遮罩动画是Flash中应用比较多的动画形式，通过它可以制作出许多炫目的动画效果。我们可以利用遮罩层来制作一个“图片浏览”的动画。,最终效果如图所示：,http:/,8.3 课后作业,一、操作题 1、请同学们根据典型案例制作“眼镜反光特效”的制作思路，制作一个汽车车窗的过光效果，如图8-69所示。,图8-69 车窗过光,2、请同学们根据典型案例制作“海边美景”的制作思路，制作一个水中倒影的效果，如图8-70所示。,图8-70 水中倒影,http:/,二、思考题1、遮罩层动画的原理是什么？2、制作遮罩层动画至少需要几个图层？3、遮罩层动画还能应用于哪些艺术表达方面？,http:/,场景的概念,场景可以看成是一段相对独立的动画，当动画中有多个场景时，整个动画会按照场景的顺序播放。当然，也可以用脚本程序来控制场景的播放顺序。在Flash中，所有的动画制作都是在“场景”中实现。当新建Flash文档时，Flash就会自动创建一个名称为“场景1”的场景。如果设计的是一个简单的小动画，只需要使用一个场景就可以了，但是如果设计的是一个比较复杂的动画时，一个场景是不够的，可能需要多个场景。例如网上的大部分Flash作品，在开始的时候都有一个Loading场景来现实下载的速度。,http:/,场景创建的两种方法：,单击菜单栏中的“插入”“场景”命令，可以创建一个新的场景。按Shift+F2键，或者单击菜单栏中的“窗口”“其他面板”“场景”命令，打开“场景”面板，在“场景”面板中单击“添加场景”按钮，就可以创建一个新的场景，如图所示：,http:/,编辑场景,复制场景：在“场景”面板中选择要复制的场景，单击面板上的“直接复制场景”按钮，就可以将该场景上的所有元素都复制到新的场景中 添加场景：单击“场景”面板中的“添加场景”按钮，就可以创建一个新的场景。删除场景：在“场景”面板中选择要删除的场景，单击面板上的“删除场景”按钮，在弹出来的警告对话框中单击“确定”按钮，就可以删除该场景。重命名场景：只要在“场景”面板中双击要改名的场景，使场景名可编辑，然后输入新的名称即可。更改场景的播放顺序：Flash按照“场景”面板中的排列顺序来播放，最上面的场景最先播放，如果要调整场景的播放顺序，只需要将“场景”面板中的场景拖动到适合的位置即可。,http:/,多场景动画的应用,我们可以通过简单的小动画来说明场景的操作。最终效果如图所示：,http:/,综合练习:,通过制作“手写字”的动画来熟悉前面所学的知识：,http:/,
