actiontad logo white
Intro to Blitting
Looping a background image using copyPixels.

In this intro to blitting we'll go over using the copyPixels method of the BitmapData class
to loop through the pixels of an image and create a looping background effect.
The proccess is fairly simple and therefore is a perfect introduction to blitting techniques.

This is the image we will use:
It has a width of 500 pixels and a height of 350.

The copyPixels method copies a rectangular area of pixels from
one BitmapData instance onto another BitmapData instance.
And you can specify a specific point to copy to.

To make the image appear to move left we increment the inital x position we copy from,
but keep the x position of the point we copy to the same,
and the width of the copy area the same.

The following image illustrates this idea:
move leftMove.jpg

As you can see, copying this way creates blank space at the end as the image appears to move left.
To create a looping effect, all we need to do is fill that blank space
with the front part of the image that is left out.

The whole effect therefore consists of 2 copyPixels opperations.
One to move left, and another to fill in the blank space at the end.
And we store the x increment, when it reaches 500 we start it over from 0.
The code:

package Tutorials
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	[SWF(frameRate = '60', backgroundColor = '0xFFFFFF', width = '500', height = '350')]
	public class BackgroundBlitt extends Sprite 
		private var bitmap:Bitmap;//The Bitmap that will display the final image
		private var toDrawOn:BitmapData;//The BitmapData that copys pixels from the source
		[Embed(source = "images/nightTreesSmall.jpg")]
		private var image:Class;//The source class
		private var drawSource:BitmapData;//The source image
		private var backgroundI:int = 0;//The current x position to copy from. (x increment)
		private var fromRect:Rectangle;//The Rectangle used to define the area to copy from.
		private var toPoint:Point;//The point to copy to.
		public function BackgroundBlitt() {
			fromRect = new Rectangle();
			toPoint = new Point();
			toDrawOn = new BitmapData(500, 350, true, 0x000000);
			bitmap = new Bitmap(toDrawOn);
			drawSource = (new image() as Bitmap).bitmapData;
			//wait for the stage to be available:
			if(!stage)addEventListener(Event.ADDED_TO_STAGE, ini) else ini(null);
		public function ini(e:Event):void {
			removeEventListener(Event.ADDED_TO_STAGE, ini);
			//add the ENTER_FRAME handler:
			addEventListener(Event.ENTER_FRAME, loop);
		public function loop(e:Event):void {
			fromRect.x = backgroundI;//Apply the increment to the x position to copy from, starts from 0.
			fromRect.y = 0;//y does not change, we are only moving horizontally.
			fromRect.width = 500;//the width of the image
			fromRect.height = 350;//the height of the image
			toPoint.x = 0;
			toDrawOn.copyPixels(drawSource, fromRect, toPoint);//draw the image from backgroundI to 500.
			if (backgroundI > 0) { //when the backgroundI is 1 or more, also
				fromRect.x = 0;//copy from the start,
				toPoint.x = 500 - backgroundI;//but draw at the end, 
				fromRect.width = backgroundI;//using only the left out front part of the image.
				toDrawOn.copyPixels(drawSource, fromRect, toPoint);
			if (backgroundI < 500) {
				backgroundI += 1;//Increment the x position.
			} else {
				backgroundI = 0;//Start over from x position 0.

The Result

You can compile the above code in different ways.
It can be used as a Document Class, or you can use the command line compiler to compile just the .as file itself.
You can just call the package whatever you like, or just take out "Tutorials" from the declaration.

actiontad twitter.com/actiontad terms