flash 8 BitmapData类的应用

作者: egoldy

性质: 翻译

阅读次数: 21809

发表时间: 2005-08-28 08:38:36


声明:本教程译自http://www.nwebb.co.uk,英文版权归原作者所有,如需转载本站中文译稿,请联系本站。
在读本教程之前建议先读flash8 maelstrom基础教程


BitmapData类是什么
Flash.display.bitmapData允许我们使用像素层级来控制位图,这意味着什么呢,好,在下面的简介中我们将简介它能做什么。
·复制和粘贴整个图像,部分图案。或者是每一个独立的像素。
·鉴别或是改变像素或是像素群组的颜色。
·应用新的FLASH滤镜。
·创建随机的像素(noise或perlin noise)等等。
它还可以将bitmapDate应用到视频上。

创建bitmapData 类的实例
我们用如下的方法创建bitmapData实例
bmap=new flash.display.BitmapData(100,100,false,0);
BitmapData类提供了四个参数
    width(number数值,像素宽)
    Height(number数值,像素高)
    Alpah值(boolean布尔值)
    Default background color fill(默认添充的背景色)(number数值)
因此从上面代码,我们可以看出我创建了一个100*100方形,不允许alpha透明,指定0为背景色,也就是黑色。
注意:到目前为,我不能确定是否alpha值只与BMD的背景alpha相关连,或是它是否只是允许图像中的像素透明。

Copy & Paste
复制和粘贴

也许最好的例子就是从最基础的复制和粘贴操作开始。想象一下通过BMD从图像上来复制和粘贴像素。例如,在flashmx2004或是更早的版本 中,载入图像到movieclip中然后在movieclip中复制来查看所复制的图像是不可能的。因为任何载入的图像都必须重新加载,如果你想看更多的 复制内容。
我们当然也可以在创作时手动的导入图片,也许这是最简单方法,我们将在第一例子中使用这种方。

下载第一个范例文件sample fla(bmap.zip),在你继续进行之前,先快速的看一下这个文件。
这里面有三个对象是关于”复制和粘贴”的.
      1.源图像(source)
      2.创建的BitmapData实例(bmap)
      3.目标MovieClip(dest2)
对于目标MovieClip的创建我们可以选择两种方式
    1.手动创建一个MovieClip,本例中设置的长宽分别为100.
      2.以使用CreateEmptyMovieClip();来创建。
在我们的第一个例子中,我们使用的方法是第一种,在创作时创建一个movieClip.

Example 1:
范例1


我们已经放置了两个MovieClip在主场景中。
第一个MovieClip中包含一个图片,大小是100*100像素,实例名称为source.第二个MovieClip包含一个橙色的图形,大小也是100*100像素,这个MC的实例名为dest2.
为了复制整张图像,我们可以如下来做:

bmp=new flash.display.BitmapData(100,100,false,0);
bmap.draw(source);
dest2.attachBitmap(bmp,1); 

第一行我们创建了BMD的实际,名为bmp并且它的大小与我们图像的大小是一致的。第二行,在BMD上复制图像,你可以用下例语法将一个movieClip放在BMD中。
SomeBMDinstance.draw(someMovieClip);
最后我们想看到在BMD上的复制结果,当前你并不能看到结果直到你将它贴加到一个MovieClip上为止。如下语法:

destinationMC.attachBitmap(someBMDinstance,depth);

注意:attachBitmap实际上有4个参数,全部参数如下:
attachBitmap(bmp:BitmapData, depth:Number, pixelSnapping:String, smoothing:Boolean)
前两个参数一个是bitmapdata类的引用名,一个是深度。
第三个参数pixelSnapping(像素对齐)有三种选择,
           Auto:当位图没有进行变形或是旋转来进行像素对齐。
    Always:不管位图是否进行过变形或是旋转都要进行像素对齐。
    Never:从不进行像素对齐。
默认下为auto.
第四个参数:smoothing(光滑):它是布尔值,用来决定是否对缩放过的图像进行光滑。

在本例中我们只需要用到前两个参数。在你测试运行的时候,你就会发现源图像已经被复制到目标MC中了。

那么,现在我们回到开始我们说过的使用创作时手动创建或是使用createEmptyMovieClip()创建的MovieClip。当我们将 BMD的实例粘贴到我们创建的MC中时,我们会想到一些问题,比如,如果BMD实例大于source影片剪辑,或是目标MC(dest2)小于BMD实例 等等会发生什么呢。

下面我们将用几张图片的形式来说明问题:
需要注意的是,图片下面说明文字中的source源和dest2目标MC不是指的是影片剪辑本身而指是影片剪辑内的内容,如果要指定影片剪辑会加说明。

souce源里面的内容:100*100px(影片剪辑本身未缩放);
dest2目标剪辑的内容:100*100px(影片剪辑本身未缩放)
BMD实例:(这里面的大小是指创建时指定的大小,看代码)100*100px.

下面是我们实验的内容:

souce源里面的内容:100*100px(影片剪辑本身未缩放);
dest2目标剪辑的内容:50*50px(内容进行了缩放,影片剪辑本身未缩放)
BMD实例: 100*100px.
注意:虽然目标里的内容只有源MC里内容的一半,但复制的内容大小仍是BMD实例的大小。

souce源里面的内容:100*100px(影片剪辑本身未缩放);
dest2目标剪辑的内容:100*100px(内容未进行缩放,影片剪辑本身缩放50*50)
BMD实例: 100*100px.
我们看出整个源的内容已经被获取,并复制到目标中,由于目标进行了缩放,所以图像也进行了缩放。

souce源里面的内容:100*100px(影片剪辑本身未缩放);
dest2目标剪辑的内容:50*50px(内容进行缩放,影片剪辑本身缩放200*200)
BMD实例: 100*100px.
目标MC的内容缩了,目标MC的大小缩放到200*200,发现BMD实例复制后的图像与目标的内容大小无关,而与目标MC的大小有关。

如果BMD实例的大小小于源MC中的内容大小,只复制了部分内容,而不是整个图像。

BMD实例内容小于BMD的大小,仍获取整张图像。

 

Star 1 Example:
星星范例:


演示范例
你可以从这里下载源文件:stars.zip。我们在下面需要用到它。
在这个范例中我们同时也会用filter.你可以看一篇教程flash8 mealstrom基础的用法。

打开源文件后,你看的AS一层中的代码,如下:

var w:Number = Stage.width;
var h:Number = Stage.height;
var star:MovieClip;

//版本检测 check
var versionNums:Array = $version.toString().split(" ");
inform.text = (Number(versionNums[1].substr(0,1)) < 8) ? "You need the Flash 8 player to view this movie!" : "" ;

//Create children
var sourceMC:MovieClip = this.createEmptyMovieClip("sourceMC", this.getNextHighestDepth());
var destMC:MovieClip = sourceMC.createEmptyMovieClip("destMC", sourceMC.getNextHighestDepth());
var screenShot = new flash.display.BitmapData(w, h, true, 0);
//-------------------------------------------|
destMC.onEnterFrame = function()
{
    drawStar();
    capture();
    drawToScreen();
}
//-------------------------------------------|
function drawStar()
{
    star = sourceMC.attachMovie("star", "star", 1); //attach at 1
    glow.color = Math.floor(Math.random()*0xFFFFFF);
    star.filters = [glow,bevel];
    star._x = getRandomInt(w, (star._width/2));
    star._y = getRandomInt(h, (star._height/2));
}
//-------------------------------------------|
function capture()
{
    destMC._visible = false;
    screenShot.draw(sourceMC);
    destMC._visible = true;
}
//-------------------------------------------|
function drawToScreen()
{
    destMC.attachBitmap(screenShot, 1); //attach at 1
}
//-------------------------------------------|
function getRandomInt(max, sub):Number
{
    return Math.floor(Math.random() * ((max+1)-(sub*2)) + sub);
} 

我获取了屏幕的宽和高,动态创建了两个movieClip.一个是sourceMc.另一个是destMc.然后在创建bitmapData的实例。
下一步,我加入了一些代码在onEnerFrame方法中:

destMC.onEnterFrame = function()
{
    drawStar();
    capture();
    drawToScreen();
} 

We draw a star on the stage, take a screenshot, and finally transfer that screenshot to a MovieClip.
我们在场景中绘制星,然后将它传递给一个MovieClip.
下面是”draw“的代码:

function drawStar()
{
    //attach star at depth 1
    var star = sourceMC.attachMovie("star", "star", 1);
    glow.color = Math.floor(Math.random()*0xFFFFFF);
    star.filters = [glow,bevel];
    star._x = getRandomInt(w, (star._width/2));
    star._y = getRandomInt(h, (star._height/2));
} 

 

drawStar:(绘制星星)
我们实际上粘贴的是一个放在库中之前准备好的图像,注意,我们在粘贴时用了一个固定的深度以便当有新的星星重复时可以被替换掉。源和目标剪辑的命名方是很有用的。你将在capture()函数中看到为什么。

第二行改变了glow滤镜的色彩,你可以在“filter“层的代码上看到,这里面我们所用的Math.random()来创建随机的黑到白之间的色彩。
第三行,我们指定滤镜给MC.
最后使用了我自定义的函数getRandomInt(),我们设置x和y的位置是一个随机的整数,并且在屏幕边框之内。
capture:(缓冲)
下面这个函数将是很简单的。

function capture()
{
    destMC._visible = false;
    screenShot.draw(sourceMC);
    destMC._visible = true;
} 

这里面我们先让我们的目标mc不可见,为什么?因为我们在循环过程中目标MC中将会包含一个我们之前的原始星星,我们只是需要用其它的星星,另外我也更想做到的是观看bitmapData的工作过程。

draw方法(用在下一个函数中)不会清除掉bitmapData.而是将新数据和老的数据混合,因为我们不想看到先是一屏,然后空了,再来一屏的那种效果。需要注意的是在使用glow的时候星星会是正常的。有时有可能会出glow 周围不正常的现象。
如下是你希望的效果:

下面这个可能不是你想看到的效果:

好,在结束我们的capture() 函数时,我们让destMc显示出来就可以。

drawToScreen:(绘至屏幕上)
DrawToScreen函数的功能就象的它的标题一样。目的是要将它绘制在屏幕上。如下代码:

function drawToScreen()
{
destMc.attachBitmap(screenshot,1);
} 

最后,你可以测试你的影片了。

小结:在这个教程中每次运行时我都隐藏目标MC,除了这之外,你还可以对它进行其它的操作,例好,更换Alpha,xscale.yscale等 等属性,你还可以加入其它的滤镜效果,如blur,如果你随意拖动一个矢量图形对象,你可以使用cacheAsBitmap以使处它变得更容易。

如果你想清除BMD中的内容,你需要使用fillRect(rectangle,color);为了做到这一点,你需要使用geom 类来创建一个矩形,请参看之前的教程flash8 maelstrom 基础
大致如下:

var rect = new flash.geom.Rectangle(0, 0, width, height);
bmap.fillRect(rect, color); 

希望通过些教程让你充分理解bitmapData class的用法。完。Enjoy!

 

讨论本教程

服务项目_SERVICE

关于我们

万博思图(北京)信息技术有限公司,专业的flash,flex开发团队,5年经验。公司致力于互联网上的业务的开展,对于互动网站行销,互联网应用程序开发有成熟的解决方案。我们关注互联网市场动态,关注新技术,更注重在新的领域不断探索发现。
万博思图业务内容主要包括企业品牌Flash网站开发,企业形象宣传Flash设计,动画,多媒体演示,Flex企业级应用程序开发,拥有众多成功案例,欢迎来电咨询。
 
COPYRIGHT BY WEBSTUDIO INTERACTIVE DESIGN Co.,Ltd. ALL RIGHTS RESERVED.
公司地址: 北京市朝阳区朝外SOHO D 座727室 邮编: 100026 EMAIL: WEBSTUDIO@WEBSTUDIO.COM.CN
电话: 010-59070059 / 010-86390986-802  手机: 13693660520 传真: 010-59070059-801
京公网安备:110108006741      京ICP备08002333号-4
王先生