今天是:   | 登录中心 | | 网络导航
logo 来海南旅游咨询 海南旅游 预订海南酒店 自驾租车 海南高尔夫 问路订房就请拔打海南旅游百事通  全天24小时为您守候 设为首页
加入收藏
联系站长
导航页为首页
内容页为首页
当前位置:南国风 >> IT.信息技术 >> game@webdev >> 浏览文章

flash位图技术研究篇(1):缓冲技术

作者:佚名 日期:2010年11月02日 来源:本站原创 人气:

flash位图技术研究篇(1):缓冲技术  今天终于对位图这个东西有点新一点认识,自从位图类引进后,感觉到位图是应用得比较多的一个类,当中其实还有一些奥秘值得去研究。

看看网上搜索的概念:

一 双重缓冲区绘图技术概念

  双重缓冲区技术能够使程序的绘图更加快速和平滑,有效减少绘制时的图像闪烁。该技术的基本原理是先将图像绘制到内存中的一块画布上,一旦所有的绘制操作都完成了,再将内存中的画布推到窗体的或者控件的表面将其显示出来。通过这种操作后的程序能使用户感觉其更加快速和美观。

很久之前,我曾经玩过c++关于贴图的一些应用。例如,我要在窗口外加载一张图片,首先我需要一些加载外部的文件,其次我要知道怎样才能将这张图贴到窗口去,做法是使用c++一些位图操作类进行操作如   BitBlt类这个类可以操作一些像素

   BitBlt (hdc, x, y, cxSource, cySource, hdcMem, 0, 0, SRCCOPY) ;

这个做法是通过操作内存的位图数据来进行。

同样在操作内存位图,flash已经提供了两个有用的类,一个BitmapData,一个是Bitmap类。其中BitmapData类提供了很多关于操作位图的方法,这样为我们实现缓冲技术有了很大的帮助。

开始之前,我们做几个小实验,这样我们会发觉日后会有很多有趣的事情发生。

二、小实验

第一件事情,我们填充颜色,研究一下怎样填充颜色。

2.1 填充颜色

首先我们建立一个继承Sprite的子类:

view plaincopy to clipboardprint?
package   
{  
    import flash.display.*;  
    import flash.display.Bitmap;  
    import flash.display.BitmapData;  
    import flash.events.*;  
    public class Example2 extends Sprite  
    {  
        private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区  
        private var clearColor:uint=0x0000FF;//指定填充的颜色  
 
        public function Example2()  
        {  
            init();  
        }  
        private function init():void 
        {  
            backBuffer.fillRect(backBuffer.rect, clearColor);//填充  
            var iamge:Bitmap=new Bitmap(backBuffer);//建立一个位图  
            addChild(iamge);//显示位图  
        }  
    }  

package
{
 import flash.display.*;
 import flash.display.Bitmap;
 import flash.display.BitmapData;
 import flash.events.*;
 public class Example2 extends Sprite
 {
  private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区
  private var clearColor:uint=0x0000FF;//指定填充的颜色

  public function Example2()
  {
   init();
  }
  private function init():void
  {
   backBuffer.fillRect(backBuffer.rect, clearColor);//填充
   var iamge:Bitmap=new Bitmap(backBuffer);//建立一个位图
   addChild(iamge);//显示位图
  }
 }
}

看看这样的效果,是不是达到我们想要的效果?已经填充一个区域了。呵呵是不是很酷呢?如果还不觉得好玩,请继续看下去

 

接下来,我们继续修改一下代码:这次我们改用建立一个Sprite类来做一张画稿。

view plaincopy to clipboardprint?
package   
{  
    import flash.display.*;  
    import flash.display.Bitmap;  
    import flash.display.BitmapData;  
    import flash.events.*;  
    public class Example2 extends Sprite  
    {  
        private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区  
        private var clearColor:uint=0x0000FF;//指定填充的颜色  
 
        public function Example2()  
        {  
            init();  
        }  
        private function init():void 
        {  
            backBuffer.fillRect(backBuffer.rect, clearColor);//填充  
            var iamge:Sprite=new Sprite();//建立一个位图  
            addChild(iamge);//显示位图  
            iamge.graphics.clear();  
            iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用 填充位图的方法 填充缓冲区  
            iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形  
            iamge.graphics.endFill();//结束填充  
        }  
    }  

package
{
 import flash.display.*;
 import flash.display.Bitmap;
 import flash.display.BitmapData;
 import flash.events.*;
 public class Example2 extends Sprite
 {
  private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区
  private var clearColor:uint=0x0000FF;//指定填充的颜色

  public function Example2()
  {
   init();
  }
  private function init():void
  {
   backBuffer.fillRect(backBuffer.rect, clearColor);//填充
   var iamge:Sprite=new Sprite();//建立一个位图
   addChild(iamge);//显示位图
   iamge.graphics.clear();
   iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用 填充位图的方法 填充缓冲区
   iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形
   iamge.graphics.endFill();//结束填充
  }
 }
}

这一次,改变显示方法,采用Graphics类为我们提供的绘画Api函数。同时进行填充位图,同样可以得到上面图的效果。


2.2 复制位图到缓冲区域

现在我们进行第二个小实验;复制图片到缓冲区,然后再显示出来

private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区

backBuffer是我们建立一个位图缓冲区,用于存放位图数据信息。当我们希望在这个区域复制像素到这个缓冲区里面去,看看是怎样做呢?

view plaincopy to clipboardprint?
package   
{  
    import flash.display.*;  
    import flash.display.Bitmap;  
    import flash.display.BitmapData;  
    import flash.events.*;  
    import flash.geom.*;  
 
    public class Example2 extends Sprite  
    {  
        private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区  
        private var clearColor:uint=0x0000FF;//指定填充的颜色  
        private var myplane:plane=new plane(59,43);//我们在flash 库里面的资源,是bitmapdata的一个子类  
        private var position:Point=new Point(250,200);// 指定像素位置   
        public function Example2()  
        {  
            init();  
        }  
        private function init():void 
        {  
            backBuffer.fillRect(backBuffer.rect, clearColor);//填充  
            backBuffer.copyPixels(myplane,myplane.rect, position, myplane.bitmapAlpha, new Point(0, 0), true);  
            var iamge:Sprite=new Sprite();//建立一个位图  
            addChild(iamge);//显示位图  
            iamge.graphics.clear();  
            iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用 填充位图的方法 填充缓冲区  
            iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形  
            iamge.graphics.endFill();//结束填充  
        }  
    }  

package
{
 import flash.display.*;
 import flash.display.Bitmap;
 import flash.display.BitmapData;
 import flash.events.*;
 import flash.geom.*;

 public class Example2 extends Sprite
 {
  private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区
  private var clearColor:uint=0x0000FF;//指定填充的颜色
  private var myplane:plane=new plane(59,43);//我们在flash 库里面的资源,是bitmapdata的一个子类
  private var position:Point=new Point(250,200);// 指定像素位置
  public function Example2()
  {
   init();
  }
  private function init():void
  {
   backBuffer.fillRect(backBuffer.rect, clearColor);//填充
   backBuffer.copyPixels(myplane,myplane.rect, position, myplane.bitmapAlpha, new Point(0, 0), true);
   var iamge:Sprite=new Sprite();//建立一个位图
   addChild(iamge);//显示位图
   iamge.graphics.clear();
   iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用 填充位图的方法 填充缓冲区
   iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形
   iamge.graphics.endFill();//结束填充
  }
 }
}

 

图中的飞机已经被复制到缓冲区里面去了。

缓冲区里面复制这飞机的像素,并进行了显示copyPixels。如果还不觉得酷的话,我们再引入一些让飞机进行运动,并每一帧进行绘制。

2.3飞机运行

首先:addEventListener(Event.ENTER_FRAME,Run);进行监听。

private function Run(e:Event):void

{

}

注意到我们private var position:Point=new Point(250,200);// 指定像素位置这个属性,我们每一帧改变他的贴图位置,这样我们需要每一帧进行重写绘制,场景的飞机就好像会一样。

view plaincopy to clipboardprint?
package   
{  
    import flash.display.*;  
    import flash.display.Bitmap;  
    import flash.display.BitmapData;  
    import flash.events.*;  
    import flash.geom.*;  
 
    public class Example2 extends Sprite  
    {  
        private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区  
        private var clearColor:uint=0x0000FF;//指定填充的颜色  
        private var myplane:plane=new plane(59,43);//我们在flash 库里面的资源,是bitmapdata的一个子类  
        private var position:Point=new Point(250,200);// 指定像素位置   
        public function Example2()  
        {  
              
            addEventListener(Event.ENTER_FRAME,Run);  
        }  
        private function init():void 
        {  
            backBuffer.fillRect(backBuffer.rect, clearColor);//填充  
            backBuffer.copyPixels(myplane,myplane.rect, position, myplane.bitmapAlpha, new Point(0, 0), true);  
            var iamge:Sprite=new Sprite();//建立一个位图  
            addChild(iamge);//显示位图  
            iamge.graphics.clear();  
            iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用 填充位图的方法 填充缓冲区  
            iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形  
            iamge.graphics.endFill();//结束填充  
        }  
          
        private function Run(e:Event):void 
        {  
             init();  
             position.x+=5;//修改贴图x轴位置  
             position.y+=3;//修改贴图y轴位置  
              
        }  
          
          
    }  

package
{
 import flash.display.*;
 import flash.display.Bitmap;
 import flash.display.BitmapData;
 import flash.events.*;
 import flash.geom.*;

 public class Example2 extends Sprite
 {
  private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区
  private var clearColor:uint=0x0000FF;//指定填充的颜色
  private var myplane:plane=new plane(59,43);//我们在flash 库里面的资源,是bitmapdata的一个子类
  private var position:Point=new Point(250,200);// 指定像素位置
  public function Example2()
  {
   
   addEventListener(Event.ENTER_FRAME,Run);
  }
  private function init():void
  {
   backBuffer.fillRect(backBuffer.rect, clearColor);//填充
   backBuffer.copyPixels(myplane,myplane.rect, position, myplane.bitmapAlpha, new Point(0, 0), true);
   var iamge:Sprite=new Sprite();//建立一个位图
   addChild(iamge);//显示位图
   iamge.graphics.clear();
   iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用 填充位图的方法 填充缓冲区
   iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形
   iamge.graphics.endFill();//结束填充
  }
  
  private function Run(e:Event):void
  {
    init();
    position.x+=5;//修改贴图x轴位置
    position.y+=3;//修改贴图y轴位置
   
  }
  
  
 }
}

2.4控制飞机运行

  曾经有一个广告讲一群小朋友的未来梦想,有一个人说到,希望将来可以开飞机。我们也像他们一样,让位图跟随我们控制移动

导入  import flash.ui.Keyboard;包

监听按键事件:

stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDown);

private function keyDown(e:KeyboardEvent):void
  {

}

但是通过这种方式来控制我们的飞机,并不让我们觉得开心,因为响应按键事件的时候,我们觉得一点也不流畅。这需要我们对程序进行改进,加以修改方式。而这里主要讲的是这个怎样建立缓冲位图区和绘制图形到窗口去。

代码如下:

view plaincopy to clipboardprint?
package   
{  
    import flash.display.*;  
    import flash.display.Bitmap;  
    import flash.display.BitmapData;  
    import flash.events.*;  
    import flash.geom.*;  
    import flash.ui.Keyboard;  
    public class Example2 extends Sprite  
    {  
        private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区  
        private var clearColor:uint=0x0000FF;//指定填充的颜色  
        private var myplane:plane=new plane(59,43);//我们在flash 库里面的资源,是bitmapdata的一个子类  
        private var position:Point=new Point(250,200);// 指定像素位置   
        public function Example2()  
        {  
 
            addEventListener(Event.ENTER_FRAME,Run);  
            stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDown);  
        }  
        private function init():void 
        {  
            backBuffer.fillRect(backBuffer.rect, clearColor);//填充  
            backBuffer.copyPixels(myplane,myplane.rect, position, myplane.bitmapAlpha, new Point(0, 0), true);  
            var iamge:Sprite=new Sprite();//建立一个位图  
            addChild(iamge);//显示位图  
            iamge.graphics.clear();  
            iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用 填充位图的方法 填充缓冲区  
            iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形  
            iamge.graphics.endFill();//结束填充  
        }  
        private function Run(e:Event):void 
        {  
            init();  
 
        }  
        private function keyDown(e:KeyboardEvent):void 
        {  
            if (e.keyCode==Keyboard.UP)  
            {  
                position.y-=5;  
            }  
            else if (e.keyCode==Keyboard.DOWN)  
            {  
                position.y+=5;  
            }  
            else if (e.keyCode==Keyboard.LEFT)  
            {  
                position.x-=5;  
            }  
            else if (e.keyCode==Keyboard.RIGHT)  
            {  
                position.x+=5;  
            }  
        }  
    }  

package
{
 import flash.display.*;
 import flash.display.Bitmap;
 import flash.display.BitmapData;
 import flash.events.*;
 import flash.geom.*;
 import flash.ui.Keyboard;
 public class Example2 extends Sprite
 {
  private var backBuffer:BitmapData=new BitmapData(550,400,false);//建立一个缓冲区
  private var clearColor:uint=0x0000FF;//指定填充的颜色
  private var myplane:plane=new plane(59,43);//我们在flash 库里面的资源,是bitmapdata的一个子类
  private var position:Point=new Point(250,200);// 指定像素位置
  public function Example2()
  {

   addEventListener(Event.ENTER_FRAME,Run);
   stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDown);
  }
  private function init():void
  {
   backBuffer.fillRect(backBuffer.rect, clearColor);//填充
   backBuffer.copyPixels(myplane,myplane.rect, position, myplane.bitmapAlpha, new Point(0, 0), true);
   var iamge:Sprite=new Sprite();//建立一个位图
   addChild(iamge);//显示位图
   iamge.graphics.clear();
   iamge.graphics.beginBitmapFill(backBuffer, null, false, false);//使用 填充位图的方法 填充缓冲区
   iamge.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);//画出矩形
   iamge.graphics.endFill();//结束填充
  }
  private function Run(e:Event):void
  {
   init();

  }
  private function keyDown(e:KeyboardEvent):void
  {
   if (e.keyCode==Keyboard.UP)
   {
    position.y-=5;
   }
   else if (e.keyCode==Keyboard.DOWN)
   {
    position.y+=5;
   }
   else if (e.keyCode==Keyboard.LEFT)
   {
    position.x-=5;
   }
   else if (e.keyCode==Keyboard.RIGHT)
   {
    position.x+=5;
   }
  }
 }
}

好,暂时写到这里,明天再修改

 语法参考:

beginBitmapFill(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void
用位图图像填充绘图区。
clear():void
清除绘制到此 Graphics 对象的图形,并重置填充和线条样式设置。
drawRect(x:Number, y:Number, width:Number, height:Number):void
绘制一个矩形。
copyPixels(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, alphaBitmapData:BitmapData = null, alphaPoint:Point = null, mergeAlpha:Boolean = false):void
为没有拉伸、旋转或色彩效果的图像之间的像素处理提供一个快速例程。

 


下一篇:flash cs5学习1
email:lifat@yeah.net| QQ:_3000_99**61 T先生
  服务指南 | 著作权与商标声明 | 法律声明 | 服务条款 | 隐私声明 |


南国风网站的版权信息:保留所有权力

不良信息举报中心!
琼ICP备15001822号