手把手教你学Flash CS3
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

2.1 关于矢量图和位图

根据计算机显示图形的原理,遇到的计算机显示的图形主要可以分为两大类:矢量图形和位图图形。因此,只有了解了矢量图和位图的概念以及它们之间的联系和差别,才能正确地处理各种类型的图形。

2.1.1 矢量图与位图概述

矢量图是使用包括颜色和位置属性的直线和曲线(称为矢量)来描述图形。例如一朵花,如图2-1所示。花朵包括两部分:花朵的边缘的点组成的轮廓和轮廓内的填充区域。

图2-1 矢量图形

在矢量图形中,花朵的颜色由花朵的轮廓曲线的颜色和轮廓所包围区域的颜色决定,与轮廓内部单独的点无关。

对于矢量图形,编辑时可以对描述图形形状的线条和曲线的属性进行修改,也可以对矢量图形进行移动、放缩、变形以及在不改变图形显示质量的前提下更改颜色等操作。

位图是通过使用在网格内排列的不同颜色的点(称为像素)来描述图形。例如花朵图像,如图2-2所示,由网格中每个像素点的位置和颜色值来描述。

图2-2 位图图形

对于位图图形,编辑时修改的是像素,不是直线和曲线,所以,要更改花朵的性质不能通过修改描述花朵的轮廓的直线或曲线来实现。

高手点评

在 Flash 动画中,主要使用矢量图形来制作动画,掌握矢量图和位图的概念对后续的学习会有很好的帮助。

2.1.2 矢量图与位图的区别联系

矢量图形具有独立的分辨率。也就是说,在保证质量的前提下,它可以显示在各种分辨率的输出设备中,而不影响品质。在矢量方式下,图形被放大以后仍然保持原清晰度,这是区分矢量图与位图的最好方法,如图2-3所示。

图2-3 矢量图的放大

位图图形不具有独立的分辨率,即位图图形跟分辨率有关,故在分辨率比位图图形本身低的输出设备上显示图形会降低图形的品质。编辑位图图形时修改的是像素,不是直线和曲线,因此编辑位图图形会更改它的外观品质。特别是,在缩放一个位图图形时,会因为网格内的像素进行了重新分配而导致图形边缘变得粗糙、模糊,如图2-4所示。

图2-4 位图的放大

高手点评

Flash 采用的是矢量图形格式,因此放大或缩小其创建的图形不会影响图形的分辨率,同时,将图形放大是否失真是辨别矢量图与位图的最好方法。

2.1.3 位图与矢量图之间的转换

选择“修改>位图>转换位图为矢量图”命令可以把位图转换为可编辑的矢量图形。以矢量图形方式处理图像,可以减小文件大小。

手把手实例 转换位图为矢量图

(1)选择“文件>新建”命令,在弹出的对话框中选择“常规”选项卡下的“Flash文件(ActionScript 3.0)”选项,单击“确定”按钮,创建一个影片文档。

(2)选择“文件>导入>导入到舞台”命令,在弹出的窗口中选择要导入的位图文件,然后单击 按钮,便将文件导入到舞台,调整图片的大小使其适合舞台的大小。导入到舞台中的位图如图2-5所示。

图2-5 苹果位图

(3)单击选中舞台中的位图图形,然后选择“修改>位图>转换位图为矢量图”命令,弹出“转换位图为矢量图”对话框,如图2-6所示。

图2-6 转换位图为矢量图

下面介绍一下“转换位图为矢量图”对话框中各个参数和选项的作用。

· “颜色阈值”要求输入一个值。比较两个像素后,若该颜色阈值高于两个像素在RGB颜色值上的差异,则认为这两个像素颜色相同。

· “最小区域”用来设置为某个像素指定颜色时需要考虑的周围像素的数量。

· “曲线拟合”用来确定绘制轮廓的平滑程度。

· “角阈值”用来确定保留锐边还是进行平滑处理。

设置好各个参数和选项后,单击 按钮即可。若要创建最接近原始位图的矢量图形,请按照如图2-7所示的设置来设置各个参数和选项值。

图2-7 最接近原始位图的设置

(4)转换后的矢量图如图2-8所示。选择“文件>保存”命令,定义文件名为“转换位图为矢量图.fla”。

图2-8 苹果矢量图

技巧

若位图含有复杂的形状和多种颜色,那么转换后得到的矢量图形要比原始的位图文件大。设置“转换位图为矢量图”对话框中的各种参数,可以找到文件大小和图像品质二者之间的平衡点。

高手点评

转换位图得到的矢量图的效果越好,则文件越大,处理速度越慢。位图转换为矢量图后,就成了一些独立的填充区域和线条。

即问即答

把位图转换为矢量图形以后,在“库”中,矢量图形和位图元件有关联吗?

把位图转换为矢量图形以后,矢量图形就不再链接到“库”中的位图元件了。

在Flash中要修改位图图像该怎么办?

可以在把位图分离后,使用Flash的绘画和涂色工具来修改图像。