![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=1739169700-2Y66OzWW1nLMECEv9ixh0YKlXXD0WZVB-0-406478bd0499fed0fcd446848e163fd4)
图2-78 椭圆属性面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P70_5925.jpg?sign=1739169700-Tf3Av7zW9ylsl7k2zOp0TzFOcWdQ1hwU-0-e4ab59cfdf5dcb65c26c4835143c16c0)
图2-79 “颜色”面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P70_5928.jpg?sign=1739169700-DZGRvX3GzfUlwta5WTH0ooQFOjqoGoek-0-92957f1d180aa0e8acaf215cf57bb3fb)
图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=1739169700-dqn8dUd3XwSqeFgkdO6eeo9yzClnxhNQ-0-b5b0f61d63dab8446c65b38b7e79d191)
图2-81 设置角度
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5946.jpg?sign=1739169700-fcYvuD398CZqm4TLzHJTShY6sxAGIUD4-0-a673c4e32f7fbf77243e1e34e8bd5ddd)
图2-82 图形效果
内径:该选项用于设置圆环的内径。不同内径、起始角度和结束角度的图形如图2-83所示。
闭合路径:该选项用于绘制弧线。设置起始角度和结束角度后,取消选中“闭合路径”选项,可绘制出弧线,如图2-84所示。选中“闭合路径”选项可绘制扇形,效果如图2-82所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5950.jpg?sign=1739169700-P4BE0Un1nqnSjShJQhJxR082VstZEPk5-0-074c8077f31aae88a5fdb4a0720d73b4)
图2-83 图形效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5951.jpg?sign=1739169700-rOjpDobl87CInKfbXa7B9oP1d00VRoLx-0-f3b7301141b9127065976b77dc4eba98)
图2-84 绘制的弧线
2. 基本椭圆工具
在Animate CC 2018中,除了“合并绘制”和“对象绘制”模型,“椭圆”和“矩形”工具还提供图元对象绘制模式。不同于使用对象绘制模式创建的形状,使用图元椭圆工具或图元矩形工具创建的椭圆或矩形为独立的对象。
在绘图工具箱中选择“基本椭圆工具”,在属性面板上设置笔触颜色、填充色和笔触大小,然后在舞台上拖动鼠标,确定椭圆的轮廓后,释放鼠标,即可绘制一个图元椭圆。选中图元椭圆和椭圆的效果如图2-85所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5958.jpg?sign=1739169700-9iRke12mwlGPplVp9Z21kOuCIzHEidJC-0-7d9dbabd3c2ffbe65c5a79cd8c0cd1af)
图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=1739169700-ppU11V0QPsXQmljA8wk85NIz5nrfFWtQ-0-f2f364895037f8be9b1ce1070cafcca3)
图2-86 设置边角半径
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P72_6033.jpg?sign=1739169700-SzSHbl7fx6qHBRm2wOj1XN3YpRmH8LtC-0-af8a4999802970c6481975ef81effb1c)
图2-87 不同边角半径的矩形
教你一招:
在绘制矩形时,如果按键盘上的向上或向下方向键,可以自如地调整矩形边角的半径,并实时预览其效果,比输入具体数值的方法更便捷、迅速。
默认情况下,调整边角半径时,四个角的半径同步调整。如果要分别调整每一个角的半径,单击四个调整框下方的锁定图标,使其显示为断开的状态
,如图2-88所示。
如果对设置的半径不满意,单击“重置”按钮可以清除设置。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P72_6056.jpg?sign=1739169700-nOuVzCthbtuNOm0LzrnfcyBf5TKVA5kS-0-bd83538674eca4525ac4ee1719951b6c)
图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=1739169700-4rvRBPB1DrLk7LkDq0fEEJxLqL2c0Wsc-0-79ffe88ca2a064e4f82e0889630a9223)
图2-89 多角星形工具的属性面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6070.jpg?sign=1739169700-hjCVcn1ECWIxG7mz6rfvgAdfzhEqT3Q9-0-51d1ab10ab79534d581e699b796fd2a7)
图2-90 图形效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6071.jpg?sign=1739169700-6JxR1Cdzr5qedgblYxmfv1FyU8kdj6UR-0-cfc012f4fda9faa5b6814f38a812bcea)
图2-91 设置多边形属性
(3)单击“确定”按钮关闭对话框。
(4)在舞台上按下鼠标左键拖动,并调整图形的大小和角度,然后释放鼠标,即可绘制一个需要的图形,如图2-93所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6075.jpg?sign=1739169700-vonnkUf7UV5GvRKUSn6Nwn2C04EPitEe-0-8064a4787615d9f74b289d6792bc6e65)
图2-92 不同顶点大小的多角星形
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6076.jpg?sign=1739169700-t88EecnUsv5tcgpUgKxZ3aDU82kwYM5L-0-06be0086fa25a966434a8be64b29f125)
图2-93 绘制多边形和多角星形
2.4.4 上机练习——夜空
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6152.jpg?sign=1739169700-xFOjfDP0XPNAxta08Ihirj8yF8aUboCI-0-3b7087de55e2d655382a820ad776806d)
2-5 上机练习——夜空
练习目标
在学习了椭圆、矩形和多角星形工具的使用方法之后,本节练习将使用这些基本形状工具绘制一幅夜空的景象,通过对操作步骤的详细讲解,使读者熟练掌握形状工具的使用方法。
设计思路
首先新建一个Animate CC 2018文档,使用“椭圆工具”绘制月亮,并填充渐变色。然后通过设置多角星形工具的选项,绘制四角星形,最后复制多个星形并调整大小和位置,绘制一幅夜空的景象,最终效果如图2-94所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6151.jpg?sign=1739169700-LMttlJG4kXiCnIiwzTQ1aysD2zrNDkCf-0-fd30b8bfed2130c0830da4730b230317)
图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=1739169700-GGZZim1BBGmH3MsTvwLDR4vJVixVA2vj-0-cddef44135c59c36ced6df0b728c38b2)
图2-95 绘制的圆形
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P74_6179.jpg?sign=1739169700-Y38Ne16ag3CLNOG4qUH9dZxojZa7I1r2-0-0070f39eebd46463f398f05eb97a1f78)
图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=1739169700-Eewu7rd7zctoOeLDKds7WEmn33pdD2HL-0-eb1e8fdac2e4c806854acf8361d217d7)
图2-97 “工具设置”对话框
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P74_6184.jpg?sign=1739169700-xUEOsbEF750LOhMlvQxhDmmqiVhbLODv-0-6be567f63270007007a320300edcf045)
图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=1739169700-bxCCQGHbvaelE6yEhHsQh2XynLwYX5e5-0-be6c7e673ee29932baaf8432aec59cc5)
图2-99 画笔工具的选项
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6207.jpg?sign=1739169700-u4ups939maCL20D1W0ukSjwh73rl7DbR-0-88c5ed586ea28782ac5f20478d252f9e)
图2-100 画笔工具属性面板
(3)在舞台上按下鼠标左键随意拖动,即可沿着鼠标的运动轨迹产生一条曲线,如图2-101所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6211.jpg?sign=1739169700-NI39Ds37z9np3NhX6sxpkPVL8MGmfipd-0-3663e3724a922c6900be08e32ab936fd)
图2-101 画笔绘图效果
提示:
与铅笔工具一样,按住Shift键拖动可将刷子笔触限定为水平和垂直方向。
在属性面板上,用户还可以设置画笔模式和锁定填充,制作出丰富多彩的效果。
1. 画笔模式
画笔模式用来设置画笔对舞台中其他对象的影响方式,单击“画笔模式”按钮,弹出如图2-102所示的菜单。
标准绘画:新绘制的线条覆盖同一层中原有的图形,但是不会影响文本对象和引入的对象,如图2-103所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6243.jpg?sign=1739169700-5XCkxJVOhZsajS5CCTh43SWjCfQrH287-0-ccc582a134112292a90ea7e2a02eb04a)
图2-102 “画笔模式”按钮选项
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6244.jpg?sign=1739169700-ScbP7UAsQ5ofOPThOj0RxszbTq39HOUp-0-d2df8e452820ca36fca21b4c6d363459)
图2-103 “标准绘画”模式
颜料填充:只能在空白区域和已有矢量色块的填充区域内绘图,并且不会影响矢量线的颜色,如图2-104所示。
后面绘画:只能在空白区绘图,不会影响原有的图形,只是从原有图形的背后穿过,如图2-105所示。
颜料选择:只能在选择区域内绘图。不会影响到矢量线和未填充的区域,如图2-106所示。
提示:
在使用这种模式之前,需要先选择一部分图形区域。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6280.jpg?sign=1739169700-ly0OvCV0f4uTUUvj8t6mSXmJVxJi6Kbc-0-dce40e5c96ad75bb5e70d20a80b7cbe2)
图2-104 “颜料填充”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6281.jpg?sign=1739169700-YJJgxOeoCVcXktHPoSUOcWhp7vXepVJS-0-a1dd83db5b05195c376e5664e91222b6)
图2-105 “后面绘画”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6282.jpg?sign=1739169700-chfC9JqTHZGyeptik0qhklbzUXyL7IPH-0-ed18d0c37e90ad245f3192f6f766e2b5)
图2-106 “颜料选择”模式
内部绘画:这种模式可分为两种情况:一种情况是当画笔起点位于图形之外的空白区域,在经过图形时,从其背后穿过;第二种情况是当画笔的起点位于图形的内部时,只能在图形的内部绘制图,如图2-107所示。
2. 锁定填充
锁定填充选项用于切换在使用渐变色进行填充时的参照点,单击“锁定填充”按钮,即可进入锁定填充模式。
在非锁定填充模式下,对现有图形进行填充时,在画笔经过的地方都包含着一个完整的渐变过程。
当画笔处于锁定状态时,以系统确定的参照点为准进行填充,完成渐变色的过渡以整个动画为完整的渐变区域,画笔涂到什么区域,就对应出现什么样的渐变色,如图2-108所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6289.jpg?sign=1739169700-aSWw349Nd1KOi4rpzMIrnIDudTB4BXex-0-87936502045eb6731d283910800825a8)
图2-107 画笔的“内部绘画”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6290.jpg?sign=1739169700-6bqbTyhKM5N06RRX4mGZm2Nluk9w0Vex-0-0e1e3c15e6143d24aa32099942b1650a)
图2-108 锁定填充的对比