4.5 使用外部位图
由于Animate CC 2018生动、形象的表现方式,以及文件小的特点,在很多领域都有广泛的应用,而图形是动画制作过程中必不可少的元素。如果所有的图形都自己动手绘画,花费不少时间和精力不说,对于不擅长美术的制作者来说,绘画出的图形效果也很难保证。通常情况下,一个很简单的解决办法就是直接使用表现力丰富的外部位图。
知识拓展:
矢量图像与位图的区别
计算机图像主要有矢量图像(矢量)和位图图像(位图)两种类型。
1. 矢量图像
矢量图像用包含颜色和位置属性的线条描述图像属性。对于矢量图像来说,路径(Path)和点(Point)是其中最基本的元素,可以通过修改路径和路径点改变矢量图像。
由于矢量图像中记录的图像信息是路径点及各个路径点之间的关系,在缩放矢量图像时,实际上仅改变了路径点的坐标位置。操作完成后,计算机会重新计算新坐标下的路径,并绘制相应的矢量图像。因此,矢量图像可以任意缩放,且不会影响图像效果,如图4-59所示。
图4-59 放大矢量对象
2. 位图图像
位图图像是对区域中所有像素点的位置和颜色信息进行描述,这种方式是“一对一”的,可以如实地反应需要的任何画面。
位图图像的分辨率不是独立的,缩放位图图像会改变其显示效果。例如在放大位图图像时,由于增加了未定义的像素点个数,因此会出现马赛克效果,如图4-60所示。
图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)为位图。
图4-61 “导入”菜单下的命令
图4-62 导入位图
如果选择的是“导入到库”命令,则选择的文件不会出现在舞台上。执行“窗口”|“库”命令,打开“库”面板后,在库项目列表中选中导入的文件,如图4-63所示。然后按下鼠标左键拖动到舞台上,释放鼠标,即可将导入的位图显示在舞台上。
事实上,使用“导入到舞台”命令导入的位图也存放在“库”面板中。
图4-63 “库”面板
提示:
如果导入的图像文件名称以数字结尾,而且文件夹中还存在其他按顺序编号的图像,Animate CC 2018会提示是否导入全部图像序列,这在通过导入连续图片制作逐帧动画时很方便。
4.5.2 将位图转换为矢量图
图4-64 “转换位图为矢量图”对话框
如果导入的位图只是作为背景使用,不需要很高的显示质量,可以考虑将位图转换为矢量图,以减小文件的大小。
(1)使用“选择工具”选中舞台上导入的位图。
(2)执行“修改”|“位图”|“转换位图为矢量图”命令,弹出如图4-64所示的“转换位图为矢量图”对话框。
(3)在“颜色阈值”文本框中输入一个介于1 ~ 500之间的值。
当两个像素进行比较后,如果它们在RGB颜色值上的差异低于该颜色阈值,则认为两个像素的颜色是相同的。如果增大该阈值,则意味着降低颜色的数量。
(4)在“最小区域”文本框中输入一个1~1000之间的值,用于设置在指定像素颜色时要考虑的周围像素的数量。
(5)在“角阈值”下拉列表中选择对转角的平滑处理程度。
(6)在“曲线拟合”下拉列表中选择一个确定绘制的轮廓的平滑程度的选项。
提示:
如果要创建最接近原始位图的矢量图形,可以在“颜色阈值”文本框中输入10;在“最小区域”文本框中输入1;在“角阈值”下拉列表中选择“较多转角”;在“曲线拟合”下拉列表中选择“像素”。
(7)单击“确定”按钮关闭对话框,并转换位图。转换后的矢量图如图4-65所示。
图4-65 转换位图为矢量图
注意
将位图转换为矢量图形后,矢量图形不会链接到“库”面板中的位图元件。如果导入的位图包含复杂的形状和许多颜色,且需要很高的显示质量,最好不要将其转换为矢量图。因为转换后的文件大小很可能比原来的位图还要大许多,而且还会有一个很漫长的转换过程。
4.5.3 上机练习——处理矢量插画
4-4 上机练习——处理矢量插画
练习目标
本节练习处理导入的位图,制作一幅矢量插画。通过操作步骤的详细讲解,使读者熟练掌握处理外部位图的方法和技巧。
本例我们将使用位图处理一副如图4-66所示的矢量插画效果,使用“转换位图为矢量图”命令可以有效地将位图转换为矢量图。
设计思路
首先导入一幅位图,使用“转换位图为矢量图”命令将位图转换为矢量图。然后使用“选取工具”“橡皮擦工具”对人物边缘进行适当地擦除,去除背景。接下来绘制圆角矩形边框和背景对矢量图进行修饰,最终效果如图4-66所示。
图4-66 矢量插画
操作步骤
(1)新建一个Animate CC 2018文档(ActionScript 3.0),宽500像素,高300像素。
(2)执行“文件”|“导入”|“导入到舞台”命令,在弹出的对话框中选择需要的位图图像,单击“打开”按钮导入到舞台。
(3)执行“修改”|“变形”|“缩放和旋转”命令,在弹出的“缩放和旋转”对话框中设置缩放比例为32%,如图4-67所示。单击“确定”按钮缩小位图,效果如图4-68所示。
图4-67 “缩放和旋转”对话框
图4-68 导入的位图效果
(4)执行“修改”|“位图”|“转换位图为矢量图”命令,在弹出的对话框中进行如图4-69所示的设置,完成后单击“确定”按钮将位图转换为矢量图,效果如图4-70所示。
图4-69 设置“转换位图为矢量图”对话框
图4-70 转换为矢量图后的效果
(5)使用绘图工具箱中的“选择工具”,单击人物以外的区域,然后按Delete键将其删除。然后使用“橡皮擦工具”对人物边缘进行适当地擦除,使其变得圆滑,效果如图4-71所示。
(6)选中绘图工具箱中的“基本矩形工具”,设置笔触颜色为黑色,笔触大小为3,无填充色,矩形边角半径为15,绘制如图4-72所示的圆角矩形。
图4-71 擦除图形后的效果
图4-72 绘制出的圆角矩形
(7)单击时间轴面板左下角的“新建图层”按钮,新建一个图层,并将该图层拖放到图层1之下。执行“文件”|“导入”|“导入到舞台”命令,导入一幅底图。然后执行“修改”|“位图”|“转换位图为矢量图”命令,保留默认设置,完成后单击“确定”按钮将位图转换为矢量图,如图4-73所示。
(8)使用“选择工具”框选圆角矩形以外的图形,并将它们删除,效果如图4-74所示。
图4-73 将位图转换为矢量图
图4-74 图形删除后的效果
(9)单击时间轴面板左下角的“新建图层”按钮,新建一个图层,选择“文件”|“导入”|“导入到舞台”命令,导入需要的位图,并适当调整其大小,然后使用前面所讲的方法,将导入的图像转换为矢量图,效果如图4-75所示。
图4-75 选择的图形
(10)使用“选择工具”选择文字以外的区域,然后使用“滴管工具”单击底纹图像左下角的橘红色区域,改变选中区域的颜色,效果如图4-66所示。
4.5.4 打散位图
分离位图会将图像进行打散,从而可以使用Animate CC 2018工具箱中的各种绘画工具对位图中的像素进行自由选择和修改。
(1)选择舞台上的位图实例。
(2)执行“修改”|“分离”命令,或按Ctrl+B键将位图进行分离,如图4-76所示。
图4-76 位图打散前后的外观