![Animate CC 2018中文版入门与提高](https://wfqqreader-1252317822.image.myqcloud.com/cover/755/26542755/b_26542755.jpg)
2.4 形状工具
形状工具用于绘制规则的图形,如椭圆、圆、矩形、多边形和多角星形。
2.4.1 椭圆工具
Animate CC 2018提供两个绘制椭圆的工具:椭圆和基本椭圆。虽然这两个工具比较相似,但是它们都拥有特定的特性。
1. 椭圆工具
椭圆由笔触和填充两部分组成,所以使用椭圆工具不仅可以绘制椭圆,还可以绘制椭圆轮廓线。
(1)在绘图工具箱中选择“椭圆工具”。
(2)在如图2-78所示的属性面板上设置椭圆的属性。
(3)在舞台上拖动鼠标,确定椭圆的轮廓后,释放鼠标,即可绘制出有椭圆。
教你一招:
绘制椭圆时,按住Shift键可以绘制出正圆。
在图2-79所示的属性面板中,“填充和笔触”部分的属性与笔触工具基本相同,不同的是可以设置填充颜色和样式。选择不同填充模式绘制的椭圆如图2-80所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P70_5924.jpg?sign=1738886008-LwrSHsMRXmi3b14Snk2hD12VvXVC8MBd-0-529a8bd55d29a800437195a2c2c83dcd)
图2-78 椭圆属性面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P70_5925.jpg?sign=1738886008-smPb8G1kjPp4rC97LMxZ5A039bj2DV7e-0-aee62226ad48f3fb23e482ae76d7104f)
图2-79 “颜色”面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P70_5928.jpg?sign=1738886008-9VgtMte1awIER5q1XKsigikrTBrBy542-0-a0271ff44fadbc6e0d6661fcd6da1f6d)
图2-80 不同填充模式绘制的椭圆
将“填充颜色”设置,即为无色状态,可绘制椭圆轮廓线,如图2-80左上角所示。
“椭圆选项”部分进一步丰富了Animate CC 2018的绘图功能,可以绘制有缺口的椭圆或正圆、圈环和弧线。
开始角度:设置弧形或扇形的起始角度,可以直接在文本框中输入,也可以拖动滑块设置角度,如图2-81所示。
结束角度:设置弧形结束时的角度。
例如,设置起始角度为60,结束角度为350,笔触颜色为绿色,填充色为红棕色的图形效果如图2-82所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5945.jpg?sign=1738886008-vzWKR3ktryNG0mWyMiWtL1SI6FyKSPja-0-7f7f791008f1a00b50981cc4e813d901)
图2-81 设置角度
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5946.jpg?sign=1738886008-Nfg1pe0MtfTXwFfXpOwk5Q5IBNgI42pb-0-2c16c528605ea5d6c814abf5e70d1666)
图2-82 图形效果
内径:该选项用于设置圆环的内径。不同内径、起始角度和结束角度的图形如图2-83所示。
闭合路径:该选项用于绘制弧线。设置起始角度和结束角度后,取消选中“闭合路径”选项,可绘制出弧线,如图2-84所示。选中“闭合路径”选项可绘制扇形,效果如图2-82所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5950.jpg?sign=1738886008-mSt86wJwZ7tZfBYfaIpQQQIHg268FTvM-0-90edf66b1d6f73221861da56568e0c63)
图2-83 图形效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5951.jpg?sign=1738886008-doP3X9ttLGlptHD6CvPdCqL7id0Y28ua-0-035b771eae6cdfeab15a9b0ec21f052f)
图2-84 绘制的弧线
2. 基本椭圆工具
在Animate CC 2018中,除了“合并绘制”和“对象绘制”模型,“椭圆”和“矩形”工具还提供图元对象绘制模式。不同于使用对象绘制模式创建的形状,使用图元椭圆工具或图元矩形工具创建的椭圆或矩形为独立的对象。
在绘图工具箱中选择“基本椭圆工具”,在属性面板上设置笔触颜色、填充色和笔触大小,然后在舞台上拖动鼠标,确定椭圆的轮廓后,释放鼠标,即可绘制一个图元椭圆。选中图元椭圆和椭圆的效果如图2-85所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5958.jpg?sign=1738886008-jnDa2BDGPqMz377kPgtW49sOqA02hy7f-0-8c0b733a4ea13f2ba8fac9687d70075b)
图2-85 图形效果比较
利用属性面板还可以指定图元椭圆的开始角度、结束角度和内径。其使用方法与椭圆工具相同,在此不再赘述。
提示:
只要选中图元椭圆工具或图元矩形工具中的一个,属性面板就将保留上次编辑的图元对象的值。
2.4.2 矩形工具
与椭圆工具类似,Animate CC 2018提供两个绘制矩形的工具:矩形和基本矩形。
1. 矩形工具
使用“矩形工具”不但可以绘制矩形,还可以绘制矩形轮廓线。矩形工具的使用方法与椭圆工具类似,在此不再一一叙述。
提示:
绘制矩形的同时按下Shift键,可以绘制正方形。
需要说明的是,选择“矩形工具”之后,在属性面板上的“矩形选项”区域可以设置矩形各个角的边角半径,如图2-86所示。矩形边角半径的范围是–100~100之间的任何数值。值越大,矩形的圆角就越明显。设置为0时,可得到标准的矩形;设置为100时,绘制出来的是圆形;设置为–100时,绘制出来的是星形。不同边角半径的矩形效果如图2-87所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P72_6032.jpg?sign=1738886008-TmWBSwjiK5FNPtiDJwp6c9TY0FmbSUIm-0-7858fb66597d379c516dbf1aba0580e7)
图2-86 设置边角半径
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P72_6033.jpg?sign=1738886008-zLmOOa0GboDYPOVuIlzjfWwkbLa7LHwt-0-99c5edeee19d90d6fbf1f5a3e419c5fe)
图2-87 不同边角半径的矩形
教你一招:
在绘制矩形时,如果按键盘上的向上或向下方向键,可以自如地调整矩形边角的半径,并实时预览其效果,比输入具体数值的方法更便捷、迅速。
默认情况下,调整边角半径时,四个角的半径同步调整。如果要分别调整每一个角的半径,单击四个调整框下方的锁定图标,使其显示为断开的状态
,如图2-88所示。
如果对设置的半径不满意,单击“重置”按钮可以清除设置。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P72_6056.jpg?sign=1738886008-ddYJxHx9wIYIYzHbSXIfJgOCuSudUDBx-0-f0970ad3f99f604f24e36f6300eb24b5)
图2-88 分别调整矩形的边角半径
2. 基本矩形工具
使用“基本矩形”工具可以绘制独立的图元矩形。绘制的图元矩形与普通矩形的区别在于,普通矩形的边线和填充是分离的,用户可以分别选中其边线和填充色块;而图元矩形是一个整体。
图元矩形的绘制方法、属性设置与矩形相同,在此不再重复介绍。
2.4.3 多角星形工具
使用多角星形工具可以绘制各种多边形和星形。
(1)在绘图工具箱中单击“多角星形工具”按钮。
(2)在如图2-89所示的属性面板上设置笔触颜色、填充颜色、笔触大小等属性。
(3)在舞台上按下鼠标左键并拖动,可以调整多边形的大小和角度,如图2-90(a)所示。
(4)调整好大小和位置后释放鼠标,即可绘制一个正五边形,如图2-90(b)所示。
默认情况下,多角星形工具绘制的是一个正五边形,如果要绘制其他类型的多边形或星形,可以通过设置工具选项得到。
(1)选中“多角星形工具”,并打开对应的属性面板,如图2-89所示。
(2)单击“工具设置”区域的“选项”按钮,弹出“工具设置”对话框,如图2-91所示。
样式:设置多边形的新式,有星形和多边形两种。
边数:设置边的数目,取值范围在3~92之间。
星形顶点大小:用于指定星形顶点的深度,范围为0~1。数值越接近于0,顶点越深。不同顶点大小的多角星形的效果如图2-92所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6069.jpg?sign=1738886008-quulXPfmC2bx8H3r4zfMPmcMAtLPPbQ9-0-f60b02ff549c920740ea276e88464771)
图2-89 多角星形工具的属性面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6070.jpg?sign=1738886008-sOmmlxzimG8DL5Z8ExuMSyo00yg1bap0-0-bab5213ba1fc268e4b4bfbdf1aae8247)
图2-90 图形效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6071.jpg?sign=1738886008-0DOVddSYiofwpBBYKCIrj0xTEjvT0E4l-0-ffe35eec2429b216261e60d4c13c447d)
图2-91 设置多边形属性
(3)单击“确定”按钮关闭对话框。
(4)在舞台上按下鼠标左键拖动,并调整图形的大小和角度,然后释放鼠标,即可绘制一个需要的图形,如图2-93所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6075.jpg?sign=1738886008-RQrlmRrDhrpgu2CUGpunUHoC9zVZ1iFO-0-699ad359bb77a406e4d263b2cf06c425)
图2-92 不同顶点大小的多角星形
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6076.jpg?sign=1738886008-0qUlGqiRqQN8YSf2jPmYqztghOrH5BGY-0-f940195d325745176e5385633f6bd71e)
图2-93 绘制多边形和多角星形
2.4.4 上机练习——夜空
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6152.jpg?sign=1738886008-1kPmHlYOkS4wHPqN6wcup7W0zD3cnQJN-0-9f68b362c03586da6ecddb03a50be5b0)
2-5 上机练习——夜空
练习目标
在学习了椭圆、矩形和多角星形工具的使用方法之后,本节练习将使用这些基本形状工具绘制一幅夜空的景象,通过对操作步骤的详细讲解,使读者熟练掌握形状工具的使用方法。
设计思路
首先新建一个Animate CC 2018文档,使用“椭圆工具”绘制月亮,并填充渐变色。然后通过设置多角星形工具的选项,绘制四角星形,最后复制多个星形并调整大小和位置,绘制一幅夜空的景象,最终效果如图2-94所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6151.jpg?sign=1738886008-0iCApCSSUrGLfT9EtSIo6l07471ocE48-0-8586965ee31cb5db791aa27b14bfe7e0)
图2-94 最终效果
操作步骤
(1)执行“文件”|“新建”命令,新建一个Animate CC 2018文档,舞台背景为黑色。
(2)选择工具箱中的“椭圆工具”,在属性面板上设置笔触颜色无,填充色为径向渐变,按住Shift键在舞台上绘制一个圆形,如图2-95所示。
(3)选中绘制的圆形,执行“窗口”|“颜色”命令,打开“颜色”面板。修改第一个游标颜色为黄色,第二个为白色,如图2-96(a)所示,图形填充后的效果如图2-96(b)所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P74_6178.jpg?sign=1738886008-8kKiitJ8bfpBPa0X9NqgMKANN81LBvuE-0-0ba868f85fa101a3fab0ab0dd9e0d45c)
图2-95 绘制的圆形
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P74_6179.jpg?sign=1738886008-Qiuqnt46n58UTmRgY90JTI7GHZqa8DGm-0-aa0a605b4f6df8bdcd336892625efc5c)
图2-96 填充图形
(4)选择工具箱中的“多角星形工具”,在属性面板上设置笔触颜色无,填充色为白色,然后单击面板底部的“选项”按钮,打开“工具设置”对话框。设置“样式”为“星形”,“边数”为4,“星形顶点大小”为0.20,如图2-97所示。
(5)按下鼠标左键在舞台拖动,即可绘制一个四角星形,如图2-98所示。用同样的方法绘制其他星星,并调整星星的大小和位置,最终效果图如图2-94所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P74_6183.jpg?sign=1738886008-I4oB12zpLvJhtTZtwE3RObvq8SucdBiy-0-4be7f7e1a13a2fdbb4da5a539c6abf2e)
图2-97 “工具设置”对话框
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P74_6184.jpg?sign=1738886008-nqj40XGOJ7wcaqU9H90cRyU5y0hKrMSH-0-db685b0075608594161f2e4fb34c239f)
图2-98 绘制星星
2.4.5 画笔工具
“画笔工具”可以表现出用毛笔上彩的效果,经常用于绘制对象或建立自由形态的矢量色块。画笔工具与铅笔工具很相似,都可以创建自由形状的线条。但与铅笔工具不同的是,使用画笔工具创建的形状是被填充的,且没有外轮廓线。
(1)选中绘图工具箱中的“画笔工具”。
(2)在绘图工具箱底部可以设置画笔的大小、形状、模式及填充方式,如图2-99所示。还可以在如图2-100所示的属性面板上自定义画笔形状和大小。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6206.jpg?sign=1738886008-3NlVyFVkxr7i9JT93T8xE9ST0KTSfZez-0-5731a702fe41434eb922a9bd44bd8765)
图2-99 画笔工具的选项
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6207.jpg?sign=1738886008-K3Sf7NwqJu1hS8l1KoVgCFS4tv3T5n2b-0-ec094add68cd6b2c59acf52a613b0353)
图2-100 画笔工具属性面板
(3)在舞台上按下鼠标左键随意拖动,即可沿着鼠标的运动轨迹产生一条曲线,如图2-101所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6211.jpg?sign=1738886008-kuSn9VDsjfAYLPpUJ93LXbr7a9TPy6Pt-0-eff57010f00a9607b38f5ad3d7d5e53e)
图2-101 画笔绘图效果
提示:
与铅笔工具一样,按住Shift键拖动可将刷子笔触限定为水平和垂直方向。
在属性面板上,用户还可以设置画笔模式和锁定填充,制作出丰富多彩的效果。
1. 画笔模式
画笔模式用来设置画笔对舞台中其他对象的影响方式,单击“画笔模式”按钮,弹出如图2-102所示的菜单。
标准绘画:新绘制的线条覆盖同一层中原有的图形,但是不会影响文本对象和引入的对象,如图2-103所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6243.jpg?sign=1738886008-vfjwmzd4xkhDs3HCg1LGFPnk2JtRhmh0-0-ff0514dca9102e7fb8674ac0503f17f8)
图2-102 “画笔模式”按钮选项
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6244.jpg?sign=1738886008-pzdCmuQ7PuZXN26W6UcOs1wQB5VkQM32-0-26e4ff8613fc89101745d9490de0e607)
图2-103 “标准绘画”模式
颜料填充:只能在空白区域和已有矢量色块的填充区域内绘图,并且不会影响矢量线的颜色,如图2-104所示。
后面绘画:只能在空白区绘图,不会影响原有的图形,只是从原有图形的背后穿过,如图2-105所示。
颜料选择:只能在选择区域内绘图。不会影响到矢量线和未填充的区域,如图2-106所示。
提示:
在使用这种模式之前,需要先选择一部分图形区域。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6280.jpg?sign=1738886008-lY91f9udBWISFTuLemzM5IFOsTArlWhh-0-3dbbdfe76456ef9b794d5b55448b30e1)
图2-104 “颜料填充”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6281.jpg?sign=1738886008-z90Cho5i34LVJb7y5d17KBp3ja8sU7r2-0-6c54783e92100d6ec561cddc35951681)
图2-105 “后面绘画”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6282.jpg?sign=1738886008-tVzjNtuqMsRhBRATHM4lG0NclaMrXUba-0-316137d9a5957af6d256c5c5c0945560)
图2-106 “颜料选择”模式
内部绘画:这种模式可分为两种情况:一种情况是当画笔起点位于图形之外的空白区域,在经过图形时,从其背后穿过;第二种情况是当画笔的起点位于图形的内部时,只能在图形的内部绘制图,如图2-107所示。
2. 锁定填充
锁定填充选项用于切换在使用渐变色进行填充时的参照点,单击“锁定填充”按钮,即可进入锁定填充模式。
在非锁定填充模式下,对现有图形进行填充时,在画笔经过的地方都包含着一个完整的渐变过程。
当画笔处于锁定状态时,以系统确定的参照点为准进行填充,完成渐变色的过渡以整个动画为完整的渐变区域,画笔涂到什么区域,就对应出现什么样的渐变色,如图2-108所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6289.jpg?sign=1738886008-duZIjhTFFXn1GYIcOONe8XhkBjWuqOFn-0-a45b035cb3183e4861dba27b3f3eb57b)
图2-107 画笔的“内部绘画”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6290.jpg?sign=1738886008-iDcn8sK2HZLVi0zI48uhRzAIWlYgg0aa-0-3012db666d996220ae6d8e4e64793065)
图2-108 锁定填充的对比