最新更新 sitemap 网站制作设计本站搜索
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442
当前位置:首页 > 网络设计学院 > Flash教程

flash教程 BitmapData 类的应用

日期:03-08    来源:中国设计秀    作者:cnwebshow.com

BitmapData类是什么N9n中国设计秀

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

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

Copy & Paste N9n中国设计秀
复制和粘贴N9n中国设计秀

也许最好的例子就是从最基础的复制和粘贴操作开始。想象一下通过BMD从图像上来复制和粘贴像素。例如,在flashmx2004或是更早的版本中,载入图像到movieclip中然后在movieclip中复制来查看所复制的图像是不可能的。因为任何载入的图像都必须重新加载,如果你想看更多的复制内容。 N9n中国设计秀
我们当然也可以在创作时手动的导入图片,也许这是最简单方法,我们将在第一例子中使用这种方。 N9n中国设计秀
N9n中国设计秀
下载第一个范例文件sample fla(bmap.zip),在你继续进行之前,先快速的看一下这个文件。 N9n中国设计秀
这里面有三个对象是关于”复制和粘贴”的. N9n中国设计秀
1.源图像(source) N9n中国设计秀
2.创建的BitmapData实例(bmap) N9n中国设计秀
3.目标MovieClip(dest2) N9n中国设计秀
对于目标MovieClip的创建我们可以选择两种方式 N9n中国设计秀
1.手动创建一个MovieClip,本例中设置的长宽分别为100. N9n中国设计秀
2.以使用CreateEmptyMovieClip();来创建。 N9n中国设计秀
在我们的第一个例子中,我们使用的方法是第一种,在创作时创建一个movieClip. N9n中国设计秀
N9n中国设计秀
Example 1: N9n中国设计秀
范例1 N9n中国设计秀
N9n中国设计秀
我们已经放置了两个MovieClip在主场景中。 N9n中国设计秀
第一个MovieClip中包含一个图片,大小是100*100像素,实例名称为source.第二个MovieClip包含一个橙色的图形,大小也是100*100像素,这个MC的实例名为dest2. N9n中国设计秀
为了复制整张图像,我们可以如下来做:N9n中国设计秀

代码:N9n中国设计秀

bmp=new flash.display.BitmapData(100,100,false,0); N9n中国设计秀
bmap.draw(source); N9n中国设计秀
dest2.attachBitmap(bmp,1); N9n中国设计秀
 N9n中国设计秀

 N9n中国设计秀

 N9n中国设计秀

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

代码:N9n中国设计秀

destinationMC.attachBitmap(someBMDinstance,depth);N9n中国设计秀

 N9n中国设计秀

注意:attachBitmap实际上有4个参数,全部参数如下: N9n中国设计秀
attachBitmap(bmp:BitmapData, depth:Number, pixelSnapping:String, smoothing:Boolean) N9n中国设计秀
前两个参数一个是bitmapdata类的引用名,一个是深度。 N9n中国设计秀
第三个参数pixelSnapping(像素对齐)有三种选择, N9n中国设计秀
Auto:当位图没有进行变形或是旋转来进行像素对齐。 N9n中国设计秀
Always:不管位图是否进行过变形或是旋转都要进行像素对齐。 N9n中国设计秀
Never:从不进行像素对齐。 N9n中国设计秀
默认下为auto. N9n中国设计秀
第四个参数:smoothing(光滑):它是布尔值,用来决定是否对缩放过的图像进行光滑。 N9n中国设计秀
N9n中国设计秀
在本例中我们只需要用到前两个参数。在你测试运行的时候,你就会发现源图像已经被复制到目标MC中了。 N9n中国设计秀
N9n中国设计秀
那么,现在我们回到开始我们说过的使用创作时手动创建或是使用createEmptyMovieClip()创建的MovieClip。当我们将BMD的实例粘贴到我们创建的MC中时,我们会想到一些问题,比如,如果BMD实例大于source影片剪辑,或是目标MC(dest2)小于BMD实例等等会发生什么呢。 N9n中国设计秀
N9n中国设计秀
下面我们将用几张图片的形式来说明问题: N9n中国设计秀
需要注意的是,图片下面说明文字中的source源和dest2目标MC不是指的是影片剪辑本身而指是影片剪辑内的内容,如果要指定影片剪辑会加说明。N9n中国设计秀

N9n中国设计秀

 N9n中国设计秀

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

下面是我们实验的内容:N9n中国设计秀

N9n中国设计秀

 N9n中国设计秀

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

N9n中国设计秀

 N9n中国设计秀

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

N9n中国设计秀

 N9n中国设计秀

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

 N9n中国设计秀

N9n中国设计秀

 N9n中国设计秀

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

N9n中国设计秀

 BMD实例内容小于BMD的大小,仍获取整张图像。N9n中国设计秀

Star 1 Example: N9n中国设计秀
星星范例:N9n中国设计秀

N9n中国设计秀

在这个范例中我们同时也会用filter.你可以看一篇教程flash8 mealstrom基础的用法。 N9n中国设计秀
N9n中国设计秀
打开源文件后,你看的AS一层中的代码,如下:N9n中国设计秀

代码:N9n中国设计秀

 N9n中国设计秀

 N9n中国设计秀

var w:Number = Stage.width; N9n中国设计秀
var h:Number = Stage.height; N9n中国设计秀
var star:MovieClip; N9n中国设计秀
N9n中国设计秀
//版本检测 check N9n中国设计秀
var versionNums:Array = $version.toString().split(" "); N9n中国设计秀
inform.text = (Number(versionNums[1].substr(0,1)) < 8) ? "You need the Flash 8 player to view this movie!" : "" ; N9n中国设计秀
N9n中国设计秀
//Create children N9n中国设计秀
var sourceMC:MovieClip = this.createEmptyMovieClip("sourceMC", this.getNextHighestDepth()); N9n中国设计秀
var destMC:MovieClip = sourceMC.createEmptyMovieClip("destMC", sourceMC.getNextHighestDepth()); N9n中国设计秀
var screenShot = new flash.display.BitmapData(w, h, true, 0); N9n中国设计秀
//-------------------------------------------| N9n中国设计秀
destMC.onEnterFrame = function() N9n中国设计秀
{ N9n中国设计秀
    drawStar(); N9n中国设计秀
    capture(); N9n中国设计秀
    drawToScreen(); N9n中国设计秀
} N9n中国设计秀
//-------------------------------------------| N9n中国设计秀
function drawStar() N9n中国设计秀
{ N9n中国设计秀
    star = sourceMC.attachMovie("star", "star", 1); //attach at 1 N9n中国设计秀
    glow.color = Math.floor(Math.random()*0xFFFFFF); N9n中国设计秀
    star.filters = [glow,bevel]; N9n中国设计秀
    star._x = getRandomInt(w, (star._width/2)); N9n中国设计秀
    star._y = getRandomInt(h, (star._height/2)); N9n中国设计秀
} N9n中国设计秀
//-------------------------------------------| N9n中国设计秀
function capture() N9n中国设计秀
{ N9n中国设计秀
    destMC._visible = false; N9n中国设计秀
    screenShot.draw(sourceMC); N9n中国设计秀
    destMC._visible = true; N9n中国设计秀
} N9n中国设计秀
//-------------------------------------------| N9n中国设计秀
function drawToScreen() N9n中国设计秀
{ N9n中国设计秀
    destMC.attachBitmap(screenShot, 1); //attach at 1 N9n中国设计秀
} N9n中国设计秀
//-------------------------------------------| N9n中国设计秀
function getRandomInt(max, sub):Number N9n中国设计秀
{ N9n中国设计秀
    return Math.floor(Math.random() * ((max+1)-(sub*2)) + sub); N9n中国设计秀
}N9n中国设计秀

 N9n中国设计秀

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

destMC.onEnterFrame = function() N9n中国设计秀
{ N9n中国设计秀
    drawStar(); N9n中国设计秀
    capture(); N9n中国设计秀
    drawToScreen(); N9n中国设计秀
} N9n中国设计秀
 N9n中国设计秀

 N9n中国设计秀

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

代码:N9n中国设计秀

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

 N9n中国设计秀

drawStar:(绘制星星)N9n中国设计秀

我们实际上粘贴的是一个放在库中之前准备好的图像,注意,我们在粘贴时用了一个固定的深度以便当有新的星星重复时可以被替换掉。源和目标剪辑的命名方是很有用的。你将在capture()函数中看到为什么。 N9n中国设计秀
N9n中国设计秀
第二行改变了glow滤镜的色彩,你可以在“filter“层的代码上看到,这里面我们所用的Math.random()来创建随机的黑到白之间的色彩。 N9n中国设计秀
第三行,我们指定滤镜给MC. N9n中国设计秀
最后使用了我自定义的函数getRandomInt(),我们设置x和y的位置是一个随机的整数,并且在屏幕边框之内。 N9n中国设计秀
capture:(缓冲)N9n中国设计秀

下面这个函数将是很简单的。N9n中国设计秀

代码:N9n中国设计秀

function capture() N9n中国设计秀
{ N9n中国设计秀
    destMC._visible = false; N9n中国设计秀
    screenShot.draw(sourceMC); N9n中国设计秀
    destMC._visible = true; N9n中国设计秀
}N9n中国设计秀

 N9n中国设计秀

这里面我们先让我们的目标mc不可见,为什么?因为我们在循环过程中目标MC中将会包含一个我们之前的原始星星,我们只是需要用其它的星星,另外我也更想做到的是观看bitmapData的工作过程。 N9n中国设计秀
N9n中国设计秀
draw方法(用在下一个函数中)不会清除掉bitmapData.而是将新数据和老的数据混合,因为我们不想看到先是一屏,然后空了,再来一屏的那种效果。需要注意的是在使用glow的时候星星会是正常的。有时有可能会出glow 周围不正常的现象。 N9n中国设计秀
如下是你希望的效果:N9n中国设计秀

N9n中国设计秀

N9n中国设计秀
下面这个可能不是你想看到的效果:N9n中国设计秀

N9n中国设计秀

 N9n中国设计秀

好,在结束我们的capture() 函数时,我们让destMc显示出来就可以。 N9n中国设计秀
N9n中国设计秀
drawToScreen:(绘至屏幕上)N9n中国设计秀

DrawToScreen函数的功能就象的它的标题一样。目的是要将它绘制在屏幕上。如下代码:N9n中国设计秀

代码:N9n中国设计秀

function drawToScreen() N9n中国设计秀
{ N9n中国设计秀
destMc.attachBitmap(screenshot,1); N9n中国设计秀
} N9n中国设计秀
 N9n中国设计秀

 N9n中国设计秀

最后,你可以测试你的影片了。 N9n中国设计秀
N9n中国设计秀
小结:在这个教程中每次运行时我都隐藏目标MC,除了这之外,你还可以对它进行其它的操作,例好,更换Alpha,xscale.yscale等等属性,你还可以加入其它的滤镜效果,如blur,如果你随意拖动一个矢量图形对象,你可以使用cacheAsBitmap以使处它变得更容易。 N9n中国设计秀
N9n中国设计秀
如果你想清除BMD中的内容,你需要使用fillRect(rectangle,color);为了做到这一点,你需要使用geom 类来创建一个矩形,请参看之前的教程flash8 maelstrom 基础 N9n中国设计秀
大致如下:N9n中国设计秀

代码:N9n中国设计秀

var rect = new flash.geom.Rectangle(0, 0, width, height); N9n中国设计秀
bmap.fillRect(rect, color);N9n中国设计秀

 N9n中国设计秀

希望通过些教程让你充分理解bitmapData class的用法。完。Enjoy!N9n中国设计秀