2009-07-07 86 views
3

我有一个容器MovieClip,用作我需要屏蔽的内容区域。当我使用形状创建此容器内的面膜我似乎无法与我在这里创建了其他容器的内容交互,如按钮等Actionscript 3和动态蒙版

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

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按钮互动?

回答

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

这应该工作。现在它在它们到达容器中的任何其他事物之前拦截你的事件。不是100%确定的,但我相信面具会放在容器的顶部。另一种选择是将另一个遮罩子添加到displayList底部的MyContainer中,并将面板添加为其兄弟。尽管如此,你仍然希望在masked sprite/mc上设置mouseEnabled和mouseChildren为false。

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

但是masker是一个Shape,因此没有mouseEnabled属性。这是我使用Shape而不是Sprite的原因。 – Luke 2009-07-07 01:41:08

1

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

例如我有一个夹子里面到底它是由它的孩子一个屏蔽的按钮。发生了什么事情只有一半的按钮可以点击,如果我把剪辑稍微移动到左边,只有四分之一的按钮保持可点击。

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

您需要将蒙版移至父剪辑。这里我是怎么做到的:

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