Maskieren von Anzeigeobjekten

Mit einem Anzeigeobjekt, das Sie als Maske verwenden, können Sie eine Öffnung erstellen, die den Blick auf ein zweites, darunter liegendes Anzeigeobjekt freigibt.

Definieren einer Maske

Um anzugeben, dass ein Anzeigeobjekt die Maske für ein zweites Anzeigeobjekt ist, richten Sie das Maskenobjekt als mask-Eigenschaft des zu maskierenden Anzeigeobjekts ein:

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

Das maskierte Anzeigeobjekt wird unter allen undurchsichtigen Bereichen des Anzeigeobjekts angezeigt, das als Maske dient. Mit dem folgenden Code werden eine Shape-Instanz erstellt, die ein rotes Rechteck mit einer Größe von 100 x 100 Pixel enthält, und eine Sprite-Instanz, die einen blauen Kreis mit einem Radius von 25 Pixel enthält. Der Kreis wird durch Klicken als Maske für das Quadrat ausgewählt, sodass der einzige Teil des Quadrats, der noch sichtbar ist, der Teil ist, der durch den festen Teil des Kreises abgedeckt wird. Mit anderen Worten, es ist nur ein roter Kreis sichtbar.

// 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);

Das als Maske verwendete Anzeigeobjekt kann gezogen, animiert und dynamisch in der Größe geändert werden und separate Formen innerhalb einer Maske verwenden. Das Masken-Anzeigeobjekt muss der Anzeigeliste nicht unbedingt hinzugefügt werden. Andererseits muss sich das Maskenobjekt in der Anzeigeliste befinden, wenn Sie das Maskenobjekt zusammen mit der Bühne skalieren möchten oder wenn eine Benutzerinteraktion mit der Maske möglich sein soll (z. B. vom Benutzer gesteuertes Ziehen und Ändern der Größe). Die tatsächliche z-Reihenfolge (von vorne nach hinten) der Anzeigeobjekte spielt keine Rolle, solange das Maskenobjekt der Anzeigeliste hinzugefügt ist. (Das Maskenobjekt erscheint nur als Maske auf dem Bildschirm.) Handelt es sich bei dem Maskenobjekt um eine MovieClip-Instanz mit mehreren Bildern, werden alle Bilder in der Zeitleiste wiedergegeben, genau so, als ob das Objekt nicht als Maske verwendet wird. Sie entfernen eine Maske, indem Sie die Eigenschaft mask auf null einstellen:

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

Sie können eine Maske jedoch nicht auf eine andere Maske anwenden. Die alpha-Eigenschaft eines Masken-Anzeigeobjekts kann nicht eingestellt werden. Außerdem werden in einem Anzeigeobjekt, das als Maske verwendet wird, nur Füllungen dargestellt; Striche werden ignoriert.

Maskieren von Geräteschriftarten

Sie können mit einem Anzeigeobjekt einen Text maskieren, der in einer Geräteschriftart definiert ist. Wenn Sie eine Anzeigeobjekt-Maske zum Maskieren eines Textes verwenden, der in einer Geräteschriftart definiert ist, wird der rechteckige Begrenzungsrahmen der Maske als Maskenform verwendet. Das heißt, wenn Sie eine nicht rechteckige Anzeigeobjekt-Maske für Text in Geräteschriftarten erstellen, entspricht die Form der in der SWF-Datei angezeigten Maske nicht der eigentlichen Maskenform, sondern der Form des rechteckigen Begrenzungsrahmens.

Maskieren des Alphakanals

Die Alphakanal-Maskierung wird unterstützt, wenn die Maske und die maskierten Anzeigeobjekte die Bitmap-Zwischenspeicherung verwenden. Dies wird im folgenden Beispiel gezeigt:

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

Eine Anwendung der Alphakanal-Maskierung wäre, einen Filter am Maskenobjekt anzuwenden, und zwar unabhängig von dem Filter, der auf das maskierte Anzeigeobjekt angewendet wurde.

Im folgenden Beispiel wird eine externe Bilddatei auf die Bühne geladen. Das Bild (oder genauer gesagt die Loader-Instanz, in die es geladen ist) ist das maskierte Anzeigeobjekt. Über das Bild wird ein Verlaufsoval gezeichnet (eine Form mit einem festen schwarzen Mittelpunkt, der zu den Rändern hin transparent wird); dies ist die Alphamaske. Für beide Anzeigeobjekte muss die Bitmap-Zwischenspeicherung aktiviert sein. Das Oval wird als eine Maske für das Bild eingestellt und dann zu einem ziehbaren Objekt gemacht.

// 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);