案例10--纯代码也能用切图技巧做动画

hi，boys and girls，许久不见，最近都没啥时间给大家带来教程的说，其实我写的一些教程在网上有灰常灰常多的资料，只不过大多数只给出了源码，很多新人看不懂，所以就给大家详细解释一下，说实话，想用几行文字解释清楚一个原理实在是不容易，对于很新很新的新手来说还是一样看不懂我在说什么的，不过我之前强调过，我写的东东不算是手把手教你一路从菜鸟走到高手来，只是算是对你已学知识的一种巩固和应用到实际中的一种练习罢了。
   好了，今天给列位仙家带来的是一种对bitMap以及bitMapData的使用技巧，在flash里想要做动画做得炫，你就必须得熟知这两个玩意儿的用法，现在网上的一些flash技术文章中涉及此二者的文章居多，它们有很多很多的功能和使用技巧，而我们今天就来探讨其中的一种技巧：切图。
   我们在http://help.adobe.com/zh_CN/AS3LCR/Flash_10.0/中可以看到bitmapData中一个共有方法：copyPixels(), 它的作用是把一个bitmapData整体中的一部分像素复制出来给另一个bitmapData，就像你从一个风景相片中看到一棵树挺漂亮的，想把它从这个整体相片中取出来，那就使用我们的这个切图工具吧。那么如何使用之呢？First of all，we 先来看看帮助手册中此方法的参数：
sourceBitmapData:BitmapData — 要从中复制像素的输入位图图像。 源图像可以是另一个 BitmapData 实例，也可以指当前 BitmapData 实例。 
  
sourceRect:Rectangle — 定义要用作输入的源图像区域的矩形。 
  
destPointoint — 目标点，它表示将在其中放置新像素的矩形区域的左上角。 
OK,看到这三个参数就暂时足够我们的需求了，后面的参数都设置有默认值，所以不传参也罢。这三个参数都不难理解哦，第一个参数就是我们要切割的图形对象，如我们上面提到的风景图片；第二个参数传入的是一个矩形类Rectangle（这个类之前没有怎么接触过，不过它并不难使用，只要在初始化时定义好它的左上角左边以及长宽，一个矩形就这么被创建出来喽），这个矩形类就代表我们想切割的一块矩形范围，如上面提到的风景图片中的一棵树；第三个参数指定了将我们切下来的那块图片复制到新的bitmapData中的位置，若要把我们切下来的图片直接扔到一个新的bitmapData而不做任何位置修正的话就传入一个(0,0)点就是了。
   看帮助手册只能获得一个理论上的使用方法，我们坚持做理论结合实际的综合人才就必须……看我S老师的例子，哈哈。先简单地试试手先。看我给出一张图片：
<ignore_js_op> 
   这是一张256 * 256像素的图片，我们看左上角那个人物造型必须英俊，必须有杀气，想把它切下来为我所用，那么我们要先确定我们要切的这块区域，嗯……它在左上角，所以我们要切的矩形范围坐上角坐标就是(0,0),长度么应该是256 / 4 宽度也是 256 / 4 因为这图是均匀分布的，一行有4个人物，一列也有4个人物，那每个人物所占区域一定是图片总长、宽的四分之一喽。OK啦，把这个矩形对象传到我们的copyPixels()方法中去：

1. [Embed(source="melee.png")]
2.         private var resource:Class;
3.                 
4.         private var displayBMP:Bitmap;
5.         private var displayBMPD:BitmapData;
6.         private var sourceBMPD:BitmapData;
7.         private var i:int = 0;
8.         public function Main()
9.         {
10.             sourceBMPD = (new resource() as Bitmap).bitmapData; //先拿到目标图像数据
11.             displayBMP = new Bitmap(); //这是我们用来盛放切下来的图像数据并显示的东东哦
12.             addChild( displayBMP );
13.                    displayBMPD = new BitmapData(64,64); //切图开始
14.            displayBMPD.copyPixels( sourceBMPD, new Rectangle( 0, 0, 64, 64 ), new Point( 0, 0 ) );
15.            displayBMP.bitmapData = displayBMPD; //切下来的BitmapData必须放到已添加至舞台的bitmap中才能显示出来哦
16.                }

复制代码

怎么样，列位爱卿，你们看到正确的结果了吗？如果看到了，恭喜你，you made it!不过这只算是小试牛刀哦，我们现在想做一个动画咋办？这图片一行的四张图片看起来可以组成一个连贯的攻击动作，那我们就试试看把这四个图片组成一个动画吧。
   做动画之前我们先想想具体的思路是怎样的，我们知道，一个位图bitmap的外观改变无非就是其内部的bitmapData发生了改变而已，那我们就隔一阵子改变一下它的BitmapData好了，不过使用enterFrame来改变的话动画会播放太快了，因为一般的swf帧频都有30多，就是一秒播放30多帧，此时我们就需要推出一个新的计时器类：Timer。
   提到Timer各位一定对其有所耳闻甚至很熟悉了，具体的使用方法这里就不多啰嗦了哈。直接看代码起：

1.                 [Embed(source="melee.png")]
2.                 private var resource:Class;
3.                 
4.                 private var displayBMP:Bitmap;
5.                 private var displayBMPD:BitmapData;
6.                 private var sourceBMPD:BitmapData;
7.                 private var i:int = 0;
8.                 public function Main()
9.                 {
10.                         sourceBMPD = (new resource() as Bitmap).bitmapData;
11.                         displayBMP = new Bitmap();
12.                         addChild( displayBMP );
13.                         
14.                         var timer:Timer = new Timer(100); //限定计时器每100毫秒触发一次
15.                         timer.addEventListener(TimerEvent.TIMER, timerHandler);
16.                         timer.start(); //启动计时器
17.                 }
18.                 
19.                 private function timerHandler( event:TimerEvent ):void{
20.                         displayBMPD = new BitmapData(64,64);
21.                         displayBMPD.copyPixels( sourceBMPD, new Rectangle( i * 64, 0, 64, 64 ), new Point( 0, 0 ) );//因为我们要切割的4张图片都在一行上，所以只需要改变切图的x位置即可
22.                         displayBMP.bitmapData = displayBMPD;
23.                         if(i==3)i=0; //若是当前所切图已到行尾最后一张图片，那就从行首第一张图片从新开始切过
24.                         else i++;
25.                 }
26.        

复制代码

这个代码应该不难理解的哦？若你看到了你期望的结果，为你自己鼓掌吧， you made it again~!
    明天再给大家讲讲用copypixels方法来做图片的分解效果吧~