2009-07-07 90 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; 
    } 
}