快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

flash 8 BitmapData 类的应用

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:
星星范例:

« Full Screen »



你可以从这里下载源文件: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!




返回类别: Flash教程
上一教程: AS签名等一些常用AS代码
下一教程: Actionscript学习实例:简朴放大镜效果

您可以阅读与"flash 8 BitmapData 类的应用"相关的教程:
· Flash视频教程实例:任意变形工具的应用
· Flash视频教程实例:橡皮擦的应用
· 像素在flash中的应用
· FLASH右键菜单的应用
· 拖动与碰撞的应用,Flash学习
    微笑服务 优质保证 索取样品