Mascheratura degli oggetti di visualizzazione

Flash Player 9 e versioni successive, Adobe AIR 1.0 e versioni successive

Potete utilizzare un oggetto di visualizzazione come maschera per creare un'area trasparente attraverso cui sia visibile il contenuto di un altro oggetto di visualizzazione.

Definizione di una maschera

Per indicare che un oggetto di visualizzazione è la maschera di un altro oggetto, impostate l'oggetto di mascheramento come proprietà mask dell'oggetto di visualizzazione da mascherare:

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

L'oggetto di visualizzazione mascherato viene rivelato sotto tutte le aree opache (non trasparenti) dell'oggetto di visualizzazione che agisce da maschera. Il codice seguente, ad esempio, crea un'istanza di Shape contenente un quadrato rosso di 100 per 100 pixel e un'istanza di Sprite contenente un cerchio blu con un raggio di 25 pixel. Se fate clic sul cerchio, esso viene impostato come maschera del quadrato, in modo che la sola parte visibile di quest'ultimo sia la parte coperta dall'area piena del cerchio. In altre parole, risulta visibile solo un cerchio rosso.

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

L'oggetto di visualizzazione che funge da maschera può essere trascinato, animato e ridimensionato dinamicamente; inoltre è possibile utilizzare forme separate in un'unica maschera. L'oggetto di visualizzazione di mascheratura non deve necessariamente essere inserito nell'elenco di visualizzazione. Tuttavia, se si desidera che l'oggetto maschera venga modificato in scala insieme allo stage o se si desidera abilitare l'interazione dell'utente con la maschera (ad esempio mediante trascinamento o ridimensionamento controllati dall'utente), è necessario che l'oggetto maschera si trovi nell'elenco di visualizzazione. L'effettivo ordine di impilamento (o ordine di profondità) degli oggetti di visualizzazione non è importante, a condizione che l'oggetto maschera venga inserito nell'elenco di visualizzazione (l'oggetto maschera viene visualizzato sullo schermo esclusivamente come maschera). Se l'oggetto maschera è un'istanza di MovieClip con più fotogrammi, tutti i fotogrammi vengono riprodotti nella sua linea temporale, esattamente come se l'istanza non fungesse da maschera. Per rimuovere la maschera, impostare la proprietà mask su null :

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

Non è possibile utilizzare una maschera per mascherarne un'altra, né impostare la proprietà alpha di un oggetto di visualizzazione utilizzato come maschera. In un oggetto di visualizzazione impostato come maschera vengono utilizzati solo i riempimenti, mentre i tratti vengono ignorati.

AIR 2

Se un oggetto di visualizzazione mascherato viene memorizzato nella cache impostando le proprietà cacheAsBitmap e cacheAsBitmapMatrix , la maschera deve essere un elemento secondario dell'oggetto di visualizzazione mascherato. Analogamente, se l'oggetto di visualizzazione mascherato è un discendente del contenitore di oggetti di visualizzazione che viene memorizzato nella cache, sia la maschera sia l'oggetto di visualizzazione devono essere discendenti di quel contenitore. Se l'oggetto mascherato è un discendente di più contenitori di oggetti di visualizzazione memorizzati nella cache, la maschera deve essere un discendente del contenitore memorizzato nella cache più vicino all'oggetto mascherato nell'elenco di visualizzazione.

Applicazione dell'effetto maschera ai caratteri dispositivo

Potete utilizzare un oggetto di visualizzazione per mascherare il testo impostato con un carattere dispositivo. Se utilizzate un oggetto di visualizzazione per mascherare un testo impostato in un carattere dispositivo, il riquadro di delimitazione rettangolare della maschera viene utilizzato come area di mascheratura. Questo significa che se per un testo con un carattere dispositivo create una maschera di oggetto di visualizzazione di forma non rettangolare, la maschera che appare nel file SWF assume la forma del riquadro rettangolare di delimitazione e non quella della maschera stessa.

Applicazione dell'effetto maschera ai canali alfa

L'applicazione dell'effetto maschera ai canali alfa viene supportato se sia l'oggetto di visualizzazione di maschera che quelli mascherati utilizzano la memorizzazione delle bitmap nella cache, come illustrato di seguito.

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

Un'applicazione dell'effetto maschera ai canali alfa, ad esempio, deve utilizzare un filtro sull'oggetto maschera indipendentemente dal filtro applicato all'oggetto di visualizzazione mascherato.

Nell'esempio seguente, un file di immagine esterno viene caricato sullo stage. Tale immagine (o più precisamente, l'istanza di Loader nella quale viene caricata) corrisponde all'oggetto di visualizzazione che viene mascherato. Un gradiente ovale (centro completamente nero che diventa trasparente sui bordi) viene disegnato sopra l'immagine; questa figura corrisponde alla maschera alfa. Per entrambi gli oggetti di visualizzazione è stata attivata la memorizzazione di bitmap nella cache. L'ovale viene impostato come maschera dell'immagine e viene successivamente reso trascinabile.

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