![Animate CC 2018中文版入门与提高](https://wfqqreader-1252317822.image.myqcloud.com/cover/755/26542755/b_26542755.jpg)
4.5 使用外部位图
由于Animate CC 2018生动、形象的表现方式,以及文件小的特点,在很多领域都有广泛的应用,而图形是动画制作过程中必不可少的元素。如果所有的图形都自己动手绘画,花费不少时间和精力不说,对于不擅长美术的制作者来说,绘画出的图形效果也很难保证。通常情况下,一个很简单的解决办法就是直接使用表现力丰富的外部位图。
知识拓展:
矢量图像与位图的区别
计算机图像主要有矢量图像(矢量)和位图图像(位图)两种类型。
1. 矢量图像
矢量图像用包含颜色和位置属性的线条描述图像属性。对于矢量图像来说,路径(Path)和点(Point)是其中最基本的元素,可以通过修改路径和路径点改变矢量图像。
由于矢量图像中记录的图像信息是路径点及各个路径点之间的关系,在缩放矢量图像时,实际上仅改变了路径点的坐标位置。操作完成后,计算机会重新计算新坐标下的路径,并绘制相应的矢量图像。因此,矢量图像可以任意缩放,且不会影响图像效果,如图4-59所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P135_2373.jpg?sign=1739409594-vvAPim3lFrl3ddUByUIkEnTU4g7hWXgh-0-4147ebe39d2c072f10083f114b9fc692)
图4-59 放大矢量对象
2. 位图图像
位图图像是对区域中所有像素点的位置和颜色信息进行描述,这种方式是“一对一”的,可以如实地反应需要的任何画面。
位图图像的分辨率不是独立的,缩放位图图像会改变其显示效果。例如在放大位图图像时,由于增加了未定义的像素点个数,因此会出现马赛克效果,如图4-60所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P136_2387.jpg?sign=1739409594-RgSwsqNo4I0wuIxHPZAaR47epQJo7gop-0-8f94dac44b15f8b39af064fa51e6358f)
图4-60 放大位图图像
4.5.1 导入位图
Animate CC 2018能识别多种位图格式,包括BMP、JPG、TIFF、TGA、GIF、PNG、PIC和PSD等。对于导入的图像资源,Animate CC 2018能够进行压缩处理,极大地优化图像显示质量,并有效地缩小文件体积。
Animate CC 2018可以通过导入命令将位图导入到库中,还可以通过将位图粘贴到舞台上的方式进行导入。
(1)执行“文件”|“导入”|“导入到舞台”或“导入到库”命令,如图4-61所示。
(2)在弹出的“导入”对话框中选择需要的位图文件,然后单击“打开”按钮。
如果选择的是“导入到舞台”命令,选择的位图文件将直接以原本的尺寸显示在舞台上。用黑色箭头工具单击图片,图片四周会显示一个矩形边框,表示该图片为位图,不是矢量图,如图4-62所示。图4-62(a)为矢量图,图4-62(b)为位图。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P136_2392.jpg?sign=1739409594-NLytr0keguMVFyznm2q3vHNNnjD4zt0F-0-eb0bb430d4ce58b6f2ab0eb3d59154c2)
图4-61 “导入”菜单下的命令
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P136_27487.jpg?sign=1739409594-9XHcW280Yb9egVT2u40fwNQTr3DehfLn-0-ff11089930d6ae82f695f61208447a38)
图4-62 导入位图
如果选择的是“导入到库”命令,则选择的文件不会出现在舞台上。执行“窗口”|“库”命令,打开“库”面板后,在库项目列表中选中导入的文件,如图4-63所示。然后按下鼠标左键拖动到舞台上,释放鼠标,即可将导入的位图显示在舞台上。
事实上,使用“导入到舞台”命令导入的位图也存放在“库”面板中。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P137_9776.jpg?sign=1739409594-GeukWdUQ1iC1KAonM85rXusXe74nqMlL-0-cd4f6e631557319fad8c3b8483406d25)
图4-63 “库”面板
提示:
如果导入的图像文件名称以数字结尾,而且文件夹中还存在其他按顺序编号的图像,Animate CC 2018会提示是否导入全部图像序列,这在通过导入连续图片制作逐帧动画时很方便。
4.5.2 将位图转换为矢量图
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P137_9836.jpg?sign=1739409594-5XVVBW8QMZhnNg0yhvxCRw5Ud3Fswyqf-0-be24630dc12fa95fdb888bb01cf4c94f)
图4-64 “转换位图为矢量图”对话框
如果导入的位图只是作为背景使用,不需要很高的显示质量,可以考虑将位图转换为矢量图,以减小文件的大小。
(1)使用“选择工具”选中舞台上导入的位图。
(2)执行“修改”|“位图”|“转换位图为矢量图”命令,弹出如图4-64所示的“转换位图为矢量图”对话框。
(3)在“颜色阈值”文本框中输入一个介于1 ~ 500之间的值。
当两个像素进行比较后,如果它们在RGB颜色值上的差异低于该颜色阈值,则认为两个像素的颜色是相同的。如果增大该阈值,则意味着降低颜色的数量。
(4)在“最小区域”文本框中输入一个1~1000之间的值,用于设置在指定像素颜色时要考虑的周围像素的数量。
(5)在“角阈值”下拉列表中选择对转角的平滑处理程度。
(6)在“曲线拟合”下拉列表中选择一个确定绘制的轮廓的平滑程度的选项。
提示:
如果要创建最接近原始位图的矢量图形,可以在“颜色阈值”文本框中输入10;在“最小区域”文本框中输入1;在“角阈值”下拉列表中选择“较多转角”;在“曲线拟合”下拉列表中选择“像素”。
(7)单击“确定”按钮关闭对话框,并转换位图。转换后的矢量图如图4-65所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P137_9833.jpg?sign=1739409594-0wpWY93nPlPMjIX09KUBagZ4fowzX5cH-0-ddab7ccb7c9de0942694b84996141b0c)
图4-65 转换位图为矢量图
注意
将位图转换为矢量图形后,矢量图形不会链接到“库”面板中的位图元件。如果导入的位图包含复杂的形状和许多颜色,且需要很高的显示质量,最好不要将其转换为矢量图。因为转换后的文件大小很可能比原来的位图还要大许多,而且还会有一个很漫长的转换过程。
4.5.3 上机练习——处理矢量插画
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P138_9987.jpg?sign=1739409594-6HroyMoL8hr5iH0hspRrU14iCrBeLqg0-0-dd6cb26d127a9ddd6ba37cc25467b47c)
4-4 上机练习——处理矢量插画
练习目标
本节练习处理导入的位图,制作一幅矢量插画。通过操作步骤的详细讲解,使读者熟练掌握处理外部位图的方法和技巧。
本例我们将使用位图处理一副如图4-66所示的矢量插画效果,使用“转换位图为矢量图”命令可以有效地将位图转换为矢量图。
设计思路
首先导入一幅位图,使用“转换位图为矢量图”命令将位图转换为矢量图。然后使用“选取工具”“橡皮擦工具”对人物边缘进行适当地擦除,去除背景。接下来绘制圆角矩形边框和背景对矢量图进行修饰,最终效果如图4-66所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P138_9962.jpg?sign=1739409594-uEEm1JnUj9NbGhoyPlV9ZAYiipuNTK6M-0-a9f649231f6469a2ceeef159d0d73d83)
图4-66 矢量插画
操作步骤
(1)新建一个Animate CC 2018文档(ActionScript 3.0),宽500像素,高300像素。
(2)执行“文件”|“导入”|“导入到舞台”命令,在弹出的对话框中选择需要的位图图像,单击“打开”按钮导入到舞台。
(3)执行“修改”|“变形”|“缩放和旋转”命令,在弹出的“缩放和旋转”对话框中设置缩放比例为32%,如图4-67所示。单击“确定”按钮缩小位图,效果如图4-68所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P138_9982.jpg?sign=1739409594-f4rasX1qCy8oUjU7NKmJr7Qynb9G3SxB-0-ffaf562445d0cf70c3c7461c5ac6ceef)
图4-67 “缩放和旋转”对话框
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P138_9983.jpg?sign=1739409594-mxGI5XMHQSoT19jJyLra2sKuZFABvhXQ-0-2852e14f4b38f9f96145575c4cbb03ad)
图4-68 导入的位图效果
(4)执行“修改”|“位图”|“转换位图为矢量图”命令,在弹出的对话框中进行如图4-69所示的设置,完成后单击“确定”按钮将位图转换为矢量图,效果如图4-70所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10002.jpg?sign=1739409594-54aDAvIKngmiFHmhUlai6oFjuxWxJz4V-0-5a6f713306a5c4cba52df6a3a697b293)
图4-69 设置“转换位图为矢量图”对话框
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10003.jpg?sign=1739409594-NyovqLlLvKwQml8VE3RCHRq1mfXBeNNT-0-38d52dd86250b32fd37fba088d12f5cb)
图4-70 转换为矢量图后的效果
(5)使用绘图工具箱中的“选择工具”,单击人物以外的区域,然后按Delete键将其删除。然后使用“橡皮擦工具”对人物边缘进行适当地擦除,使其变得圆滑,效果如图4-71所示。
(6)选中绘图工具箱中的“基本矩形工具”,设置笔触颜色为黑色,笔触大小为3,无填充色,矩形边角半径为15,绘制如图4-72所示的圆角矩形。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10010.jpg?sign=1739409594-RfVVzyUgGD5dB0OiskyeK52VhL5aMV0F-0-fe76213eccd9bc37116074139b83a6d3)
图4-71 擦除图形后的效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10011.jpg?sign=1739409594-sx1FlA9U4aBuNvnzu3sVdii8wkw2AMHu-0-bbfdc03038d2c89c8e72be0cfb13c05e)
图4-72 绘制出的圆角矩形
(7)单击时间轴面板左下角的“新建图层”按钮,新建一个图层,并将该图层拖放到图层1之下。执行“文件”|“导入”|“导入到舞台”命令,导入一幅底图。然后执行“修改”|“位图”|“转换位图为矢量图”命令,保留默认设置,完成后单击“确定”按钮将位图转换为矢量图,如图4-73所示。
(8)使用“选择工具”框选圆角矩形以外的图形,并将它们删除,效果如图4-74所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10015.jpg?sign=1739409594-6t3CtL8Ed7s4oOINljNbForFYgTZFCQ8-0-ebac95bcfe9f9d378fecbfbb8ddc4b6d)
图4-73 将位图转换为矢量图
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10016.jpg?sign=1739409594-EjUNAawBpwcLwVAK1WJRJjh2bvLvnWCU-0-26a48037c778edb4833b00306b0dd739)
图4-74 图形删除后的效果
(9)单击时间轴面板左下角的“新建图层”按钮,新建一个图层,选择“文件”|“导入”|“导入到舞台”命令,导入需要的位图,并适当调整其大小,然后使用前面所讲的方法,将导入的图像转换为矢量图,效果如图4-75所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P140_10026.jpg?sign=1739409594-mvzlea0NjkzrYiv4D7bu8YdES9Svs1Lm-0-6303374bce658feca0ad94228756bb90)
图4-75 选择的图形
(10)使用“选择工具”选择文字以外的区域,然后使用“滴管工具”单击底纹图像左下角的橘红色区域,改变选中区域的颜色,效果如图4-66所示。
4.5.4 打散位图
分离位图会将图像进行打散,从而可以使用Animate CC 2018工具箱中的各种绘画工具对位图中的像素进行自由选择和修改。
(1)选择舞台上的位图实例。
(2)执行“修改”|“分离”命令,或按Ctrl+B键将位图进行分离,如图4-76所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P140_10123.jpg?sign=1739409594-7g2z32PopJxFf1Ze4xVo3TZrdogXpkrI-0-ed58c0e4f8f324fcd2947992f26f6372)
图4-76 位图打散前后的外观