
2.4 图形的色彩
根据设计的要求,可以应用纯色编辑面板、颜色面板、样本面板来设置所需要的纯色、渐变色、颜色样本等。
命令介绍
颜色面板:可以设定纯色、渐变色及颜色的不透明度。
纯色面板:可以选择系统设置的颜色,也可根据需要自行设定颜色。
2.4.1 课堂案例——绘制卡通按钮
【案例学习目标】使用绘图工具绘制图形,使用浮动面板设置图形的颜色。
【案例知识要点】使用“基本矩形”工具、“颜色”面板、“渐变变形”工具和“变形”面板,绘制按钮效果;使用“矩形”工具、“椭圆”工具和“钢笔”工具,绘制汽车图形,最终效果如图2-250所示。
【效果所在位置】Ch02/效果/绘制卡通按钮.fla。

图2-250
1.绘制金属框
(1)选择“文件 > 新建”命令,弹出“新建文档”对话框,选择“常规”选项卡中的“Action Script 3.0”选项,单击“确定”按钮,进入新建文档舞台窗口。
扫描观看本案例视频
(2)将“图层1”重新命名为“金属框”。选择“窗口 > 颜色”命令,弹出“颜色”面板,单击“填充颜色”按钮,在“类型”选项的下拉列表中选择“线性渐变”,在色带上设置3个控制点,分别选中色带上两侧的控制点,并将其设置为灰色(# D5D7DC)、浅灰色(#B2B6BB),选中色带上中间的控制点,将其设置为淡黑色(#474E4F),生成渐变色,如图2-251所示。
(3)选择“基本矩形”工具,在基本矩形工具“属性”面板中将“笔触颜色”设置为无,其他选项的设置如图2-252所示,按住Shift键的同时,在舞台窗口中绘制一个正方形,效果如图2-253所示。

图2-251

图2-252

图2-253
(4)选择“渐变变形”工具,在舞台窗口中单击渐变色,出现控制点和控制线,如图 2-254所示。将光标放在外侧圆形的控制点上,光标变为
图标,向左上方拖曳控制点,改变渐变色的角度,效果如图2-255所示。
(5)选择“选择”工具,选中图形,按Ctrl+C组合键,复制图形,按Ctrl+Shift+V组合键,将图形粘贴到当前位置。选择“窗口 > 变形”命令,弹出“变形”面板,在“变形”面板中将“缩放宽度”选项设置为90%,“缩放高度”选项也随之变为90%,如图2-256所示,按Enter键确定操作,效果如图2-257所示。

图2-254

图2-255

图2-256

图2-257
(6)选择“渐变变形”工具,在舞台窗口中单击渐变色,出现控制点和控制线,如图 2-258所示。将光标放在外侧圆形的控制点上,光标变为
图标,向右上方拖曳控制点,改变渐变色的角度,效果如图2-259所示。
(7)调出“颜色”面板,单击“交换颜色”按钮,将填充颜色和笔触颜色相互切换,效果如图2-260所示。单击“填充颜色”按钮
,在“颜色类型”选项的下拉列表中选择“径向渐变”,在色带上设置3个控制点,分别选中色带上两侧的控制点,并将其设置为橘黄色(# F0B048)、淡黑色(# 360F08),选中色带上中间的控制点,将其设置为红色(# E42920),生成渐变色,如图2-261所示,图形被填充渐变色,效果如图2-262所示。

图2-258

图2-259

图2-260

图2-261

图2-262
2.绘制车头和车轮
(1)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“车架”。选择“矩形”工具
,在工具箱下方选择“对象绘制”按钮
,将“笔触颜色”设置为无,“填充颜色”设置为蓝黑色(#00384A),在舞台窗口中绘制一个矩形,效果如图2-263所示。
扫描观看本案例视频
(2)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“头部”。选择“钢笔”工具
,绘制一个闭合路径,如图2-264所示。
(3)选择“颜料桶”工具,在工具箱中将“填充颜色”设置为浅蓝色(#007C8E),在边线内部单击鼠标左键,填充图形,如图2-265所示。选择“选择”工具
,在边线上双击鼠标选中边线,按Delete键,将其删除,效果如图2-266所示。

图2-263

图2-264

图2-265

图2-266
(4)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“车窗”。选择“钢笔”工具
,绘制一个闭合路径,如图2-267所示。
(5)选择“颜料桶”工具,在工具箱中将“填充颜色”设置为淡绿色(#99D2C5),在边线内部单击鼠标左键,填充图形,如图2-268所示。选择“选择”工具
,在边线上双击鼠标选中边线,按Delete键,将其删除,效果如图2-269所示。
(6)选择“套索”工具,在工具箱下方选择“多边形模式”按钮
,在图形上选取需要的区域,如图2-270所示。按Ctrl+C组合键,将其复制,单击“时间轴”面板下方的“新建图层”按钮
,创建新图层并将其命名为“高光”。
(7)按Ctrl+Shift+V组合键,将复制的图形原位粘贴到“高光”图层中,在形状“属性”面板中,将“填充颜色”设置为白色,“Alpha”设置为50%,效果如图2-271所示。

图2-267

图2-268

图2-269

图2-270

图2-271
(8)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“车轮”。选择“椭圆”工具
,在工具箱下方选择“对象绘制”按钮
,将“填充颜色”设置为蓝黑色(#00384A),按住Shift键的同时,在舞台窗口中绘制一个圆形,效果如图2-272所示。
(9)选择“选择”工具,选中图形,按Ctrl+C组合键,复制图形,按Ctrl+Shift+V组合键,将图形粘贴到当前位置。调出“变形”面板,将“缩放宽度”选项设置为50%,“缩放高度”选项也随之变为50%,如图2-273所示,按Enter键确定操作。在工具箱中将“填充颜色”设置为深蓝色(#095D61),填充图形,效果如图2-274所示。

图2-272

图2-273

图2-274
(10)选择“选择”工具,按住Shift键的同时,单击第一个圆形,将其同时选中。按住Alt+Shift组合键的同时,水平向右拖曳图形到适当的位置,复制图形,效果如图2-275所示。按Ctrl+Y组合键,按需要再复制一个图形并调整其位置,效果如图2-276所示。

图2-275

图2-276
3.绘制车厢
(1)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“车厢”。选择“矩形”工具
,在矩形工具“属性”面板中将“笔触颜色”设置为无,“填充颜色”设置为橘黄色(#F18E27),其他选项的设置如图2-277所示,在舞台窗口中绘制一个矩形,效果如图2-278所示。
(2)选择“选择”工具,选中图形,按 Ctrl+C 组合键,复制图形。单击“时间轴”面板下方的“新建图层”按钮
,创建新图层并将其命名为“高光1”。按Ctrl+Shift+V组合键,将复制的图形原位粘贴到“高光1”图层中,按Ctrl+B组合键,将图形打散,如图2-279所示。

图2-277

图2-278

图2-279
(3)按住Alt+Shift组合键的同时,垂直向下拖曳图形到适当的位置,复制图形。在形状“属性”面板中,将“填充颜色”设置为白色,填充图形,效果如图2-280所示。按Delete键,将其删除。
(4)选择“选择”工具,选中需要的图形,如图2-281所示。在形状“属性”面板中,将“填充颜色”设置为浅黄色(#F6AE54),填充图形,并调整其位置,效果如图2-282所示。

图2-280

图2-281

图2-282
(5)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“车顶架”。选择“矩形”工具
,在工具箱中将“笔触颜色”设置为无,“填充颜色”设置为浅黄色(#F6AE54),在舞台窗口中绘制一个矩形,效果如图2-283所示。
(6)选择“矩形”工具,在舞台窗口中再绘制一个矩形,效果如图2-284所示。选择“选择”工具
,按住Alt+Shift组合键的同时,水平向右拖曳图形到适当的位置,复制图形,效果如图2-285所示。

图2-283

图2-284

图2-285
(7)选择“矩形”工具,在舞台窗口中再绘制一个矩形,效果如图2-286所示。选择“选择”工具
,按住Alt+Shift组合键的同时,垂直向上拖曳图形到适当的位置,复制图形,效果如图2-287所示。连续按Ctrl+Y组合键,按需要复制多个图形,效果如图2-288所示。

图2-286

图2-287

图2-288
(8)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“水滴”。选择“钢笔”工具
,绘制一个闭合路径,如图2-289所示。
(9)选择“颜料桶”工具,在工具箱中将“填充颜色”设置为蓝黑色(#00384A),在边线内部单击鼠标左键,填充图形,如图2-290所示。选择“选择”工具
,在边线上双击鼠标选中边线,按Delete键,将其删除,效果如图2-291所示。

图2-289

图2-290

图2-291
(10)单击“时间轴”面板下方的“新建图层”按钮,创建新图层并将其命名为“货物架”。选择“矩形”工具
,在工具箱中将“笔触颜色”设置为无,“填充颜色”设置为蓝黑色(#00384A),在舞台窗口中绘制一个矩形,效果如图 2-292 所示。卡通按钮绘制完成,效果如图 2-293 所示,按Ctrl+Enter组合键即可查看效果。

图2-292

图2-293
2.4.2 纯色编辑面板
在工具箱的下方单击“填充颜色”按钮,弹出“纯色”面板,如图2-294所示。在该面板中可以选择系统设置好的颜色,如果想自行设定颜色,单击面板右上方的颜色选择按钮
,弹出“颜色”面板,在面板右侧的颜色选择区中选择要自定义的颜色,如图2-295所示。滑动面板右侧的滑动条来设定颜色的亮度,如图2-296所示。

图2-294
设定颜色后,可在“颜色|纯色”选项框中预览设定结果,如图2-297所示。单击面板右下方的“添加到自定义颜色”按钮,将定义好的颜色添加到面板左下方的“自定义颜色”区域中,如图2-298所示,单击“确定”按钮,自定义颜色完成。

图2-295

图2-296

图2-297

图2-298
2.4.3 颜色面板
选择“窗口>颜色”命令,弹出“颜色”面板。
1.自定义纯色
在“颜色”面板的“类型”选项中,选择“纯色”选项,面板效果如图2-299所示。

图2-299
“笔触颜色”按钮:可以设定矢量线条的颜色。
“填充颜色”按钮:可以设定填充色的颜色。
“黑白”按钮:单击此按钮,线条与填充色恢复为系统默认的状态。
“没有颜色”按钮:用于取消矢量线条或填充色块。当选择“椭圆”工具
或“矩形”工具
时,此按钮为可用状态。
“交换颜色”按钮:单击此按钮,可以将线条颜色和填充色相互切换。
“H”“S”“B”和“R”“G”“B”选项:可以用精确数值来设定颜色。
“A”选项:用于设定颜色的不透明度,数值选取范围为0~100。
在面板左侧中间的颜色选择区域内,可以根据需要选择相应的颜色。
2.自定义线性渐变色
在“颜色”面板的“颜色类型”选项中选择“线性渐变”选项,面板如图2-300所示。将光标放置在滑动色带上,光标变为,如图2-301所示,在色带上单击鼠标增加颜色控制点,并在面板下方为新增加的控制点设定颜色及明度,如图2-302所示。当要删除控制点时,只需将控制点向色带下方拖曳。

图2-300

图2-301

图2-302
3.自定义径向渐变色
在“颜色”面板的“颜色类型”选项中选择“径向渐变”选项,面板效果如图2-303所示。用与定义线性渐变色相同的方法在色带上定义径向渐变色,定义完成后,在面板的左下方显示出定义的渐变色,如图2-304所示。

图2-303

图2-304
4.自定义位图填充
在“颜色”面板的“颜色类型”选项中,选择“位图填充”选项,如图2-305所示。弹出“导入到库”对话框,在该对话框中选择要导入的图片,如图2-306所示。
单击“打开”按钮,图片被导入“颜色”面板中。选择“椭圆”工具,在场景中绘制出一个椭圆形,椭圆形被刚才导入的位图所填充,如图2-307所示。

图2-305

图2-306

图2-307
选择“渐变变形”工具,在填充位图上单击,出现控制点。向外拖曳左下方的方形控制点,如图2-308所示。松开鼠标后效果如图2-309所示。
向上拖曳右上方的圆形控制点,改变填充位图的角度,如图2-310所示。松开鼠标后的效果如图2-311所示。

图2-308

图2-309

图2-310

图2-311
2.4.4 样本面板
在样本面板中可以选择系统提供的纯色或渐变色。选择“窗口 > 样本”命令,弹出“样本”面板,如图2-312所示。在控制面板中部的纯色样本区中,系统提供了216种纯色。控制面板下方是渐变色样本区。单击控制面板右上方的按钮,弹出下拉菜单,如图2-313所示。

图2-312

图2-313
“直接复制样本”命令:可以将选中的颜色直接复制出一个副本。
“删除样本”命令:可以将选中的颜色删除。
“添加颜色”命令:可以将系统中保存的颜色文件添加到面板中。
“替换颜色”命令:可以将选中的颜色替换成系统中保存的颜色文件。
“加载默认颜色”命令:可以将面板中的颜色恢复到系统默认的颜色状态中。
“保存颜色”命令:可以将编辑好的颜色保存到系统中,方便再次调用。
“保存为默认值”命令:可以将编辑好的颜色替换系统默认的颜色文件,在创建新文档时自动替换。
“清除颜色”命令:可以清除当前面板中的所有颜色,只保留黑色与白色。
“Web216色”命令:可以调出系统自带的符合Internet标准的色彩。
“按颜色排序”命令:可以将色标按色相进行排列。
“帮助”命令:选择此命令,将弹出帮助文件。