
2.4 形状工具
形状工具用于绘制规则的图形,如椭圆、圆、矩形、多边形和多角星形。
2.4.1 椭圆工具
Animate CC 2018提供两个绘制椭圆的工具:椭圆和基本椭圆。虽然这两个工具比较相似,但是它们都拥有特定的特性。
1. 椭圆工具
椭圆由笔触和填充两部分组成,所以使用椭圆工具不仅可以绘制椭圆,还可以绘制椭圆轮廓线。
(1)在绘图工具箱中选择“椭圆工具”。
(2)在如图2-78所示的属性面板上设置椭圆的属性。
(3)在舞台上拖动鼠标,确定椭圆的轮廓后,释放鼠标,即可绘制出有椭圆。
教你一招:
绘制椭圆时,按住Shift键可以绘制出正圆。
在图2-79所示的属性面板中,“填充和笔触”部分的属性与笔触工具基本相同,不同的是可以设置填充颜色和样式。选择不同填充模式绘制的椭圆如图2-80所示。

图2-78 椭圆属性面板

图2-79 “颜色”面板

图2-80 不同填充模式绘制的椭圆
将“填充颜色”设置,即为无色状态,可绘制椭圆轮廓线,如图2-80左上角所示。
“椭圆选项”部分进一步丰富了Animate CC 2018的绘图功能,可以绘制有缺口的椭圆或正圆、圈环和弧线。
开始角度:设置弧形或扇形的起始角度,可以直接在文本框中输入,也可以拖动滑块设置角度,如图2-81所示。
结束角度:设置弧形结束时的角度。
例如,设置起始角度为60,结束角度为350,笔触颜色为绿色,填充色为红棕色的图形效果如图2-82所示。

图2-81 设置角度

图2-82 图形效果
内径:该选项用于设置圆环的内径。不同内径、起始角度和结束角度的图形如图2-83所示。
闭合路径:该选项用于绘制弧线。设置起始角度和结束角度后,取消选中“闭合路径”选项,可绘制出弧线,如图2-84所示。选中“闭合路径”选项可绘制扇形,效果如图2-82所示。

图2-83 图形效果

图2-84 绘制的弧线
2. 基本椭圆工具
在Animate CC 2018中,除了“合并绘制”和“对象绘制”模型,“椭圆”和“矩形”工具还提供图元对象绘制模式。不同于使用对象绘制模式创建的形状,使用图元椭圆工具或图元矩形工具创建的椭圆或矩形为独立的对象。
在绘图工具箱中选择“基本椭圆工具”,在属性面板上设置笔触颜色、填充色和笔触大小,然后在舞台上拖动鼠标,确定椭圆的轮廓后,释放鼠标,即可绘制一个图元椭圆。选中图元椭圆和椭圆的效果如图2-85所示。

图2-85 图形效果比较
利用属性面板还可以指定图元椭圆的开始角度、结束角度和内径。其使用方法与椭圆工具相同,在此不再赘述。
提示:
只要选中图元椭圆工具或图元矩形工具中的一个,属性面板就将保留上次编辑的图元对象的值。
2.4.2 矩形工具
与椭圆工具类似,Animate CC 2018提供两个绘制矩形的工具:矩形和基本矩形。
1. 矩形工具
使用“矩形工具”不但可以绘制矩形,还可以绘制矩形轮廓线。矩形工具的使用方法与椭圆工具类似,在此不再一一叙述。
提示:
绘制矩形的同时按下Shift键,可以绘制正方形。
需要说明的是,选择“矩形工具”之后,在属性面板上的“矩形选项”区域可以设置矩形各个角的边角半径,如图2-86所示。矩形边角半径的范围是–100~100之间的任何数值。值越大,矩形的圆角就越明显。设置为0时,可得到标准的矩形;设置为100时,绘制出来的是圆形;设置为–100时,绘制出来的是星形。不同边角半径的矩形效果如图2-87所示。

图2-86 设置边角半径

图2-87 不同边角半径的矩形
教你一招:
在绘制矩形时,如果按键盘上的向上或向下方向键,可以自如地调整矩形边角的半径,并实时预览其效果,比输入具体数值的方法更便捷、迅速。
默认情况下,调整边角半径时,四个角的半径同步调整。如果要分别调整每一个角的半径,单击四个调整框下方的锁定图标,使其显示为断开的状态
,如图2-88所示。
如果对设置的半径不满意,单击“重置”按钮可以清除设置。

图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所示。

图2-89 多角星形工具的属性面板

图2-90 图形效果

图2-91 设置多边形属性
(3)单击“确定”按钮关闭对话框。
(4)在舞台上按下鼠标左键拖动,并调整图形的大小和角度,然后释放鼠标,即可绘制一个需要的图形,如图2-93所示。

图2-92 不同顶点大小的多角星形

图2-93 绘制多边形和多角星形
2.4.4 上机练习——夜空

2-5 上机练习——夜空
练习目标
在学习了椭圆、矩形和多角星形工具的使用方法之后,本节练习将使用这些基本形状工具绘制一幅夜空的景象,通过对操作步骤的详细讲解,使读者熟练掌握形状工具的使用方法。
设计思路
首先新建一个Animate CC 2018文档,使用“椭圆工具”绘制月亮,并填充渐变色。然后通过设置多角星形工具的选项,绘制四角星形,最后复制多个星形并调整大小和位置,绘制一幅夜空的景象,最终效果如图2-94所示。

图2-94 最终效果
操作步骤
(1)执行“文件”|“新建”命令,新建一个Animate CC 2018文档,舞台背景为黑色。
(2)选择工具箱中的“椭圆工具”,在属性面板上设置笔触颜色无,填充色为径向渐变,按住Shift键在舞台上绘制一个圆形,如图2-95所示。
(3)选中绘制的圆形,执行“窗口”|“颜色”命令,打开“颜色”面板。修改第一个游标颜色为黄色,第二个为白色,如图2-96(a)所示,图形填充后的效果如图2-96(b)所示。

图2-95 绘制的圆形

图2-96 填充图形
(4)选择工具箱中的“多角星形工具”,在属性面板上设置笔触颜色无,填充色为白色,然后单击面板底部的“选项”按钮,打开“工具设置”对话框。设置“样式”为“星形”,“边数”为4,“星形顶点大小”为0.20,如图2-97所示。
(5)按下鼠标左键在舞台拖动,即可绘制一个四角星形,如图2-98所示。用同样的方法绘制其他星星,并调整星星的大小和位置,最终效果图如图2-94所示。

图2-97 “工具设置”对话框

图2-98 绘制星星
2.4.5 画笔工具
“画笔工具”可以表现出用毛笔上彩的效果,经常用于绘制对象或建立自由形态的矢量色块。画笔工具与铅笔工具很相似,都可以创建自由形状的线条。但与铅笔工具不同的是,使用画笔工具创建的形状是被填充的,且没有外轮廓线。
(1)选中绘图工具箱中的“画笔工具”。
(2)在绘图工具箱底部可以设置画笔的大小、形状、模式及填充方式,如图2-99所示。还可以在如图2-100所示的属性面板上自定义画笔形状和大小。

图2-99 画笔工具的选项

图2-100 画笔工具属性面板
(3)在舞台上按下鼠标左键随意拖动,即可沿着鼠标的运动轨迹产生一条曲线,如图2-101所示。

图2-101 画笔绘图效果
提示:
与铅笔工具一样,按住Shift键拖动可将刷子笔触限定为水平和垂直方向。
在属性面板上,用户还可以设置画笔模式和锁定填充,制作出丰富多彩的效果。
1. 画笔模式
画笔模式用来设置画笔对舞台中其他对象的影响方式,单击“画笔模式”按钮,弹出如图2-102所示的菜单。
标准绘画:新绘制的线条覆盖同一层中原有的图形,但是不会影响文本对象和引入的对象,如图2-103所示。

图2-102 “画笔模式”按钮选项

图2-103 “标准绘画”模式
颜料填充:只能在空白区域和已有矢量色块的填充区域内绘图,并且不会影响矢量线的颜色,如图2-104所示。
后面绘画:只能在空白区绘图,不会影响原有的图形,只是从原有图形的背后穿过,如图2-105所示。
颜料选择:只能在选择区域内绘图。不会影响到矢量线和未填充的区域,如图2-106所示。
提示:
在使用这种模式之前,需要先选择一部分图形区域。

图2-104 “颜料填充”模式

图2-105 “后面绘画”模式

图2-106 “颜料选择”模式
内部绘画:这种模式可分为两种情况:一种情况是当画笔起点位于图形之外的空白区域,在经过图形时,从其背后穿过;第二种情况是当画笔的起点位于图形的内部时,只能在图形的内部绘制图,如图2-107所示。
2. 锁定填充
锁定填充选项用于切换在使用渐变色进行填充时的参照点,单击“锁定填充”按钮,即可进入锁定填充模式。
在非锁定填充模式下,对现有图形进行填充时,在画笔经过的地方都包含着一个完整的渐变过程。
当画笔处于锁定状态时,以系统确定的参照点为准进行填充,完成渐变色的过渡以整个动画为完整的渐变区域,画笔涂到什么区域,就对应出现什么样的渐变色,如图2-108所示。

图2-107 画笔的“内部绘画”模式

图2-108 锁定填充的对比