ActionScript 3的和动态的面具 [英] Actionscript 3 and dynamic masks
问题描述
我有一个容器视频剪辑作为，我需要屏蔽掉一个内容区域。当我创建这个容器内口罩使用形状我似乎无法与其他容器我在这里创建的内容进行交互，如按钮等。
这是我在做什么在code（我已经离开了所有的进口的等）：
类myContainer中扩展了影片剪辑
{
保护VAR掩蔽：形状= NULL;
保护VAR面板：MyPanel = NULL;
公共职能myContainer中（）
{
this.masker =新形状（）;
this.masker.graphics.clear（）;
this.masker.graphics.beginFill（0x00ff00）;
this.masker.graphics.drawRect（0，0，1，1）; // 1x1像素。
this.masker.graphics.endFill（）;
的addChild（this.masker）;
this.panel =新MyPanel（）; //有按钮和东西。
的addChild（this.panel）;
this.mask = this.masker;
}
//调用它的父时，舞台大小。
公共职能调整大小（宽：编号，身高：编号）：无效
{
//将面具的舞台大小的一半。
this.masker.width =宽度/ 2;
this.masker.height =身高/ 2;
//面板设置为舞台的一半大小。
this.panel.resize（宽度/ 2，高度/ 2）;
}
}
在我的面具（形状）添加到显示层次，我可以什么按钮在MyPanel定义不再进行交互。然而，不会添加蒙版的显示层次确实让我对MyPanel但面具内容进行交互不是大小/正确定位。我想，当面具是不会添加到它坐落在电影的左上角显示的层次结构（我不能证明这一点虽然）。
我如何去正确地做我的面具尺寸/位置，让用户在MyPanel按钮？
互动 this.masker.mouseEnabled = FALSE; //在this.masker设置
这应该工作。现在，它正在拦截的事件才得到别的容器中。不是100％肯定，但我相信面具会坐在容器的顶部。另一种选择是增加另一个掩蔽孩子myContainer中在图像显示的底部并添加面板作为其兄弟节点。您将要在蒙面精灵设置的mouseEnabled和mouseChildren为false / MC仍在虽然。
包
{
进口flash.display.Shape;
进口flash.display.Sprite;
公共类myContainer中扩展Sprite
{
保护VAR掩蔽：形状= NULL;
保护VAR面板：MyPanel;
公共职能myContainer中（）
{
this.masker =新形状（）;
this.masker.graphics.clear（）;
this.masker.graphics.beginFill（0x00ff00）;
this.masker.graphics.drawRect（0，0，1，1）; // 1x1像素。
this.masker.graphics.endFill（）;
的addChild（this.masker）;
this.panel =新MyPanel（）;
this.addChild（板）;
this.mask = this.masker;
}
//调用它的父时，舞台大小。
公共职能调整大小（宽：编号，身高：编号）：无效
{
//将面具的舞台大小的一半。
this.masker.width =宽度/ 2;
this.masker.height =身高/ 2;
//面板设置为舞台的一半大小。
}
}
}
-
包
{
进口flash.display.Sprite;
进口对象类型：flash.events.Event;
进口flash.events.MouseEvent;
公共类MyPanel扩展Sprite
{
公共职能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）
}
公共职能handleMouseOver（事件：事件）：无效
{
this.graphics.clear（）;
this.graphics.beginFill（0x00FF00）
this.graphics.drawRect（0,0,10,10）;
}
公共职能handleMouseOut（事件：事件）：无效
{
this.graphics.clear（）;
this.graphics.beginFill（为0xFF0000）
this.graphics.drawRect（0,0,10,10）;
}
}
}
I have a container MovieClip that serves as a content area that I need to mask off. When I create a mask inside this container using a Shape I can't seem to interact with the contents of other containers I create here, like buttons etc.
This is what I'm doing in code (I've left out all the import's 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);
}
}
When I add the mask (Shape) to the display hierarchy I can no longer interact with whatever buttons are defined in MyPanel. However, not adding the mask to the display hierarchy does let me interact with the contents on MyPanel but the mask is not sized/positioned correctly. I guess that when the mask is not added to the display hierarchy it sits in the top-left corner of the movie (I cannot prove this though).
How do I go about making my mask size/position correctly and let the user interact with the buttons in MyPanel?
this.masker.mouseEnabled = false; //set on this.masker
That should work. Right now it is intercepting your events before they get to anything else in the container. Not 100% sure, but I believe a mask will sit on top of the container. Another option would be to add another masking child to MyContainer at the bottom of the displayList and add panel as its sibling. You will want to set mouseEnabled and mouseChildren to false on the masked sprite/mc still though.
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);
}
}
}
这篇关于ActionScript 3的和动态的面具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
