표시 객체 마스크

표시 객체를 다른 표시 객체의 마스크로 지정하려면 마스크 객체를 마스크를 적용할 표시 객체의 mask 속성으로 설정합니다.

// Make the object maskSprite be a mask for the object mySprite. 
mySprite.mask = maskSprite;

마스크가 적용된 표시 객체는 마스크로 작용하는 표시 객체의 모든 불투명 영역 아래에 나타납니다. 예를 들어, 다음 코드는 100 x 100 픽셀의 빨강 사각형을 포함하는 Shape 인스턴스와 반경이 25 픽셀인 파랑 원을 포함하는 Sprite 인스턴스를 만듭니다. 원을 클릭하면 해당 원이 사각형에 대한 마스크로 설정되므로, 사각형에서 원으로 가려진 부분만이 표시됩니다. 즉, 빨강 원만 보이게 됩니다.

// This code assumes it's being run within a display object container 
// such as a MovieClip or Sprite instance. 
 
import flash.display.Shape; 
 
// Draw a square and add it to the display list. 
var square:Shape = new Shape(); 
square.graphics.lineStyle(1, 0x000000); 
square.graphics.beginFill(0xff0000); 
square.graphics.drawRect(0, 0, 100, 100); 
square.graphics.endFill(); 
this.addChild(square); 
 
// Draw a circle and add it to the display list. 
var circle:Sprite = new Sprite(); 
circle.graphics.lineStyle(1, 0x000000); 
circle.graphics.beginFill(0x0000ff); 
circle.graphics.drawCircle(25, 25, 25); 
circle.graphics.endFill(); 
this.addChild(circle); 
 
function maskSquare(event:MouseEvent):void 
{ 
    square.mask = circle; 
    circle.removeEventListener(MouseEvent.CLICK, maskSquare); 
} 
 
circle.addEventListener(MouseEvent.CLICK, maskSquare);

마스크 역할을 하는 표시 객체는 드래그할 수 있고, 애니메이션 처리하거나 동적으로 크기를 조절할 수 있으며, 단일 마스크 내에서 개별 모양을 사용할 수 있습니다. 마스크 표시 객체를 표시 목록에 추가할 필요는 없습니다. 그러나, 스테이지 크기를 조절할 때 마스크 객체의 크기를 조절하거나, 마스크와의 사용자 상호 작용(예: 사용자 제어 드래그 및 크기 조절)을 가능하도록 하려면 마스크 객체를 표시 목록에 추가해야 합니다. 마스크 객체를 표시 목록에 추가할 경우 표시 객체의 실제 z 인덱스(전후 순서)는 중요하지 않습니다. 마스크 객체는 화면에는 표시되지 않고 마스크로만 표시됩니다. 마스크 객체가 프레임이 여러 개 있는 MovieClip 인스턴스인 경우 마스크 객체는 마스크 역할을 하지 않을 때와 마찬가지로 해당 타임라인에 모든 프레임을 재생합니다. mask 속성을 null 로 설정하여 마스크를 제거할 수 있습니다.

// remove the mask from mySprite 
mySprite.mask = null;

마스크를 사용하여 다른 마스크에 마스크를 적용할 수는 없습니다. 마스크 표시 객체의 alpha 속성은 설정할 수 없습니다. 마스크로 사용되는 표시 객체에는 채우기만 사용되고 획은 무시됩니다.

표시 객체를 사용하면 장치 글꼴로 설정된 텍스트에 마스크를 적용할 수 있습니다. 표시 객체를 사용하여 장치 글꼴에 설정된 텍스트에 마스크를 적용할 때는 마스크의 사각형 경계 상자가 마스크 모양으로 사용됩니다. 즉, 장치 글꼴 텍스트에 대해 사각형이 아닌 표시 객체 마스크를 만들면 SWF 파일에 나타나는 마스크의 모양은 마스크 자체의 모양이 아니라 마스크의 사각형 경계 상자의 모양이 됩니다.

다음과 같이 알파 채널 마스크는 마스크 표시 객체와 마스크가 적용된 표시 객체 모두 비트맵 캐싱을 사용할 경우에 지원됩니다.

// maskShape is a Shape instance which includes a gradient fill. 
mySprite.cacheAsBitmap = true; 
maskShape.cacheAsBitmap = true; 
mySprite.mask = maskShape;

예를 들어, 마스크가 적용된 표시 객체에 적용되어 있는 필터와 독립적으로 마스크 객체에 필터를 사용할 경우 알파 채널 마스크를 적용합니다.

다음 예제에서는 외부 이미지 파일을 스테이지에 로드합니다. 이 이미지(정확히 말해서 이미지가 로드되는 Loader 인스턴스)는 마스크가 적용되는 표시 객체입니다. 이미지 위에 그래디언트 타원(중앙이 검정이고 가장자리로 갈수록 점점 투명해짐)이 그려집니다. 이것이 알파 마스크가 됩니다. 두 표시 객체는 모두 비트맵 캐싱 기능이 설정되어 있습니다. 타원이 이미지에 대한 마스크로 설정되고 드래그할 수 있게 됩니다.

// This code assumes it's being run within a display object container 
// such as a MovieClip or Sprite instance. 
 
import flash.display.GradientType; 
import flash.display.Loader; 
import flash.display.Sprite; 
import flash.geom.Matrix; 
import flash.net.URLRequest; 
 
// Load an image and add it to the display list. 
var loader:Loader = new Loader(); 
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg"); 
loader.load(url); 
this.addChild(loader); 
 
// Create a Sprite. 
var oval:Sprite = new Sprite(); 
// Draw a gradient oval. 
var colors:Array = [0x000000, 0x000000]; 
var alphas:Array = [1, 0]; 
var ratios:Array = [0, 255]; 
var matrix:Matrix = new Matrix(); 
matrix.createGradientBox(200, 100, 0, -100, -50); 
oval.graphics.beginGradientFill(GradientType.RADIAL, 
                                colors, 
                                alphas, 
                                ratios, 
                                matrix); 
oval.graphics.drawEllipse(-100, -50, 200, 100); 
oval.graphics.endFill(); 
// add the Sprite to the display list 
this.addChild(oval); 
 
// Set cacheAsBitmap = true for both display objects. 
loader.cacheAsBitmap = true; 
oval.cacheAsBitmap = true; 
// Set the oval as the mask for the loader (and its child, the loaded image) 
loader.mask = oval; 
 
// Make the oval draggable. 
oval.startDrag(true);