![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=1739479308-FT4L4b5riCde1ww1tf34tHSqYk3lFPB0-0-154472ba81c367b1e98b68ebcea0caa5)
图4-59 放大矢量对象
2. 位图图像
位图图像是对区域中所有像素点的位置和颜色信息进行描述,这种方式是“一对一”的,可以如实地反应需要的任何画面。
位图图像的分辨率不是独立的,缩放位图图像会改变其显示效果。例如在放大位图图像时,由于增加了未定义的像素点个数,因此会出现马赛克效果,如图4-60所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P136_2387.jpg?sign=1739479308-NXIu3HQuy0llJO6Hmd7PeLzTq4Mi8g01-0-5fa1c65882930aa5506a235c7f8e6098)
图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=1739479308-60m885sSNdaSFPHkmPFLGlWlwPXEIfU2-0-e1cda25749fa7a4f4eb06e79f733a5c8)
图4-61 “导入”菜单下的命令
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P136_27487.jpg?sign=1739479308-JtgzT6KuD4cdO8gGfj3dmA7PMheHIanJ-0-b79590caf464001664fa81ee078951ff)
图4-62 导入位图
如果选择的是“导入到库”命令,则选择的文件不会出现在舞台上。执行“窗口”|“库”命令,打开“库”面板后,在库项目列表中选中导入的文件,如图4-63所示。然后按下鼠标左键拖动到舞台上,释放鼠标,即可将导入的位图显示在舞台上。
事实上,使用“导入到舞台”命令导入的位图也存放在“库”面板中。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P137_9776.jpg?sign=1739479308-2VASu9VhSXwhgLwYFNUGjejtpJ2ViYo8-0-155457273af61721da9feb96a8a405c4)
图4-63 “库”面板
提示:
如果导入的图像文件名称以数字结尾,而且文件夹中还存在其他按顺序编号的图像,Animate CC 2018会提示是否导入全部图像序列,这在通过导入连续图片制作逐帧动画时很方便。
4.5.2 将位图转换为矢量图
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P137_9836.jpg?sign=1739479308-rrhlh8CgJ77Nk4CxgCC7oJ0lX9xluus3-0-4683ccdbe8a49eaae928d21906b34dd0)
图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=1739479308-wg7ZHsygOBpT3B1uUUxsSox3Oz4hCI6P-0-052013d809c497a29cee2e6b93a15762)
图4-65 转换位图为矢量图
注意
将位图转换为矢量图形后,矢量图形不会链接到“库”面板中的位图元件。如果导入的位图包含复杂的形状和许多颜色,且需要很高的显示质量,最好不要将其转换为矢量图。因为转换后的文件大小很可能比原来的位图还要大许多,而且还会有一个很漫长的转换过程。
4.5.3 上机练习——处理矢量插画
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P138_9987.jpg?sign=1739479308-4qnIthuv9dPpzOzkglvRdUIKqlFieBWN-0-04d9aa945086c48a2f716a8bab6ca244)
4-4 上机练习——处理矢量插画
练习目标
本节练习处理导入的位图,制作一幅矢量插画。通过操作步骤的详细讲解,使读者熟练掌握处理外部位图的方法和技巧。
本例我们将使用位图处理一副如图4-66所示的矢量插画效果,使用“转换位图为矢量图”命令可以有效地将位图转换为矢量图。
设计思路
首先导入一幅位图,使用“转换位图为矢量图”命令将位图转换为矢量图。然后使用“选取工具”“橡皮擦工具”对人物边缘进行适当地擦除,去除背景。接下来绘制圆角矩形边框和背景对矢量图进行修饰,最终效果如图4-66所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P138_9962.jpg?sign=1739479308-v5ZvL34DsccMhvQ2kAa2RiWarRW6BfhU-0-6d224c0111dac016ef52d05016ad0973)
图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=1739479308-vACusiKON5jDe95rlxRwklTkZb8b4xLI-0-7f76b0e7b66f472ff0138c31754806ba)
图4-67 “缩放和旋转”对话框
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P138_9983.jpg?sign=1739479308-VVqMOJ5wqA1Ifr2gm5hB2hJ5OiLJLPyi-0-a1892ccc74fa48327d62dc438abe35f4)
图4-68 导入的位图效果
(4)执行“修改”|“位图”|“转换位图为矢量图”命令,在弹出的对话框中进行如图4-69所示的设置,完成后单击“确定”按钮将位图转换为矢量图,效果如图4-70所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10002.jpg?sign=1739479308-AF56qkjt3xRtFQ5IdCI82LPVsTCiWsRt-0-34cec3f56c60ac653238d5c9ec8ce27e)
图4-69 设置“转换位图为矢量图”对话框
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10003.jpg?sign=1739479308-BpuB4NG5QjDa1izHOColt0FirHeoZdqC-0-450b5684677f70901e62b54bb3d20612)
图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=1739479308-kSS1v6FhX6ZGIsivQaIndzuyCIMArg41-0-f798cdc08d0a4210d114f5b3a924d731)
图4-71 擦除图形后的效果
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10011.jpg?sign=1739479308-dmQgzjyOMxg6OLeMYCdYleZYEyUE5X0n-0-ee806d1114ffb9e8eacd3afdceffa678)
图4-72 绘制出的圆角矩形
(7)单击时间轴面板左下角的“新建图层”按钮,新建一个图层,并将该图层拖放到图层1之下。执行“文件”|“导入”|“导入到舞台”命令,导入一幅底图。然后执行“修改”|“位图”|“转换位图为矢量图”命令,保留默认设置,完成后单击“确定”按钮将位图转换为矢量图,如图4-73所示。
(8)使用“选择工具”框选圆角矩形以外的图形,并将它们删除,效果如图4-74所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10015.jpg?sign=1739479308-lUzxJjLnfheuI8AyDnplesccKFaCqB75-0-14923c4285b7d2667deef15704b06392)
图4-73 将位图转换为矢量图
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P139_10016.jpg?sign=1739479308-8xpmZ9KWwbQEiIclCC6tXIyLZCkoj6ep-0-9c23c0eb4731784acdce3b19924b3cc1)
图4-74 图形删除后的效果
(9)单击时间轴面板左下角的“新建图层”按钮,新建一个图层,选择“文件”|“导入”|“导入到舞台”命令,导入需要的位图,并适当调整其大小,然后使用前面所讲的方法,将导入的图像转换为矢量图,效果如图4-75所示。
![](https://epubservercos.yuewen.com/A0A706/15056703205211606/epubprivate/OEBPS/Images/Figure-P140_10026.jpg?sign=1739479308-vNsAC5DmxjoX5D9z7iCrQzh1ZIBKwa2N-0-355dfae8e976e2a91406c1ed821fdf98)
图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=1739479308-bxkWOysAivO48LDvoHxAe5lhKuOwGltF-0-1f356acf368cffc5fbc424308082d2af)
图4-76 位图打散前后的外观