Creating a Movieclip that installs as a mask is clickable and responds to MouseEvents

Question

I'm trying to pan a movie clip

I have two movie clips on stage. canvasPanel_mc and mask_mc. The first is masking the mask (mask_mc). Inside mask_mc there is movieclip dragCanvas_mc. The alpha value of dragCanvas_mc is zero. This is the code I'm using:

mask_mc.dragCanvas_mc.addEventListener(MouseEvent.MOUSE_DOWN,onStartDrag); mask_mc.dragCanvas_mc.addEventListener(MouseEvent.MOUSE_OUT,onStopDrag); mask_mc.dragCanvas_mc.addEventListener(MouseEvent.MOUSE_UP,onStopDrag); function onStartDrag(evt:MouseEvent) { canvasPanel_mc.startDrag(); } function onStopDrag(evt:MouseEvent) { canvasPanel_mc.stopDrag(); } 

I realized that since mask_mc is set as a mask, MouseEvents are not registered. Is there a way to make it respond to MouseEvents. Or I will have to be different.

Answer 1

the structure of your layers should look like this:

• holder_mc
  • dragCanvas_mc
  • mask_mc
  • canvasPanel_mc

then

 canvasPanel_mc.mask = mask_mc; 

when you set mask_mc as the mask for canvasPanel_mc, then mask_mc becomes just a diplayobject, so that it will bypass mouseEvents, etc.

then your code would look like this: it would drag the whole holder_mc file:

 dragCanvas_mc.addEventListener(MouseEvent.MOUSE_DOWN,onStartDrag); function onStartDrag(evt:MouseEvent) { stage.addEventListener ( MouseEvent.MOUSE_UP,onStopDrag) startDrag(); } function onStopDrag(evt:MouseEvent) { stage.removeEventListener( MouseEvent.MOUSE_UP,onStopDrag) stopDrag(); } 

Decision

@pkyeck also works, but only when the user does not have the iteration of the user inside canvasPanel_mc

Answer 2

the content you want to mask does not have to be inside the movie clip mask. usually a mask is just a rectangular sprite / figure, in which there is nothing but a picture on a graphic canvas.

 var mask:Shape = new Shape(); mask.graphics.beginFill(0xff0000, 1); mask.graphics.drawRect(0, 0, 20, 20); addChild(mask); 

then you will create a container:

 var container:Sprite = new Sprite(); addChild(container); container.mask = mask; 

and then just add eventlistener to the container:

 container.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); private function onMouseDown(evt:MouseEvent):void { container.startDrag(); } 

you can also add additional MCs to the container sprite ...

example on wonderfl: http://wonderfl.net/c/nqpN