Enmascarar objetos de visualización

Flash Player 9 y posterior, Adobe AIR 1.0 y posterior

Se puede utilizar un objeto de visualización como una máscara para crear un agujero a través del cual se ve el contenido de otro objeto de visualización.

Definición de una máscara

Para indicar que un objeto de visualización será la máscara de otro objeto de visualización, es preciso definir el objeto de máscara como la propiedad mask del objeto de visualización que se va a enmascarar:

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

El objeto de visualización con máscara aparece bajo todas las zonas opacas (no transparentes) del objeto de visualización que actúa como máscara. Por ejemplo, el código siguiente crea una instancia de Shape que contiene un cuadrado rojo de 100 por 100 píxeles y una instancia de Sprite que contiene un círculo azul con un radio de 25 píxeles. Cuando se hace clic en un círculo, se define como la máscara del cuadrado, de forma que la única parte del cuadrado que aparece visible es la que queda cubierta por la parte sólida del círculo. Dicho de otro modo, solo se ve un círculo rojo.

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

El objeto de visualización que actúa como máscara puede arrastrarse, animarse, cambiar de tamaño automáticamente y usar formas independientes en una sola máscara. No es necesario añadir el objeto de visualización de máscara a la lista de visualización. Sin embargo, si se desea ajustar la escala del objeto de máscara cuando se ajusta la escala del escenario, o permitir la interacción del usuario con la máscara (por ejemplo, el arrastre o cambio de tamaño controlado por el usuario), el objeto de máscara debe añadirse a la lista de visualización. El índice z real (de delante a atrás) de los objetos de visualización no es relevante, siempre y cuando el objeto de máscara se añada a la lista de visualización. (El objeto de máscara solo aparecerá en la pantalla como una máscara.) Si el objeto de máscara es una instancia de MovieClip con varios fotogramas, reproduce todos ellos en su línea de tiempo, tal y como haría si no actuara como una máscara. Para eliminar una máscara, debe establecerse la propiedad mask en null :

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

No puede utilizar una máscara para enmascarar otra máscara ni definir la propiedad alpha de un objeto de visualización de máscara. En un objeto de visualización que se usa como máscara, solo se pueden utilizar los rellenos; los trazos se pasan por alto.

AIR 2

Si un objeto de visualización enmascarado se almacena en caché estableciendo las propiedades cacheAsBitmap y cacheAsBitmapMatrix , la máscara debe ser un objeto secundario del objeto de visualización enmascarado. Del mismo modo, si el objeto de visualización enmascarado es un descendiente de un contenedor del objeto de visualización que está almacenado en caché, tanto la máscara como el objeto de visualización deben ser descendentes de dicho contenedor. Si el objeto enmascarado es un descendiente de varios contenedores del objeto de visualización almacenado en caché, la máscara debe ser un descendiente del contenedor almacenado en caché más cercano al objeto enmascarado en la lista de visualización.

Enmascaramiento de fuentes de dispositivo

Se puede utilizar un objeto de visualización para enmascarar un texto definido en una fuente de dispositivo. Cuando se utiliza un objeto de visualización para enmascarar texto definido en una fuente de dispositivo, el recuadro de delimitación rectangular de la máscara se utiliza como la forma de máscara. Es decir, si se crea una máscara de objeto de visualización no rectangular para el texto de la fuente de dispositivo, la máscara que aparecerá en el archivo SWF tendrá la forma del recuadro de delimitación rectangular y no la de la máscara en sí.

Enmascaramiento del canal alfa

Se admite el enmascaramiento del canal alfa si tanto la máscara como los objetos de visualización enmascarados utilizan la caché de mapa de bits, como se muestra a continuación:

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

Una aplicación de enmascaramiento del canal alfa consiste, por ejemplo, en usar un filtro del objeto de máscara independientemente del filtro aplicado al objeto de visualización enmascarado.

En el siguiente ejemplo se carga un archivo de imagen externo en el escenario. Dicha imagen (mejor dicho, la instancia de Loader en la que se ubica) será el objeto de visualización que se enmascare. Se dibuja un óvalo con degradado (de color negro sólido en el centro y con transparencia progresiva en los bordes) sobre la imagen; será la máscara alfa. Ambos objetos de visualización tienen activada la caché de mapa de bits. El óvalo se define como una máscara de la imagen y luego se convierte en un elemento que se puede arrastrar.

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