How to move the mask without the masking area that it has created

[Gregor3637]

Im trying to position a masking area at a certain location where it will mask a fraction of an object (myRainBow), and then move the mask without moving the masking area.But the code that i have does exactly the opposite -> it moves the masking area with the mask itself.

My problem put in other words :

I have a beautiful picture, but i want to move the picture at a different location on my living room wall.So where ever i move the picture (top corner, left corner , bottom-center corner ,etc.) it (the content of the picture itself) will not change, only its location of the picture in my living room.

How do i do that with as3 code, cause i have so far only this and it is not doing what i want it to do

private var masker:Shape = new Shape();

                    private var maskerBoarder:Shape = new Shape();

                    private var container:Sprite = new Sprite();

                    private var myRainBowPicture:Sprite = new Sprite();

                    private var m:Matrix = new Matrix();

                    public function MainMask()

                    {

                              if (stage) init();

                              else addEventListener(Event.ADDED_TO_STAGE, init);

                    }

                    private function init(e:Event = null):void

                    {

                              removeEventListener(Event.ADDED_TO_STAGE, init);

                              this.addChild( container );

                              //create the gradiant

                              m.createGradientBox( 400, 300, 0, 0, 0); 

                              myRainBowPicture.graphics.beginGradientFill(GradientType.LINEAR, [ 0xFF, 0xFF00FF, 0xFF0000],  [1, 1, 1], [0x0, 0x7F, 0xFF], m , SpreadMethod.PAD, InterpolationMethod.LINEAR_RGB, 0);

                              myRainBowPicture.graphics.drawRect(stage.stageWidth * 0.5 - 200 ,stage.stageHeight * 0.5 - 150, 400, 300);

                              myRainBowPicture.graphics.endFill();

                              addChild(myRainBowPicture);

                              masker.graphics.beginFill( 0x00ff00 );

                              masker.graphics.drawRect( 0, 0, 200, 100 );

                              masker.graphics.endFill();

                              container.addChild( masker );

                              maskerBoarder.graphics.beginFill( 0, 1 );

                              maskerBoarder.graphics.drawRect( 0, 0, 200, 100 );

                              maskerBoarder.graphics.beginFill( 0x00ffAA, 0.5 );

                              maskerBoarder.graphics.drawRect( 2, 2, 194, 96 );

                              maskerBoarder.graphics.endFill();

                              maskerBoarder.graphics.endFill();

                              container.addChild( maskerBoarder );

                              myRainBowPicture.mask = masker

                              container.addEventListener(MouseEvent.MOUSE_DOWN, onClick)

                              container.buttonMode = true;

                              stage.addEventListener(MouseEvent.MOUSE_UP, drop);

                    }

                    private function onClick(e:MouseEvent):void

                    {

                              container.startDrag();

                    }

                    private function drop(e:MouseEvent):void

                    {

                               stopDrag();

                    }

[Ned Murphy · Accepted solution]

The way you describe moving the mask without moving the mask area isn't clear, but if your description of moving something on the wall is, then you probably just need to add the rainbow image and the mask to the same container object and assign the drag / drop to that container.  From what I can make of your code you are only putting the mask inside a container and moving that container.  Try putting that first container inside another conatiner along with the rainbow and assign the drag / drop to the second.

[Gregor3637]

Well what you are saing makes perfect sense. But can i ask how do i make so that i have 2 different masks ot the same image (lets say mask1 is showing the left side and mask2 right side)and move them separately.Like if i decide to cut the picture  into 2 parts and move them independently.Or 4 parts or 10 .etc. Do i have to create a separate container and put in there a new instance of the picture and the new masking area ? Cause i really am thinking of making this with 20-30 pieces (masking areas) of 1 picture/image.? how do i go for that ?

[Ned Murphy]

Is your original question answered? 

If you want to have the image as 20 to 30 separate movable pieces, then there are two ways that come to mind...  1) Either create 20-30 copies of the image and have 20-30 different masks, one for each image and combine them as described in the first response. 2) Cut the image up into 20-30 pieces and mask each one if needed.

[Gregor3637]

thanks , I just wanted to know what is the best option of doing what i had in mind thats why i asked

[Ned Murphy]

Another possible approach you might want to look into, especially if your masks are all dynamically drawn, is to look into copying sections of the image into to bitmap objects.  You can probably draw out the different sections of the image using code rather than physically managing the different pieces.  I haven't had done anything of this nature myself so I can't offer much detail.  Search Google using terms like "AS3 copy bitmap"