表示オブジェクトのマスク

別の表示オブジェクトのマスクとなる表示オブジェクトを指定するには、マスクされる表示オブジェクトの mask プロパティとしてマスクオブジェクトを設定します。

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

マスクされる表示オブジェクトは、マスクとして機能する表示オブジェクトのすべての不透明な（透明でない）領域で表示されます。 例えば、次のコードでは、赤色で 100 × 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;

例えば、アルファチャンネルマスクの適用例の 1 つは、マスクされる表示オブジェクトに適用されるフィルターとは別にマスクオブジェクト上でフィルターを使用することです。

次に示す例では、外部のイメージファイルをステージ上にロードします。 このイメージ（より正確には、イメージがその中にロードされる 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);