AS3 CookBook学习整理(五)
1. 编写遮罩
任何可视化对象都可以作为任一对象的遮罩,只需要指定对象的mask属性为某一可视化对象即可。虽然遮罩即使不添加到显示列表也能正常工作,不过还是建议添加到显示列表
package { import flash.display.Loader; import flash.display.Sprite; import flash.net.URLRequest; public class Sample0310 extends Sprite { private var _loader:Loader; public function Sample0310() { var loader:Loader = new Loader(); loader.load(new URLRequest("2.jpg")); var myMask:Sprite = new Sprite(); myMask.graphics.beginFill(0xFFFFFF); myMask.graphics.drawCircle(0,0,30); myMask.graphics.endFill(); myMask.startDrag(,true); loader.mask = myMask; this.addChild(myMask); this.addChild(loader); } } }
2. 创建位图
矢量图和位图的区别:矢量图形是由数学方法描述图形元素,比如一条直线是从(x0,y0)到(x1,y1)。而位图把图形描述为一个矩形区域值集合,每个点都对应一个颜色值
矢量图有两大优势:缩放和文件大小。当你缩放矢量图时,图像总能保持清晰,而位图当放大时就会出现锯齿状变得不清晰。
正因为矢量图是一个线条,曲线和图形的坐标组成的列表,所以它的文件和位图相比小很多。而位图要记录每个点的颜色值,信息量非常大,也就导致了文件的庞大。
矢量图的这种优势使它作为Flash媒体格式的最好形式,但是位图也有它自己的优点,比如位图能很好的表现照片,如果用矢量图去描述照片的所有颜色和图形,那结果就是比位图的文件还要大了。
位图另一个好处就是很容易进行处理,矢量图的每个曲线都是经过计算出来的,如果图像复杂就会花很长时间去处理,而位图就容易处理多了,无论多么复杂的动画,位图总能表现的很好。
32位16进制颜色值的得到方法:假如有0x0A5500EE,则表示alpha的值是0A,R(red)是55,G(green)是00,B(blue)是EE。关于alpha的值,其范围用十进制表示是在0--255之间,用十六进制表示就是00--FF。可以用int.toString(16)来进行十进制到十六进制的转换,如果转换的值为个位,则需要补0,例如1表示为01,e表示为0E
创建位图的一般步骤:
1. 构建一个BitmapData对象:var bitmap:BitmapData = new BitmapData(width,height,transparent,fillColor);
width -- 位图的宽度
height -- 位图的高度
transparent -- 是否创建alpha通道,默认为true
fillColor -- 32位16进制的颜色值,在transparent为true时,默认为0xFFFFFFFF
2. 新建Bitmap对象,以之前新建的BitmapData为参数:var image:Bitmap = new Bitmap(bitmap);
3. 直接添加该Bitmap对象:this.addChild(image);
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Sprite; public class Sample0310 extends Sprite { public function Sample0310() { var alphaInt:int = 128; var alphaHex:String = alphaInt.toString(16); if(alphaHex.length==1) { alphaHex = "0" + alphaHex; } var fillColor:String = "0x"+alphaHex+"FFFF00"; var bitmap:BitmapData = new BitmapData(200,100,true,uint(fillColor)); var image:Bitmap = new Bitmap(bitmap); this.addChild(image); } } }
3. 绘制可视化对象到位图上
先在MovieClip或Sprite上画好,然后把对象画到位图上
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Sprite; public class Sample0310 extends Sprite { public function Sample0310() { var rect:Sprite = new Sprite(); rect.graphics.beginFill(0x00FF00); rect.graphics.drawRect(30,30,50,50); rect.graphics.endFill(); var bitmap:BitmapData = new BitmapData(200,100,true,0x80000000); bitmap.draw(rect); var image:Bitmap = new Bitmap(bitmap); image.x = 100; image.y = 100; this.addChild(image); } } }
4. 载入外部图片到位图上
使用flash.display.Loader类载入图片,当图片载入完成时,loader的content属性就是一个Bitmap.访问Bitmap的bitmapData属性就在访问载入的图片
package { import flash.display.Bitmap; import flash.display.Loader; import flash.display.Shape; import flash.display.Sprite; import flash.events.Event; import flash.net.URLRequest; public class Sample0310 extends Sprite { private var loader:Loader; public function Sample0310() { loader = new Loader(); loader.load(new URLRequest("http://www.yysoft.com/Upload/8/images/ccns_03.jpg")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete); } private function onLoadComplete(target:Event):void { var circle:Shape = new Shape(); circle.graphics.beginFill(0xFFFF00); circle.graphics.drawCircle(50,50,25); circle.graphics.endFill(); var image:Bitmap = loader.content as Bitmap; image.bitmapData.draw(circle); this.addChild(image); } } }
5. 得到或设置位图上的像素
使用BitmapData类的getPixel(),setPixel,getPixel32()和setPixel32方法。例如:getPixel(mouseX,mouseY),setPixel(x,y,0xFF00FF00),getPixel()和setPixel()方法是专门为不透明的BitmapData类实例所用,而getPixel32()和setPixel32()则支持alpha通道的位图。可以通过BitmapData 构造器指定是否为透明位图
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Sprite; import flash.events.Event; import flash.text.TextField; public class Sample0310 extends Sprite { private var image:Bitmap; private var txt:TextField; public function Sample0310() { txt = new TextField(); txt.y = 130; image = new Bitmap(); image.bitmapData = new BitmapData(100,100,true,0xFFFFFFFF); image.bitmapData.noise(1000,0,255,1|2|4,false); this.addEventListener(Event.ENTER_FRAME,onEnterFrame); this.addChild(txt); this.addChild(image); } private function onEnterFrame(target:Event):void { txt.text = "#"+image.bitmapData.getPixel(mouseX,mouseY).toString(16); } } }
6. 创建矩形填充
使用BitmapData类的fillRect()方法
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Sprite; import flash.geom.Rectangle; public class Sample0310 extends Sprite { public function Sample0310() { var image:Bitmap = new Bitmap(); image.bitmapData = new BitmapData(200,100,true,0x80000000); image.bitmapData.fillRect(new Rectangle(20,20,50,50),0x80FFFF00); this.addChild(image); } } }
7. 创建充溢填充
所谓充溢填充,就是指完全填充一个不规则的区域。使用BitmapData类的floodFill()方法,调用形式为:floodFill(x,y,color),其中x,y为要填充的坐标点,color为坐标颜色。需要特别这样的是,填充的始终是该坐标点最上层的容器元素
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Rectangle; public class Sample0310 extends Sprite { private var image:Bitmap; public function Sample0310() { image = new Bitmap(); image.bitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false,0xFFFFFF); for(var i:uint=0;i<10;i++) { image.bitmapData.fillRect(new Rectangle(Math.random()*(stage.stageWidth-50), Math.random()*(stage.stageHeight-50), 30,30),Math.random( ) * 0xffffffff); } this.addChild(image); stage.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown); } private function onMouseDown(target:MouseEvent):void { image.bitmapData.floodFill(mouseX,mouseY,0x000000); } } }
8. 拷贝位图里的部分像素
利用destBitmapData.copyPixels(sourceBitmapData,sourceRect,destPoint)来将源位图上某个区域的像素,拷贝到目标区域的某个坐标点。
destBitmapData -- 目标位图
sourceBitmapData -- 源位图
sourceRect -- 源位图的矩形区域
destPoint -- 目标位图的拷贝坐标点
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Loader; import flash.display.Sprite; import flash.events.Event; import flash.geom.Point; import flash.geom.Rectangle; import flash.net.URLRequest; public class Sample0310 extends Sprite { private var loader:Loader; private var imageContainer:Bitmap; public function Sample0310() { imageContainer = new Bitmap(); imageContainer.bitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false,0xFFFFFF); this.addChild(imageContainer); loader = new Loader(); loader.load(new URLRequest("http://www.yysoft.com/Upload/8/images/ccns_03.jpg")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete); } private function onLoadComplete(target:Event):void { var image:Bitmap = loader.content as Bitmap; this.addChild(image); imageContainer.bitmapData.copyPixels(image.bitmapData,new Rectangle(20,20,50,100),new Point(300,200)); } } }
9. 创建噪波图案
使用BitmapData类的noise(seed,low,high,channel,grayscale)
seed -- 随机种子(注意,同一个seed生成的图片是一样的)
low -- 每个像素的最小值,范围在0到255(设置越高图案越亮)
high -- 每个像素的最大值,范围在0到255(设置越高图案越亮)
channel -- 指定把噪波应用到哪个通道上,其值可以是1,2,4,8;或者用BitmapDataChannel类的RED,GREEN,BLUE和ALPHA grayscale -- 一个布尔值,true表示随机值应用到三个通道上(当三个通道的值为相同时,即为灰色)。默认为false
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.display.Sprite; public class Sample0313 extends Sprite { public function Sample0313() { var image:Bitmap = new Bitmap(); image.bitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false,0xffffff); image.bitmapData.noise(1000,128,255,BitmapDataChannel.BLUE,true); this.addChild(image); } } }
10. 使用阈值
使用BitmapData类的threshold()方法
public function threshold(
sourceBitmapData:BitmapData, //源位图
sourceRect:Rectangle, //源位图要进行比较的区域,全部为sourceBitmapData.rect
destPoint:Point, //从左上角开始把原始位图覆盖到目标位图上,从(0,0)为new Point()
operation:String, //操作符,“<”、“<=”、“>”、“>=”、“==”、“!=”
threshold:uint, //阈值
color:uint = 0, //阈值测试成功时对像素设置的颜色值。默认值为0x00000000
mask:uint = 0xFFFFFFFF, //掩码,分4个通道进行比较,如只比较红色通道:0x00FF0000
copySource:Boolean = false //是否拷贝源位图,为false则只拷贝阈值测试成功的像素。为true则拷贝整个源位图比较区域
):uint
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Shape; import flash.display.Sprite; import flash.geom.Point; public class Sample0318 extends Sprite { public function Sample0318() { var rect:Shape = new Shape(); rect.graphics.beginFill(0xFF0000); rect.graphics.drawRect(15,15,45,45); rect.graphics.beginFill(0x00FF00); rect.graphics.drawRect(75,75,45,45); rect.graphics.beginFill(0x0000FF); rect.graphics.drawRect(135,135,45,45); rect.graphics.endFill(); var image:Bitmap = new Bitmap(); image.bitmapData = new BitmapData(200,200,false,0x000000); image.x = 20; image.y = 20; image.bitmapData.draw(rect); this.addChild(image); var destImage:Bitmap = new Bitmap(); destImage.bitmapData = new BitmapData(200,200,false,0xFFFFFF); destImage.x = image.x + image.width + 15; destImage.y = image.y; destImage.bitmapData.threshold( image.bitmapData, image.bitmapData.rect, new Point(), ">", 0x0000FF00, 0XFFFFFF00, 0X00FFFFFF, true); this.addChild(destImage); } } }