Realtime duplicate of MovieClip

Question

I have a MovieClip containing an image. The image can be dragged around inside the MC. The MC has a mask, let say round, so not all of the image is visible all the time, depends on where you drag the image.

What I need is a real-time duplicate of this MC as a smaller thumbnail. When I drag the image around in the MC, the duplicate thumbnail MC should be updated in real-time.

Anyone know how to do this?

Answer 1

Well one simple way would be to first setup a listener so that whenever the image was moved it would trigger the thumbnail version to update.

For that I would just tap into the MouseEvent.MOUSE_MOVE event when you started dragging the image around (so your listener for the MouseEvent.MOUSE_DOWN would add a new listener for MOUSE_MOVE). Then you could remove the MOUSE_MOVE listener when the user stopped dragging the image around.

As for the thumbnail itself, you could use a Bitmap object that's fed from a BitmapData object that itself captures the masked image via it's draw method (it can also size it down as needed).

I'll try to dig up some code for this later on, but this should be enough to get you started.

Another method would be to just create a whole copy of the masked image, scale it down, and make it update the position of the thumbnail on the MOUSE_MOVE event of the large version.

Answer 2

+1 to Branden's answer. Something like:

public static const SCALE : Number = 0.5; // thumbnail scale

private var thumb : Bitmap;
private var maskedClip : MovieClip = ...;

//...

maskedClip.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

//...

private function mouseMoveHandler(event:MouseEvent):void {
    var snapshot:BitmapData - new BitmapData(maskedClip.width * SCALE, maskedClip.height * SCALE, true, 0x00000000);
    var scaleMatrix:Matrix = new Matrix();
    scaleMatrix.scale(SCALE, SCALE);
    snapshot.draw(maskedClip, scaleMatrix);

    if (!thumb) {
     thumb = new Bitmap(snapshot);
     addChild(thumb);
    } else {
     thumb.bitmapData = snapshot;
    }
}