Maskering av visningsobjekt

Flash Player 9 och senare, Adobe AIR 1.0 och senare

Du kan använda ett visningsobjekt som en mask för att skapa ett hål genom vilket innehållet från ett annat visningsobjekt blir synligt.

Definiera en mask

För att ange att ett visningsobjekt ska vara mask för ett annat visningsobjekt anger du maskobjektet som mask -egenskapen för visningsobjektet som ska maskeras:

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

Det maskerade visningsobjektet visas under alla ogenomskinliga områden av visningsobjektet som fungerar som masken. Med följande kod skapas en Shape-instans med en röd fyrkant som är 100 x 100 pixlar och en Sprite-instans med en blå cirkel som har en radie på 25 pixlar. När cirkeln klickas anges den som masken för fyrkanten, så att den enda delen av fyrkanten som visas är den del som täcks av den heltäckande delen av cirkeln. M.a.o. visas endast en röd cirkel.

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

Visningsobjektet som fungerar som en mask kan vara dragbart, animerat, dynamiskt storleksändrat och kan använda separata former inom en enstaka mask. Maskens visningsobjekt behöver inte läggas till i visningslistan. Om du däremot vill att maskobjektet skaländras när Stage skaländras eller om du vill aktivera användarinteraktion med masken (till exempel användarkontrollerad dragning och storleksändring) så måste maskobjektet läggas till i visningslistan. Det faktiska z-indexet (överst till underst-ordning) för visningsobjektet spelar ingen roll, bara maskobjektet finns med i visningslistan. (Maskobjektet visas inte på bildskärmen annat än som en mask.) Om maskobjektet är en MovieClip-instans med flera bildrutor spelas alla bildrutor upp i tidslinjen, på samma sätt som om det inte skulle vara en mask. Du kan ta bort en mask genom att ange egenskapen mask med null :

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

Du kan inte använda en mask för att maskera en annan mask. Du kan inte välja egenskapen alpha för ett maskerat visningsobjekt. Endast fyllningar används i visningsobjekt som används som en mask, linjer ignoreras.

AIR 2

Om ett maskerat visningsobjekt cachelagras genom inställning av egenskaperna cacheAsBitmap och cacheAsBitmapMatrix måste masken vara underordnad det maskerade visningsobjektet. Om det maskerade visningsobjektet är underordnat en visningsobjektsbehållare som är cachelagrad måste på samma sätt både masken och visningsobjektet vara underordnade den behållaren. Om det maskerade objektet är underordnat fler än en cachelagrad visningsobjektsbehållare måste masken vara underordnad den cachelagrade behållare som är närmast det maskerade objektet i visningslistan.

Maskning av enhetsteckensnitt

Du kan använda ett visningsobjekt för att maskera text angivet i ett enhetsteckensnitt. När du använder ett visningsobjekt för att maskera en textuppsättning i ett enhetsteckensnitt, används den rektangulärt avgränsade rutan som maskeringsfigur. D.v.s., att om du skapar en icke-rektangulär visningsobjektmask för enhetsteckensnittstext, kommer masken som visas i SWF-filen att ha formen av den rektangulärt avgränsade rutan av masken, inte formen av själva masken.

Alfakanalsmaskering

Alfakanalsmaskering stöds om bitmappscachning används både i masken och i de maskerade visningsobjekten enligt följande:

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

En tillämpning av alfakanalsmaskering är användning av ett filter på maskobjektet oberoende av ett filter som tillämpas på det maskerade visningsobjektet.

I följande exempel läses en extern bildfil in till scenen. Bilden (egentligen Loader-instansen den läses in till) blir det visningsobjekt som är maskerat. En övertoningsoval (heltäckande mittpunkt som tonas ut till genomskinlighet vid kanterna) ritas över bilden; detta utgör alfamasken. Båda visningsobjekten har aktiverad bitmappscachning. Ovalen anges som en mask för bilden och görs sedan dragbar.

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