How to merge two images into one using Actionscript

Well, it’s very easy, using BitmapData and Bitmap. This example makes things a bit more complex to show some principles. Hope you learn something out of it off course.

// we'll scale the first ( background ) image by 50%
var s : Number = .5;

// create a matrix to make the scalilng of the bitmap possible
var scaleMatrix : Matrix = new Matrix();

// apply the scaling to the matrix
scaleMatrix.scale(s,s);

// create a bitmapdata object from an existing bitmap ( "bmp" in this case )
var scaledBitmap : BitmapData = new BitmapData(bmp.width*s,bmp.height*s,false,0);

// draw the content and scale it using the matrix
scaledBitmap.draw(bmp,scaleMatrix);

// we have an embedded asset called "flickr", a flickr logo in gif format
var icon : Bitmap = new flickr() as Bitmap;

// let's place it in the bottom right corner
var ix : Number = scaledBitmap.width-icon.width;
var ij : Number = scaledBitmap.height-icon.height;

// create a matrix for the position of the icon
// note the use of the ix and ij variables in the parameters
var positionMatrix : Matrix = new Matrix(1,0,0,1,ix,ij);

// draw the icon bmp to the bitmapdata
scaledBitmap.draw( icon, positionMatrix );

// add the new, merged, bitmap to your displaylist
var bmp : Bitmap = new Bitmap( scaledBitmap );
addChild( bmp ); 

// that's it!

PS: as per user comments I’ve also uploaded an example to use in the Flash IDE ( *.fla file ) – the above example assumes you’re using Flash Builder or another editor

I do have to say I don’t understand why people try to merge two bitmaps in Flash using the IDE. You could just as easily create a MovieClip with the two bitmaps on top of each other. Or am I missing something? Tell me in the comments!

Download the example *.fla file here: http://www.webdevotion.be/blog/wp-content/mergy.fla.zip