![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=1739000522-pHzdMmVox9Rzl6DCkR34oKlKIBULvmgw-0-20465a3605170e2daa4ec6ae1fd574ba)
图2-78 椭圆属性面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P70_5925.jpg?sign=1739000522-VJxVoqzfwjuGa1tRGRYa1hP8TnwGnqRD-0-3f4d0542d578fee96b267ad16c91e62b)
图2-79 “颜色”面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P70_5928.jpg?sign=1739000522-6vOe4bp96poBNOAbN2vZ2xLiPatv8GU2-0-0bce670ab098a9b8131779eea3875e86)
图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=1739000522-bGp5tmSYsaVybeElTtJ77NifDB3jNDXL-0-0bb03e8b3c06c85c5a0b1986f3479421)
图2-81 设置角度
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5946.jpg?sign=1739000522-blf1uOHkHwgfveO8DPVCKYX2isNf2rBz-0-76ec3789ed1f24c851c2ba731a2932e4)
图2-82 图形效果
内径:该选项用于设置圆环的内径。不同内径、起始角度和结束角度的图形如图2-83所示。
闭合路径:该选项用于绘制弧线。设置起始角度和结束角度后,取消选中“闭合路径”选项,可绘制出弧线,如图2-84所示。选中“闭合路径”选项可绘制扇形,效果如图2-82所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5950.jpg?sign=1739000522-l4uZ6ubvyLu9xyGCKe3cxQmmcqpuntcS-0-7260363979bcc078cf07ff5c12ad34ca)
图2-83 图形效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5951.jpg?sign=1739000522-dez4ZYtkk8PnOBWI4TiPXcyMVFuWTR0Z-0-c66f32c4c1f23e549373d076c07f2a6e)
图2-84 绘制的弧线
2. 基本椭圆工具
在Animate CC 2018中,除了“合并绘制”和“对象绘制”模型,“椭圆”和“矩形”工具还提供图元对象绘制模式。不同于使用对象绘制模式创建的形状,使用图元椭圆工具或图元矩形工具创建的椭圆或矩形为独立的对象。
在绘图工具箱中选择“基本椭圆工具”,在属性面板上设置笔触颜色、填充色和笔触大小,然后在舞台上拖动鼠标,确定椭圆的轮廓后,释放鼠标,即可绘制一个图元椭圆。选中图元椭圆和椭圆的效果如图2-85所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P71_5958.jpg?sign=1739000522-yeICEfyXK5cRpmIEAqMgO2UJviU9IN8F-0-9035cfe5d80fee4e370d30818177c6b5)
图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=1739000522-pmd6LNVjuExmwFIckaPEyJaaA6apQmjp-0-a6c9d63717a621f594686d0fd92a5eaa)
图2-86 设置边角半径
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P72_6033.jpg?sign=1739000522-chIgverRA1tXroCFq189SagzLw4qyBIX-0-6e4f497fb4820d04583c6474f210e13b)
图2-87 不同边角半径的矩形
教你一招:
在绘制矩形时,如果按键盘上的向上或向下方向键,可以自如地调整矩形边角的半径,并实时预览其效果,比输入具体数值的方法更便捷、迅速。
默认情况下,调整边角半径时,四个角的半径同步调整。如果要分别调整每一个角的半径,单击四个调整框下方的锁定图标,使其显示为断开的状态
,如图2-88所示。
如果对设置的半径不满意,单击“重置”按钮可以清除设置。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P72_6056.jpg?sign=1739000522-HOP0aI0eGUZbDLdfJZJJ3dttKTyGK2WH-0-9b55e8bbb1e365366c9e7d600adac670)
图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=1739000522-1Kehx9nu3Jl1lgpO9n6hrsnPfd2zmaKj-0-869f3b8e25bfd9500055dfa5e6ea7fe6)
图2-89 多角星形工具的属性面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6070.jpg?sign=1739000522-gRGA2UxLocHjTP3RlJOtaomAEAbuvnA7-0-c18207e732a79242afe67e7260cb7b6e)
图2-90 图形效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6071.jpg?sign=1739000522-I1ekHtt2SjPJieqVCt5VQoSZjT2XvaOl-0-66ae3b504af5ca91a72ee242a90025c5)
图2-91 设置多边形属性
(3)单击“确定”按钮关闭对话框。
(4)在舞台上按下鼠标左键拖动,并调整图形的大小和角度,然后释放鼠标,即可绘制一个需要的图形,如图2-93所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6075.jpg?sign=1739000522-aXiqZkBc817905MfL9ClgDalXMq71slm-0-3a376f4696e7a8e51bbd1c3e22173736)
图2-92 不同顶点大小的多角星形
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6076.jpg?sign=1739000522-kPjzR4B1scwLz3uXoEBSzXunG37mSHVX-0-56b5fc38879dc8dda6c13c073da0aae9)
图2-93 绘制多边形和多角星形
2.4.4 上机练习——夜空
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6152.jpg?sign=1739000522-9Nr9OUD7WhA7lPpqlnmIjkBL9OJf2Wr9-0-1b6c347b916731114e9072d38d1f4cac)
2-5 上机练习——夜空
练习目标
在学习了椭圆、矩形和多角星形工具的使用方法之后,本节练习将使用这些基本形状工具绘制一幅夜空的景象,通过对操作步骤的详细讲解,使读者熟练掌握形状工具的使用方法。
设计思路
首先新建一个Animate CC 2018文档,使用“椭圆工具”绘制月亮,并填充渐变色。然后通过设置多角星形工具的选项,绘制四角星形,最后复制多个星形并调整大小和位置,绘制一幅夜空的景象,最终效果如图2-94所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P73_6151.jpg?sign=1739000522-Wt5HhQDkYBvZIzLaXhKE0szXlNtljXtl-0-536efc36795c2dd23a9ac98ee63f8c12)
图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=1739000522-i6gdxInOJ6NVuQPjrXwiQaVwquyGXFHd-0-8e2224a14ad1dbd3c9dbd5f634e08e56)
图2-95 绘制的圆形
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P74_6179.jpg?sign=1739000522-ys3ufbWO69Z8woQEboaiqzUg8xDOuCdl-0-a949d4888bd1307bed1f0ffb29c2d26c)
图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=1739000522-IeWQz71D9oJadLXaxTfygULJ3w5Jp60K-0-0a67092811f40c03f86763411323ab0b)
图2-97 “工具设置”对话框
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P74_6184.jpg?sign=1739000522-W3XtFsYvYnAsI9ZWzrAdpi6argWwJHs3-0-59d2e85d2eb1d485055441f98862104b)
图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=1739000522-bMoYhuHd7x7dxPhEPsdZhujby0GzzdS4-0-e72634f33b8899c8853cc71a99129d93)
图2-99 画笔工具的选项
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6207.jpg?sign=1739000522-24bl12lc3EWKi3mvlzseEwNx6BCO6z25-0-9490e25a9257a3990193162edfdc5aec)
图2-100 画笔工具属性面板
(3)在舞台上按下鼠标左键随意拖动,即可沿着鼠标的运动轨迹产生一条曲线,如图2-101所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6211.jpg?sign=1739000522-AGh3sZSBHDxG0yV7owkWl7hSM2hmWO8Y-0-d5591885b33fb3727ae7b68d35c79632)
图2-101 画笔绘图效果
提示:
与铅笔工具一样,按住Shift键拖动可将刷子笔触限定为水平和垂直方向。
在属性面板上,用户还可以设置画笔模式和锁定填充,制作出丰富多彩的效果。
1. 画笔模式
画笔模式用来设置画笔对舞台中其他对象的影响方式,单击“画笔模式”按钮,弹出如图2-102所示的菜单。
标准绘画:新绘制的线条覆盖同一层中原有的图形,但是不会影响文本对象和引入的对象,如图2-103所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6243.jpg?sign=1739000522-PlYyzMDyN2Md4qtM0DygBv5vwJX4dzua-0-254180dafeb1ddc30c88808b8a68aa52)
图2-102 “画笔模式”按钮选项
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P75_6244.jpg?sign=1739000522-0MBZkylxQmajQFyVVopv5KIJx7TA94Hk-0-5397425447680184539a8ddfe1aadafe)
图2-103 “标准绘画”模式
颜料填充:只能在空白区域和已有矢量色块的填充区域内绘图,并且不会影响矢量线的颜色,如图2-104所示。
后面绘画:只能在空白区绘图,不会影响原有的图形,只是从原有图形的背后穿过,如图2-105所示。
颜料选择:只能在选择区域内绘图。不会影响到矢量线和未填充的区域,如图2-106所示。
提示:
在使用这种模式之前,需要先选择一部分图形区域。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6280.jpg?sign=1739000522-9tluHWuvL3H6t0zW7FxNJ5o7cHdpbeHK-0-5d23691394e87d106d460a54288e2d23)
图2-104 “颜料填充”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6281.jpg?sign=1739000522-FdbfFZs6JWj3XP0PqFwWT81vBCZDvnOu-0-acd9a85c0b59f0179e08f7a24b46b13f)
图2-105 “后面绘画”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6282.jpg?sign=1739000522-IDAT98H8l2d7qFV8gZcgpaOlmKtts4ll-0-9eb8ef01d746e030a5b908f17fd5f8a4)
图2-106 “颜料选择”模式
内部绘画:这种模式可分为两种情况:一种情况是当画笔起点位于图形之外的空白区域,在经过图形时,从其背后穿过;第二种情况是当画笔的起点位于图形的内部时,只能在图形的内部绘制图,如图2-107所示。
2. 锁定填充
锁定填充选项用于切换在使用渐变色进行填充时的参照点,单击“锁定填充”按钮,即可进入锁定填充模式。
在非锁定填充模式下,对现有图形进行填充时,在画笔经过的地方都包含着一个完整的渐变过程。
当画笔处于锁定状态时,以系统确定的参照点为准进行填充,完成渐变色的过渡以整个动画为完整的渐变区域,画笔涂到什么区域,就对应出现什么样的渐变色,如图2-108所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6289.jpg?sign=1739000522-f4MU3aEcN92bryoju3FyWOSHWp63O7Ye-0-b5127947922516c1da773df1f6adb7a4)
图2-107 画笔的“内部绘画”模式
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P76_6290.jpg?sign=1739000522-eSn8SqK1Achimjg9mBmZubv9FKwIE9Gn-0-8fb5679f4cab072b134360f2c93a2380)
图2-108 锁定填充的对比