![Animate CC 2018中文版入门与提高](https://wfqqreader-1252317822.image.myqcloud.com/cover/755/26542755/b_26542755.jpg)
4.4 色彩编辑
色彩在图形绘制中有举足轻重的地位,合理地搭配和应用色彩是创作出成功作品的必要技巧,这就要求用户除了具有一定的色彩鉴赏能力,还要有丰富的色彩编辑经验和技巧。Animate CC 2018为用户发挥色彩的创造力提供强有力的支持。
4.4.1 颜色选择器的类型
在舞台上选中需要着色的对象后,单击属性面板上的图标或
图标,可以弹出颜色选择器。
Animate CC 2018的颜色选择器分为两种类型:一种是进行单色选择的颜色面板,如图4-41所示,提供252种颜色供用户选择;另一种是包含单色、渐变色以及位图的颜色面板,如图4-42所示,除了提供252种单色,还提供七种渐变颜色。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P130_2099.jpg?sign=1738774073-LaVGaiLgXbAy8LF1kXdeSPV3ih0dFCP0-0-6c78eb3dd925527f39f1b1747f4c2845)
图4-41 单色颜色面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P130_2100.jpg?sign=1738774073-knndmqfeYwnuSRALUli86cdSM93abWiH-0-aa9fbf381caa36223c08cd3a26d59678)
图4-42 复合颜色面板
提示:
如果当前文档中有导入的图片,则导入的图片将作为位图填充的图案显示在颜色面板中,如图4-42所示。
出现这两个窗口之一后,鼠标指针就会变成滴管的形状,此时可以在“颜色”面板中选择颜色,选取的结果会显示在左上角的颜色框内,并且与之对应的十六进制数值也会显示在“颜色值”文本框中。复合颜色面板的右上方还有一个按钮,单击这个按钮可以绘制无笔触或无填充颜色的图形。
教你一招:
工具箱的工具下方提供了几个可以快速设置颜色的工具,如图4-43所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P131_2153.jpg?sign=1738774073-7qyLduezEiAdIcIUl3m5pYbmganhc9PH-0-82508ea1dccc8d9adea201ae9f3c63eb)
图4-43 色彩编辑工具
“黑白”:无论当前笔触颜色和填充颜色是什么颜色,单击这个按钮之后,可以将笔触颜色设置为黑色,将填充颜色设置为白色。
“交换颜色”:单击这个按钮可以将当前选定对象的笔触颜色和填充颜色进行交换。
4.4.2 认识“颜色”面板
在Animate CC 2018中,除了可以使用工具箱中的颜色填充工具为对象填充颜色,还可以使用“颜色”面板指定需要的颜色。与使用工具箱中的颜色工具相比,“颜色”面板有更强大的功能。例如,可以指定RGB值获得一个准确的颜色;还可以通过颜色类型列表选择填充风格。
执行“窗口”|“颜色”命令,即可打开“颜色”浮动面板,如图4-44所示。
左上角是笔触颜色和填充颜色按钮。通过单击这两个按钮,可以分别设置笔触颜色和填充色。
右上角的“颜色类型”下拉列表是填充风格列表,包括无、纯色、线性渐变、径向渐变和位图填充五种方式,如图4-45所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P131_2165.jpg?sign=1738774073-0jl9wdKsoFdxSZaofdijTdifKAMi2IXv-0-27257a4ce0291662112b8641e3335668)
图4-44 “颜色”浮动面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P131_2166.jpg?sign=1738774073-xk0GhHBVUYV60X4MQI7AJCwo9nyro4jm-0-0d83df44f1feef79ead19b64a3e14a5b)
图4-45 颜色类型
1. 无
不使用任何方式对图形进行填充。
2. 纯色
使用单一的颜色对图形进行填充。
选择此项后,单击“颜色”面板左上角的“笔触颜色”或“填充颜色”按钮,即可打开颜色选择器选择颜色。此时,“颜色”面板底部的颜色编辑条将显示选中的颜色,面板中间右侧的调色板中也将选中相应的颜色,调色板底部的文本框中显示当前选中的颜色的十六进制颜色值,如图4-46所示。
RGB:RGB模型是一种以红(Red)、绿(Green)、蓝(Blue)三色为基本色的加色模型。通过改变每个像素点上的每个基色的亮度(256个亮度级),可以将这三种颜色调成成千上万种颜色。RGB颜色模型的颜色数值是十进制数,范围是0 ~ 255。
HSB:HSB颜色模型以色调(Hue)、饱和度(Saturation)和亮度(Brightness)的值表示颜色。色调是组成可见光光谱的单色,单位为度,范围是0 ~ 360;饱和度指色彩的纯度,单位是%,值为0时,表示灰色;亮度指色彩的明亮度,单位是%,值为0时,表示全黑。
Alpha:是一个调整颜色透明度的数值,值为100%时,表示完全不透明;为0%时则完全透明。此外,用户也可以在“颜色”面板中通过拖动滑块和单击色板调制颜色。
如果想调配出的颜色保存起来,应用于其他对象,可以单击“颜色”面板底部的“添加到色板”按钮。
3. 线性渐变
这种颜色类型的特点是,颜色从起始点到终点沿直线逐渐变化。在“颜色类型”下拉列表中选择“线性渐变”选项后,面板底部的颜色编辑条将显示一种渐变色,如图4-47所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P132_2178.jpg?sign=1738774073-Y2nI7GwB0YCgaY7D0yxUK3ntx7UhOeGb-0-f73d3f993299d2eee87f40c4b75b5bff)
图4-46 “颜色”面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P132_2179.jpg?sign=1738774073-vlJ1lHmfbN1kTCY1yh8a2GvrQWgvMjHn-0-9f24b71ddc6c96cfd6fcaf793b089214)
图4-47 线性渐变
流:指定一段渐变结束,还不够填满某个区域时,如何处理多余的空间的方法。
扩展颜色:将所指定的颜色应用于渐变末端之外。
例如,缩小如图4-48(a)所示的红黄蓝渐变色的宽度后,图形将以扩展模式填充:缩窄后的渐变色居于中间,渐变的起始色(红色)和结束色(蓝色)一直向边缘蔓延开来,填充空出来的区域,如图4-48(c)所示。
反射颜色:以反射镜像效果来填充形状,指定的渐变色以下面的模式重复:从渐变的开始到结束,再以相反的顺序从渐变的结束到开始,直到选定的形状填充完毕,效果如图4-49所示。
重复颜色:从渐变的开始到结束重复渐变,直到选定的形状填充完毕,效果如图4-50所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P132_2183.jpg?sign=1738774073-SkBDFz3AwVP0IMp6SY3wGP22D16X9S6F-0-11dd3c7c2fa6491046a0341941c393d0)
图4-48 扩展模式的效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P132_27477.jpg?sign=1738774073-LwvPiRuc8a9gbbqWqMm2aYsMPkHwyogh-0-59d027907b87b275bd1c1d6674b9b1b4)
图4-49 镜像模式的效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P132_27478.jpg?sign=1738774073-mUiNnGfOPujISZOd0wdGmT5x39DfN1No-0-b4a16a5c5b0b5f7e1ae8d9fd1b046c77)
图4-50 重复模式的效果
线性RGB:该选项用于创建SVG兼容的渐变。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P133_2251.jpg?sign=1738774073-0MBdMcAGHsrswXzPFZGaINS50cRSZKx9-0-8e091fac9f3090b9b97de52370c88329)
图4-51 径向渐变
4. 径向渐变
在“颜色类型”下拉列表中选择“径向渐变”选项后,面板底部的颜色编辑条将显示一种从中心向外侧径向放射的渐变色,如图4-51所示。
最左边的色标显示径向渐变最中心的颜色,最右边的色标显示径向渐变最外侧的颜色。
5. 位图填充
使用位图填充矢量图形。要使用这种填充风格,必须先导入外部的位图素材,或者从“库”面板中选择位图素材进行填充。
(1)打开“颜色”面板,在“颜色类型”下拉列表中选择“位图填充”。
如果已在舞台上导入过外部位图素材,将切换到如图4-52(a)所示的“颜色”面板。否则将弹出“导入到库”对话框,要求用户先导入一幅位图。
(2)如果对导入的位图不满意,可以单击“颜色”面板上的“导入”按钮,在打开的“导入到库”对话框中选中需要的位图。单击“打开”按钮后,导入的位图将出现在“颜色”面板底部的位图列表框中。
(3)将鼠标指针移到导入的位图缩略图上,此时鼠标指针变为滴管形状,单击鼠标即可将位图指定为“笔触颜色”或“填充颜色”,如图4-52(b)所示。
(4)选择一种形状绘制工具,在舞台上拖动鼠标绘制形状。释放鼠标后,绘制的形状将以指定的位图进行填充,如图4-53所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P133_2205.jpg?sign=1738774073-wEOaoGgbKNf2v9lIxsAbGYWhgE1v65cZ-0-ab2ce961fe67240b000b22ee0cb7c947)
图4-52 “颜色”面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P133_2206.jpg?sign=1738774073-BmBRVcDn6uv85pjFbZYDEHnxRkqIxBKL-0-fd8472d54a625ead8c5663e49a3f78a4)
图4-53 位图填充效果
教你一招:
将位图打散后,选中要修改填充的图形,使用“滴管工具”单击位图,活动工具将自动切换为“颜料桶工具”,且自动使用打散的位图填充图形。
4.4.3 上机练习——自定义渐变色
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P133_2252.jpg?sign=1738774073-gmvdiKBgdDGFSPHwaZX9WoHzwMi6DXzo-0-e410e09a2ab05f0021f271a718d799e6)
4-3 上机练习——自定义渐变色
练习目标
如果复合颜色面板中的七种渐变色不能满足创作的需要,用户可以自定义渐变色。本节练习使用“颜色”面板自定义一种渐变色,通过操作步骤的详细讲解,使读者熟练掌握“颜色”面板的使用方法。
设计思路
首先打开“颜色”面板,选择要定义的颜色类型,然后调整颜色游标的颜色,定义渐变色的组成颜色(图4-54(a)),根据需要增加颜色游标,并调整游标之间的宽度,最终效果如图4-54(b)所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P134_2296.jpg?sign=1738774073-eIvyJW0YgXuaFPp5lRvKSs468zFIHZSV-0-1bcb740e7cb987a17cc4fb110d7e74e3)
图4-54 创建的径向渐变色
操作步骤
(1)执行“窗口”|“颜色”命令,调出“颜色”面板。
(2)在面板右上角的“颜色类型”下拉列表中选择一种渐变类型,在“颜色”面板底部将显示一个横向颜色条和两个已经定义好位置的颜色游标,本例选择“径向渐变”,如图4-55所示。
(3)单击颜色条下方的游标,拖动色谱右侧的滑块选择需要的颜色,然后在色谱中单击指定所需的颜色,在Alpha文本框中指定当前颜色的透明度,如图4-56所示。同样的方法,为其他颜色游标指定颜色。
(4)在颜色条上单击,可以添加一个颜色游标,然后重复第(3)步设置游标的颜色,如图4-57所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P134_2316.jpg?sign=1738774073-jeX91dVAKeQbthotS7HPlIw4OyH3SpuV-0-f01bfdaf89d8fede037da76e337ae4bc)
图4-55 “颜色”面板
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P134_2317.jpg?sign=1738774073-lTYwgCTS7H6RxR4DPTwNo4UzHwBbsHT0-0-6d410d925e47ca2e0986669f04388351)
图4-56 设置游标颜色
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P134_2318.jpg?sign=1738774073-dOGqV0TU4J1rOucbCe227BPTtZtjO1Es-0-dea86c2085b7cdd325aa2a49c1c1e82d)
图4-57 添加颜色游标
提示:
如果要删除渐变色中的某种颜色,只需要将代表该颜色的游标拖离横向颜色条即可。
(5)拖动游标的位置改变不同颜色之间的渐变宽度。
(6)设置渐变色后,单击“颜色”面板底部的“添加到色板”按钮,即可将创建的渐变色添加到复合颜色面板中,如图4-58所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P135_2357.jpg?sign=1738774073-bLo4sj1PK7QTlxLu3Pmxm8sDWjmtZ9od-0-4a08fa61087b1863424ead6e020e7efc)
图4-58 自定义的渐变色
此时,使用绘图工具绘制一个图形,即可使用自定义的渐变色进行填充,如图4-54所示。