Maskowanie obiektów wyświetlanych

Flash Player 9 i nowsze wersje, Adobe AIR 1.0 i nowsze wersje

Obiekt wyświetlany może zostać wykorzystany jako maska w celu utworzenia otworu, przez który widoczne będą inne obiekty wyświetlane.

Definiowanie maski

Aby wskazać, że obiekt wyświetlany będzie maską dla innego obiektu wyświetlanego, należy ustawić obiekt maski jako właściwość mask obiektu wyświetlanego, który ma być maskowany:

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

Wyświetlany obiekt maskowany będzie widoczny pod wszystkimi nieprzezroczystymi obszarami obiektu wyświetlanego, który działa w roli maski. Przykład: poniższy kod tworzy instancję Shape zawierającą czerwony kwadrat o wymiarach 100 x 100 pikseli oraz instancję Sprite zawierającą niebieski okrąg o promieniu 25 pikseli. Kliknięcie okręgu powoduje jego ustawienie jako maski dla kwadratu i wówczas jedyną widoczną częścią kwadratu jest część zasłonięta przez litą część okręgu. Innymi słowy: widoczny będzie tylko czerwony okrąg.

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

Obiekt wyświetlany działający jako maska może być przyciągany, animowany, jego wielkość można zmieniać dynamicznie, a ponadto w ramach pojedynczej maski można wykorzystywać osobne kształty. Wyświetlany obiekt maski nie musi być dodawany do listy wyświetlania. Jeśli jednak obiekt maski ma być skalowany podczas skalowania stołu montażowego lub jeśli użytkownik ma mieć możliwość oddziaływania na maskę (np. przeciągać ją lub zmieniać jej wielkość), wówczas obiekt maski należy dodać do listy wyświetlania. Rzeczywisty indeks z (kolejność od przodu do tyłu) obiektów wyświetlanych nie jest istotny, pod warunkiem że obiekt maski został dodany do listy wyświetlania. (Obiekt maski będzie widoczny na ekranie tylko jako maska). Jeśli obiekt maski jest instancją MovieClip z wieloma klatkami, odtwarza wszystkie klatki na własnej osi czasu, w taki sam sposób, jak gdyby nie był maską. Aby usunąć maskę, należy ustawić dla właściwości mask wartość null :

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

Maska nie może służyć do maskowania innej maski. Istnieje możliwość ustawienia właściwości alpha obiektu wyświetlanego maski. W obiekcie wyświetlanym, który jest używany jako maska, wykorzystywane są tylko wypełnienia; obrysy są ignorowane.

AIR 2

Jeśli maskowany obiekt ekranowy jest buforowany przez ustawienie właściwości cacheAsBitmap i cacheAsBitmapMatrix , maska musi być elementem potomnym maskowanego obiektu ekranowego. Jeśli maskowany obiekt ekranowy jest elementem potomnym buforowanego kontenera obiektu ekranowego, to zarówno maska, jak i obiekt ekranowy muszą być elementami potomnymi tego kontenera. Jeśli maskowany obiekt jest elementem potomnym więcej niż jednego buforowanego kontenera obiektu ekranowego, maska musi być elementem potomnym tego buforowanego kontenera, który znajduje się najbliżej maskowanego obiektu na liście wyświetlania.

Informacje o maskowaniu czcionki urządzenia

Obiekt wyświetlany można wykorzystać w celu maskowania tekstu, który jest zapisany w czcionce urządzenia. Jeśli obiekt wyświetlany jest używany do maskowania tekstu zapisanego w czcionce urządzenia, wówczas prostokątna obwiednia maski zostanie wykorzystana jasko kształt maskowania. Oznacza to, że w przypadku utworzenia nieprostokątnej maski obiektu wyświetlanego dla tekstu w czcionce urządzenia, maska, jaka pojawi się w pliku SWF, będzie kształtem prostokątnej obwiedni maski, a nie kształtem samej maski.

Masowanie kanału alfa

Masowanie kanału alfa jest obsługiwane wówczas, gdy dla maski i maskowanego obiektu wyświetlanego aktywne jest zapisywanie w pamięci podręcznej (bitmapy), co przedstawiono poniżej:

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

Przykład: jednym z zastosowań maskowania kanału alfa jest stosowanie filtru dla obiektu maski niezależnie od filtru, który został zastosowany dla maskowanego obiektu wyświetlanego.

W poniższym przykładzie zewnętrzny plik obrazu jest ładowany do stołu montażowego. Ten obraz (lub dokładniej: instancja Loader, do której został załadowany) będzie maskowanym obiektem wyświetlanym. Na obrazie zostanie narysowany gradientowy obiekt owalny (nieprzezroczysty czarny środek przechodzący w przezroczystą krawędź), który będzie maską alfa. Dla obydwu obiektów wyświetlanych włączono zapisywanie bitmapy w pamięci podręcznej. Owalny kształt został ustawiony jako maska dla obrazu, a następnie umożliwiono jego przeciąganie.

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