Flash Professional中的图形光栅化

最新推荐文章于 2024-11-09 21:51:15 发布

weixin_30648963

最新推荐文章于 2024-11-09 21:51:15 发布

阅读量247

点赞数

文章标签： photoshop illustrator 人工智能

原文链接：http://www.cnblogs.com/atong/archive/2013/02/19/2916764.html

版权

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

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

理解矢量图和位图的概念

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文件中进行可视化创作提供了几个强大的，简单易用的选项。

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

位图缓存

位图缓存特性是Flash中很早就有的一个光栅化特性。使用位图缓存可以让Flash Player在运行时将一个元件作为位图储存到RAM存储器中。位图缓存特性使用起来很简单。将一个图像转换为元件，同时确定它已经被选中了，然后在属性面板中找到显示区块，选择缓存为位图渲染项。（如图4）。

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

这个方法里面，位图缓存允许Flash Player来缓存图像，这样就可以避免在每一帧中都要进行重新渲染的问题。这个特性在没有动画，没有滤镜或者没有应用混合模式的情况下使用图像时运行的最为完美。

小贴士：如果一个补间动画中含有缩放或者旋转的动作，而你使用的图像是补间动画中的一部分，那么缓存为位图选项实际上会增加CPU消耗。包含复杂变换的动画将会在每一帧中重新加载位图-------对它们进行缓存比起单纯地只使用原来的矢量图需要消耗更多的CPU资源。

转换为位图：

当你想在创作期间将矢量图转换为真正的位图时，转换为位图以及将选择项转换为位图这两个特性会让这变得非常容易。元件和绘图对象都可以使用这个特性。要使用这个特性，就要选择舞台上的一个或多个图形，然后选择修改->转换为位图。你也可以在已选择的对象上右击，并且在弹出菜单上选择转换为位图选项

转换为位图的特性就像它的字面意思所表达的一样，根据所选择的项目在库中创建出一个新的位图文件，你可以选择一个图形，将它转换为位图，然后在一个图形编辑软件中对它进行编辑，例如PhotoShop（如图5）。在创建了位图之后，元件作为独立的可编辑对象仍然在库中保存着。绘图对象在将它们转换为位图之后就不可以再进行编辑了。

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

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

小贴士：这个方法的一个好处是，在库中会生成一个位图项。在位图上双击，弹出位图属性对话框，你可以看到位图图像的详细信息并对其中的压缩设置项进行调整。

导出为位图

新的导出为位图属性允许你在创作时将任意的影片剪辑或者按钮元件转换成位图。（如图6）当选择了这个选项的时候，元件的第一帧就以位图显示。你可以将背景设置为透明的或者用一种特殊的背景色将它设置为不透明的。当查看元件实例的时候，你可以看到第一帧显示为位图，当你对元件的时间轴进行编辑的时候，你能看到帧动作，帧数以及关键帧，它们和你预期的一样的。不同于转换为位图特性，导出为位图特性可以让元件和它的内容在FLA文件里面依然是可编辑的。这意味着你可以继续编辑并且按需要改变元件的内容，注意你创建文件时的位图，在你发布影片的同时从第一帧起发布这个位图。当你使用导出为位图这个特性的时候，并不会在库中创建一个独立的位图。

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

导出为位图特性使你在应用程序或者广告横幅中重新设计图片时变得更简单。当你要在应用程序中使用插图，广告用的图片或者UI图片时，则使用这个方法，这些图片会以不同的大小在屏幕上显示。例如，在FLA文件中使用导出为位图特性来按需要重置背景图片和标志的大小，同时在你创建的SWF文件中将元件元素作为静态位图发布。

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

练习1：使用导出为位图以及转换为位图特性

在最简单的案例中，你会发现你自己用了一张非常大的矢量图来用作背景，而你想将这个背景发布为一张位图。这样做将会导致文件大小变大，但是这可以使动画或者其它重叠的内容显示起来更加平滑。

在这个例子中，你将导入一张上面有很多人的相片，并且将它设置成你的影片背景图案。为了好玩以及获取一个更加特别的效果，你将使用Trace Bitmap命令将这张图片转换成一连串的矢量图，然后将调整过的照片设置成导出为位图。你也可以试着使用转换为位图选项来进行更深一层次的编辑。

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

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

2 对这个例子文件进行解压，并将它保存到桌面。在你使用的时候，你将从资源文件夹中打开这个示例文件，并且在你完成这个例子的时候将你创建的文件保存到bitmap_exercises文件夹里面。

3 下载bitmap_exercises_completed.zip文件，查看其中已经做好了的同一个工程文件，并将它和你的文件进行对比。

跟着下面这些步骤来设置你的背景图片：

1.创建一个新的ActionScript 3 FLA文件，并将它保存到你的工程文件夹下面，命名为exercise1.fla.

2.单击舞台，这样就可以在属性面板中访问到舞台的属性。将舞台大小设置为1024像素x600像素。

3.选择文件->导入->导入到舞台，然后同一文件夹下的导入background.jpg图片，如果你喜欢的话，你可以导入你自己的图片。

4.将你的图片的X,Y坐标设置为0,0.（靠近左边）。

5．选中图片，选择修改->位图->转换位图。在转换位图对话框中调整一些设置，然后点击预览按钮来查看效果。（如图7）这个操作本质上将位图分离成了一组简单的矢量图。点击OK来添加效果。

图7在转换为位图的对话框中输入颜色临界值

1 在矢量图依然被选中的时候，按下F8键来将矢量图转化为一个新的影片剪辑元件，并命名为Background。这一步是必须要有的，主要是为了使用导出为位图的特性；

2 当选中了舞台上的新的影片剪辑元件实例的时候，在属性面板中将渲染项设置为导出为位图。你可以将位图背景属性设置为透明，但是要知道如果图片包含透明区域，你也可以设置为一种不透明的背景色。

3 在属性面板中，将alpha属性值改为25%，主要是为了创建一个水印的背景效果。如果你想的话，你可以通过将背景元素放大来更近距离地显示出照片中的每一个人。由于背景现在由矢量图形组成，在你缩放背景的时候你并不需要担心图片会失真，因为矢量图并不取决于分辨率的大小。

4 选择控制->测试影片来发布SWF文件并且检查你的成果；

5 保存FLA文件。

跟着下面的步骤在Flash外部对位图文件进行编辑

1假设你想保存这张经过多色调分色印的图片，并且在Photoshop或者其它的图形编辑工具中进行编辑。只要选择这个元件实例，右击它，然后从弹出菜单中选择转换为位图选项；

2注意舞台上的实例被新的刚刚添加到库中的Bitmap 1文件所替代了；

3右击库中的Bitmap 1对象，在弹出菜单中选择在Adobe Photoshop CS5中进行编辑或者在….软件中进行编辑选项，从而将位图发送到了外部的图形编辑工具中。当你在Photoshop中打开这个文件的时候，做一些编辑工作，然后保存，在Flash中的文件也会自动进行更新。在Photoshop中，你可以选择文件->另存为到桌面上，来保存位图文件的一份副本，以便在其它的工程中再次使用。

练习2：为广告项目创建一个可变大小的模板

一个更加复杂的情况可能涉及到在不同的工程项目中使用不同背景图片尺寸的问题。例如，如果你正在设计一个网页广告，你可能会被分派去设计一个标语和商标的动画，这个动画要能在不同标准的显示器上进行显示。或者你可能要开发一个游戏或者应用软件，并且要将它们进行移植，根据网络或者移动设备的配置需要来适应不同的屏幕尺寸。

在这个练习中，你将设计一个可以用来开发不同尺寸的网页广告的模板，这些广告使用相同的背景图。在这个例子当中，最好将模板中文件的大小保持在40K以下。为了能够达到这个要求，你要在illustrator中创建一张可缩放的图片，然后使用这张图片。主要为了在每个网页广告中都可以将这张图片当做矢量图来进行复制和调整大小的操作，但是依然将背景图发布为位图格式。

跟着下面这些步骤来设置广告横幅的模板：

1.创建一个ActionScript 3 FLA文件，并且将它命名为exercise2.fla保存到工程文件夹中。

2.将舞台的尺寸设置为300x250像素大小。

3.将默认的图层1重命名为background，并且在它上面创建一个新的图层，命名为border。

4.选中border图层，在舞台的边缘附近画一条1像素的黑色轮廓线，将border图层锁定；

5.选中background图层，选择文件->导入->导入到舞台。浏览并选择同一文件夹下的pattern.ai文件，然后选择打开从而导入文件。在导入到舞台对话框中，点击OK来接受默认的illustrator导入设置。注意在导入了文件之后，圆形图案就会在舞台上显示出来。

6.选择圆形图片并且将它放置到舞台的左上方，将它的坐标设置为0,0。按下F8键来将这张图片转换为一个影片剪辑元件，并且命名为Background。这一步让你可以按需要对图片进行调整大小以及复制的操作，同时只要使用导出为位图特性一次，就可以将它用作背景实例了。

7双击这个位图实例从而可以在时间轴上对它进行编辑。按需要对这个图片进行缩放以及复制来覆盖整个舞台区域。

8点击场景1的链接返回到主时间轴，选择这个背景实例，在选中它的时候，选中这个位图实例，在它被选中的时候，在属性面板中选择导出为位图选项。

9选择控制->测试影片来检查你的成果。在SWF文件仍然被选中的时候，选择查看->频率分析器（在菜单栏的上面）。频率分析器面板显示了并且允许你查看这个影片的大小（如图8）。使用这个方法来快速地查看你的文件大小，主要是为了使模板的大小保持在10k到20k之间（或者更少）。

10保存文件。

图8使用频率分析器来检查广告模板的SWF文件

小贴士：在使用导出为位图特性的时候没有办法去控制生成位图的压缩设置。在你设

计模板的时候使用频率分析器来检查你的SWF的文件大小。如果你发现你需要对位图的压缩方法进行更多的设置，那么可以使用转换为位图特性来对库中的位图项进行调整并进行编辑。

此时你已经建立了广告模板的基础。从现在开始，你应该按需要将商标，标语，以及动画添加到文件中。当你想创建一个适用于不同屏幕尺寸的横幅广告时，只要选择文件->另存为，然后用一个新的名字来保存它。对这个文件进行编辑来改变舞台的大小，同时调整资源的大小来适应屏幕。

跟着下面这些步骤来使用模板创建一个适用于不同尺寸的横幅广告：

1在Flash中打开exercise2.fla文件，并选择文件->另存为，用一个新的名字来对它进行命名并进行保存；

2在属性面板中，将舞台的大小设置为180x150像素；

3将border图层解锁，选中矩形，调整它的大小为180x150。当你完成率重置矩形大小的步骤后，就再次锁定这个图层；

4选定背景实例并双击它来对它的时间轴进行编辑。调整它的大小并且对它的位置进行调整从而适应背景区域；

5选择控制->测试影片来检查你的成果；

6保存文件。

所有的工作都完成了。使用一个模板，你可以跟着上面列出来的步骤继续创建新的SWF文件。如果你想实践，试着以120x600像素，160x600像素，728x90像素这么几个尺寸来创建几个SWF文件，使它们适用于不同标准的横幅尺寸，当然还可以有其它的像素尺寸。一定要在模板文件中放入所有的公有元素，例如图标或者文本，这样的话只要你需要它们，你就可以对他们进行复制。

小贴士：你可以在Flash CS 5.5的工程面板中通过使用创作期间共享库的特性来将这个例子提升到另外一个层次。这就可以让你将插入的背景图片添加到共享库中，这样的话，在图片更新了之后，你就可以一次性更新完所有的广告文件。有关这个方法的更多信息，看看Flash Professional在线文档中的使用Flash工程这篇文章。

使用运行时光栅化特性

ActionScript 3为在运行时创建和操作位图提供了强大的选择项。这些特性在用来创建二维特效以及在Flash游戏以及动画项目中实现更高级的优化时使用的最为普遍。

这部分内容对运行时与光栅化有关的ActionScript操作进行了一些概述。

使用cacheAsBitmap属性

ActionScript 3中的DisplayObject类包含了cacheAsBitmap的属性。其实它与创建FLA文件时属性面板中的缓存为位图特性所达到的效果是一样的，这里它是以一种编程的方式呈现。

这也意味着你将会想到遵循上面提到过的用于创作期间特性的指导教程。对于那些静态的或者不使用缩放和旋转制作动画的显示对象而言，最好是只使用cacheAsBitmap属性。

cacheAsBitmap属性可以通过ActionScript代码应用到显示对象上。你可以在属性面板中对显示对象的实例进行命名并且使用下面的代码来设置这个属性：

myDisplayObject.cacheAsBitmap= true;

使用Bitmap 类

ActionScript 3中的Bitma来p类在代码中用来代表一个位图。你既可以使用Loader对象来加载一个位图，或者在代码中创建一个新的Bitmap实例，然后用一个BitmapData对象对它进行填充。Bitmap类经常用来定义一个位图，除非你使用BitmapData来动态地创建一个位图。

像这样用ActionScript来创建一个空的位图：

import flash.display.Bitmap;
var bmp:Bitmap = new Bitmap();
addChild(bmp);

使用BitmapData类
BitmapData类是ActionScript中用来操作位图的主要工具。你可以使用BitmapData来将绘制的矢量图当做位图用，给位图添加效果以及进行像素级的调整，计算和比较。按照应用程序和游戏项目的规模，它们一般都是使用BitmapData和光栅化来优化动画，页面切换以及实现内容播放。

一个BitmapData实例要用四个参数来进行初始化：宽度，高度，透明度以及填充色。下面的代码给你展示了怎么去创建一个位图：

import flash.display.Bitmap;
import flash.display.BitmapData;
var bmpData:BitmapData = new BitmapData(50,50, true, 0xFFFFAA00);
var bmp:Bitmap = new Bitmap(bmpData);
addChild(bmp);

小贴士：关于使用BitmapDatade的一个非常有趣方面是它可以对一个已有的位图进行像素上的操作，或者它可以用来绘制位图。

练习3：使用ActionScript3 光栅化影片剪辑元件中的一帧

BtimapData类可以通过一个影片剪辑元件中的任何一帧来创建一个位图。这对于运行时优化以及重用图片而言将变得非常方便。由于BitmapData实例可以被很多不同的位图实例共享，这个方法可以在动画以及游戏项目中使用，用于创建重复出现的场景或者消耗更少RAM内存的游戏元素。

在这个练习中，你将只要通过对影片剪辑的某个帧上的矢量图创建一个位图快照，然后就可以使用BitmapData类了。多亏了MyWeb软件提供了在这个工程文件中使用的那张很酷的狮子头像。

跟着下面这些步骤通过一个矢量图来渲染一个位图：

1创建一个新的ActionScript 3FLA文件并且将它保存到工程文件夹下，命名为exercise3.fla；

2第一步是导入整个的行走循环动画。你首先要找准动画的某一帧并将它渲染为一个位图。选择文件->导入->打开外部库，然后显示出一个打开文档的对话框，浏览资源文件夹并找到walkcycle.fla文件，点击打开；

3选择WalkCycle元件，同时对它进行复制。将它粘贴到exercise3.fla库中；

4在WalkCycle元件上右击，在弹出菜单上选择属性。在元件属性对话框中，将类型域改为影片剪辑，同时选上Export for ActionScript选项。这一步也可以让你使用ActionScript来初始化这个元件，这样的话你可以生成一个位图快照。在完成这一步之后，你的库应该和图9中显示的屏幕截图相类似。注意AS Linkage域上显示的是元件的名字。你将在ActionScript中使用链接名来引用这个元件。

图9 在转换为影片剪辑以及打开Export for ActionScript选项之后，库中WalkCyle元件的显示状态

5将默认的图层1的名字设置成actions。在时间轴上的第一个图层（最上面的那个）里面添加ActionScript代码是最好的方法，这个图层是专门用来放置代码的。在很多的情况下，ActionScript 代码会放在actions图层的第一帧的关键帧上；

6选择actions图层第一帧的关键帧，按下F9打开动作面板，在你完成接下来的几步之后，你将要添加那些可以生成位图的代码。先在脚本面板中加入下面的代码来导入在代码中你要引用的类；

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.MovieClip;

import flash.geom.Rectangle;

import flash.geom.Matrix;

7复制并粘贴下面的代码来初始化WalkCycle元件。在你通过它生成一个位图之后，你将会移除这个元件实例，但是此时你可以按你的要求来转换这个矢量图形。注意这一步里面的代码创建了WalkCyle的实例，并且将它放到到了200%，最后将这个实例添加到舞台上。

// 1. Add symbol to stage
var target:MovieClip = new WalkCycle();
target.scaleX = 2;
target.scaleY = 2;
addChild(target);

8接下来，添加下面的代码，这行代码将影片剪辑实例跳到你要寻找的帧上。在这个例子中，你将会跳到第10帧。

// 2. Go to a frame in the symbol
target.gotoAndStop(10);

9添加下面的代码来创建BitmapData实例，注意这里创建了一个有边界限制的对象以及一个矩阵，用于定义元件中图片的位置。BitmapData实例定义了一个包围了图片的框框，这个框框包含了矩形当中处于正确位置的位图，并且将它赋给了一个透明的背景。draw方法将矢量数据复制到了BitmapData实例中。

// 3. Copy the frame to BitmapData
var bounds:Rectangle = target.getBounds(this);
var bmpData:BitmapData = new BitmapData(Math.floor(bounds.width), Math.floor(bounds.height), true, 0);
var bmpMatrix:Matrix = target.transform.matrix;
bmpMatrix.translate(-bounds.x, -bounds.y);
// Draw bitmap
bmpData.draw(target, bmpMatrix);

10添加下面的代码来创建一个位图用于显示BitmapData对象。BitmapData实例作为Bitmap的构造函数参数传入，然后这个位图就被放在了舞台上。

// 4. Render Bitmap instance
var bmp:Bitmap = new Bitmap(bmpData);
bmp.x = (1024-bmp.width)/2;
bmp.y = (600-bmp.height)/2;
addChild(bmp);

11 最后，添加下面这行代码来移除WalkCycle元件。这时候已经不需要它了。

// 5. Remove symbol from the Stage removeChild(target);

12 选择控制->测试影片来检查你的成果。你应该看到狮子文件的第十帧的图片以两倍与原图大小的尺寸显示在舞台的中心。

13 保存文件。

如果你想对这个例子进行更进一步的使用，你可以试着使用相同的BitmapData 实例来生成多个位图。

练习4：使用BitmapData通过矢量动画来创建一个位图动画

矢量动画有的时候会有点缓慢，尤其是如果满屏幕都是很多复杂的元件实例。为了消除这个问题，很多的Flash应用程序以及游戏选择将矢量内容光栅化。你可以循环矢量动画中的所有帧，然后将每一帧渲染为位图。从此，你就可以使用一个ENTER_FRAME事件循环或者一个时间间隔函数来将播放位图帧。

在这个练习中，你将通过一个标准的矢量动画来生成一个位图动画。你将再次使用到狮子的例子，并且创建一个补间动画从而使狮子在舞台上的位置发生改变。行走动画以及补间动画最终都会在位图动画中反映出来。

跟着下面这些步骤来讲一个矢量动画渲染成一个位图动画：

1.创建一个新的ActionScript 3 FLA文件，然后在工程文件夹中将它保存，并命名为exercise4.fla；

2.如果walkcycle.fla文件还没有导入，则再次将walkcycle.fla库导入进来，在walkcycle.fla库中复制WalkCycle元件，并且将它粘贴到exercise4.fla库中。这一次你将使WalkCycle元件的类型位一个图形元件。当帧是以位图的形式来捕获的时候，这一步将允许walk cycle动画里面的帧能够在补间动画中的时间轴中进行显示；

3.按下F8键来创建一个新的影片剪辑元件，并命名为WalkAnimation。在创建新元件的对话框中打开Export forActionScript选项；

4.双击WalkAnimation元件进入它的时间轴；

5.将图层1重命名为animation。将WalkCyle图形元件的一个实例拖入到animation图层的第一帧；

6.将animation图层的时间轴拓展到第48帧；

7.右击WalkCyle实例，在弹出菜单中选择创建补间动画选项。将播放头放在第48帧，并且将WalkCyle实例移动到距离右边界300像素的地方，从而创建了这个行走动画；

此时你已经创建了一个基于矢量图的动画版本。下一个人物是增加ActionScript 代码来生成一个位图动画。

8.返回到主时间轴上，将默认的图层1重命名为actions。选择actions图层的第一帧，并且打开动作面板来添加代码。你将会看到这些脚本和练习3中使用额代码类似，但是，下面的例子包含了更多的代码来获取到每一帧的BitmapData对象并以适当的帧速来播放这个位图动画；

9.复制并粘贴下面的代码，这些代码用来导入你将要引用的用来初始化WalkAnimation元件的类；

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.geom.Rectangle;
import flash.geom.Matrix;
// 1. Add symbol to the Stage
var target:MovieClip = new WalkAnimation();
target.scaleX = 1.5;
target.scaleY = 1.5;
addChild(target);

10.添加下面的代码来找到动画的所有边界。这一步定义了一个足够大的矩形来容纳所有动画的帧。这样，每一帧在结束的时候都是一样的大小，并且帧上的图片

// 2. Get bounds of all frames
var bounds:Rectangle = target.getBounds(this);
var framesTotal:uint = target.totalFrames;
for(var j:uint=0; j<framesTotal; j++)
{
// Go to frame [j]
target.gotoAndStop(j);
// Map out area
var frBounds:Rectangle = target.getBounds(this);
if( frBounds.x < bounds.x )
bounds.x = frBounds.x;
if( frBounds.y < bounds.y )
bounds.y = frBounds.y;
if( frBounds.x + frBounds.width > bounds.width )
bounds.width = frBounds.x + frBounds.width;
if( frBounds.y + frBounds.height > bounds.height )
bounds.height = frBounds.y + frBounds.height;
}

11.添加下面的代码来循环每一帧同时生产一连串的BitmapData对象，每一帧一个对象。注意这一串定义为一个Vector类型。Vector是一个其中每个数据都有一个特定的数据类型的数组。在这个例子中，这里的数据类型是BitmapData。无论什么时候，只要有可能，就使用Vectors来对Flash 项目进行加速。

// 3. Build BitmapData array for all frames
var frameData:Vector.<BitmapData> = new Vector.<BitmapData>(framesTotal, true);
for(var i:uint=0; i<framesTotal; i++)
{
// Go to frame [i]
target.gotoAndStop(i);
// Create bitmap data
var bmpData:BitmapData = new BitmapData(Math.floor(bounds.width), Math.floor(bounds.height), true, 0);
var bmpMatrix:Matrix = target.transform.matrix;
bmpMatrix.translate(-bounds.x, -bounds.y);
// Draw bitmap
bmpData.draw(target, bmpMatrix);
// Add to frame data...
frameData[i] = bmpData;
}

12.复制并粘贴下面的代码，这些代码用来移除元件以及创建位图；

// 4. Remove symbol from stage
removeChild(target);
// 5. Create container for the animation
var bmp:Bitmap = new Bitmap();
bmp.x = 150;
bmp.y = (600-bmp.height)/2;
addChild(bmp);

13.添加下面的代码来创建一个showFrame函数，这个函数用来加载一个新的位图帧。这非常棒，因为你可以给同一个Bitmap实例赋于不同的BitmapData实例。所以这个Bitmap实例成为了BitmapData帧的显示对象。这一步也创建了一个frame变量用来追踪帧的变化以及载入开始的第一帧。

// 6. Create a function to show frames
function showFrame( fr:uint ):void
{
bmp.bitmapData = frameData[fr];
}
var frame:uint = 0;
showFrame(frame);

14.最后，添加下面的代码到一个ENTER_FRAME事件处理函数中，这一步通过每一次播放头进入时间轴上的一个新的帧就显示下一个BitmapData帧从而促成动画的产生。由于主时间轴上只有一个帧，所以ENTER_FRAME事件会以FLA文件的帧速进行重复地调用，在某个时间间隔内形成一个循环，这个事件处理增加了frame变量的值，同时在最后一帧结束，第一帧开始的时候又重置为0了。