Skip to main content
G
Gregor3637
Known Participant
March 3, 2014
Answered

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

  • March 3, 2014
  • 1 reply
  • 990 views

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();
                    }
This topic has been closed for replies.
Correct answer Ned Murphy
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.
1 reply
Ned Murphy
Ned MurphyCorrect answer
Legend
March 3, 2014
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.
G
Gregor3637Author
Known Participant
March 3, 2014
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
Ned Murphy
Legend
March 3, 2014
thanks , I just wanted to know what is the best option of doing what i had in mind thats why i asked 

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"

        
                                                

        

    


            

                                        

            
                        

                                                                                                            
            




        

                    

    
    





    


                                        

                                                        

            
        
    






                                    
Terms & ConditionsAccessibility statement

            
        



        
            
    
        
    
        



        
        
        


        


        
        
        
        
                                                        

                            
    

                    

  

    

      
        
      
    

    

      
        Using the community
      
      
        Terms of use
      
      
        Privacy
      
      
        Cookie preferences
      
      
        Do not sell or share my personal information
      
      
        ad choicesAdChoices