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

表示オブジェクトをマスクとして使用することにより、空洞を作成し、この空洞から別の表示オブジェクトのコンテンツを表示することができます。

サブトピック

マスクの定義

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

// オブジェクト maskSprite をオブジェクト mySprite のマスクにする。
mySprite.mask = maskSprite;

マスクされる表示オブジェクトは、マスクとして機能する表示オブジェクトのすべての不透明な (透明でない) 領域で表示されます。たとえば、次のコードでは、赤色で 100 x 100 ピクセルの四角形を含む Shape インスタンスと、青色で半径 25 ピクセルの円を含む Sprite インスタンスを作成します。円をクリックすると、円は四角形のマスクとして設定されます。結果的に、四角形の表示される部分は、円の単体部分によって覆い隠された部分のみとなります。すなわち、赤い円しか表示されません。

// このコードは、MovieClip または Sprite インスタンスなどの
// 表示オブジェクト内で実行されることを前提としている。

import flash.display.Shape;

// 四角形を描画し、表示リストに追加する。
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);

// 円を描画し、表示リストに追加する。
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 に設定すると、マスクを削除できます。

// mySprite のマスクを削除
mySprite.mask = null;

別のマスクをマスクするためにマスクを使用することはできません。マスク表示オブジェクトの alpha プロパティを設定することはできません。マスクとして使用される表示オブジェクトでは、塗りのみを使用できます (線は無視されます)。

デバイスフォントのマスクについて

表示オブジェクトを使用して、デバイスフォントで設定されたテキストをマスクすることができます。表示オブジェクトを使用して、デバイスフォントで設定されたテキストをマスクする場合、マスクの矩形境界ボックスがマスクシェイプとして使用されます。すなわち、デバイスフォントテキストに対する非矩形の表示オブジェクトマスクを作成する場合、SWF ファイルに表示されるマスクは、マスク自体のシェイプではなく、マスクの矩形境界ボックスのシェイプになります。

アルファチャンネルマスク

アルファチャンネルマスクがサポートされるのは、マスクおよびマスクされる側の両方の表示オブジェクトがビットマップキャッシュを使用している場合です。

// maskShape は、グラデーションの塗りを含む Shape インスタンス。
mySprite.cacheAsBitmap = true;
maskShape.cacheAsBitmap = true;
mySprite.mask = maskShape;

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

次に示す例では、外部のイメージファイルをステージ上にロードします。このイメージ (より正確には、イメージがその中にロードされる Loader インスタンス) は、マスクされる表示オブジェクトになります。グラデーションのある楕円形 (単色の黒の中心から端に向かって透明にフェード) がイメージに描画されます。これが、アルファマスクです。両方の表示オブジェクトで、ビットマップキャッシュがオンになっています。楕円形はイメージのマスクとして設定され、次にドラッグ可能に設定されます。

// このコードは、MovieClip または Sprite インスタンスなどの
// 表示オブジェクト内で実行されることを前提としている。

import flash.display.GradientType;
import flash.display.Loader;
import flash.display.Sprite;
import flash.geom.Matrix;
import flash.net.URLRequest;

// イメージをロードし、表示リストに追加する。
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg");
loader.load(url);
this.addChild(loader);

// Sprite を作成する。
var oval:Sprite = new Sprite();
// グラデーションのある楕円形を描画する。
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();
// Sprite を表示リストに追加
this.addChild(oval);

// cacheAsBitmap を設定 = 両方の表示オブジェクトに対して true。
loader.cacheAsBitmap = true;
oval.cacheAsBitmap = true;
// 楕円形をローダー (およびその子、ロードされたイメージ) のマスクとして設定
loader.mask = oval;

// 楕円形をドラッグ可能にする。
oval.startDrag(true);