AS3 Drag and drop items on webcam

Question

I'm making a little thing in AS3, a "wanted" poster generator. I load the webcam inside my poster ("container") and put an attributesContainer next to it. There I have a hat, a mustache, ... people can drag and drop on the webcam instance. No problem here, but now I want to send it to Facebook. I know how that works, but I'm having some difficulties with keeping the position of the hat/mustache/... where the user wanted it.

For example: I drag the hat onto my head (middle of the poster), I hit the "take picture" button to draw Bitmapdata, and my hat is at coordinates 0,0 again. I believe I have to work with a Matrix, but I tried everything now and it just doesn't show up or stays at 0,0.

Any help? Here's some of my code.

private function sendHandler(e:MouseEvent):void {
var bmd:BitmapData;
var bmp:Bitmap;

// "container" contains poster+webcam img

bmd = new BitmapData(container.width, container.height, true);
bmd.draw(container);

//var hatMatrix:Matrix = new Matrix(1, 0, 0, 1, hat.x, hat.y);

bmd.draw(hat);
bmp = new Bitmap(bmd, "auto", true);

sendToFacebook();
}

Answer 1

You can make your life a little easier by structuring it different.

Have a top level container.
Add to that your webcam display
Also add to that your dropped items

Then you can just take a bitmap of the top level container instead of each piece and compositing them together.