Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash ActionScript 3 BitmapData Class and copyPixels Method

In some of our previous tutorials, we always load the whole external picture on the stage and play around. What if we only wish to load some areas of the external pictures? What if we wish to splice or cut the external pictures into several pieces and play around? In this tutorial, we try to load only some area of an external picture on the stage.

The procedures are basically load the image, get to the bitmap data of the loaded image, and play around with the loaded image.

This tutorial is a bit advanced and sometimes quite difficult to understand. However we try to approach it in a simple way.

The external image (stamp.jpg) we are going to load on the stage is:

flash-as3-bitmapdata

We already learned how to load an external image on the stage in other tutorials. Therefore this step should be easy.

Let's review the process again:

var imageLoaded:Boolean=false;

// URL of the external image content
var myRequest:URLRequest=new URLRequest("stamp.jpg");

// Create a new Loader to load the image
var myLoader:Loader=new Loader();

// Load the external image into the Loader
myLoader.load(myRequest);

// Listen when the loading of image is completed
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImage1);

function loadImage1(event:Event):void {

//Display the Loader on the MainTimeline when the loading is completed
addChild(myLoader);
//Set display location of the Loader
myLoader.x=0;
myLoader.y=0;

}

The external image will be loaded on the stage, as shown below:

flash-as3-bitmapdata

Sometimes, we may wish to load only part of the image on the stage. How can we do that? Luckily, we can do that with Flash AS3 bitamapData class and copyPixel method. This allow us to play around with the bitmap data of the loaded image.

The loading procedures are basically the same. However instead of simply load the whole external image on the stage, we would like to play around with the bitmap data of the image before displaying on the stage.

Okay! Let's get started.

1. The external image is ready to load on the stage.

var imageLoaded:Boolean=false;

// URL of the external image content
var myRequest:URLRequest=new URLRequest("stamp.jpg");

// Create a new Loader to load the image
var myLoader:Loader=new Loader();

// Load the external image into the Loader
myLoader.load(myRequest);

// Listen when the loading of image is completed
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImage1);

function loadImage1(event:Event):void {

// play around the bitmap of loaded image here...

}

2. Before loading the image on the stage, let's create a new Bitmap object with the loaded image.

var image:Bitmap=Bitmap(event.target.loader.content);

Once we created a new Bitmap object with the loaded image, we can start using it. It's that simple.

We have an idea, we only wish to load part of the image, for example piece 1 only, as shown in the diagram below.

flash-as3-bitmapdata

3. Next we need to define and get the width and height of the piece that we wish to load.

// Get the width and height of the piece
var pieceWidth:Number=myImage.width/2; // 170
var pieceHeight:Number=myImage.height/2; //120

4. Once we define the width and height of the piece, we can start thinking how to create the piece.

This can be done by creating a new Bitmap object by specifing the width and height of the image that we wish to make.

var newPieceImage1:Bitmap=new Bitmap(new BitmapData(pieceWidth, pieceHeight));

5. Here's come the magic. Next we can use copyPixels to copy part of the loaded image into the bitmapData of the new piece.

newPieceImage1.bitmapData.copyPixels(myImage.bitmapData, new Rectangle(0, 0, pieceWidth, pieceHeight), new Point(0,0));

We need to specify clearly which part of the loaded image we wish to copy:

new Rectangle(0, 0, pieceWidth, pieceHeight)

It specifies that the copied area starts from the (0,0) location of the original loaded image. The copied area is the defined by the width and height.

flash-as3-bitmapdata

new Point(0,0)

The starting display location of the copied image. This is usually (0,0).

6. Create a new sprite to hold the new piece.

var newPiece1:Sprite = new Sprite();
newPiece1.addChild(newPieceImage1);

7. Add the new sprite to the stage so that we can see it.

addChild(newPiece1);

8. Set the location of the new piece to display on the stage.

newPiece1.x = 0;
newPiece1.y = 0;

That's it!

Run the codes. Only part 1 of the original image has been copied.

flash-as3-bitmapdata

Here's the completed AS3 codes:

var imageLoaded:Boolean=false;

// URL of the external image content
var myRequest:URLRequest=new URLRequest("stamp.jpg");

// Create a new Loader to load the image
var myLoader:Loader=new Loader();

// Load the external image into the Loader
myLoader.load(myRequest);

// Listen when the loading of image is completed
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImage1);

function loadImage1(event:Event):void {

// play around the bitmap of loaded image here...

// create a new Bitmap object with the loaded image.
var myImage:Bitmap=Bitmap(event.target.loader.content);

// define the width and height of the piece
var pieceWidth:Number=myImage.width/2; // 170
var pieceHeight:Number=myImage.height/2; //120

// creating a new Bitmap object that we wish to make.
// specifing the width and height of the image
var newPieceImage1:Bitmap=new Bitmap(new BitmapData(pieceWidth,pieceHeight));

// Use copyPixels to copy part of the loaded image into the bitmapData
newPieceImage1.bitmapData.copyPixels(myImage.bitmapData,new Rectangle(0,0,pieceWidth,pieceHeight),new Point(0,0));

// create new sprite to hold the copied new piece
// Add the new copied new piece to the new sprite
var newPiece1:Sprite = new Sprite();
newPiece1.addChild(newPieceImage1);

// add to stage so that we can see it
addChild(newPiece1);

// set location to display the copied piece on the stage
newPiece1.x = 0;
newPiece1.y = 0;

}

9. Let's continue copying piece 2 of the original image.

Actually this should be achieved by using a for loop. However, for easier to read and understand, we use the same way as above to copy the piece 2.

Bear in mind that the starting location of piece 2 is (170, 0):

flash-as3-bitmapdata

To show the effect, the two pieces are 10 pixels apart.

var imageLoaded:Boolean=false;

// URL of the external image content
var myRequest:URLRequest=new URLRequest("stamp.jpg");

// Create a new Loader to load the image
var myLoader:Loader=new Loader();

// Load the external image into the Loader
myLoader.load(myRequest);

// Listen when the loading of image is completed
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImage1);

function loadImage1(event:Event):void {

// play around the bitmap of loaded image here...

// create a new Bitmap object with the loaded image.
var myImage:Bitmap=Bitmap(event.target.loader.content);

// define the width and height of the piece
var pieceWidth:Number=myImage.width/2; // 170
var pieceHeight:Number=myImage.height/2; //120

// creating a new Bitmap object that we wish to make.
// specifing the width and height of the image
var newPieceImage1:Bitmap=new Bitmap(new BitmapData(pieceWidth,pieceHeight));

// Use copyPixels to copy part of the loaded image into the bitmapData
newPieceImage1.bitmapData.copyPixels(myImage.bitmapData,new Rectangle(0,0,pieceWidth,pieceHeight),new Point(0,0));

// create new sprite to hold the copied new piece
// Add the new copied new piece to the new sprite
var newPiece1:Sprite = new Sprite();
newPiece1.addChild(newPieceImage1);

// add to stage so that we can see it
addChild(newPiece1);

// set location to display the copied piece on the stage
newPiece1.x = 0;
newPiece1.y = 0;

///////////////////////////////
////////// Piece 2 //////////
//////////////////////////////

var newPuzzlePieceBitmap2:Bitmap=new Bitmap(new BitmapData(pieceWidth, pieceHeight));


newPuzzlePieceBitmap2.bitmapData.copyPixels(myImage.bitmapData, new Rectangle(170, 0, pieceWidth,pieceHeight),new Point(0,0));

var newPiece2:Sprite = new Sprite();
newPiece2.addChild(newPuzzlePieceBitmap2);

addChild(newPiece2);

// set location of piece 2 next to piece 1
// set 10 pixels apart from piece 1 to show the effect
newPiece2.x = 180;
newPiece2.y = 0;

}

Here' the result:

flash-as3-bitmapdata

10. Copy piece 3 of original image in the same way.

The starting location of piece 3 is (0, 120).

flash-as3-bitmapdata

Here's the AS3 codes:

var imageLoaded:Boolean=false;

// URL of the external image content
var myRequest:URLRequest=new URLRequest("stamp.jpg");

// Create a new Loader to load the image
var myLoader:Loader=new Loader();

// Load the external image into the Loader
myLoader.load(myRequest);

// Listen when the loading of image is completed
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImage1);

function loadImage1(event:Event):void {

// play around the bitmap of loaded image here...

// create a new Bitmap object with the loaded image.
var myImage:Bitmap=Bitmap(event.target.loader.content);

// define the width and height of the piece
var pieceWidth:Number=myImage.width/2; // 170
var pieceHeight:Number=myImage.height/2; //120

// creating a new Bitmap object that we wish to make.
// specifing the width and height of the image
var newPieceImage1:Bitmap=new Bitmap(new BitmapData(pieceWidth,pieceHeight));

// Use copyPixels to copy part of the loaded image into the bitmapData
newPieceImage1.bitmapData.copyPixels(myImage.bitmapData,new Rectangle(0,0,pieceWidth,pieceHeight),new Point(0,0));

// create new sprite to hold the copied new piece
// Add the new copied new piece to the new sprite
var newPiece1:Sprite = new Sprite();
newPiece1.addChild(newPieceImage1);

// add to stage so that we can see it
addChild(newPiece1);

// set location to display the copied piece on the stage
newPiece1.x = 0;
newPiece1.y = 0;

///////////////////////////////
////////// Piece 2 //////////
//////////////////////////////

var newPuzzlePieceBitmap2:Bitmap=new Bitmap(new BitmapData(pieceWidth, pieceHeight));


newPuzzlePieceBitmap2.bitmapData.copyPixels(myImage.bitmapData, new Rectangle(170, 0, pieceWidth,pieceHeight),new Point(0,0));

var newPiece2:Sprite = new Sprite();
newPiece2.addChild(newPuzzlePieceBitmap2);

addChild(newPiece2);

// set location of piece 2 next to piece 1
// set 10 pixels apart from piece 1 to show the effect
newPiece2.x = 180;
newPiece2.y = 0;

/////////////////////////////////
///////// Piece 3 /////////////
////////////////////////////////

var newPuzzlePieceBitmap3:Bitmap=new Bitmap(new BitmapData(pieceWidth,pieceHeight));

newPuzzlePieceBitmap3.bitmapData.copyPixels(myImage.bitmapData,new Rectangle(0,120,pieceWidth,pieceHeight),new Point(0,0));

var newPiece3:Sprite = new Sprite();
newPiece3.addChild(newPuzzlePieceBitmap3);

// add to stage
addChild(newPiece3);

// set location 10 pixels below piece 1
newPiece3.x = 0;
newPiece3.y = 130;

}

The result is:

flash-as3-bitmapdata

11. Copy piece 4 of original image in the samw way.

The starting location of piece 4 is (170, 120).

flash-as3-bitmapdata

The completed AS3 codes becomes:

var imageLoaded:Boolean=false;

// URL of the external image content
var myRequest:URLRequest=new URLRequest("stamp.jpg");

// Create a new Loader to load the image
var myLoader:Loader=new Loader();

// Load the external image into the Loader
myLoader.load(myRequest);

// Listen when the loading of image is completed
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImage1);

function loadImage1(event:Event):void {

// play around the bitmap of loaded image here...

// create a new Bitmap object with the loaded image.
var myImage:Bitmap=Bitmap(event.target.loader.content);

// define the width and height of the piece
var pieceWidth:Number=myImage.width/2; // 170
var pieceHeight:Number=myImage.height/2; //120

// creating a new Bitmap object that we wish to make.
// specifing the width and height of the image
var newPieceImage1:Bitmap=new Bitmap(new BitmapData(pieceWidth,pieceHeight));

// Use copyPixels to copy part of the loaded image into the bitmapData
newPieceImage1.bitmapData.copyPixels(myImage.bitmapData,new Rectangle(0,0,pieceWidth,pieceHeight),new Point(0,0));

// create new sprite to hold the copied new piece
// Add the new copied new piece to the new sprite
var newPiece1:Sprite = new Sprite();
newPiece1.addChild(newPieceImage1);

// add to stage so that we can see it
addChild(newPiece1);

// set location to display the copied piece on the stage
newPiece1.x = 0;
newPiece1.y = 0;

///////////////////////////////
////////// Piece 2 //////////
//////////////////////////////

var newPuzzlePieceBitmap2:Bitmap=new Bitmap(new BitmapData(pieceWidth, pieceHeight));


newPuzzlePieceBitmap2.bitmapData.copyPixels(myImage.bitmapData, new Rectangle(170, 0, pieceWidth,pieceHeight),new Point(0,0));

var newPiece2:Sprite = new Sprite();
newPiece2.addChild(newPuzzlePieceBitmap2);

addChild(newPiece2);

// set location of piece 2 next to piece 1
// set 10 pixels apart from piece 1 to show the effect
newPiece2.x = 180;
newPiece2.y = 0;

/////////////////////////////////
///////// Piece 3 /////////////
////////////////////////////////

var newPuzzlePieceBitmap3:Bitmap=new Bitmap(new BitmapData(pieceWidth, pieceHeight));

newPuzzlePieceBitmap3.bitmapData.copyPixels(myImage.bitmapData,new Rectangle(0,120,pieceWidth,pieceHeight),new Point(0,0));

var newPiece3:Sprite = new Sprite();
newPiece3.addChild(newPuzzlePieceBitmap3);

// add to stage
addChild(newPiece3);

// set location 10 pixels below piece 1
newPiece3.x = 0;
newPiece3.y = 130;

///////////////////////////////
///////// Piece 4 ///////////
///////////////////////////////

var newPuzzlePieceBitmap4:Bitmap=new Bitmap(new BitmapData(pieceWidth, pieceHeight));


newPuzzlePieceBitmap4.bitmapData.copyPixels(myImage.bitmapData,new Rectangle(170, 120, pieceWidth, pieceHeight),new Point(0,0));

var newPiece4:Sprite = new Sprite();
newPiece4.addChild(newPuzzlePieceBitmap4);

// add to stage
addChild(newPiece4);

// set location 10 pixels below piece 2 and next to piece 3
newPiece4.x = 180;
newPiece4.y = 130;

}

The final result is:

flash-as3-bitmapdata

Remarks:

This Flash ActionScript tutorial shows how to manipulate bitmap data with bitmapData class and copyPixels method