How to merge two images into one using Actionscript

Webdevotion — Wed, 05 Aug 2009 13:18:38 +0000

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

Webdevotion.be » matrix

How to merge two images into one using Actionscript