![Flash动画制作翻转课堂](https://wfqqreader-1252317822.image.myqcloud.com/cover/344/31729344/b_31729344.jpg)
2.2 散件及组合
在Flash中绘制矢量图,必须学习一个重要的知识点,即散件和组合的区别。当绘制两个椭圆,它们结合到一起成为新的图形,用鼠标单击图形,发现图形上有许多的小白点,如图2-31所示,则说明这个图形是散件,散件会发生镂空、贴合等现象,如图2-32所示。有时为了方便各个元素间的编辑,需要将散件进行组合,如图2-33所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00033003.jpg?sign=1738991607-UdkusLezDqKv3rkV2ba24lcbrOj3ZMlT-0-e7a71784ad66abcebd3d6809641d0f43)
■图2-31 散件结合图
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00033004.jpg?sign=1738991607-m4EqWZ8hbCFcCvkVYuKki4KDqv5sdrx3-0-8a7a1ddfff299986d076252decbc2913)
■图2-32 散件镂空
为了避免散件间发生镂空,可以暂时将散件组合起来,如图2-33所示。将散件组合,使用【Ctrl+G】组合键,取消组合时使用【Ctrl+Shift+G】组合键,在组合中编辑某个对象则双击组合。组合的对象是不会被放到库中的。先组合的对象是放最下层的。最后组合的图形是放在最上层的。可以通过右击,选择“排列”命令,调整各个组合图形的图层次序关系,如图2-34所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00034001.jpg?sign=1738991607-O7lQ9gVbQhz2fZKDdPUKxxyqxbk5kltg-0-5057a66b771b9318c67a552ee7edd719)
■图2-33 组合散件
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00034002.jpg?sign=1738991607-rX4HpmfiOUJGDGGEkAA981GlgLkD86Hc-0-e6fc42f63d48d5fe8ee270d192b5f8db)
■图2-34 调整组合排列顺序
取消组合也可以用“分离”命令,使用【Ctrl+B】组合键,可以将图形或组合打散,这里要注意的是,对于文字要用两次打散命令,第一次打散,是将多个文字打散成为单个文字,如图2-35所示;第二次打散,是将单个文字分离为散件,如图2-36所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00035001.jpg?sign=1738991607-DJ2VcxaW1U69TMsEMWpJ4kMxGeKmn1jr-0-fce9e3e7f0dc6b3bf8cc3140518ae320)
■图2-35 执行第一次打散命令
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00035002.jpg?sign=1738991607-rcAgJKujSy2wcx4YGdPqygHIfipSRp7u-0-47ff90bc4d7455b6e183588a0d77fbf8)
■图2-36 执行第二次打散命令
2.2.1 课前学习——绘制立体图形
为了灵活运用散件和组合创建动画图形,首先学习简单的立体图形绘制,如图2-37所示,在绘制的过程中,学习两者的区别。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00035003.jpg?sign=1738991607-VHZn9WFLpgAthKUQIqDpmb8UaFK00uVo-0-ea84e6dc603d07f8259f07b350e1eddd)
请扫一扫获取相关微课视频
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00035004.jpg?sign=1738991607-4huMdpZIlW6AspvElrw5FzKzkoB6TTps-0-54ce1563d7943ae106dfa470fd5a2785)
■图2-37 绘制立体图形
首先,绘制长方体图形
步骤一:用“矩形工具(R)”绘制一个长方形,选中长方形并右击,执行“复制”和“粘贴”操作,并将第二个长方形放置在第一个长方形的右后方,如图2-38所示,需要注意的是,粘贴第二个长方形之后,不要取消选择,要在选中状态下移动,确定位置无误后,再取消选择,否则图案会被镂空。
步骤二:将其余的边,用“线条工具(N)”连接起来,“线条工具(N)”具有捕捉顶点的功能,可以将两个顶点连接,如图2-39所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00036001.jpg?sign=1738991607-o0QjAwZLAS60mhRvlhuDD3VEgYdM2Rvb-0-a826d82a3905aae4508f28e02c032aef)
■图2-38 复制长方形
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00036002.jpg?sign=1738991607-MLC2ny88bqOem66ZKr0gZiov7gLck1UJ-0-7d2749d157c9d4524a088b884980fd45)
■图2-39 连接其余线条
步骤三:将看不到的边设置为虚线,由于绘制的图形是散件,线条被分割成为几部分,使用【Shift】键来连续选择多条线条,选择完成后,在“属性”面板的“填充和笔触”→“样式”下拉列表中选择“虚线”,如图2-40所示。长方体绘制完成,最终效果见图2-41。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00036003.jpg?sign=1738991607-k43uB9OVKuU8GdFGJGEkQwPeW1cFz18q-0-81abd2379182b5597de4094d853a4827)
■图2-40 将线条样式设置为虚线
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00036004.jpg?sign=1738991607-601EeKPMik7qJY8F5mHshMvUbnBKZVPu-0-24f4c940b7779312b960d2d69e9a2f92)
■图2-41 长方体
接下来,绘制圆柱体,在绘制之前,分析圆柱体的构成,它由一个矩形和两个椭圆构成。
步骤一:绘制一个矩形,以及一个椭圆,为了让椭圆与矩形更好地接合,使用【Alt】键,从圆心开始画圆。绘制好一个椭圆之后,复制另一个椭圆,放置在底部,如图2-42所示。
步骤二:绘制圆柱体的高,并将多余线条选中后删除,如图2-43所示。
步骤三:将应该看不到的线条设置为虚线,由于绘制出来的图形是散件,为了让所有的线条都组合在一起,便于移动,用框选的方式将整个圆柱体选中,使用【Ctrl+G】组合键将圆柱体组合,成为一个整体,最终效果见图2-44。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00036005.jpg?sign=1738991607-aYabmPdwQCnL9OVBXV2tWreTsWximx4g-0-8c56189f4d042807867e550b5d030ef6)
■图2-42 绘制矩形及椭圆
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00036006.jpg?sign=1738991607-qEtZjp9ulxGIkQ42N5ZPS0t5wjLFSggh-0-d975462ff7abc53f5f292d54ce4e086e)
■图2-43 删除多余线条
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00036007.jpg?sign=1738991607-uFbuClhAGaMVbJDzypTiyCKh3Zx58p9Y-0-a2e909f346935c5c81daf8007c45f220)
■图2-44 将圆柱体组合
圆锥体的绘制与圆柱体的绘制方法非常相近,可以复制一个圆柱体,将圆柱体修改为圆锥体,这是提高制作效率的方法。圆锥体和球体的绘制同学们自行研究,这里不再赘述。
2.2.2 课堂学习——绘制立体文字
使用【Ctrl+B】组合键,可以将图形或组合打散,对于文字的打散,要用两打散命令,第一次打散,是将多个文字打散成为单个文字,第二次打散,是将个文字分离为散件。这里,我们学习将文字转换为散件进行编辑,制作立体文字,图2-45所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00037001.jpg?sign=1738991607-P0PkgLNPnVO7IDInJoDFIKRGnV9n1Vo6-0-aebbc4cf65706df5c3e78e198f8702f0)
请扫一扫获取相关微课视频
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00037002.jpg?sign=1738991607-RsslGtEcHN554nENGTwqQr0R0TuiwamX-0-c3d4d45e94d9138e3455a614cc1c2658)
■图2-45 绘制立体文字
步骤一:使用“文本工具(T)”输入文字“EXO”,并在“属性”面板中,设置字体。在字符栏中,选择“系列”,在下拉菜单中,选择“Franklin Gothic Heavy”字体,该字体棱角分明,比较适合制作立体文字,如图2-46所示。使用【Ctrl+B】组合键将文本打散,使用第一次,将文本打散成为单个文字,如图2-47所示,第二次使用【Ctrl+B】组合键将单个文字打散成为散件,如图2-48所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00037003.jpg?sign=1738991607-sWbDFl4aE26fdnGHvbirX8EB3k9LnEj4-0-dd00eeeeb34fcad00002adafc0de7f9e)
■图2-46 输入文字
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00037004.jpg?sign=1738991607-kE3eBCG2V18GOC2Cq8WMDzVuxkEo1ril-0-370634d727b07bd6d75db365a6df46ee)
■图2-47 打散成单个文字
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00037005.jpg?sign=1738991607-Z2LkLHQ19Xzsbl3AV0iN2ulGA2sx6sWR-0-1db4beb66c181fab9eed601afd1df9ef)
■图2-48 打散成散件
步骤二:使用“选择工具(V)”,调整文字的位置,调整文字的间距,便于制作立体文字,并使用工具箱中的“任意变形工具(Q)”,将图形放大,如图2-49所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00037006.jpg?sign=1738991607-JeMXOWymsAcst3eNbOHJBQEXAOomZKMg-0-abb6e4fd4e7e1609d6653a4f9e97de3c)
■图2-49 调整图形大小和间距
步骤三:为每个字母描边,首先调整笔触颜色为黑色,再选中工具箱中的“墨水瓶工具”,如图2-50所示,在每个字母上单击,即可为字母描边,如图2-51所示。这里需要注意的是,墨水瓶工具给边界上色,颜料桶工具则给填充区域上色,这是墨水瓶工具和颜料桶工具的区别。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00037007.jpg?sign=1738991607-d1TLPk38vZqDUW2k2gouv6PLV6QGzKp3-0-a3829871e10d94027e1d486246e95ff0)
■图2-50 使用“墨水瓶工具”描边
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00038001.jpg?sign=1738991607-1l5uR5Wn2OuYXjxfNqEWc5Ik61Gy8rqV-0-944ecd642bcea54e1994ce1968cc96a2)
■图2-51 描边后的效果
步骤四:描边完成后,删除填充色。使用“选择工具(V)“,单击填充色部分,按【Delete】键删除填充色,如图2-52所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00038002.jpg?sign=1738991607-ejVsMZ3jfORhzHyAsy1BE8bRxtqAl6bi-0-f4e157290fbe9d348e2d8db6642c9ed1)
■图2-52 删除填充色
步骤五:制作立体投影部分,以字母E为例,将字母E的线条部分选中,执行“复制”和“粘贴”操作,得出另一个字母E,将第二个字母E放置在第一个字母E的右后方,如图2-53所示。接下来,用“线条工具(N)”将两个字母间的空隙连接,如图2-54所示。最后,用“选择工具(V)”选中多余的线条,按住【Delete】键删除,最终效果见图2-55。使用同样的方法制作X和O的立体投影部分,三个字母的立体效果如图2-56所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00038003.jpg?sign=1738991607-ZsaeljP9StDZxGyXHNS1CoMlXGcyk7S6-0-4e0aec2db8057d64518858f91ea65526)
■图2-53 复制字母
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00038004.jpg?sign=1738991607-wN8poksevO0lE87ryqsGO8ZQFgupzI4g-0-49528d1612a583cf71539787ede857b0)
■图2-54 连接空隙部分
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00038005.jpg?sign=1738991607-QjJXocHSvNoi6PAey57thmVkz5p2Qvo8-0-40f3b7b0a925bd668770e03fb93b5afd)
■图2-55 删除多余线条
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00038006.jpg?sign=1738991607-8CD1M31jVuv6aHDbi6lDUMZ7Iu5cuNHC-0-15775185814d9b27f4e88004c6126b57)
■图2-56 三个字母的立体投影效果
步骤六:使用“颜料桶工具”为字母的高光面填充颜色,选择嫩绿色填充,如图2-57所示。再选择墨绿色为字母的暗面部分进行填充,最终效果如图2-58所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00039001.jpg?sign=1738991607-vs4kmfHmxbCBCOLbprJYcaRDA650yZ1U-0-a1828da3c79d6448dd0edc685eeee626)
■图2-57 为字母高光面填充颜色
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00039002.jpg?sign=1738991607-c4T07b8ShjMaS6bUWnjCgRoU7IThq298-0-f112d9ffee80746fa1d9cc874d17c469)
■图2-58 为字母暗面填充颜色
大家掌握了绘制方法后,可以进行扩展,尝试使用别的英文字母,或者中文文字来制作立体文字。
2.2.3 课堂练习——绘制表盘
通过以上实例的学习,相信同学们已经对Flash的基本图形绘制有了一些了解,接下来,请用已经掌握的绘制方法,绘制如图2-59所示的时钟图形。
首先,分析时钟图形的图案构成,外轮廓为圆,刻度由线条工具绘制,分针和时针由笔触不同的线条绘制,数字由文本工具创建。我们知道,时钟有12个刻度,一共360°,则两个刻度之间为30°,如何绘制精准的刻度,是本任务的难点。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00039003.jpg?sign=1738991607-wjmX84xXTJ2DRl5UQZz9B0Q8UGL8qkll-0-fcc4867acbfe70b8229a28a52cdc15d7)
请扫一扫获取相关微课视频
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00039004.jpg?sign=1738991607-6NmnHar83OjCAm4ltDwi1ipKeMkp8Rd9-0-a5fef2ff6e098e3bd8ff007eeef3743c)
■图2-59 时钟图形
步骤一:使用“椭圆工具”,按住【shift】键,绘制一个圆,打开“对齐”面板,使圆相对于舞台居中对齐。并在圆的左边绘制一条比直径更长的垂直直线,如图2-60所示。打开“对齐”面板,使直线相对于舞台居中对齐,如图2-61所示。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00040001.jpg?sign=1738991607-qWv1GxDO8IzWearQw3C0zSMvB6T1drZG-0-bd10d4a55f297226ee8b3f98c4a9a2a1)
■图2-60 绘制正圆形和直线
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00040002.jpg?sign=1738991607-ebCzkcNXPniHOtKwrlwbwiyQ55kugpyB-0-26e671f86b3f55d6763c9d2d61371477)
■图2-61 正圆形和直线相对于舞台居中对齐
步骤二:选中直线,打开“变形”面板,在面板上选择“旋转”单选按钮,并将数值输入为“30”,如图2-62所示。然后多次单击面板右下角的“重制选区和变形”按钮,每单击一次,直线就以30°的角度复制,最终效果见图2-63。
步骤三:把光标定位在圆心位置,按【Alt+Shift】组合键,从圆心开始绘制圆,新绘制的圆半径比外轮廓的圆稍小,如图2-64所示。接下来,选中多余的线条,将其删除,最终效果见图2-65。
步骤四:使用“线条工具”在表盘上绘制时针和分针,并使用“文本工具”,输入数字,最终效果见图2-59。
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00040003.jpg?sign=1738991607-XRQIZWgrdoMgx0jdXOMB4VpydKjywIiX-0-d38363fe960ffb4964251013253abd41)
■图2-62 设置“变形”面板
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00040004.jpg?sign=1738991607-5mraGckcnLJ3MaUFc7jUgQq9lPJBYXid-0-b2c0347b325339466cbb1c282a60b08d)
■图2-63 复制并旋转直线
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00040005.jpg?sign=1738991607-6ut6U4GSJFItUhgImQSTBqEkXMTPlGPe-0-44f5a4857a88ffa38058908425c27427)
■图2-64 绘制圆
![](https://epubservercos.yuewen.com/0FA0B1/17180248805290106/epubprivate/OEBPS/Images/img00040006.jpg?sign=1738991607-1xW1OzXAX25HJFxqa14O1OzGcmUEZdOl-0-61ccd7fa4b01b18ba74f5b62388bb8de)
■图2-65 删除多余线条