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
Thank you so much for the tip. It helped me a lot in one of my projects.
I am not able to understand anything out of here…will really appreciate if u can help me in detail or upload a working file for the same.
Hey Vikas
You can learn more about bitmap and bitmapdata from the Adobe Docs at http://bit.ly/8ZQJPD. Play around with those examples first.
If you still have some questions let me know!
I’m struggling with this – from reading other forums on similar topics, I think quite a lot of people are. I’m pretty sure the problem is to do with linkage.
You have 2 bitmaps, bmp and flickr. In each, I’ve gone into bitmap properties in the library and set “export for actionscript”, then set the class name as “bmp” and “flickr” respectively. – I’d expect that to work with your code, but sadly it doesn’t.
First I get a “1136: Incorrect number of arguments. Expected 2.” – for line 17…
var icon : Bitmap = new flickr() as Bitmap;
…i understand that the 2 missing arguments are width and height and you can get around it by passing 0,0 but then I get a 1009: Cannot access a property or method of a null object reference.
Even if I comment out line 17 and everything afterwards, I then get 3 errors!
line 11 = Error 1119: Access of possibly undefined property width through a reference with a static type Class (same again with height)
line 14 = Error 1067: Implicit coercion of a value of type Class to an unrelated type flash.display:IBitmapDrawable
Where on earth am I going wrong?!
Hi StickStones
I’ve updated the example with a download link.
Hope it helps you out on your merging quest.
Ahhhh….so you need both a class and a bitmap in the library!
Finally I can make some sense of it! I’ve been looking at several examples and nobody ever mentioned that you’d need to set up a container class for the bitmaps, but I guess that makes sense.
Thanks Webdevotion!
SticksStones, could you elaborate on why you would want to do this?
Just curious : )
The reason this is valuable is for performance. The displaylist in Flash player works better with a single Bitmap rather than several Bitmap objects by reducing the time to move, rotate, and scale single imagery.
Thank you! Didn’t know you could position the image you want to draw!