Mascaramento de objetos de exibição

Flash Player 9 e posterior, Adobe AIR 1.0 e posterior

Você pode usar um objeto de exibição como uma máscara para criar um orifício por meio do qual o conteúdo de outro objeto de exibição é visualizado.

Definição de uma máscara

Para indicar que um objeto de exibição será a máscara de outro objeto, defina o objeto de máscara como a propriedade mask do objeto de exibição a ser mascarado:

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

O objeto de exibição mascarado é revelado em todas as áreas opacas (não transparentes) do objeto de exibição que age como a máscara. Por exemplo, o código a seguir cria uma ocorrência de Shape que contém um quadrado vermelho de 100 x 100 pixels e uma ocorrência de Sprite que contém um círculo azul com raio de 25 pixels. Assim que é clicado, o círculo é definido como a máscara do quadrado para que a única parte exibida do quadrado seja a parte coberta pela parte sólida do círculo. Em outras palavras, somente um círculo vermelho ficará visível.

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

O objeto de exibição que atua como máscara pode ser arrastado, animado, redimensionado dinamicamente e pode usar formas separadas em uma única máscara. O objeto de exibição de máscara não precisa ser necessariamente adicionado à lista de exibição. No entanto, se desejar que o objeto de máscara seja dimensionado quando o palco for dimensionado ou se desejar permitir a interação do usuário com a máscara (como as operações de arrastar e redimensionar controladas pelo usuário), o objeto de máscara deve ser adicionado à lista de exibição. O índice z real (ordem da frente para trás) dos objetos de exibição não importam, desde que o objeto de máscara seja adicionado à lista de exibição. O objeto de máscara será exibido na tela apenas como uma máscara. Se o objeto de máscara for uma ocorrência de MovieClip com vários quadros, todos os quadros da linha do tempo desse objeto serão reproduzidos, do mesmo modo como se não estivesse agindo como máscara. Para remover uma máscara, defina a propriedade mask como null :

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

Você não pode usar uma máscara para mascarar outra. A propriedade alpha de um objeto de exibição de máscara não pode ser definida. Somente os preenchimentos são usados em um objeto de exibição usado como máscara; os traçados são ignorados.

AIR 2

Se um objeto de exibição com máscara for armazenado em cache pela definição das propriedades cacheAsBitmap e cacheAsBitmapMatrix , a máscara deve ser um filho do objeto de exibição com máscara. Da mesma forma, se o objeto de exibição com máscara for descendente de um contêiner de objetos de exibição em cache, a máscara e o objeto de exibição devem ser descendentes deste contêiner. Se o objeto com máscara for descendente de mais de um contêiner de objetos de exibição em cache, a máscara deve ser descendente do recipiente em cache mais próximo do objeto com máscara na lista de exibição.

Sobre o mascaramento de fontes de dispositivo

Você pode usar um objeto de exibição para mascarar o texto que está definido em uma fonte de dispositivo. Quando um objeto de exibição é usado para mascarar o texto definido em uma fonte de dispositivo, a caixa delimitadora retangular da máscara é usada como a forma de mascaramento. Isso significa que, se você criar uma máscara não retangular de objeto de exibição para o texto da fonte de dispositivo, a máscara exibida no arquivo SWF terá a forma da caixa delimitadora retangular da máscara, não a forma da máscara propriamente dita.

Mascaramento do canal alfa

O mascaramento do canal alfa é permitido se a máscara e os objetos de exibição mascarados usarem o cache de bitmaps, conforme mostrado aqui:

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

Por exemplo, o mascaramento do canal alfa usa um filtro no objeto de máscara diferente do filtro que é aplicado no objeto de exibição mascarado.

No exemplo a seguir, um arquivo de imagem externo é carregado no palco. Essa imagem (ou, mais precisamente, a ocorrência de Loader na qual é carregada) será o objeto de exibição mascarado. Um elemento oval de gradiente (centro preto sólido que fica transparente nas bordas) é desenhado na imagem; esta será a máscara alfa. Os dois objetos de exibição têm o cache de bitmaps ativado. O elemento oval é definido como uma máscara para a imagem e pode ser arrastado.

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