《第5章 遮罩动画ppt课件.pptx》由会员分享，可在线阅读，更多相关《第5章 遮罩动画ppt课件.pptx（52页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第5章 遮罩动画第5章 遮罩动画Flash CC动画制作案例教程教学PPT（简单版）遮罩动画的基本原理创建文本FL遮罩动画的创建方法设置文本字符属性3 3 掌握遮罩动画的创建方法，能够制作出流畅的动画效果。 掌握文本的创建方法，能够快速的为动画添加文本内容。 掌握文字属性的设置方法，能够准确熟练的修改文字的各项属性。 理解3D动画的使用方法，能够制作出多样的动画效果。学习目标4 4 目录5.1遮罩动画概述5.2【任务10】促销广告动画5.3【任务11】动感水墨画5 5 1 1遮遮罩动画的基本原理罩动画的基本原理2 2遮遮罩动画的创建方法罩动画的创建方法3 3创建遮罩动画的注意事项创建遮罩动画的
2、注意事项5.1 遮罩动画概述6 6 遮罩”顾名思义就是遮挡住下面的对象。在Flash的图层中有遮罩图层，遮罩图层中的对象被称之为“遮罩物”（几乎一切具有可见面积的东西都可以被用作遮罩层中的遮罩物），对于那些处于遮罩层下方的对像（被遮罩层中的对象）而言，只有那些被遮罩物遮盖的部分才能被看倒，没有被遮罩的区域反而看不到。例如图5-1所示即为遮罩效果，其中文字位于遮罩层，图片位于被遮罩层。其中，只有文字所覆盖的区域才会被显示。1、遮罩动画的基本原理、遮罩动画的基本原理5.1 遮罩动画概述图5-1所示 7 7 要创建遮罩动画，需要有两个图层，即遮罩层和被遮罩层。若要创建动态效果，可通过让遮罩层动起来来
3、实现。首先创建一个空白的Flash动画文档。然后在舞台中导入一张素材图片，调整图片的位置使其与舞台重合，如图5-2所示。5.1 遮罩动画概述图5-2所示 1、遮罩动画的基本原理、遮罩动画的基本原理8 8 新建一个图层，选择“椭圆工具”绘制一个正圆形，如图5-3所示。选中该圆形，按【F8】键，弹出“转换为元件”对话框，参数设置如图5-4所示，单击“确定”按钮。在该层的第20帧创建关键帧，将图形放大到如图5-5所示的效果，在第1帧和第20帧间创建传统补间。5.1 遮罩动画概述图5-3所示 图5-4所示 图5-5所示 2、 遮罩动画的创建方法遮罩动画的创建方法9 9 选中“图层1”，在第20帧插入帧
4、，此时在第20帧的位置将显示素材图片。在“图层2”上单击右键弹出下拉选框，选择“遮罩层”选项，如图5-6所示。此时图形所在的图层被转换为“遮罩层”，在该层下方的图层被转换为“被遮罩层”，同时遮罩层和被遮罩层会自动锁定，如图5-7所示。若要修改遮罩效果时需将遮罩层和被遮罩层的锁定解除。5.1 遮罩动画概述2、 遮罩动画的创建方法遮罩动画的创建方法1010 5.1 遮罩动画概述图5-6所示 图5-7所示 2、 遮罩动画的创建方法遮罩动画的创建方法1111 3、 创建遮罩动画的注意事项创建遮罩动画的注意事项5.1 遮罩动画概述在制作遮罩动画的过程中有许多值得设计人员注意的地方，具体包含以下几点。l
5、遮罩层中的对象可以是按钮、影片剪辑、图形、位图、文字等，但不能是线条，如果一定要用线条，可通过执行“修改形状将线条转换为填充”命令来实现。l 一个遮罩层中只能包含一个遮罩物。l 一个遮罩层可以同时遮罩几个图层，从而产生各种特殊的效果。l 在被遮罩层中不能放置动态文本。l 遮罩层对象中的许多属性如渐变色、透明度、颜色等对遮罩的最终效果不起作用。1212 1 1知识储备知识储备2 2任务分析任务分析5.2 【任务10】促销广告动画3 3任务实现任务实现1313 创建文本创建文本文字是人们表达意图最为直接的一种方式，在Flash动画中使用文字加以说明，可以达到图文并茂的效果，能够更好地去引导观众理解
6、动画影片的含义。通常情况下可采用两种方式创建文本。5.2.1 知识储备知识储备5.2 【任务10】促销广告动画1414 创建文本创建文本1）标签）标签输入输入式式选择“文本工具” ，然后移动光标到舞台中，光标会变为十字光标并出现字母T，如图5-8所示。单击鼠标出现如图5-9所示的连续输入文本框，用户可直接在其中输入文本，如图5-10所示。随着用户输入文本的增多，文本框自动横向延长，按Enter键则会换行输入。5.2 【任务10】促销广告动画图5-8所示 图5-9所示 图5-10所示 1、 知识储备知识储备1515 创建文本创建文本2）文本块输入式）文本块输入式选择“文本工具” ，在舞台中按下鼠
7、标左键不放，向右方拖拽如图5-11所示。松开鼠标左键，出现如图5-12所示的固定宽度文本框，在用户输入文本时，文本框的宽度是固定不变的，不会因输入文字的增多而横向延长，但文本会自动换行，如图5-13所示。若要改变文本框的宽度，可通过拖拽文本框的任意一个角点来完成（空心角点或实心角点均可）。5.2 【任务10】促销广告动画图5-11所示 图5-12所示 图5-13所示 1、 知识储备知识储备1616 注意注意：采用“标签输入式”创建文本时，通过拖拽任意一个角点可切换为“文本块输入式”。通过“文本块输入式” 创建文本时，双击右上角的方形空心角点会切换为“标签输入式”。5.2 【任务10】促销广告动
8、画1、 知识储备知识储备1717 在Flash中文本的类型主要分为“静态文本”“动态文本”和“输入文本”。选中输入的文本后，单击“属性”面板中的“文本类型”下拉选框，如图5-14所示（默认的为静态文本），从中可选择文本的类型。5.2 【任务10】促销广告动画图5-14所示 1、 知识储备知识储备1818 1) 静态文本：在动画运行期间不可编辑修改，它是一种普通文本。2) 动态文本：在影片制作过程中文本内容可有可无，主要通过脚本在影片播放过程中对其中的内容进行修改，不依靠人工通过键盘输入来改变。3) 输入文本：同样是在影片制作过程中文本内容可有可无，与动态文本不同的是，其内容的改变主要是人工通过
9、键盘输入。一般在含有申请表的影片中会含有此类文本。5.2 【任务10】促销广告动画1、 知识储备知识储备1919 设置设置文本方向文本方向选中输入的文本后，单击“属性”面板中的“改变文本方向”按钮 ，如图5-15所示（默认的为水平方向），从中可设置文字的排列方向。5.2 【任务10】促销广告动画图5-15所示 1、 知识储备知识储备2020 设置设置文本方向文本方向1) 水平：沿水平方向排列。2) 垂直：沿垂直方向，从右向左排列。3) 垂直，从左向右：沿垂直方向，从左向右排列。5.2 【任务10】促销广告动画1、 知识储备知识储备2121 设置文字符属性设置文字符属性在Flash中，文本的字符
10、属性包括文本的系列（字体）、样式、大小、颜色等。在字体“属性”面板中字符属性如图5-16所示，下面针对这些属性进行详细讲解。5.2 【任务10】促销广告动画图5-16所示 1、 知识储备知识储备2222 设置文字符属性设置文字符属性1)系列：单击此处，可在弹出的下拉列表中选择不同的字体。2)样式：在选择不同的字体时，可以在此处选择如Regular（正常）、Italic（斜体）、Bold（加粗）、Bold Italic（加粗并倾斜）等不同的字体样式。值得一提的是，此处的选项是取决于字体支持的，即字体支持斜体则可以进行设置，若不支持，则无法设置。3)大小：单击此处的数值后，会出现一个文本框，可在其
11、中输入具体的数值，或将光标移至数值上，单击左键左右滑动鼠标同样可设置字体大小。4)颜色：单击此处的颜色块，在弹出的颜色色板中可以选择不同的文字颜色。5)字母间距：通过设置具体的数值控制字符之间的相对位置。6)消除锯齿：可以对文本粗糙边缘进行平滑处理以改进它们的外观，使文字阅读起来更舒适。在Flash CC消除锯齿有5个选项，如图5-17所示，具体介绍如下。5.2 【任务10】促销广告动画1、 知识储备知识储备2323 设置文字符属性设置文字符属性5.2 【任务10】促销广告动画图5-17所示 1、 知识储备知识储备2424 设置文字符属性设置文字符属性使用设备字体使用设备字体选择该选项，指定S
12、WF文件会使用本地计算机上安装的字体来显示文字内容。例如将字体指定为“微软雅黑”，则播放SWF文件的计算机上必须安装“微软雅黑”字体，才能正常显示。因此选择该选项时，通常都选择一些大众化的字体。如图5-18所示即为“黑体”字体显示样式。5.2 【任务10】促销广告动画图5-18所示 1、 知识储备知识储备2525 设置文字符属性设置文字符属性（1）位图）位图文本文本无消除锯齿无消除锯齿该选项将关闭消除锯齿功能，不对文字进行平滑处理，如图5-19所示。（2）动画动画消除锯齿消除锯齿该选项可以生成可以进行顺畅动画播放的消除锯齿文本。由于该选项主要用于动画播放时文本消除锯齿，因此对一些带有字母的大字
13、体或缩放字体效果不明显。5.2 【任务10】促销广告动画图5-19所示 1、 知识储备知识储备2626 设置文字符属性设置文字符属性（3）可读性可读性消除锯齿消除锯齿该选项为Flash默认的消除锯齿方式，可以产生高品质的消除锯齿效果，并且不受字体缩放的影响。和其他消除锯齿方式相比，该方式消除锯齿效果最好，但生成的SWF文件也最大。消除锯齿效果如图5-20所示。5.2 【任务10】促销广告动画图5-20所示 1、 知识储备知识储备2727 设置文字符属性设置文字符属性（4）自定义自定义消除锯齿消除锯齿该选项允操作者按照需求修改字体的属性。当选择该选项时，会弹出“自定义消除锯齿”对话框，如图5-2
14、1所示。在对话框中可以设置字体的粗细（参数范围：-200200）和清晰度（参数范围：-400400）。5.2 【任务10】促销广告动画图5-21所示 1、 知识储备知识储备2828 打散文本打散文本在Flash动画制作中有时需要对文字进行变形处理，在使用“任意变形工具”对文本进行变形处理时，只可以进行旋转、倾斜和缩放操作。要想进行复杂的变形操作如扭曲、封套或要单独改变文字的某个笔画时必须先对文本进行打散处理（分离操作）。在Flash中，打散后的文本被作为矢量图进行编辑，除了可进行复杂变形外还可制作出很多文字效果，例如水波纹效果、金属质感效果等。如果是多个字组成的文本块，要对其进行两次分离才能完
15、成，如果是只执行了一次分离操作，则只是将文本块分离为多个以独立的字为单位的文本块，如图5-22所示，此时并不能对文字的外形进行编辑，但用户可选中这些文字执行“修改时间轴分散到图层”命令，将这些文本分散到不同的图层中，如图5-23所示。5.2 【任务10】促销广告动画1、 知识储备知识储备2929 打散文本打散文本5.2 【任务10】促销广告动画图5-22所示 图5-23所示 1、 知识储备知识储备3030 打散文本打散文本再次执行“修改分离”命令（或按【Ctrl+B】组合键），可将文本分离为矢量图形，如图5-24所示。选择“任意变形工具”单击工具箱底部的“扭曲”按钮 ，拖拽手柄变形文本图形，如
16、图5-25所示。还可选择“颜料桶工具” ，设置好颜色后，为文本图形填色，如图5-25所示。5.2 【任务10】促销广告动画图5-24所示 图5-25所示 1、 知识储备知识储备3131 打散文本打散文本注意：注意：在Flash中，文字支持滤镜操作，具体的添加方法与影片剪辑元件和按钮相同，在第4章中已做详细讲解，如图5-26所示，是为文字添加 “发光”和“渐变发光”滤镜后的效果。5.2 【任务10】促销广告动画图5-26所示 1、 知识储备知识储备3232 在制作促销广告动画时，一定要突出文字的显示效果，因此可以从动画的背景、文字两方面进行分析。1）背景本任务计划制作欢庆圣诞和元旦的促销广告动画
17、，因此可选用包含圣诞和元旦节日题材的图片充当背景素材。2）文字文字内容：需体现出欢庆的节日和促销活动的简要内容，吸引顾客眼球。文字动画：为了使文字内容更突出，可从文字色彩方向入手与背景颜色形成反差，还可通过创建遮罩动画制作文字渐变效果，提升整体质感。5.2 【任务10】促销广告动画2、任务分析、任务分析3333 5.2 【任务10】促销广告动画3、任务实现、任务实现3434 1 1知识储备知识储备2 2任务分析任务分析5.3 【任务11】动感水墨画3 3任务实现任务实现3535 设置设置文本段落文本段落属性属性在Flash动画中，文字的编排是否整齐、美观是衡量动画作品质量的一个重要标准。在右侧
18、的属性面板Flash提供了一些设置段落属性的参数，如图5-40所示。1、 知识储备知识储备5.3 【任务11】动感水墨画图5-40所示 3636 设置设置文本段落文本段落属性属性对图5-40所示段落面板的各项参数解释如下。1)格式：用于设置段落的对齐方式。在Flash中可以设置4中对齐方式，有左至右依次为左对齐、居中对齐、右对齐、两端对齐。用光标点击对应的按钮即可完成格式的设置。如图5-41和图5-42所示即为左对齐和居中对齐的文字。5.3 【任务11】动感水墨画图5-41所示 图5-42所示 1、 知识储备知识储备3737 2)间距：用于控制文字之间的距离，包含两个参数，第1个参数用于控制段
19、落等首行的缩进，第2个参数用于控制其他行的间距。3)边距：用于设置文字和定界框之间的距离，同样包含两个参数。第1个参数用于设置左边距，第2个参数用于设置右边距。4)行为：当文本类型为“动态文本”类型或“输入文本”类型时，可以激活“行为”选项。通过行为选项可以设置行为方式。行为方式包括单行、多行、多行不换行三种，分别表示在浏览器下文本的显示样式，具体介绍如下。单行：选择该选项，在浏览器中只显示单行文本。多行：选择该选项，在浏览器中可以显示多行文本。多行不换行：选择该选项，在浏览器中只有使用回车键换行的段落被显示，其他自动换行的段落不被显示。5.3 【任务11】动感水墨画1、 知识储备知识储备38
20、38 URL链接链接在Flash中，可以为文字添加超链接，实现一些简单的页面跳转交互效果。为文字添加超链接的方法十分简单。在右侧属性面板打开“选项”下拉面板，如图5-43所示。在链接文本框输入链接地址即可。当输入链接地址会激活目标选项，可以指定跳转页面在浏览器中的打开方式，包含_blank、_parent、_self、_top四个选项，如图5-44所示，其中_blank、_self较为常用，具体介绍如下。_blank：在新窗口打开链接页面。_self：在当前的浏览器窗口打开链接页面。5.3 【任务11】动感水墨画图5-43所示 图5-44所示 1、 知识储备知识储备3939 3D旋转旋转“3D
21、旋转”是“影片剪辑元件”的专有属性，但在动画制作时也经常会用于设置文字旋转。将文字转化为“影片剪辑元件”后，使用“3D旋转工具”（快捷键【W】） 单击将其选中，会出现如图5-45所示的3D轴坐标，用于沿X、Y、Z三个轴旋转。3D轴坐标由4条不同颜色的线条组成，具体介绍如下。5.3 【任务11】动感水墨画图5-45所示 1、 知识储备知识储备4040 3D旋转旋转1)红色线条：将光标置于红色线条上拖拽光标，可以在X轴上旋转当前图像，如图5-46所示。2)绿色线条：将光标置于绿色线条上拖拽光标，可以在Y轴上旋转当前图像，如图5-47所示。3)蓝色线条：将光标置于蓝色线条上拖拽光标，可以在Z轴上旋转
22、当前图像，如图5-48所示。4)橙色线条：将光标置于橙色线条上拖拽光标，可以沿任意角度旋转当前图像，如图5-49所示。5.3 【任务11】动感水墨画图5-46所示 图5-47所示 图5-48所示 图5-49所示 1、 知识储备知识储备4141 多学一招：制作文字多学一招：制作文字3D旋转动画旋转动画在实际制作中，无法使用“传统补间”为3D对象创建动画效果。这时就需要用到Flash CC中的“补间动画”功能。“补间动画”是 Flash CS4版本开始出现的动画功能，其操作对象必须是元件，主要用于制作关键帧的过渡，能够很好地支持3D对象的动画效果。具体制作方法如下：1)输入文字“3D旋转动画”，如
23、图5-50所示。2)将文字转换为“影片剪辑元件”。5.3 【任务11】动感水墨画图5-50所示 1、 知识储备知识储备4242 多学一招：制作文字多学一招：制作文字3D旋转动画旋转动画3)将光标悬浮于“时间轴面板”的第1帧，单击鼠标右键，在弹出的菜单中（如图5-51所示）选择“创建补间动画”。此时“时间轴面板”会变成蓝色，如图5-52所示。4)按【F6】键，在第45帧创建关键帧。5)用“选择工具” 拖动文字实例至舞台下方，会在舞台中出现运动轨迹，如图5-53所示。5.3 【任务11】动感水墨画图5-51所示 图5-52所示 图5-53所示 图5-54所示 1、 知识储备知识储备4343 多学一
24、招：制作文字多学一招：制作文字3D旋转动画旋转动画6)运用“转换锚点工具” ，拖动运动轨迹顶点调整出弧度，如图5-54所示。7)运用“3D旋转工具” ，将文字实例旋转至图5-55所示样式。5.3 【任务11】动感水墨画图5-55所示 1、 知识储备知识储备4444 3D平移平移“3D平移工具” 和“3D旋转工具”位于同一工具组，作为“影片剪辑元件”的另一个专有属性，其基本操作和属性与“3D旋转工具”类似，不同的是“3D平移工具”主要用于在不同的轴上移动对象。单选中需要进行3D平移的实例后，会出现一个如图5-50所示的3D轴坐标，拖动对应的线条，即可沿相应的轴移动。5.3 【任务11】动感水墨画
25、图5-55所示 1、 知识储备知识储备4545 3D平移平移多多学一招：精确调整学一招：精确调整3D旋转移动位置旋转移动位置通过拖拽鼠标调节对象的3D属性，结果并不十分精确，如果需要精确控制对象的3D属性参数，可以通过变形面板和属性面板进行综合调整，具体调整方法如下。5.3 【任务11】动感水墨画1、 知识储备知识储备4646 3D平移平移多多学一招：精确调整学一招：精确调整3D旋转移动位置旋转移动位置调整变形面板按【Ctrl+T】组合键调出“变形”面板，如图5-57所示。在“变形”面板中可以设置实例的3D旋转角度和中心点位置。5.3 【任务11】动感水墨画图5-55所示 1、 知识储备知识储
26、备4747 3D平移平移多多学一招：精确调整学一招：精确调整3D旋转移动旋转移动位置位置调整调整3D定位和视图定位和视图当选择3D相关工具后，在右侧的属性面板会多出“3D定位和视图”选项，如图5-58所示，用于控制3D位移。5.3 【任务11】动感水墨画图5-59所示 1、 知识储备知识储备4848 3D平移平移多多学一招：精确调整学一招：精确调整3D旋转移动旋转移动位置位置调整调整3D定位和视图定位和视图当选择3D相关工具后，在右侧的属性面板会多出“3D定位和视图”选项，如图5-58所示，用于控制3D位移。5.3 【任务11】动感水墨画图5-59所示 1、 知识储备知识储备4949 3D平移
27、平移多多学一招：精确调整学一招：精确调整3D旋转移动旋转移动位置位置调整调整3D定位和视图定位和视图当选择3D相关工具后，在右侧的属性面板会多出“3D定位和视图”选项，如图5-58所示，用于控制3D位移。5.3 【任务11】动感水墨画图5-59所示 1、 知识储备知识储备5050 在制作动感水墨画时，需突出水墨的动态变化效果，还可添加文字内容并设置动画效果，因此可以从动画的背景、水墨和文字等方面进行分析。背景背景根据任务题材，可选择具有水墨色彩的图片作为背景素材。水墨水墨素材：为了制作效果逼真的水墨动画，需具备墨滴、墨滴背景以及风景画素材。水墨动画：将墨滴作为遮罩层（墨滴由小变大），墨滴背景作为被遮罩层，创建遮罩动画实现墨滴扩散效果，风景画则位于遮罩动画上层，通过设置透明度从无变有。文字文字题目：题目文字设置3D动画效果。内容：内容文字通过创建遮罩动画，实现从上至下依次出现的动画效果。5.3 【任务11】动感水墨画2、任务分析、任务分析5151 5.3 【任务11】动感水墨画3、任务实现、任务实现