Flash AS3: How to slice a bitmap image into a grid of bitmaps

September 16, 2009

In Flash Applications we sometimes find ourselves having to split an image up into slices. To accomplish this simple task we utilize bitmaps to copy data from a section of the main graphic to create bitmaps of the different slices or pieces. Outlined below are the steps and code that are used to complete this task.

How to Slice a Bitmap

Before slicing a bitmap can begin we need to know 3 things:

image – the bitmap graphic we will be slicing
numColumns – the number of columns to be sliced from the graphic
numRows – the number of rows to be sliced from the graphic

Knowing this information we can easily create a grid of bitmaps (2 dimensional array) containing the slices.

Determine the width and height of the resulting slices

var iWidth:Number = image.width;
var iHeight:Number = image.height;
var pWidth:Number = iWidth / numColumns;
var pHeight:Number = iHeight / numRows;

initialize the image array that will hold the resulting slices, and some other properties to be used when creating the bitmaps.
```
var iArray:Array = new Array();
var rectangle:Rectangle();
var bitmap:Bitmap;
var bData:BitmapData;
```
Iterate over the number of rows and initialize a new Array at the row Index in the image array
```
for( var rowIdx:int = 0; rowIdx < numRows; rowIdx++ ) {
iArray[rowIdx] = new Array();
}
```

After initializing the 2nd level array for the row index iterate over the number of columns

for( var rowIdx:int = 0; rowIdx < numRows; rowIdx++ ) {
iArray[rowIdx] = new Array();
for( var colIdx:int = 0; colIdx < numColumns; colIdx++ ) {}
}

Inside the column iterator we know create our bitmap data for that slice
1. Initialize a new BitmapData with dimensions set to the width and height calculated in step 1
```
bData = new BitmapData( pWidth, pHeight, true, 0x00000000 );
```
2. Create a new Rectangle that is positioned by the offset of the current slide and has width and height equal to the value calculated in step 1
```
rectangle = new Rectangle( colIdx * pWidth, rowIdx * pHeight, pWidth, pHeight );
```
3. Copy the bitmap data of the rectangle from the original graphic which is the data for the current slice
```
bData.copyPixels( image.bitmapData, rectangle, new Point( 0, 0 ) );
```
4. create a new Bitmap from the bitmap data
```
bitmap = new Bitmap( bData );
```
5. Add the bitmap to the grid at the current row and column index
```
iArray[rowIdx][colIdx] = bitmap;
```
The resulting grid contains bitmaps of all the slices

The Completed Code

var iWidth:Number = image.width;
var iHeight:Number = image.height;
var pWidth:Number = iWidth / numColumns;
var pHeight:Number = iHeight / numRows;

var iArray:Array = new Array();

var rectangle:Rectangle();
var bitmap:Bitmap;
var bData:BitmapData;

for( var rowIdx:int = 0; rowIdx < numRows; rowIdx++ ) {
    iArray[rowIdx] = new Array();
    for( var colIdx:int = 0; colIdx < numColumns; colIdx++ ) {
        bData = new BitmapData( pWidth, pHeight, true, 0x00000000 );
        rectangle = new Rectangle( colIdx * pWidth, rowIdx * pHeight, pWidth, pHeight );
        bData.copyPixels( image.bitmapData, rectangle, new Point( 0, 0 ) );
        bitmap = new Bitmap( bData );
        iArray[rowIdx][colIdx] = bitmap;
    }
}

ImageSlicer Utility to Slice Images

To make this process easier for myself and those that find themselves needing to slice an image, I have create the ImageSlicer utility class. This class contains a static method that you pass the graphic, number of columns, and number of rows to and it returns the 2 dimensional array. You can download the ImageSlicer utility here

An example usage is shown below but remember you need to import the class by statement import com.mdbitz.utils.ImageSlicer;

var bitmaps:Array = ImageSlicer.sliceImage( graphic, this._numColumns, this._numRows );