ActionScript 3的和动态的面具(Actionscript 3 and dynamic m

2019-09-17 18:24发布

我有一个容器影片剪辑用作我需要屏蔽掉一个内容区域。 当我使用形状创建此容器内的面膜我似乎无法与我在这里创建了其他容器的内容交互,如按钮等。

这是我在代码正在做(我已经离开了进口的所有等):

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

当我在掩模(形状)添加到显示层级我可以在MyPanel中定义的所有按钮不再进行交互。 但是, 加面膜的显示层次确实让我对MyPanel内容交互,但是面膜并不是大小/正确定位。 我想,在口罩不会添加到显示层级它坐落在电影的左上角(我不能,虽然证明这一点)。

我该如何去正确地做我的面具大小/位置,让用户在MyPanel按钮互动?

Answer 1:

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

这应该工作。 现在它被拦截您的活动他们得到在容器中先天下之忧。 不是100%肯定,但我相信面具将坐在容器的顶部。 另一种选择是到另一个掩蔽孩子在显示列表的底部添加到myContainer中,并添加面板作为其兄弟。 你会希望将mouseEnabled和mouseChildren设置为false蒙面雪碧/ 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:

有一两件事我注意到的是,如果在被屏蔽的对象的孩子面膜,面膜是所有鼠标相关的事件或交互的位置将被关闭,而在视觉上似乎一切都很好。

比如我有一个夹子里面到底被掩盖的它的一个孩子的按钮。 发生了什么事是只有一半可以点击按钮,如果我移动的剪辑位到左侧,只有按钮的季度保持点击能。

基本上,鼠标事件掩蔽似乎而视觉掩模不将自身的相对位置,以掩蔽对象的父对象。

您需要将面罩移动到父剪辑。 在这里,我怎么做的:

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


文章来源: Actionscript 3 and dynamic masks