
2.3 图形的编辑
图形的编辑工具可以改变图形的色彩、线条、形态等属性,可以创建充满变化的图形效果。
命令介绍
颜料桶工具:可以修改向量图形的填充色。
橡皮擦工具:用于擦除舞台上无用的向量图形的边框和填充色。
任意变形工具:可以改变选中图形的大小,还可以旋转图形。
2.3.1 课堂案例——绘制卡通小鸟
【案例学习目标】使用图形编辑工具对图形进行编辑,并应用选择工具将其组合成图像。
【案例知识要点】使用“钢笔”工具,绘制小鸟轮廓;使用“墨水瓶”工具、“任意变形”工具,装饰虚线效果;使用“多角星形”工具,绘制五角星;使用“颜料桶”工具,填充颜色;使用“椭圆”工具,绘制眼睛,最终效果如图2-143所示。
【效果所在位置】Ch02/效果/绘制卡通小鸟.fla。

图2-143
扫描观看本案例视频
1.新建文件绘制主体
(1)选择“文件>新建”命令,弹出“新建文档”对话框,在“常规”选项卡中选择“Action Script 3.0”选项,将“宽”选项设置为370,“高”选项设置为370,将“舞台颜色”设置为黄绿色(#C6DC7C),单击“确定”按钮,完成文档的创建。
(2)将“图层 1”重新命名为“头部”。选择“钢笔”工具,在钢笔工具“属性”面板中,将“笔触颜色”设置为黑色,“笔触”选项设置为 1,在舞台窗口中绘制一个闭合边线,效果如图 2-144所示。
(3)选择“颜料桶”工具,在工具箱中将“填充颜色”设置为绿色(#759E5D),在闭合边线内部单击鼠标填充颜色,效果如图2-145所示。选择“选择”工具
,在边线上双击鼠标,将其选中,如图2-146所示。

图2-144

图2-145

图2-146
(4)按Ctrl+X组合键,将边线剪切,效果如图2-147所示。单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“装饰线1”,如图2-148所示。

图2-147

图2-148
(5)按 Ctrl+Shift+V 组合键,将剪切的边线原位粘贴到“装饰线 1”图层中。选择“任意变形”工具,闭合边线周围出现控制框,如图2-149所示,按住Shift键的同时,将右上角的控制点向左下方拖曳到适当的位置,等比例缩小,效果如图2-150所示。

图2-149

图2-150
(6)选择“墨水瓶”工具,在墨水瓶工具的“属性”面板中,将“笔触颜色”设置为白色,“笔触”选项设置为5,在“样式”选项的下拉列表中选择“虚线”,其他选项的设置如图2-151所示,然后在黑色边线上单击鼠标,更改边线的效果,如图2-152所示。

图2-151

图2-152
(7)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“尾巴”。选择“钢笔”工具
,在钢笔工具的“属性”面板中,将“笔触颜色”设置为黑色,“笔触”选项设置为1,在舞台窗口中绘制一条闭合边线,效果如图2-153所示。
(8)选择“颜料桶”工具,在工具箱中将“填充颜色”设置为绿色(#759E5D),在闭合边线内部单击鼠标填充颜色,效果如图2-154所示。选择“选择”工具
,在边线上双击鼠标,将其选中,如图2-155所示。

图2-153

图2-154

图2-155
(9)按Ctrl+X组合键,将边线剪切,效果如图2-156所示。单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“装饰线2”。
(10)按Ctrl+Shift+V组合键,将剪切的边线原位粘贴到“装饰线2”图层中。选择“任意变形”工具,闭合边线周围出现控制框,如图2-157所示,按住Shift键的同时,将右上角的控制点向左下方拖曳到适当的位置,等比例缩小,效果如图2-158所示。

图2-156

图2-157

图2-158
(11)选择“滴管”工具,将光标放在白色虚线上,光标变为
,在边框上单击鼠标,吸取边框样本,如图2-159所示。单击后,光标变为
,在尾巴的黑色边线上单击鼠标,线条的颜色和样式被修改,效果如图2-160所示。

图2-159

图2-160
(12)在“时间轴”面板中选中“尾巴”和“装饰线2”图层,如图2-161所示,将其拖曳到“头部”图层的下方,如图2-162所示,效果如图2-163所示。

图2-161

图2-162

图2-163
(13)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“凤冠”。选择“椭圆”工具
,在工具箱中将“笔触颜色”设置为无,“填充颜色”设置为绿色(#759E5D),在舞台窗口中绘制一个椭圆,如图2-164所示。
(14)选择“任意变形”工具,选中椭圆图形,周围出现控制框,将光标放置在控制框的右上角,当光标变为
时,单击鼠标将其向左上方拖曳,旋转适当的角度,效果如图2-165所示。用相同的方法制作出图2-166所示的效果。
(15)选择“选择”工具,按住Shift键的同时,将两个椭圆同时选择,并将其拖曳到适当的位置,效果如图2-167所示。

图2-164

图2-165

图2-166

图2-167
2.绘制五官
(1)在“时间轴”面板中选中“装饰线1”图层,单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“眼睛”。选择“椭圆”工具
,在工具箱中将“笔触颜色”设置为无,“填充颜色”设置为白色,在舞台窗口中绘制一个椭圆,如图2-168所示。
(2)在工具箱中将“填充颜色”设置为褐色(#B07600),在舞台窗口中绘制一个椭圆,如图2-169所示。在工具箱中将“填充颜色”设置为白色,在舞台窗口中绘制一个圆形,如图2-170所示。

图2-168

图2-169

图2-170
(3)在“时间轴”面板中选中“眼睛”图层,选择“任意变形”工具,图形周围出现控制框,如图2-171所示,将光标放置在控制框的右上角,当光标变为
时,单击鼠标将其向右下方拖曳,旋转适当的角度,效果如图2-172所示。

图2-171

图2-172
(4)选择“钢笔”工具,在钢笔工具“属性”面板中,将“笔触颜色”设置为黑色,“笔触”选项设置为1,在舞台窗口中绘制一条闭合边线,效果如图2-173所示。
(5)选择“颜料桶”工具,在工具箱中将“填充颜色”设置为绿色(#759E5D),在闭合边线内部单击鼠标填充颜色,效果如图2-174所示。选择“选择”工具
,在边线上双击鼠标将其选中,按Delete键将其删除,效果如图2-175所示。

图2-173

图2-174

图2-175
(6)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“嘴巴”。选择“钢笔”工具
,在钢笔工具“属性”面板中,将“笔触颜色”设置为黑色,“笔触”选项设置为1,在舞台窗口中绘制一条闭合边线,效果如图2-176所示。
(7)选择“颜料桶”工具,在工具箱中将“填充颜色”设置为黄色(#FBCB6C),在闭合边线内部单击鼠标填充颜色,效果如图2-177所示。选择“选择”工具
,在边线上双击鼠标将其选中,按Delete键将其删除,效果如图2-178所示。

图2-176

图2-177

图2-178
(8)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“星星”。选择“多角星形”工具
,在多角星形工具“属性”面板中,将“笔触颜色”设置为无,“填充颜色”设置为橙色(#EF7E00),单击“工具设置”选项组中的“选项”按钮,在弹出的“工具设置”对话框中进行设置,如图2-179所示,单击“确定”按钮,完成工具属性的设置。在舞台窗口中绘制一个星星,如图2-180所示。

图2-179

图2-180
(9)选择“选择”工具,在舞台窗口中选中星星图形,按住 Shift+Alt 组合键的同时,向右拖曳星星到适当的位置复制图形,效果如图2-181所示。按两次Ctrl+Y组合键,复制图形,效果如图2-182所示。选中最右侧的星星,在工具箱中将“填充颜色”设置为白色。卡通小鸟绘制完成,按Ctrl+Enter组合键即可查看效果,如图2-183所示。

图2-181

图2-182

图2-183
2.3.2 墨水瓶工具
使用墨水瓶工具可以修改向量图形的边线。
导入心形图形,如图2-184所示。选择“墨水瓶”工具,在“属性”面板中设置笔触颜色、笔触高度及笔触样式,如图2-185所示。

图2-184

图2-185
这时,光标变为,在图形上单击鼠标,可以为图形增加设置好的边线,如图2-186所示。在“属性”面板中设置不同的属性,绘制的边线效果也不同,如图2-187所示。

图2-186

图2-187
2.3.3 颜料桶工具
绘制图形边框,如图2-188所示。选择“颜料桶”工具,在“属性”面板中设置填充颜色,如图2-189所示。在图形边框内单击鼠标,边框内便会被填充颜色,如图2-190所示。
系统在工具箱的下方设置了4种填充模式供读者选择,如图2-191所示。

图2-188

图2-189

图2-190

图2-191
“不封闭空隙”模式:选择此模式时,只有在完全封闭的区域,颜色才能被填充。
“封闭小空隙”模式:选择此模式时,当边线上存在小空隙时,允许填充颜色。
“封闭中等空隙”模式:选择此模式时,当边线上存在中等空隙时,允许填充颜色。
“封闭大空隙”模式:选择此模式时,当边线上存在大空隙时,允许填充颜色。当选择“封闭大空隙”模式时,无论是小空隙还是中等空隙,都可以填充颜色。
根据边框空隙的大小,应用不同的模式进行填充,效果如图2-192所示。

图2-192
“锁定填充”按钮:可以对填充颜色进行锁定,锁定后填充颜色不能被更改。没有选择此按钮时,填充颜色可以根据需要进行变更,如图2-193所示;选择此按钮时,将光标放置在填充颜色上,光标变为
,填充颜色被锁定,不能随意变更,如图2-194所示。

图2-193

图2-194
2.3.4 滴管工具
使用滴管工具可以吸取向量图形的线型和色彩,然后利用颜料桶工具,可以快速修改其他向量图形内部的填充色。利用墨水瓶工具,可以快速修改其他向量图形的边框颜色及线型。
1.吸取填充色
选择“滴管”工具,将光标放在左边图形的填充色上,光标变为
,在填充色上单击鼠标,吸取填充色样本,如图2-195所示。
单击后,光标变为,表示填充色被锁定。在工具箱的下方,取消对“锁定填充”按钮
的选取,光标变为
,在右边图形的填充色上单击鼠标,图形的颜色被修改,如图2-196所示。

图2-195

图2-196
2.吸取边框属性
选择“滴管”工具,将光标放在左边图形的外边框上,光标变为
,在外边框上单击鼠标,吸取边框样本,如图2-197所示。单击后光标变为
,在右边图形的外边框上单击鼠标,线条的颜色和样式被修改,如图2-198所示。

图2-197

图2-198
3.吸取位图图案
滴管工具可以吸取外部引入的位图图案。导入图片,如图2-199所示。按Ctrl+B组合键,将位图分离。绘制一个六边形,如图2-200所示。
选择“滴管”工具,将光标放在位图上,光标变为
,单击鼠标,吸取图案样本,如图2-201所示。单击后光标变为
,在六边形的内部单击鼠标,图案被填充,如图2-202所示。

图2-199

图2-200

图2-201

图2-202
选择“渐变变形”工具,单击被填充图案样本的六边形,出现控制点,如图2-203所示。按住Shift键,将左下方的控制点向中心拖曳,如图2-204所示。填充图案变小,如图2-205所示。

图2-203

图2-204

图2-205
4.吸取文字属性
滴管工具还可以吸取文字的颜色。选择要修改的目标文字,如图2-206所示。
选择“滴管”工具,将光标放在源文字上,光标变为
,如图2-207所示。在源文字上单击鼠标,源文字的文字属性被应用到了目标文字上,如图2-208所示。

图2-206

图2-207

图2-208
2.3.5 橡皮擦工具
选择“橡皮擦”工具,在图形上想要删除的地方按住鼠标并拖动,图形被擦除,如图 2-209所示。在工具箱下方的“橡皮擦形状”按钮
的下拉菜单中,可以选择橡皮擦的形状与大小。
如果想得到特殊的擦除效果,可以使用系统在工具箱下方设置的5种擦除模式,如图2-210所示。“标准擦除”模式:擦除同一层的线条和填充。选择此模式擦除图形的前后对照效果如图2-211所示。

图2-209

图2-210

图2-211
“擦除填色”模式:仅擦除填充区域,其他部分(如边框线)不受影响。选择此模式擦除图形的前后对照效果如图2-212所示。
“擦除线条”模式:仅擦除图形的线条部分,但不影响其填充部分。选择此模式擦除图形的前后对照效果如图2-213所示。

图2-212

图2-213
“擦除所选填充”模式:仅擦除已经选择的填充部分,但不影响其他未被选择的部分(如果场景中没有任何填充被选择,那么擦除命令无效)。选择此模式擦除图形的前后对照效果如图2-214所示。
“内部擦除”模式:仅擦除起点所在的填充区域部分,但不影响线条填充区域外的部分。选择此模式擦除图形的前后对照效果如图2-215所示。

图2-214

图2-215
要想快速删除舞台上的所有对象,双击“橡皮擦”工具即可。
要想删除向量图形上的线段或填充区域,可以选择“橡皮擦”工具,再选中工具箱中的“水龙头”按钮
,然后单击舞台上想要删除的线段或填充区域,如图2-216和图2-217所示。

图2-216

图2-217
提示
因为导入的位图和文字不是向量图形,不能擦除它们的部分或全部,所以,必须先选择“修改>分离”命令,将它们分离成向量图形,才能使用橡皮擦工具擦除它们的部分或全部。
2.3.6 任意变形工具和渐变变形工具
在制作图形的过程中,可以应用任意变形工具来改变图形的大小及倾斜度,也可以应用渐变变形工具改变图形中渐变填充颜色的渐变效果。
1.任意变形工具
选中图形,按 Ctrl+B 组合键,将其打散。选择“任意变形”工具,图形的周围出现控制点,如图2-218所示。拖动控制点改变图形的大小,如图2-219和图2-220所示(按住Shift键,再拖动控制点,可成比例地缩放图形)。

图2-218

图2-219

图2-220
将光标放在4个角的控制点上时,光标变为,如图2-221所示。拖曳鼠标旋转图形,如图2-222和图2-223所示。

图2-221

图2-222

图2-223
系统在工具箱的下方设置了4种变形模式供读者选择,如图2-224所示。
“旋转与倾斜”模式:选中图形,选择“旋转与倾斜”模式,将光标放在图形上方中间的控制点上,光标变为
,按住鼠标不放,向右水平拖曳控制点,如图2-225所示,松开鼠标,图形变倾斜,如图2-226所示。

图2-224

图2-225

图2-226
“缩放”模式:选中图形,选择“缩放”模式,将光标放在图形右上方的控制点上,光标变为
,按住鼠标不放,向右上方拖曳控制点,如图2-227所示,松开鼠标,图形变大,如图2-228所示。

图2-227

图2-228
“扭曲”模式:选中图形,选择“扭曲”模式,将光标放在图形右上方的控制点上,光标变为,按住鼠标不放,向左下方拖曳控制点,如图2-229所示,松开鼠标,图形扭曲,如图2-230所示。
“封套”模式:选中图形,选择“封套”模式,图形周围出现一些节点,调节这些节点来改变图形的形状,光标变为
,拖动节点,如图2-231所示,松开鼠标,图形扭曲,如图2-232所示。

图2-229

图2-230

图2-231

图2-232
2.渐变变形工具
使用渐变变形工具可以改变选中图形中的填充渐变效果。当图形的填充色为线性渐变色时,选择“渐变变形”工具,用鼠标单击图形,出现3个控制点和2条平行线,如图2-233所示。向图形中间拖动方形控制点,渐变区域缩小,如图2-234所示,效果如图2-235所示。

图2-233

图2-234

图2-235
将光标放置在旋转控制点上,光标变为,拖动旋转控制点来改变渐变区域的角度,如图 2-236所示,效果如图2-237所示。
当图形填充色为径向渐变色时,选择“渐变变形”工具,用鼠标单击图形,出现4个控制点和一个圆形外框,如图 2-238 所示。向图形外侧水平拖动方形控制点,水平拉伸渐变区域,如图 2-239所示,效果如图2-240所示。

图2-236

图2-237

图2-238

图2-239

图2-240
将光标放置在圆形边框中间的圆形控制点上,光标变为,向图形内部拖动鼠标,缩小渐变区域,如图2-241所示,效果如图2-242所示。将光标放置在圆形边框外侧的圆形控制点上,光标变为
,向上旋转拖动控制点,改变渐变区域的角度,如图2-243所示,效果如图2-244所示。

图2-241

图2-242

图2-243

图2-244
提示
通过移动中心控制点可以改变渐变区域的位置。
2.3.7 手形工具和缩放工具
手形工具和缩放工具都是辅助工具,它们本身并不直接创建和修改图形,只是在创建和修改图形的过程中辅助用户进行操作。
1.手形工具
如果图形很大或被放大得很大,那么需要利用“手形”工具调整观察区域。选择“手形”工具
,光标变为手形,按住鼠标不放,拖动图像到需要的位置,如图2-245所示。
技巧
当使用其他工具时,按“空格”键即可切换到“手形”工具。双击“手形”工具
,将自动调整图像大小以适合屏幕的显示范围。
2.缩放工具
利用缩放工具放大图形以便观察细节,缩小图形以便观看整体效果。选择“缩放”工具,在舞台上单击可放大图形,如图2-246所示。

图2-245

图2-246
要想放大图像中的局部区域,可在图像上拖曳出一个矩形选取框,如图2-247所示,松开鼠标后,所选取的局部图像被放大,如图2-248所示。
选中工具箱下方的“缩小”按钮,在舞台上单击可缩小图像,如图2-249所示。

图2-247

图2-248

图2-249