图形栅格化.docx

图形栅格化.docx

《图形栅格化.docx》由会员分享，可在线阅读，更多相关《图形栅格化.docx（21页珍藏版）》请在冰豆网上搜索。

图形栅格化

本帖最后由hbweb于2012-2-2818:

12编辑 

要求：

必备知识：

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

用户级别

  所有人

必备产品：

    FlashProfessional（在这里下载试用版）

例子文件：

   image_rasterization.zip

由Adobe  Flash  Professional 已经发展成一个强大的应用程序和游戏开发环境，所以有必要去了解媒介的特色以及相关的性能优化。

使用矢量图形和位图是Flash中可视化设计中的一个基础内容。

图形光栅化指的是为了性能优化而将矢量图形转化为位图这么一个过程。

本文研究的是赞成和反对使用矢量图形和位图的依据，以及目前已有的用于图形光栅化的操作方法。

你将可以找到很多有关这方面内容的简单的练习，这些练习举例说明了怎样在创作时和运行时去设置以及使用光栅化特性（点击图1）。

同时，你也将学到怎样使用新的导出为位图的特性-----以及学会如何在ActionScript3中使用BitmapData对象。

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

理解矢量图和位图的概念

Flash中的图片有两种格式，分别是矢量图以及位图。

每一种格式都有它的优缺点。

在这部分内容中，你将会学习每一种格式，了解赞成和反对每一种格式的理由以及知道在什么情况下该选用哪种格式的图片。

什么是矢量图？

矢量图就是一种由一连串的点同时用线条将这些点连接起来所组成的形状。

（如图2）例如，一个正方形是由四个角上的点以及用线条将这些点连接起来所组成的图形。

一个圆同样的也有四个点，但是连接这些点的线条不是直线而是曲线。

一张矢量图有一个填充色以及一个轮廓（描边）颜色。

通常一张矢量图是由数十个或者更多的向量形状重叠组合而成。

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

矢量图形的优点是它的体积很小并且可以进行无限缩放。

不仅如此，矢量图形中的点和线都是完全由数学公式定义的,所以它们与分辨率无关。

因此，矢量图体积很小并且可以对它的尺寸进行无限放大或者缩小但整张图不失真。

同时矢量图还可以在需要的时候进行编辑和修改。

矢量图的一个缺点是在某些情况下需要消耗大量的处理器资源。

矢量图形由CPU在运行时进行渲染并且在图形发生改变的时候就必须要重新进行渲染。

例如，当一个矢量图在一个补间动画中使用的时候，或者如果舞台上的矢量图形与补间动画重叠了，那么这个图形就要在每一帧中再次对它进行渲染，这样的话才能在屏幕上显示出变化的部分。

很多时下的台式机和手提电脑对复杂矢量图形的渲染并不存在任何问题，但是要知道移动设备可能会显露出明显的性能问题。

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

小贴士：

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

什么是位图？

位图就是一张由很多称为像素的点所组成的图片（如图3）。

每个像素包含一种颜色。

所有带有颜色的像素组合在一起就形成了一张图片。

每英寸上的像素点的个数就决定了这张图片的分辨率的大小。

一般电脑显示器的分辨率是72dpi（dotsperinch每英寸上有多少个点）。

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

位图的优点是不需要经过CPU的渲染就可以显示出非常细腻逼真的图形内容。

一旦位图经过了加载并进行显示，就不需要再次对它进行渲染了。

位图的缺点是它的体积非常大。

分辨率，色彩数，压缩技术以及位图的尺寸都影响到了图像的文件大小。

同时，由于位图的清晰度是由分辨率决定的，所以不可能在不失真的情况下将位图放大到更大的尺寸。

在Flash中不能编辑位图；你可以使用像Photoshop或者Fireworks这样的工具来编辑你的位图图像，然后再将编辑过后的位图导入到Flsah中。

可以将位图用在背景图以及那些不需要进行编辑或者缩放的静态图像上。

同样，由于性能的原因以及移动设备的可移植性问题，只要有可能，就应当考虑使用位图或者光栅化技术。

小贴士：

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

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

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

根据Flash影片的复杂程度，你可能会发现有的动画和页面过渡显得有点缓慢或者断断续续，当很多重叠了的矢量图在每一帧都要进行重画的时候，刚才那种情况就会发生。

结果可能导致不一致的帧速以及在向量绘制时的间歇性的停顿。

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

1.给背景图使用位图。

动画经常是在大的背景图上面进行显示。

对背景使用位图将有助于降低渲染图像时的资源消耗以及使CPU的使用率降到最少。

2.大面积的动画更可能导致性能问题。

试着尽可能地将动画的显示面积降到最小。

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

4.使用了滤镜和混合模式的动画以及复杂图形比那些不使用这些效果的动画和图形需要消耗更多的CPU资源。

使用滤镜和混合模式要非常谨慎。

同样地，在使用滤镜的时候尽量将它设置为低品质。

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

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

小贴士：

在你优化你的工程时，你可以使用基于ActionScript的检验程序来检查你的影片的性能并且与影片没有优化之前的内存消耗做一个比对。

看看Shane  McCarthy’s 的AS3  SWFProfiler，一个使用起来很简单的可操作选项。

矢量图形光栅化的好处

Flash  Professional和ActionScript3提供了几个选项来将矢量图转化为位图。

使用这些特性的好处是你经常可以避免前面提到过的性能陷阱，同时也让你的图片在创作期间一直处于可编辑状态。

最终你的工程将会具有更少的CPU消耗，平滑的动画效果，以及一致的帧速，同时还能提升性能---------尤其是对那些要移植到移动设备上的应用程序。

Flash  Professional  和ActionScript3中的可选项

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

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

1.缓存为位图

2.导出为位图

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

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

1.缓存为位图

2.Bitmap 对象

3.BitmapData 对象

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

  Flash  ProfessionalCS5.5引入了导出为位图的特性作为一项改进了的工作流程来在SWF文件中以位图的形式发布图片。

这个特性，结合了前面的缓存为位图以及转换为位图的特性，给在FLA文件中进行可视化创作提供了几个强大的，简单易用的选项。

这部分内容提供了在Flash中创作时光栅化特性的一个概述。

位图缓存

位图缓存特性是Flash中很早就有的一个光栅化特性。

使用位图缓存可以让Flash  Player在运行时将一个元件作为位图储存到RAM存储器中。

位图缓存特性使用起来很简单。

将一个图像转换为元件，同时确定它已经被选中了，然后在属性面板中找到显示区块，选择缓存为位图渲染项。

（如图4）

  图4当一个元件被选中的时候，属性面板中的缓存为位图选项

这个方法里面，位图缓存允许Flash  Player来缓存图像，这样就可以避免在每一帧中都要进行重新渲染的问题。

这个特性在没有动画，没有滤镜或者没有应用混合模式的情况下使用图像时运行的最为完美。

小贴士：

如果一个补间动画中含有缩放或者旋转的动作，而你使用的图像是补间动画中的一部分，那么缓存为位图选项实际上会增加CPU消耗。

包含复杂变换的动画将会在每一帧中重新加载位图-------对它们进行缓存比起单纯地只使用原来的矢量图需要消耗更多的CPU资源。

转换为位图：

当你想在创作期间将矢量图转换为真正的位图时，转换为位图以及将选择项转换为位图这两个特性会让这变得非常容易。

元件和绘图对象都可以使用这个特性。

要使用这个特性，就要选择舞台上的一个或多个图形，然后选择修改->转换为位图。

你也可以在已选择的对象上右击，并且在弹出菜单上选择转换为位图选项。

转换为位图的特性就像它的字面意思所表达的一样，根据所选择的项目在库中创建出一

个新的位图文件，你可以选择一个图形，将它转换为位图，然后在一个图形编辑软件中对它进行编辑，例如PhotoShop（如图5）。

在创建了位图之后，元件作为独立的可编辑对象仍然在库中保存着。

绘图对象在将它们转换为位图之后就不可以再进行编辑了。

  图5库中被选中位图的右键菜单包含了“用Adobe  Photoshop  CS5编辑”选项

当你想创建一个实际的位图文件，文件中的位图可以在其他的绘图软件中进行编辑并且作为外部位图图像进行保存，那就可以使用转换为位图特性。

小贴士：

这个方法的一个好处是，在库中会生成一个位图项。

在位图上双击，弹出位图属性对话框，你可以看到位图图像的详细信息并对其中的压缩设置项进行调整。

导出为位图

新的导出为位图属性允许你在创作时将任意的影片剪辑或者按钮元件转换成位图。

（如图6）当选择了这个选项的时候，元件的第一帧就以位图显示。

你可以将背景设置为透明的或者用一种特殊的背景色将它设置为不透明的。

当查看元件实例的时候，你可以看到第一帧显示为位图，当你对元件的时间轴进行编辑的时候，你能看到帧动作，帧数以及关键帧，它们和你预期的一样的。

不同于转换为位图特性，导出为位图特性可以让元件和它的内容在FLA文件里面依然是可编辑的。

这意味着你可以继续编辑并且按需要改变元件的内容，注意你创建文件时的位图，在你发布影片的同时从第一帧起发布这个位图。

当你使用导出为位图这个特性的时候，并不会在库中创建一个独立的位图。

  图6当你选中了一个影片剪辑或则一个按钮元件的时候，可以在属性面板中选择导出为位图选项

导出为位图特性使你在应用程序或者广告横幅中重新设计图片时变得更简单。

当你要在应用程序中使用插图，广告用的图片或者UI图片时，则使用这个方法，这些图片会以不同的大小在屏幕上显示。

例如，在FLA文件中使用导出为位图特性来按需要重置背景图片和标志的大小，同时在你创建的SWF文件中将元件元素作为静态位图发布。

小贴士：

将导出为位图特性和工程面板中的创作期间共享资源特性结合起来，用来对工程中要重用以及调整大小的共有资源进行分类，这将是一个非常棒的方法。

练习1：

使用导出为位图以及转换为位图特性

在最简单的案例中，你会发现你自己用了一张非常大的矢量图来用作背景，而你想将这个背景发布为一张位图。

这样做将会导致文件大小变大，但是这可以使动画或者其它重叠的内容显示起来更加平滑。

在这个例子中，你将导入一张上面有很多人的相片，并且将它设置成你的影片背景图案。

为了好玩以及获取一个更加特别的效果，你将使用TraceBitmap命令将这张图片转换成一连串的矢量图，然后将调整过的照片设置成导出为位图。

你也可以试着使用转换为位图选项来进行更深一层次的编辑。

跟着下面这些步骤来设置你的工程文件夹：

  1 如果你还没有下载在本文开始时提供的源文件中的bitmap_exercise.zip文件，那么请你先进行下载；

  2 对这个例子文件进行解压，并将它保存到桌面。

在你使用的时候