![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=1739475106-W30ddVeZApqMP35UVex5JrFMEon1WYVv-0-fbbc32fecc407f6f9db410ef0c7d8e89)
图2-78 椭圆属性面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P70_5925.jpg?sign=1739475106-bGxtgv0tgEYHv8Ecoy31zoQhL8ZNRGnL-0-90e2efda406f1dab09a893a9f101fb80)
图2-79 “颜色”面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P70_5928.jpg?sign=1739475106-UMOW4NZW97w1IXudARc6jvk9dpfgcxw2-0-47696bc9a4719c3e70a23cb871b3de00)
图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=1739475106-UBSpcMvkApuAbSQSqB1gjwZ5ybj86KaM-0-bbdad766832669bdd069b426e4c0c483)
图2-81 设置角度
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5946.jpg?sign=1739475106-zPvck6A0C5SCgzObqTjP3GhdgBOTQiOb-0-1ff0cae63e97880d3922a71793e2b915)
图2-82 图形效果
内径:该选项用于设置圆环的内径。不同内径、起始角度和结束角度的图形如图2-83所示。
闭合路径:该选项用于绘制弧线。设置起始角度和结束角度后,取消选中“闭合路径”选项,可绘制出弧线,如图2-84所示。选中“闭合路径”选项可绘制扇形,效果如图2-82所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5950.jpg?sign=1739475106-1uwbooGvbfKV2vnI0PRRiiaOONefsv0K-0-e3a4125b685d3883c980465120b5c737)
图2-83 图形效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5951.jpg?sign=1739475106-LtrVae5Otvwz18sv7wiFNI6WQrgL8cRy-0-eab4a66bd3b2284b00c054bf699a2426)
图2-84 绘制的弧线
2. 基本椭圆工具
在Animate CC 2018中,除了“合并绘制”和“对象绘制”模型,“椭圆”和“矩形”工具还提供图元对象绘制模式。不同于使用对象绘制模式创建的形状,使用图元椭圆工具或图元矩形工具创建的椭圆或矩形为独立的对象。
在绘图工具箱中选择“基本椭圆工具”,在属性面板上设置笔触颜色、填充色和笔触大小,然后在舞台上拖动鼠标,确定椭圆的轮廓后,释放鼠标,即可绘制一个图元椭圆。选中图元椭圆和椭圆的效果如图2-85所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5958.jpg?sign=1739475106-Yzoc4FiRaoDugqRhTjBJr4wdLmcxExtE-0-f4e9219d7efdc34964d48048f6c98d66)
图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=1739475106-gPOyIkC8FmvNDUHVCEsEPTrYnRaHODKd-0-ef63f667790c566cadf1c5296ced41d8)
图2-86 设置边角半径
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P72_6033.jpg?sign=1739475106-ylJSYe5bGybpHk4nP2UsXN1EMFyJ63oR-0-62d002f0d8d5e9ccb409c6767a25f80e)
图2-87 不同边角半径的矩形
教你一招:
在绘制矩形时,如果按键盘上的向上或向下方向键,可以自如地调整矩形边角的半径,并实时预览其效果,比输入具体数值的方法更便捷、迅速。
默认情况下,调整边角半径时,四个角的半径同步调整。如果要分别调整每一个角的半径,单击四个调整框下方的锁定图标,使其显示为断开的状态
,如图2-88所示。
如果对设置的半径不满意,单击“重置”按钮可以清除设置。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P72_6056.jpg?sign=1739475106-FcG9j5D53nnFjegYlSnaTkunCjAzGDwS-0-41b7f2b21184294fee74cf7190809064)
图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=1739475106-IcsB3uH612UxM6xL8bdZltQfflUVqHia-0-4cc7731154b3b828d633af595a8d1a7f)
图2-89 多角星形工具的属性面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6070.jpg?sign=1739475106-dZsr1Ykeijv2O2XQ1dAJwxn1sdmxHF23-0-99183af8b478c1b1134f4c7b720c7532)
图2-90 图形效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6071.jpg?sign=1739475106-NcwMKZlYIU4i7B7wQSi8cev6FlUt9AZ9-0-3ff829b7fba2a7182de207b046e4db3e)
图2-91 设置多边形属性
(3)单击“确定”按钮关闭对话框。
(4)在舞台上按下鼠标左键拖动,并调整图形的大小和角度,然后释放鼠标,即可绘制一个需要的图形,如图2-93所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6075.jpg?sign=1739475106-TBFSG3q1hi397PmQU10fowUMbmLiK15C-0-a189ff2dee746ea559ef9478cecbc7e0)
图2-92 不同顶点大小的多角星形
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6076.jpg?sign=1739475106-uuctClbxzwZj6epcxVu5tMZDIGzIYaGm-0-60ee3ed99dcdfcaa132d9a80a04b93fc)
图2-93 绘制多边形和多角星形
2.4.4 上机练习——夜空
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6152.jpg?sign=1739475106-eFNNJQvMJvQQjq4VnR5f3Uc0xlqTsR8i-0-8acde9c503d12c48c8a01eda7024a691)
2-5 上机练习——夜空
练习目标
在学习了椭圆、矩形和多角星形工具的使用方法之后,本节练习将使用这些基本形状工具绘制一幅夜空的景象,通过对操作步骤的详细讲解,使读者熟练掌握形状工具的使用方法。
设计思路
首先新建一个Animate CC 2018文档,使用“椭圆工具”绘制月亮,并填充渐变色。然后通过设置多角星形工具的选项,绘制四角星形,最后复制多个星形并调整大小和位置,绘制一幅夜空的景象,最终效果如图2-94所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6151.jpg?sign=1739475106-tDiF8QYG5CCDMAiragpeYjIlSwcQqtWh-0-4cb8dfd5e88a7e8177b8cd2aeb3f6aeb)
图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=1739475106-leCs5uYX90aC2cBgcaTlaot3LTtrglG7-0-944c0dc13e59bc543b6fb992938fb971)
图2-95 绘制的圆形
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P74_6179.jpg?sign=1739475106-Ws5nISi7skw61wzJ3SqNJvmN85b8Mma5-0-e3d7c09f488b9d8a8372ff689055ca40)
图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=1739475106-tnjnR6An34BIQY8ak1NvprYBsiXgTgup-0-bdcf8f4ba3782c4ff1e1624ad64276dd)
图2-97 “工具设置”对话框
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P74_6184.jpg?sign=1739475106-hxpQUWA69gLtK6YUzsTo1JpYhdUtruNS-0-b84a847aa265422b47c122669e77817c)
图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=1739475106-rgaUUR22DWlaZ3daz4AZ3j4g0vtSxvSo-0-985669dad433e8a4a785e486457c4817)
图2-99 画笔工具的选项
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6207.jpg?sign=1739475106-Jpfs26Ckwax1MegcdZ2u9qdKH4f3r5tR-0-be12fe56f99a0cafe9c5b2890726801f)
图2-100 画笔工具属性面板
(3)在舞台上按下鼠标左键随意拖动,即可沿着鼠标的运动轨迹产生一条曲线,如图2-101所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6211.jpg?sign=1739475106-hzAsWkABtPnjuYg4b3Oq4sRnI76zdBU7-0-c9824ec91bd1065a67f7330796db613a)
图2-101 画笔绘图效果
提示:
与铅笔工具一样,按住Shift键拖动可将刷子笔触限定为水平和垂直方向。
在属性面板上,用户还可以设置画笔模式和锁定填充,制作出丰富多彩的效果。
1. 画笔模式
画笔模式用来设置画笔对舞台中其他对象的影响方式,单击“画笔模式”按钮,弹出如图2-102所示的菜单。
标准绘画:新绘制的线条覆盖同一层中原有的图形,但是不会影响文本对象和引入的对象,如图2-103所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6243.jpg?sign=1739475106-xjttuD3j9V6z0TKanwzCJY34Za8gH3MF-0-9676a262a76e8bae0e8e85358fd3c52d)
图2-102 “画笔模式”按钮选项
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6244.jpg?sign=1739475106-qGetNJcxKthgsYkxHvavO8bWDhbrKNx0-0-fdc184dad09e4b3f59b47d0eac646cd6)
图2-103 “标准绘画”模式
颜料填充:只能在空白区域和已有矢量色块的填充区域内绘图,并且不会影响矢量线的颜色,如图2-104所示。
后面绘画:只能在空白区绘图,不会影响原有的图形,只是从原有图形的背后穿过,如图2-105所示。
颜料选择:只能在选择区域内绘图。不会影响到矢量线和未填充的区域,如图2-106所示。
提示:
在使用这种模式之前,需要先选择一部分图形区域。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6280.jpg?sign=1739475106-DtnN4JCTR7KO9YjrG06wwuf0KKGy4Cxb-0-c158da630d7f105717b1639f3026aaaa)
图2-104 “颜料填充”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6281.jpg?sign=1739475106-oEXhioyzORMgjphO4VphXHOk86EXsi9b-0-688f61db614b70e2f09616538431a21b)
图2-105 “后面绘画”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6282.jpg?sign=1739475106-Tw1RCQi2LfKmHiVNwy0LDqTKae2J9oZM-0-51f70c8ce9d436a8f6ae1cd2f09cd77e)
图2-106 “颜料选择”模式
内部绘画:这种模式可分为两种情况:一种情况是当画笔起点位于图形之外的空白区域,在经过图形时,从其背后穿过;第二种情况是当画笔的起点位于图形的内部时,只能在图形的内部绘制图,如图2-107所示。
2. 锁定填充
锁定填充选项用于切换在使用渐变色进行填充时的参照点,单击“锁定填充”按钮,即可进入锁定填充模式。
在非锁定填充模式下,对现有图形进行填充时,在画笔经过的地方都包含着一个完整的渐变过程。
当画笔处于锁定状态时,以系统确定的参照点为准进行填充,完成渐变色的过渡以整个动画为完整的渐变区域,画笔涂到什么区域,就对应出现什么样的渐变色,如图2-108所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6289.jpg?sign=1739475106-ycb9ZE7nXvrA7XDOrwAxD0K75WRouM19-0-dfaf0206082074cc11fc271d7671db8c)
图2-107 画笔的“内部绘画”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6290.jpg?sign=1739475106-2Dzlurm55VOThAsk0QcYoFzubdonZWui-0-15ab370c502782c4348df722c3012334)
图2-108 锁定填充的对比