BitmapData动态效果

一、计算机中显示的图形一般可以分为两大类——矢量图和位图。


矢量图(vector):使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。众所周知Flash就是一款矢量动画制作软件。在AS中使用的填色(beginFill)，画线(lineTo)等命令都是基于对矢量图的操作。


位图(Bitmap):一般是用于照片品质的图像处理，是由许多像小方块一样的像素组成的图形。简单地说，位图就是以无数的色彩点组成的图案。位图(Bitmap)也就是我们今天要介绍的。


二者比较:

1.矢量图可以无限放大，而且不会失真； 而位图会失真。

2.位图由像素组成而矢量图由矢量线组成。

3.位图可以表现的色彩比较多；而矢量图则相对较少。

4.矢量图体积小，但比较消耗计算资源；位图则比较消耗内存资源，但对计算资源消耗小。

二、BitmapData类的概念

BitmapData类可用于在文档中创建可任意调整大小的透明或不透明位图图像，并且可以在运行时以各种方式对它们进行处理。可以把
BitmapData对象看成一个特殊的数组，专门用来存储位图的像素点阵信息。如果一个位图大小是100*100，那么BitmapData中就好比一
个存储在一个100*100的二维数组，对应存储这10000像素的颜色值。

三、BitmapData类的使用

import flash.display.BitmapData;

//导入BitmapData类

var bm = new
BitmapData(width,height,transparent,fillcolor);

//实例化

四、BitmapData构造函数

public BitmapData(width, height, [transparent], [fillColor])

width(宽):位图数据的宽度(像素)；

height(高): 位图数据的高度(像素)；

[transparent(透明度)]:
是否支持每个像素具有不同的透明度；

[fillcolor（添充色）]:
用于填充位图图像区域。默认为0xFFFFFFFF(白色)

*[中括号]表示可选参数

例如(创建一个100*100的位图数据):

import flash.display.BitmapData;

var bm:BitmapData = new
BitmapData(100,100,false,0xffff00)

五、BitmapData.draw()方法

Draw()方法简单地理解为:复制像素到BitmapData对象中。

例如：在主场景有一个影片剪辑，实例名为"pic"

import flash.display.BitmapData;

var bm:BitmapData = new BitmapData(100, 100);

bm.draw(pic);
//bm复制pic的像素

_root.createEmptyMovieClip("mc", 10);

mc._x = mc._y=150;

mc.attachBitmap(bm,
1);
//用mc加载位图数据bm，深度为1。

*注意:位图在影片剪辑(pic)中的位置：



在使用draw()方法复制像素时，永远是从mc的(0,0)点开始取。
所以小于(0,0)位置的像素都不会被取到



应正确放置位图在影片剪辑中的位置（注册点在左上(0,0)）

六、Rectangle
类
所以介绍Rectangle
类是因为它常与BitmapData类配合使用。

1.作用:在BitmapData类中用于定义位图图像大小和位置的矩形。


2.Rectangle 类的使用
import
flash.geom.Rectangle;

public Rectangle(x, y, width, height)

x - 矩形左上角的 x 坐标。

y - 矩形左上角的 y 坐标。

width - 矩形的宽度，以像素为单位。

height - 矩形的高度，以像素为单位。


例如(一个100*100的矩形):

import flash.geom.Rectangle;

myRect = new Rectangle(0,0,100,100);

好啦，说了这么多理论知识，都是为我们的实例做铺垫的，下面就开始动手操作吧。


实例1:放大镜效果[BitmapData.
copyPixels()]


思路:1.点击图片后，从点击处复制一块(100*80)像素；


   
2.把复制出来的像素(bm2)加载入mc中，并放大mc。
步骤一：


在主场景中放入一位图，保存为影片剪辑，实例名为"pic"，放入舞台中；



注意:该位图在pic中的注册点应为左上(0,0)，以确保正确显示。

步骤二:
加入AS代码：

import
flash.display.BitmapData;

import flash.geom.Rectangle;

var bm1:BitmapData = new BitmapData(pic._width, pic._height);

bm1.draw(pic);
//创建一个与图片大小相同的位图数据类，并把pic所有像素复制进去


pic.onMouseDown =
function() {

var bm2:BitmapData = new BitmapData(100, 80, true, 0);

bm2.copyPixels(bm1, new Rectangle(_xmouse,
_ymouse, 100, 80), new Point(0,
0));
//从bm1中复制一块像素到bm2,像素起点是鼠标点击的处，大小为100*80


_root.createEmptyMovieClip("mc", 10);

mc.attachBitmap(bm2,
1);
//显示bm2中的位图

mc._x = _xmouse;

mc._y = _ymouse;

mc._xscale =
mc._yscale=150;
//放大mc

};
_root.onMouseUp = function()
{

mc.removeMovieClip();

};


实例2:卷动图效果[BitmapData.
copyPixels()]


思路:1.把图片纵向切为num条，并为每条取像素；

   
2.创建num个影片剪辑，分别存放每条像素；

   
3.设置每个影片剪辑的X坐标；Y坐标一块比一块高；

   
4.结合Tween类使每个条都从天上落下。
步骤一：



在主场景中放入一位图，保存为影片剪辑，实例名为"pic"，放入舞台中；



注意:该位图在pic中的注册点应为左上(0,0)，以确保正确显示。

步骤二:

加入AS代码：

import
flash.display.BitmapData;

import flash.geom.Rectangle;

import mx.transitions.Tween;

import mx.transitions.easing.*;

var num = 80;
//把图分成80份
var pW =
pic._width/num;
//确定每份的宽度为
var
pH =
pic._height;
//因为切成竖条形所以高度不变
var
bm1:BitmapData = new BitmapData(pic._width, pic._height);

bm1.draw(pic);

pic._visible = false;
for (i=0; i

var bm2:BitmapData = new BitmapData(pW,
pH);

bm2.copyPixels(bm1, new
Rectangle(i*pW, 0, pW, pH), new Point(0,
0));
//用i变量*每块宽度，确定取像素的位置

var
p:MovieClip = _root.createEmptyMovieClip("mc"+i, i);

p.attachBitmap(bm2,
this.getNextHighestDepth());

p._x =
i*pW;
//排好X坐标
p._y
=
-i*pH/5;
//把Y坐标置到舞台上面去,一块比一块高

new Tween(p,
"_y", Bounce.easeOut, p._y, 0, (i/10+1),
true);
//------------------试替换代码看看效果-------------------


//new Tween(p, "_y", Back.easeInOut, p._y, 0,
(i/10+1), true);

//new Tween(p, "_y", Strong.easeIn, p._y, 0,
(i/10+1), true);

//new Tween(p, "_y", Elastic.easeOut, p._y, 0,
(i/10+1), true)

}


实例3:位图填充[BitmapData.
beginBitmapFill()]


思路:
1.用loadBitmap("id")加载位图，注意:这是个静态方法;
     
2.创建一个MC，绘出一个与舞台同样大小的矩形，并进行填充.


步骤一：
   

   
任意导入一张位图，在库中右击该位图->链接->标识符为"pic"

步骤二:

加入AS代码：

import
flash.display.BitmapData;

var bm:BitmapData = BitmapData.loadBitmap("pic");
//根据屏幕的大小来绘制绘画区域,用以beginBitmapFill来添充

_root.createEmptyMovieClip("MC",
10);

with (MC) {

beginBitmapFill(bm);
moveTo(0,
0);

lineTo(Stage.width, 0);

lineTo(Stage.width, Stage.height);

lineTo(0, Stage.height);

lineTo(0, 0);

endFill();

}


实例4:位图切片[BitmapData.
beginBitmapFill()]


思路:
1.点击到原图上，进行画圈，并在圈中填充位图；

      2.点击在切片上，进行拖动。


步骤一：


在主场景中放入一位图，保存为影片剪辑，实例名为”pic”，放入舞台中；



注意:该位图在pic中的注册点应为左上(0,0)，以确保正确显示。

步骤二:
加入AS代码：

import
flash.display.BitmapData;

var bm:BitmapData = new BitmapData(pic._width, pic._height);

bm.draw(pic);

var draw:Boolean = false;
pic.onPress = function() {

if (mc.hitTest(_xmouse, _ymouse, true)) {

  mc.startDrag();
  //如果鼠标在mc上，开始拖动它

} else {

  draw = true;

  mc =
_root.createEmptyMovieClip("mc", 1);
  mc.lineStyle(2,
0xFF0000);

  mc.beginBitmapFill(bm);

  mc.moveTo(_xmouse-this._x,
_ymouse-this._y);
  //移动起点到此

}

};
pic.onMouseMove = function() {

if (draw) {

  mc.lineTo(_xmouse-this._x,
_ymouse-this._y);
  //如果draw状态为真，移动鼠标就draw  

}

};
pic.onMouseUp = function() {

if (draw) {

  draw = false;

  mc.endFill();
  //填充结束

} else {

  mc.stopDrag();

}

};

关于BitmapData类的应用还有很多很多，一句两句还说不完，今后再做介绍。
最后共享一些网络上的相关资料：
(闪吧):

flash 8 BitmapData类的应用

Flash8平铺网页背景

webstudio(万博思图)：

Flash8 BitmapData