Actionscript 3 et masques dynamiques

Question

J'ai un conteneur MovieClip qui sert de zone de contenu que je dois masquer. Lorsque je crée un masque à l'intérieur de ce conteneur en utilisant une forme, je ne peux pas sembler interagir avec le contenu des autres conteneurs que je crée ici, comme les boutons, etc.

Ceci est ce que je fais dans le code (il me reste) toutes les importations de etc. de):

class MyContainer extends MovieClip 
{ 
    protected var masker : Shape = null; 
    protected var panel : MyPanel = null; 

    public function MyContainer() 
    { 
     this.masker = new Shape(); 
     this.masker.graphics.clear(); 
     this.masker.graphics.beginFill(0x00ff00); 
     this.masker.graphics.drawRect(0, 0, 1, 1); // 1x1 pixel. 
     this.masker.graphics.endFill(); 
     addChild(this.masker); 

     this.panel = new MyPanel(); // has buttons and stuff. 
     addChild(this.panel); 

     this.mask = this.masker; 
    } 

    // called by it's parent when the stage is resized. 
    public function resize(width : Number, height : Number) : void 
    { 
     // set the mask to half the size of the stage. 
     this.masker.width = width/2; 
     this.masker.height = height/2; 

     // set the panel to half the size of the stage. 
     this.panel.resize(width/2, height/2); 
    } 
} 

Quand j'ajoute le masque (Shape) à la hiérarchie d'affichage, je ne peux plus interagir avec ce boutons sont définis dans MyPanel. Cependant, pas ajoutant le masque à la hiérarchie d'affichage me laisse interagir avec le contenu sur MyPanel mais le masque n'est pas dimensionné/positionné correctement. Je suppose que lorsque le masque n'est pas ajouté à la hiérarchie d'affichage, il se trouve dans le coin supérieur gauche du film (je ne peux pas le prouver si).

Comment est-ce que je fais correctement ma taille/position de masque et laisse l'utilisateur interagir avec les boutons dans MyPanel?

Answer 1

this.masker.mouseEnabled = false; //set on this.masker 

Cela devrait fonctionner. En ce moment, il intercepte vos événements avant qu'ils n'atteignent quoi que ce soit d'autre dans le conteneur. Pas sûr à 100%, mais je crois qu'un masque va s'asseoir sur le dessus du conteneur. Une autre option consiste à ajouter un autre enfant de masquage à MyContainer en bas de la liste d'affichage et à ajouter un panneau en tant que frère. Vous voudrez cependant définir mouseEnabled et mouseChildren sur false sur l'image-objet masquée/mc.

package 
{ 
    import flash.display.Shape; 
    import flash.display.Sprite; 

    public class MyContainer extends Sprite 
    { 
     protected var masker : Shape = null; 
     protected var panel:MyPanel; 

     public function MyContainer() 
     { 

      this.masker = new Shape(); 
      this.masker.graphics.clear(); 
      this.masker.graphics.beginFill(0x00ff00); 
      this.masker.graphics.drawRect(0, 0, 1, 1); // 1x1 pixel. 
      this.masker.graphics.endFill(); 
      addChild(this.masker); 

      this.panel = new MyPanel(); 
      this.addChild(panel); 
      this.mask = this.masker; 
     } 

     // called by it's parent when the stage is resized. 
     public function resize(width : Number, height : Number) : void 
     { 
      // set the mask to half the size of the stage. 
      this.masker.width = width/2; 
      this.masker.height = height/2; 

      // set the panel to half the size of the stage. 
     } 
    } 
} 

-

package 
{ 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 

    public class MyPanel extends Sprite 
    { 
     public function MyPanel() 
     { 
      this.graphics.beginFill(0xFF0000) 
      this.graphics.drawRect(0,0,10,10); 
      this.addEventListener(MouseEvent.MOUSE_OVER, this.handleMouseOver) 
      this.addEventListener(MouseEvent.MOUSE_OUT, this.handleMouseOut) 
     } 

     public function handleMouseOver(event:Event):void 
     { 
      this.graphics.clear(); 
      this.graphics.beginFill(0x00FF00) 
      this.graphics.drawRect(0,0,10,10); 
     } 

     public function handleMouseOut(event:Event):void 
     { 
      this.graphics.clear(); 
      this.graphics.beginFill(0xFF0000) 
      this.graphics.drawRect(0,0,10,10); 
     } 
    } 
} 

Answer 2

Une chose que je remarque est que si le masque chez un enfant de l'objet masqué, la position de ce masque pour tous les événements liés à la souris ou l'interactivité sera éteint, alors que visuellement tout semble bien. Par exemple, j'avais un clip avec un bouton à l'intérieur, il était masqué par l'un de ses enfants. Ce qui est arrivé est seulement la moitié du bouton pourrait être cliqué et si j'ai déplacé le clip un peu vers la gauche, seulement un quart du bouton est resté cliquable. Fondamentalement, le masquage des événements de la souris semble se positionner par rapport au parent de l'objet masqué, contrairement au masque visuel.

Vous devez déplacer le masque vers le plan parent. Voici comment je l'ai fait:

class MaskedObject extends MovieClip{ 
    public var maskClip:MovieClip; 
    public var maskOrigin:Point 

    public function MaskedObject(){ 
    maskOrigin = new Point(maskClip.x,maskClip.y); 
    parent.addChild(maskClip); 
    maskClip.x = maskOrigin.x + this.x; 
    maskClip.y = maskOrigin.y + this.y; 
    mask = maskClip; 
    } 

    override function set x(val:Number):void{ 
    super.x = val; 
    maskClip.x = maskOrigin.x + this.x; 
    } 


    override function set y(val:Number):void{ 
    super.y = val; 
    maskClip.y = maskOrigin.y + this.y; 
    } 
}