How can I merge multiple bitmapData objects into one so that it can be encoded using PNGEncoder?

Question

I am creating a program that is effectively an sprite creator. I'm very new to AS3, but I know JQuery, JS, PHP, etc. After going through multiple steps of selecting pieces to customize a character, you are supposed to be able to download the final product using fileReference(). Everything works, and I can download the image in the end, but the problem is that I cannot capture all of several movieclips on the stage, I can only capture one. Maybe this will help clarify:

// add listener to the download button
dl_b.addEventListener(MouseEvent.CLICK, save_emote); 

function save_emote(e:MouseEvent):void{ 
    var bData:BitmapData = new BitmapData(50, 50); 
    var bData_eyes:BitmapData = new BitmapData(50, 50); 


    bData.draw(emptyMC_mc);
    bData_eyes.draw(emptyMC_eyes);

    // none of these worked, so they have been commented out
    //bData.draw(emptyMC_a); 
    //bData.draw(emptyMC_mouth); 
    //bData.draw(emptyMC_hand_l); 
    //bData.draw(emptyMC_hand_r); 


    // possible to use two bitmapDatas to merge into single?
    var byteArray:ByteArray = PNGEncoder.encode(bData);

    var fileReference:FileReference = new FileReference();
    fileReference.save(byteArray, 'myEmote.png');
    replay_b.visible = true; 
    upload_b.visible = true; 
    back_b.visible = false; 
    user_color.clear(); 
    user_eyes.clear(); 
    user_mouth.clear(); 
    user_a.clear(); 
    hand_l.clear(); 
    hand_r.clear(); 
    mouth_coords.clear(); 
    eye_coords.clear(); 
}

I really have no idea how I could get it to work. I've tried using the .merge() method, I've tried Googling for days now, and I've tried to merge them by creating two separate bitmapData objects and then drawing one in the other. Nothing has really worked for me.

If you want to take a look at the program and click your way through it to get to the point at which you saved the image, you can try it out here: http://dl.dropbox.com/u/3666815/mote-machine-main.html

If you save the image at the end, you'll see the issue at hand. I haven't been able to find a good answer, so if anyone could help, it'll be thoroughly appreciated!

Thanks in advance!

Edit: Here is how I set it up with a Sprite as a container, but now it seems to be saving a blank canvas.

    var emote:Sprite = new Sprite(); 
    emote.addChild(emptyMC_mc); 
    emote.addChild(emptyMC_eyes); 
    emote.addChild(emptyMC_hand_l); 
    emote.addChild(emptyMC_hand_r); 
    emote.addChild(emptyMC_mouth); 
    if(user_a.data.accessory != "none"){
            emote.addChild(emptyMC_a); 
    } 

    var bData:BitmapData = new BitmapData(80, 80); 

    bData.draw(emote);

Could it be that each of the movieclips I'm adding to the sprite have children of their own?

Answer 1

If you place your bitmaps into some sort of a display object container, like a Sprite, you can later use the "draw" and/or "copyPixels" methods to grab the bitmap data of the container, which will retain all of the children in their proper place. That should do what you need.