how to load a bitmap and cut into pieces using ationscript 3.0

Loading a Bitmap

A Loader object is a special version of a Sprite that pulls its data from an external
source. You need to pair it up with a URLRequest, which handles the network file access.
Here is a simple class that loads a single JPG file and places it on the screen. After creating
a new Loader and a new URLRequest, we pair them with the load command. The
entire process takes only three lines of code. Then, we use addChild to add the Loader
object to the stage, just like a normal display object like a Sprite:

package {
import flash.display.*;
import flash.net.URLRequest;
public class BitmapExample extends MovieClip {
public function BitmapExample() {
var loader:Loader = new Loader();
var request:URLRequest = new URLRequest("myimage.jpg");
loader.load(request);
addChild(loader);
}
}
}

It is positioned in the upper-left corner.
Because the Loader object acts like a normal display object, we can also set its x and y
position to center it on the screen or place it anywhere we want.

This can prove useful for loading introductory or instruction graphics in a game. For
instance, your company logo can appear on the introduction screen using this simple
set of commands. Instead of embedding your logo in each Flash game, you can have a
single logo.png file and use a Loader and URLRequest to bring it in and display it.
Then, one change to logo.png and all your games are using the new logo.

Breaking a Bitmap into Pieces

Loading a single bitmap and displaying it is useful, but we need to dig into the data and
extract puzzle pieces from the image to build the games in the rest of this chapter.
The first change we need to make to the simple example from before is to recognize
when the bitmap is done loading and start processing it. This can be done with an
Event.COMPLETE listener. We add that to the Loader object, and then we can put all our
manipulation code into the loadingDone function that it calls.


Here is the start of the new class. We need the flash.geom class later. I’ve also put the
loading code into its own function, called loadBitmap, so it is easy to transport to the
games later in this chapter:

package {
import flash.display.*;
import flash.events.*;
import flash.net.URLRequest;
import flash.geom.*;
public class BitmapExample extends MovieClip {
public function BitmapExample() {
loadBitmap("testimage.jpg");
}
// get the bitmap from an external source
public function loadBitmap(bitmapFile:String) {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(
Event.COMPLETE, loadingDone);
var request:URLRequest = new URLRequest(bitmapFile);
loader.load(request);
}

When the image is completely loaded, the loadingDone function is called. The first
thing it does is to create a new Bitmap object. It takes the data for this from
event.target.loader.content (in other words, the content property of the original
Loader object):

private function loadingDone(event:Event):void {
// get loaded data
var image:Bitmap = Bitmap(event.target.loader.content);


piece:
// loop through all pieces
for(var x:uint=0;x<6;x++) {
for (var y:uint=0;y<4;y++) {

Creating a puzzle piece is done by first making a new Bitmap object. We specify the
width and height to create one. Then, we use copyPixels to copy a section of the original
image into the bitmapData property of the puzzle piece.
The copyPixels command takes three basic parameters: the image to copy from, the
Rectangle specifying the part of the image to get, and the Point that defines where the
piece of the image goes in the new bitmap:

// create new puzzle piece bitmap
var newPuzzlePieceBitmap:Bitmap =
new Bitmap(new BitmapData(pieceWidth,
pieceHeight));
newPuzzlePieceBitmap.bitmapData.copyPixels(
image.bitmapData,new Rectangle(x*pieceWidth,
y*pieceHeight,pieceWidth,
pieceHeight),new Point(0,0));

A bitmap by itself isn’t our end goal. We want to have a Sprite to show on the screen.
So, we create a new one, and then add the bitmap to it. Then, we add the Sprite to
the stage.


// create new sprite and add bitmap data to it

var newPuzzlePiece:Sprite = new Sprite();
newPuzzlePiece.addChild(newPuzzlePieceBitmap);
// add to stage
addChild(newPuzzlePiece);

Finally, we can set the location of the sprites. We want to place them on the screen
according to their column and row, plus about five pixels to create some blank spacing
between the pieces. We also offset the horizontal and vertical positions of all pieces by
20 pixels.

// set location
newPuzzlePiece.x = x*(pieceWidth+5)+20;
newPuzzlePiece.y = y*(pieceHeight+5)+20;
}
}
}