
2.2 散件及组合
在Flash中绘制矢量图,必须学习一个重要的知识点,即散件和组合的区别。当绘制两个椭圆,它们结合到一起成为新的图形,用鼠标单击图形,发现图形上有许多的小白点,如图2-31所示,则说明这个图形是散件,散件会发生镂空、贴合等现象,如图2-32所示。有时为了方便各个元素间的编辑,需要将散件进行组合,如图2-33所示。

■图2-31 散件结合图

■图2-32 散件镂空
为了避免散件间发生镂空,可以暂时将散件组合起来,如图2-33所示。将散件组合,使用【Ctrl+G】组合键,取消组合时使用【Ctrl+Shift+G】组合键,在组合中编辑某个对象则双击组合。组合的对象是不会被放到库中的。先组合的对象是放最下层的。最后组合的图形是放在最上层的。可以通过右击,选择“排列”命令,调整各个组合图形的图层次序关系,如图2-34所示。

■图2-33 组合散件

■图2-34 调整组合排列顺序
取消组合也可以用“分离”命令,使用【Ctrl+B】组合键,可以将图形或组合打散,这里要注意的是,对于文字要用两次打散命令,第一次打散,是将多个文字打散成为单个文字,如图2-35所示;第二次打散,是将单个文字分离为散件,如图2-36所示。

■图2-35 执行第一次打散命令

■图2-36 执行第二次打散命令
2.2.1 课前学习——绘制立体图形
为了灵活运用散件和组合创建动画图形,首先学习简单的立体图形绘制,如图2-37所示,在绘制的过程中,学习两者的区别。

请扫一扫获取相关微课视频

■图2-37 绘制立体图形
首先,绘制长方体图形
步骤一:用“矩形工具(R)”绘制一个长方形,选中长方形并右击,执行“复制”和“粘贴”操作,并将第二个长方形放置在第一个长方形的右后方,如图2-38所示,需要注意的是,粘贴第二个长方形之后,不要取消选择,要在选中状态下移动,确定位置无误后,再取消选择,否则图案会被镂空。
步骤二:将其余的边,用“线条工具(N)”连接起来,“线条工具(N)”具有捕捉顶点的功能,可以将两个顶点连接,如图2-39所示。

■图2-38 复制长方形

■图2-39 连接其余线条
步骤三:将看不到的边设置为虚线,由于绘制的图形是散件,线条被分割成为几部分,使用【Shift】键来连续选择多条线条,选择完成后,在“属性”面板的“填充和笔触”→“样式”下拉列表中选择“虚线”,如图2-40所示。长方体绘制完成,最终效果见图2-41。

■图2-40 将线条样式设置为虚线

■图2-41 长方体
接下来,绘制圆柱体,在绘制之前,分析圆柱体的构成,它由一个矩形和两个椭圆构成。
步骤一:绘制一个矩形,以及一个椭圆,为了让椭圆与矩形更好地接合,使用【Alt】键,从圆心开始画圆。绘制好一个椭圆之后,复制另一个椭圆,放置在底部,如图2-42所示。
步骤二:绘制圆柱体的高,并将多余线条选中后删除,如图2-43所示。
步骤三:将应该看不到的线条设置为虚线,由于绘制出来的图形是散件,为了让所有的线条都组合在一起,便于移动,用框选的方式将整个圆柱体选中,使用【Ctrl+G】组合键将圆柱体组合,成为一个整体,最终效果见图2-44。

■图2-42 绘制矩形及椭圆

■图2-43 删除多余线条

■图2-44 将圆柱体组合
圆锥体的绘制与圆柱体的绘制方法非常相近,可以复制一个圆柱体,将圆柱体修改为圆锥体,这是提高制作效率的方法。圆锥体和球体的绘制同学们自行研究,这里不再赘述。
2.2.2 课堂学习——绘制立体文字
使用【Ctrl+B】组合键,可以将图形或组合打散,对于文字的打散,要用两打散命令,第一次打散,是将多个文字打散成为单个文字,第二次打散,是将个文字分离为散件。这里,我们学习将文字转换为散件进行编辑,制作立体文字,图2-45所示。

请扫一扫获取相关微课视频

■图2-45 绘制立体文字
步骤一:使用“文本工具(T)”输入文字“EXO”,并在“属性”面板中,设置字体。在字符栏中,选择“系列”,在下拉菜单中,选择“Franklin Gothic Heavy”字体,该字体棱角分明,比较适合制作立体文字,如图2-46所示。使用【Ctrl+B】组合键将文本打散,使用第一次,将文本打散成为单个文字,如图2-47所示,第二次使用【Ctrl+B】组合键将单个文字打散成为散件,如图2-48所示。

■图2-46 输入文字

■图2-47 打散成单个文字

■图2-48 打散成散件
步骤二:使用“选择工具(V)”,调整文字的位置,调整文字的间距,便于制作立体文字,并使用工具箱中的“任意变形工具(Q)”,将图形放大,如图2-49所示。

■图2-49 调整图形大小和间距
步骤三:为每个字母描边,首先调整笔触颜色为黑色,再选中工具箱中的“墨水瓶工具”,如图2-50所示,在每个字母上单击,即可为字母描边,如图2-51所示。这里需要注意的是,墨水瓶工具给边界上色,颜料桶工具则给填充区域上色,这是墨水瓶工具和颜料桶工具的区别。

■图2-50 使用“墨水瓶工具”描边

■图2-51 描边后的效果
步骤四:描边完成后,删除填充色。使用“选择工具(V)“,单击填充色部分,按【Delete】键删除填充色,如图2-52所示。

■图2-52 删除填充色
步骤五:制作立体投影部分,以字母E为例,将字母E的线条部分选中,执行“复制”和“粘贴”操作,得出另一个字母E,将第二个字母E放置在第一个字母E的右后方,如图2-53所示。接下来,用“线条工具(N)”将两个字母间的空隙连接,如图2-54所示。最后,用“选择工具(V)”选中多余的线条,按住【Delete】键删除,最终效果见图2-55。使用同样的方法制作X和O的立体投影部分,三个字母的立体效果如图2-56所示。

■图2-53 复制字母

■图2-54 连接空隙部分

■图2-55 删除多余线条

■图2-56 三个字母的立体投影效果
步骤六:使用“颜料桶工具”为字母的高光面填充颜色,选择嫩绿色填充,如图2-57所示。再选择墨绿色为字母的暗面部分进行填充,最终效果如图2-58所示。

■图2-57 为字母高光面填充颜色

■图2-58 为字母暗面填充颜色
大家掌握了绘制方法后,可以进行扩展,尝试使用别的英文字母,或者中文文字来制作立体文字。
2.2.3 课堂练习——绘制表盘
通过以上实例的学习,相信同学们已经对Flash的基本图形绘制有了一些了解,接下来,请用已经掌握的绘制方法,绘制如图2-59所示的时钟图形。
首先,分析时钟图形的图案构成,外轮廓为圆,刻度由线条工具绘制,分针和时针由笔触不同的线条绘制,数字由文本工具创建。我们知道,时钟有12个刻度,一共360°,则两个刻度之间为30°,如何绘制精准的刻度,是本任务的难点。

请扫一扫获取相关微课视频

■图2-59 时钟图形
步骤一:使用“椭圆工具”,按住【shift】键,绘制一个圆,打开“对齐”面板,使圆相对于舞台居中对齐。并在圆的左边绘制一条比直径更长的垂直直线,如图2-60所示。打开“对齐”面板,使直线相对于舞台居中对齐,如图2-61所示。

■图2-60 绘制正圆形和直线

■图2-61 正圆形和直线相对于舞台居中对齐
步骤二:选中直线,打开“变形”面板,在面板上选择“旋转”单选按钮,并将数值输入为“30”,如图2-62所示。然后多次单击面板右下角的“重制选区和变形”按钮,每单击一次,直线就以30°的角度复制,最终效果见图2-63。
步骤三:把光标定位在圆心位置,按【Alt+Shift】组合键,从圆心开始绘制圆,新绘制的圆半径比外轮廓的圆稍小,如图2-64所示。接下来,选中多余的线条,将其删除,最终效果见图2-65。
步骤四:使用“线条工具”在表盘上绘制时针和分针,并使用“文本工具”,输入数字,最终效果见图2-59。

■图2-62 设置“变形”面板

■图2-63 复制并旋转直线

■图2-64 绘制圆

■图2-65 删除多余线条