图形栅格化

本帖最后由hbweb 于2012-2-28 18:12 编辑

要求：

必备知识：

要有使用Flash Professional工作区的常识，并且必须对在Flash中使用ActionScript3的一些概念有一个基本的了解。

用户级别

所有人

必备产品：

Flash Professional(在这里下载试用版)

例子文件：

image_rasterization.zip

由Adobe Flash Professional 已经发展成一个强大的应用程序和游戏开发环境，所以有必要去了解媒介的特色以及相关的性能优化。使用矢量图形和位图是Flash中可视化设计中的一个基础内容。图形光栅化指的是为了性能优化而将矢量图形转化为位图这么一个过程。

本文研究的是赞成和反对使用矢量图形和位图的依据，以及目前已有的用于图形光栅化的操作方法。你将可以找到很多有关这方面内容的简单的练习，这些练习举例说明了怎样在创作时和运行时去设置以及使用光栅化特性（点击图1）。同时，你也将学到怎样使用新的导出为位图的特性-----以及学会如何在ActionScript 3中使用BitmapData对象。

图1.本文练习中描绘的位图示例

理解矢量图和位图的概念

Flash中的图片有两种格式，分别是矢量图以及位图。每一种格式都有它的优缺点。在这部分内容中，你将会学习每一种格式，了解赞成和反对每一种格式的理由以及知道在什么情况下该选用哪种格式的图片。

什么是矢量图？

矢量图就是一种由一连串的点同时用线条将这些点连接起来所组成的形状。（如图2）例如，一个正方形是由四个角上的点以及用线条将这些点连接起来所组成的图形。一个圆同样的也有四个点，但是连接这些点的线条不是直线而是曲线。一张矢量图有一个填充色以及一个轮廓（描边）颜色。通常一张矢量图是由数十个或者更多的向量形状重叠组合而成。

图2.定义一个矢量正方形以及一个矢量圆的点和线条

矢量图形的优点是它的体积很小并且可以进行无限缩放。不仅如此，矢量图形中的点和线都是完全由数学公式定义的,所以它们与分辨率无关。因此，矢量图体积很小并且可以对它的尺寸进行无限放大或者缩小但整张图不失真。同时矢量图还可以在需要的时候进行编辑和修改。

矢量图的一个缺点是在某些情况下需要消耗大量的处理器资源。矢量图形由CPU在运行时进行渲染并且在图形发生改变的时候就必须要重新进行渲染。例如，当一个矢量图在一个补间动画中使用的时候，或者如果舞台上的矢量图形与补间动画重叠了，那么这个图形就要在每一帧中再次对它进行渲染，这样的话才能在屏幕上显示出变化的部分。很多时下的台式机和手提电脑对复杂矢量图形的渲染并不存在任何问题，但是要知道移动设备可能会显露出明显的性能问题。

当你要创建可以自由缩放的图形，并且其中要使用到可编辑文本框和图形，或者当动画中需要一些弯曲特性的时候，那么使用矢量图形就应该是你的最佳选择。

小贴士：Flash Professional中的绘图工具天生就可以用来绘制矢量图形，但是在很多情况下，最好的方法是将图片以位图格式发布，这样可以提升性能。

什么是位图？

位图就是一张由很多称为像素的点所组成的图片（如图3）。每个像素包含一种颜色。所有带有颜色的像素组合在一起就形成了一张图片。每英寸上的像素点的个数就决定了这张图片的分辨率的大小。一般电脑显示器的分辨率是72dpi（dots per inch每英寸上有多少个点）。

图3.一张位图中颜色像素的放大图

位图的优点是不需要经过CPU的渲染就可以显示出非常细腻逼真的图形内容。一旦位图经过了加载并进行显示，就不需要再次对它进行渲染了。

位图的缺点是它的体积非常大。分辨率，色彩数，压缩技术以及位图的尺寸都影响到了图像的文件大小。同时，由于位图的清晰度是由分辨率决定的，所以不可能在不失真的情况下将位图放大到更大的尺寸。在Flash中不能编辑位图；你可以使用像Photoshop或者Fireworks这样的工具来编辑你的位图图像，然后再将编辑过后的位图导入到Flsah中。

可以将位图用在背景图以及那些不需要进行编辑或者缩放的静态图像上。同样，由于性能的原因以及移动设备的可移植性问题，只要有可能，就应当考虑使用位图或者光栅化技术。

小贴士：你可以在绘制图片或者运行时将矢量图形光栅化，将它转换为位图图像，

用这样一种策略来优化可编辑的矢量图形。

典型的性能问题以及它们的解决方法

根据Flash影片的复杂程度，你可能会发现有的动画和页面过渡显得有点缓慢或者断断续续，当很多重叠了的矢量图在每一帧都要进行重画的时候，刚才那种情况就会发生。结果可能导致不一致的帧速以及在向量绘制时的间歇性的停顿。

下面是一些要考虑的事情，这些事情可能有助于提高工程的性能：

1.给背景图使用位图。动画经常是在大的背景图上面进行显示。对背景使用位图将有助于降低渲染图像时的资源消耗以及使CPU的使用率降到最少。

2.大面积的动画更可能导致性能问题。试着尽可能地将动画的显示面积降到最小。

3.使用了透明效果（alpha）的动画和复杂图像比不透明的图像需要消耗更多的CPU资源。

4.使用了滤镜和混合模式的动画以及复杂图形比那些不使用这些效果的动画和图形需要消耗更多的CPU资源。使用滤镜和混合模式要非常谨慎。同样地，在使用滤镜的时候尽量将它设置为低品质。

5.如果可能的话，避免显示经常停顿的动画。

6.在Flash中使用光栅化特性，从而在创作期间或者在运行期间将静态图像转换成位图。

小贴士：在你优化你的工程时，你可以使用基于ActionScript的检验程序来检查你的影片的性能并且与影片没有优化之前的内存消耗做一个比对。看看Shane McCarthy’s 的AS3 SWF Profiler，一个使用起来很简单的可操作选项。

矢量图形光栅化的好处

Flash Professional和ActionScript3提供了几个选项来将矢量图转化为位图。使用这些特性的好处是你经常可以避免前面提到过的性能陷阱，同时也让你的图片在创作期间一直处于可编辑状态。最终你的工程将会具有更少的CPU消耗，平滑的动画效果，以及一致的帧速，同时还能提升性能---------尤其是对那些要移植到移动设备上的应用程序。

Flash Professional 和ActionScript 3中的可选项

本文的下面这些部分将带你学习一些概念以及例子，它们很好地展现了Flash中的光栅化特性。

你将学习到下面这些创作期间的特性：

1.缓存为位图

2.导出为位图

3.转换为位图并且将选择项转换为位图

你也将学到这些运行期间的ActionScript特性

1.缓存为位图

2.Bitmap 对象

3.BitmapData 对象

使用创作期间的光栅化特性

Flash Professional CS5.5引入了导出为位图的特性作为一项改进了的工作流程来在SWF文件中以位图的形式发布图片。这个特性，结合了前面的缓存为位图以及转换为位图的特性，给在FLA文件中进行可视化创作提供了几个强大的，简单易用的选项。