Weergaveobjecten maskeren

Flash Player 9 of hoger, Adobe AIR 1.0 of hoger

U kunt een weergaveobject ook als een masker gebruiken om een gat te maken waardoor de inhoud van een ander weergaveobject zichtbaar is.

Een masker definiëren

Als u wilt aangeven dat een weergaveobject functioneert als masker voor een ander weergaveobject, stelt u het maskeerobject in als de eigenschap mask van het weergaveobject dat moet worden gemaskeerd:

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

Het gemaskeerde weergaveobject wordt onthuld onder alle dekkende (niet-transparante) gebieden van het weergaveobject dat als masker fungeert. De volgende code maakt bijvoorbeeld een instantie Shape met een vierkant van 100 x 100 pixels en een instantie Sprite met een blauwe cirkel met een straal van 25 pixels. Wanneer op de cirkel wordt geklikt, wordt de cirkel ingesteld als masker voor het vierkant, zodat het enige zichtbare gedeelte van het vierkant het gedeelte is dat wordt bedekt door het effen gedeelte van de cirkel. Uiteindelijk is er dus alleen een rode cirkel zichtbaar.

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

Het weergaveobject dat als een masker fungeert, kan sleepbaar zijn en bewegen. Hiernaast kan de grootte van het object dynamisch worden aangepast en kan het object afzonderlijke vormen binnen een enkel masker gebruiken. Het maskerende weergaveobject hoeft niet noodzakelijkerwijs aan het weergaveoverzicht te worden toegevoegd. Als u echter wilt dat het maskerende object schaalt wanneer het werkgebied wordt geschaald of als u gebruikersinteractie met het masker wilt inschakelen (zoals slepen en formaatwijzigingen door de gebruiker), moet het maskerende object aan het weergaveoverzicht worden toegevoegd. De daadwerkelijke z-index (van voor naar achter) van de weergaveobjecten is niet van belang, zolang de weergaveobjecten aan het weergaveoverzicht zijn toegevoegd. (Het maskerende object wordt alleen als masker op het scherm weergegeven.) Als het maskerende object een instantie MovieClip met meerdere frames is, worden alle frames in de tijdlijn precies zo afgespeeld als wanneer het object niet als masker zou fungeren. U kunt een masker verwijderen door de eigenschap mask in te stellen op null :

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

U kunt een masker niet gebruiken om een ander masker te maskeren. U kunt de eigenschap alpha van een maskeerweergaveobject niet instellen. Er worden alleen vullingen gebruikt in een weergaveobject dat wordt gebruikt als een masker; lijnen worden genegeerd.

AIR 2

Als een gemaskeerd weergaveobject in de cache wordt opgenomen door het instellen van de eigenschappen cacheAsBitmap en cacheAsBitmapMatrix , moet het masker een onderliggend masker van het gemaskeerde weergaveobject zijn. En als het gemaskeerde weergaveobject afstamt van een weergaveobjectcontainer in de cache, moeten zowel het masker als het weergaveobject afstammen van de desbetreffende container. Als het gemaskeerde object afstamt van meerdere in de cache opgenomen weergaveobjectcontainers, moet het masker afstammen van de container in de cache die het meest op het gemaskeerde object in de weergavelijst lijkt.

Apparaatlettertypen maskeren

Met een weergaveobject kunt u tekst maskeren die wordt weergegeven in een apparaatlettertype. Wanneer u een weergaveobject gebruikt om tekst in een apparaatlettertype te maskeren, wordt het rechthoekige selectiekader van het masker gebruikt als maskeringsvorm. Wanneer u een niet-rechthoekig weergaveobjectmasker maakt voor tekst in een apparaatlettertype, heeft het masker dat wordt weergegeven in het SWF-bestand de vorm van het rechthoekig selectiekader van het masker, niet de vorm van het masker zelf.

Alpha-kanaalmaskering

Alpha-kanaalmaskering wordt ondersteund wanneer zowel voor het masker als voor de gemaskerde weergaveobjecten bitmapcaching wordt gebruikt, zoals hier aangegeven:

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

U kunt alpha-kanaalmaskering bijvoorbeeld gebruiken voor het toepassen van een filter op het maskerende object, onafhankelijk van een filter dat op het gemaskeerde weergaveobject is toegepast.

In het volgende voorbeeld wordt een extern afbeeldingsbestand in het werkgebied geladen. Deze afbeelding (of meer specifiek, de instantie Loader die hierin is geladen) wordt toegepast als het gemaskeerde weergaveobject. Een verlopende ovaal (effen zwart centrum dat transparant fadet naar de randen) wordt over de afbeelding getekend; dit is het alpha-masker. Voor beide weergaveobjecten is bitmapcaching ingeschakeld. De ovaal wordt als een masker voor de afbeelding ingesteld en wordt vervolgens sleepbaar gemaakt.

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