Actionscript 3 et de la dynamique des masques

J'ai un conteneur MovieClip qui sert de zone de contenu que j'ai besoin de masque. Lorsque je crée un masque à l'intérieur de ce conteneur à l'aide d'une Forme je n'arrive pas à interagir avec le contenu des autres conteneurs-je créer ici, comme des boutons etc.

C'est ce que je fais dans le code (je l'ai laissé de côté tout l'import, etc.):

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);
   }
}

Lorsque j'ajoute le masque (la Forme) de la hiérarchie d'affichage, je ne peux plus interagir avec tout ce que les boutons sont définis dans MyPanel. Cependant, pas ajouter le masque de la hiérarchie d'affichage, ne permettez-moi d'interagir avec le contenu sur MyPanel mais le masque n'est pas de taille/correctement positionné. Je suppose que lorsque le masque n'est pas ajouté à la hiérarchie d'affichage, il se trouve dans le coin en haut à gauche de la vidéo (je ne peut pas le prouver).

Comment puis-je faire de ma taille de masque/correctement la position et de laisser à l'utilisateur d'interagir avec les boutons dans MyPanel?

OriginalL'auteur Luke | 2009-07-07

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

Qui devrait fonctionner. Maintenant, c'est l'interception de vos événements avant d'arriver à 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 serait d'ajouter un autre masquage de l'enfant à MyContainer au bas de la displayList et ajouter panneau que son petit frère. Vous souhaitez définir mouseEnabled et mouseChildren à faux sur le masqués sprite/mc pourtant si.

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);
        }
    }
}

Mais le masque est une Forme et donc n'a pas un mouseEnabled de la propriété. C'est une raison, j'ai utilisé une Forme au lieu d'un Sprite.
Juste testé avec un Sprite à la place d'une Forme (avec la mouseEnabled propriété est définie sur false). Ne fonctionne pas non plus. 🙁
Peut-être que le problème est dans votre MyPanel classe? Je l'ai testé avec mes ajouté le code ci-dessus et il fonctionne comme prévu.
Le MyPanel classe est juste le contenu du récipient, il aurait pu être n'importe quoi. Le point que je suis attachant à faire, c'est que par l'ajout du masque à la hiérarchie d'affichage, vous ne pouvez pas interagir avec tous les objets dans le champ d'application de l'objet masqué.
Le code ci-dessus qui vous permet d'interagir avec MyPanel comme prévu.

OriginalL'auteur

1

Une chose que j'ai remarqué, c'est que si le masque d'un enfant de l'objet masqué, la position du masque pour tous les événements liés à la souris ou de l'interactivité sera éteint, tandis que visuellement tout semble aller bien.

J'ai eu par exemple un clip avec un bouton à l'intérieur de la fin, il a été masqué par l'un de ses enfants. Ce qui s'est passé n'est qu'à moitié le bouton peut être cliqué et si j'ai déplacé le clip un peu à gauche, un quart seulement de la touche est resté sur-mesure.

Fondamentalement, l'événement de la souris masquage semble se positionner par rapport au parent de l'objet masqué alors que le visuel ne masque pas.

Vous avez besoin de déplacer le masque du clip parent. Voici comment j'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;
  }
}
```
OriginalL'auteur Kevthunder

Vous devez vous connecter pour publier un commentaire.