ActionScript Drag and Drop Display Objects With Mask And Filter?

Question

i've created a sprite to drag and drop around the stage. the sprite is masked and has it's mask as it's child so that it too will drag along with the sprite. everything works fine until i add a drop shadow filter to the sprite. when the drop shadow is added, i can only mousedown to drag and mouseup to drop the sprite if the mouse events occur within the original location of the sprite when it was added to the stage.

how can i fix this problem? could this be an issue with 10.1? if not what am i doing wrong?

var thumbMask:Sprite = new Sprite();
thumbMask.graphics.beginFill(0, 1);
thumbMask.graphics.drawRoundRect(0, 0, 100, 75, 25, 25);
thumbMask.graphics.endFill();

var thumb:Sprite = new Sprite();
thumb.graphics.beginFill(0x0000FF, 1);
thumb.graphics.drawRect(0, 0, 100, 75);
thumb.graphics.endFill();

thumb.addEventListener(MouseEvent.MOUSE_DOWN, drag);
thumb.addEventListener(MouseEvent.MOUSE_UP, drop);

thumb.filters = [new DropShadowFilter(0, 0, 0, 1, 20, 20, 1.0, 3)];

thumb.addChild(thumbMask);
thumb.mask = thumbMask;
addChild(thumb)

function drag(evt:MouseEvent):void
    {
    evt.target.startDrag();
    trace("drag");
    }

function drop(evt:MouseEvent):void
    {
    evt.target.stopDrag();
    trace("drop");
    }

---------------- UPDATED SOLUTION ----------------

thanks to the binary's suggestion, the issue is solved by using cacheAsBitmap. however, when i applied cacheAsBitmap to the container, which was housing the masked thumb sprite that has already a drop shadow applied, the mouse events were not working as well as expected. after reading the docs, i learned that adding a filter to a sprite automatically activates the cacheAsBitmap property for that sprite:

The cacheAsBitmap property is automatically set to true whenever you apply a filter to a display object (when its filter array is not empty), and if a display object has a filter applied to it, cacheAsBitmap is reported as true for that display object, even if you set the property to false. If you clear all filters for a display object, the cacheAsBitmap setting changes to what it was last set to. 1

so i believe the error was caused by having 2 cacheAsBitmap properties within the same container sprite. therefore, in this situation, i've simply added the filter to the container rather than to the masked thumb sprite.

var thumbMask:Sprite = new Sprite();
thumbMask.graphics.beginFill(0, 1);
thumbMask.graphics.drawRoundRect(0, 0, 100, 75, 25, 25);
thumbMask.graphics.endFill();

var thumb:Sprite = new Sprite();
thumb.graphics.beginFill(0x0000FF, 1);
thumb.graphics.drawRect(0, 0, 100, 75);
thumb.graphics.endFill();

thumb.addChild(thumbMask);
thumb.mask = thumbMask;

var container: Sprite = new Sprite();
container.addChild(thumb);
container.filters = [new DropShadowFilter(0, 0, 0, 1, 20, 20, 1.0, 3)];

//if there is no filters applied or if the filters array is empty, use:
//container.cacheAsBitmap = true;

addChild(container);

container.addEventListener(MouseEvent.MOUSE_DOWN, drag);
container.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(evt:MouseEvent):void
    {
    evt.target.startDrag();
    trace("drag");
    }

function drop(evt:MouseEvent):void
    {
    evt.target.stopDrag();
    trace("--DROP");
    }

Answer 1

u can work around this too by wrapping your thumb clip into a container. set cacheAsBitmap to true and adjust the event-handling.

    thumb.filters = [new DropShadowFilter(0, 0, 0, 1, 20, 20, 1.0, 3)];

//  thumb.addEventListener(MouseEvent.MOUSE_DOWN, drag);
//  thumb.addEventListener(MouseEvent.MOUSE_UP, drop);

var cont: Sprite = new Sprite();
    cont.addChild(thumb);
    cont.cacheAsBitmap = true;
    cont.addEventListener(MouseEvent.MOUSE_DOWN, drag);
    cont.addEventListener(MouseEvent.MOUSE_UP, drop);

    addChild(cont);

so maybe you'll don't have to deal with a second sprite for your dropshadow. hope this helps.. regards..