搜索
第3章基础动画通过本章的学习，读者应掌握逐帧动画、形状补间动画和运动补间动画的制作方法，以及遮罩层和引导层的使用，并能够制作出简单的动画。本章重点：本例将制作红点线框勾边的中空文字，如图3-1所示。通过本例的学习，读者应掌握如何改变文档大小，以及（文字工具）和（墨水瓶工具）的使用方法。3.1线框文字要点：图3-1线框文字操作步骤：图3-2设置文档属性图3-3设置文本属性1）启动AnimateCC2017软件，新建一个ActionScript3.0文件。2）改变文档大小。方法：执行菜单中的“修改|文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为蓝色（#000066），文档尺寸为300像素×75像素，如图3-2所示，然后单击“确定”按钮。3）选择工具箱上的（文字工具），然后在“属性”面板中设置参数如图3-3所示，接着在工作区中单击鼠标，输入文字“CARTOON”。提示：为了便于与背景观看，可以暂时将文字颜色设置为黄色（#FFFF00）。图3-4设置对齐参数图3-5对齐效果4）单击面板组缩略图中的（对齐）按钮，调出“对齐”面板，然后勾选“与舞台对齐”选项，接着单击（水平中齐）和（垂直中齐）按钮，如图3-4所示，将文字中心对齐，结果如图3-5所示。5）执行菜单中的“修改|分离”（快捷键〈Ctrl+B〉）命令两次，将文字分离为图形。提示：第1次执行“分离”命令，将整体文字分离为单个字母，如图3-6所示；第2次执行“分离”命令，将单个字母分离为图形，如图3-7所示。图3-6将整体文字分离为单个字母图3-7将单个字母分离为图形图3-8对文字描边后删除填充区域6）对文字进行描边处理。方法：单击工具栏上的（墨水瓶）工具，将颜色设为绿色（#00CC00），然后对文字进行描边。最后按键盘上的〈Delete〉键删除填充区域，结果如图3-8所示。提示：字母“A”、“R”、“O”的内边界也需要单击，否则内部边界将不会被加上边框。7）对描边线段进行处理。方法：选择工具箱上的（选择工具），框选所有的文字，然后在“属性”面板中单击（编辑笔触样式）按钮，如图3-9所示。接着在弹出的“笔触样式”对话框中设置参数，如图3-10所示，再单击“确定”按钮，结果如图3-11所示。提示：通过该对话框可以得到多种不同线型的边框。8）执行菜单中的“控制|测试”（组合键〈Ctrl+Enter〉）命令，即可看到效果。图3-9单击“编辑笔触样式”按钮图3-10对描边线段进行处理图3-11对描边线段处理后的效果本例将制作色彩渐变的文字，如图3-12所示。通过本例的学习，读者掌握如何改变背景颜色，以及（文字工具）、（颜料桶工具）和（墨水瓶工具）的使用方法。3.2彩虹文字要点：图3-12彩虹文字1）启动AnimateCC2017软件，新建一个ActionScript3.0文件。2）改变文档大小。方法：执行菜单中的“修改|文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为蓝色（#000066），文档尺寸为450像素×75像素，如图3-13所示，然后单击“确定”按钮。操作步骤：图3-13设置文档属性提示：如果需要以后新建文件的背景色继承深蓝色的属性，可以单击“设为默认值”按钮。3）选择工具箱上的（文字工具），设置参数如图3-14所示，然后在工作区中单击鼠标，输入文字“动漫游戏产业”。图3-14设置文本属性图3-16填充文字4）利用“对齐”面板，将文字中心对齐，结果如图3-15所示。7）此时，填充是针对每一个字母进行的，这是不正确的。为了解决这个问题，需要选择（颜料桶工具）对文字进行再次填充，结果如图3-17所示。图3-15将文字中心对齐5）执行菜单中的“修改|分离”（快捷键〈Ctrl+B〉）命令两次，将文字分离为图形。6）选择工具箱上的（颜料桶工具），设置填充色为，然后对文字进行填充，结果如图3-16所示。图3-17对文字进行再次填充8）调整渐变色的方向。方法：选择工具箱上的（渐变变形工具），在工作区中单击文字，这时，在文字左、右两方将出现两条竖线，如图3-18所示。9）将鼠标拖动到右上方的圆圈处，此时光标将变成4个旋转的小箭头，然后按住鼠标并将它向上拖动，如图3-19所示。图3-18利用渐变变形工具单击文字图3-19调整文字渐变方向10）选择工具箱上的（墨水瓶工具），设置填充色为白色，然后对每个文字边缘进行描边处理，结果如图3-20所示。图3-20对每个文字边缘进行描边处理后的效果11）执行菜单中“控制|测试”（组合键〈Ctrl+Enter〉）命令，即可看到效果。本例将制作具有霓虹灯效果的文字，如图3-21所示。通过本例的学习，读者应掌握将线条转换为可填充区域和柔化填充边缘的方法。3.3霓虹灯文字要点：图3-21霓虹灯文字1）启动AnimateCC2017软件，新建一个ActionScript3.0文件。2）执行菜单中的“修改|文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为深蓝色（#000066），文档尺寸为550像素×300像素，如图3-22所示，然后单击“确定”按钮。操作步骤：图3-22设置文档属性3）选择工具箱上的（文字工具），然后在“属性”面板中设置字体为“汉仪大黑简”、大小为90.0，文字颜色为红色（#FF0000），如图3-23所示，接着在工作区中单击鼠标，输入文字“奇妙小世界”。4）利用“对齐”面板，将文字中心对齐，结果如图3-24所示。图3-23设置文本属性图3-24输入文字5）执行菜单中的“修改|分离”（快捷键〈Ctrl+B〉）命令两次，将文字分离为图形。6）对文字进行描边处理。方法：选择工具箱上的（墨水瓶工具），设置笔触颜色为明黄色（#FFFF00），然后对文字进行描边，如图3-25所示。接着按键盘上的〈Delete〉键删除填充区域，结果如图3-26所示。图3-25对文字进行描边处理提示：默认情况下笔触高度为1，此时使用的是默认高度。图3-26删除填充区域图3-27对文字进行描边处理图3-28删除填充区域7）选择工具箱上的（选择工具），框选所有明黄色外框。然后将线宽设为1，实线。接着执行菜单中的“修改|形状|将线条转换为填充”命令，将明黄色边框转换为可填充的区域。8）执行菜单中的“修改|形状|柔化填充边缘”命令，在弹出的“柔化填充边缘”对话框中设置参数，如图3-27所示，使其向外模糊，然后单击“确定”按钮，结果如图3-28所示。提示：在对直线、图形线框和文字边框等线条进行柔化处理前，必须先执行菜单中的“修改|形状|将线段转换为填充”命令，将线条转换为可填充的区域。9）执行菜单中“控制|测试”（组合键〈Ctrl+Enter〉）命令，即可看到文字效果。本例将用图片制作文字中的填充部分，且使文字外围是柔化的边框，如图3-29所示。通过本例的学习，读者应掌握如何将文档与导入的图片相匹配，以及柔化填充边缘的使用方法。3.4彩图文字要点：图3-29彩图文字1）启动AnimateCC2017软件，新建一个ActionScript3.0文件。2）执行菜单中的“文件|导入|导入到舞台”（快捷键〈Ctrl+R〉）命令，在弹出的“导入”对话框中选择配套光盘中的“素材及结果\3.4彩图文字\背景.bmp”图片，如图3-30所示，然后单击“打开”按钮。操作步骤：图3-30选择导入图片3）此时，填充图片比场景要大，为了使场景与填充图片等大，需执行菜单中的“修改|文档”（快捷键〈Ctlr+J〉）命令，在弹出的如图3-31所示的“文档属性”对话框中，单击“内容”单选按钮。然后将背景色为深蓝色（#000066），单击“确定”按钮。4）执行菜单中的“修改|分离”（快捷键〈Ctrl+B〉）命令，将图片分离成图形，如图3-32所示。图3-31单击“内容”图3-32分离后效果5）选择工具箱上的（文本工具），然后在“属性”面板中设置字体为“Arial”、大小为150.0，文字颜色为绿色（#00FF00），如图3-33所示，接着在工作区中单击鼠标。输入文字“Adobe”，如图3-34所示。6）将文字移到图片以外，然后执行菜单中的“修改|分离”（快捷键〈Ctrl+B〉）命令两次，将文字分离为图形，结果如图3-35所示。图3-34输入文字图3-33设置文本参数提示：将文字分离成图形的目的是为了与分离成图形的图片进行计算，以便删除不需要的部分。图3-35将文字分离为图形7）执行菜单中的“修改|形状|柔化填充边缘”命令，在弹出的“柔化填充边缘”对话框中设置参数，如图3-36所示，使其向外模糊，然后单击“确定”按钮。8）配合键盘上的〈Shift〉键，选中所有文字中的填充部分，然后按键盘上的〈Delete〉键删除，结果如图3-37所示。图3-36设置“柔化填充边缘”参数图3-37删除填充部分9）将文字移到图片中，如图3-38所示。然后按住键盘上的〈Shift〉键，点选图片文字外围部分和字母中多余的部分，按〈Delete〉键将它们删除，最终结果如图3-39所示。图3-38将文字移到图片中图3-39删除多余部分提示：在将文字线框移到图片中之前，必须先将图片分离成图形，否则文字将被放置到图片的下层，从而无法看到。另外，文字不能直接写入图片中，如果直接在图片中编辑文字，则文字的填充部分被删除后将显示蓝色的背景，而不显示彩色图片。本例将制作边线和填充具有不同填充色的铬金属文字，如图3-40所示。通过本例的学习，读者应掌握对文字边线和填充施加不同渐变色的方法。3.5铬金属文字要点：图3-40铬金属文字操作步骤：图3-41设置文档属性图3-42设置文字属性1）启动AnimateCC2017软件，新建一个ActionScript3.0文件。2）执行菜单中的“修改|文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为深蓝色（#000066），文档尺寸为550像素×200像素，如图3-41所示，然后单击“确定”按钮。3）选择工具箱上的（文本工具），然后在“属性”面板中设置参数如图3-42所示，接着在工作区中单击鼠标，输入文字“CHROME”。图3-45输入元件名称4）调出“对齐”面板，将文字中心对齐，结果如图3-43所示。5）执行菜单中的“修改|分离”（快捷键〈Ctrl+B〉）命令两次，将文字分离为图形。6）对文字进行描边处理。方法：单击工具栏上的（墨水瓶工具），将笔触颜色设置为，然后依次单击文字边框，使文字周围出现黑白渐变边框，如图3-44所示。图3-46转换为元件图3-43输入文字图3-44对文字进行描边处理7）此时选中的为文字填充部分，为便于对文字填充和线条区域分别进行操作，下面将填充区域转换为元件。方法：执行菜单中的“修改|转换为元件”（快捷键〈F8〉）命令，在弹出的“转换为元件”对话框中输入元件名称fill，如图3-45所示，然后单击“确定”按钮，进入fill元件的影片剪辑编辑模式，如图3-46所示。8）对文字边框进行处理。方法：按键盘上的〈Delete〉键删除fill元件，然后利用（选择工具），框选所有的文字边框，并在“属性”面板中将笔触高度改为5，结果如图3-47所示。图3-47将笔触高度改为5图3-49调整文字边框渐变方向提示：由于将文字填充区域转换为了元件，因此虽然暂时删除了它，但以后还可以从库中随时调出fill元件。9）此时黑-白渐变是针对每一个字母的，这是不正确的。为了解决这个问题，下面选择工具栏上的（墨水瓶工具），在文字边框上单击，从而对所有的字母边框进行一次统一的黑-白渐变填充，如图3-48所示。图3-48对字母边框进行统一渐变填充10）此时渐变方向为从左到右，而我们需要的是从上到下，为了解决这个问题，需要使用工具箱上的（渐变变形工具）处理渐变方向，结果如图3-49所示。11）对文字填充部分进行处理。方法：执行菜单中的“窗口|库”（快捷键〈Ctrl+L〉）命令，调出“库”面板，如图3-50所示。然后双击fill元件，进入影片剪辑编辑状态。接着选择工具箱上的（颜料桶工具），设置填充色为，对文字