Enmascaramiento de objetos de visualización -- Flash CS3

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.

Subtemas

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:

// Hacer que el objeto maskSprite sea una máscara del objeto 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, sólo se ve un círculo rojo.

// Se supone que este código se ejecuta en un contenedor de objeto de visualización
// como una instancia de MovieClip o Sprite.

import flash.display.Shape;

// Dibujar un cuadrado y añadirlo a la lista de visualización.
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);

// Dibujar un círculo y añadirlo a la lista de visualización.
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 sólo 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:

// Eliminar la máscara de mySprite.
mySprite.mask = null;

No se 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, sólo se pueden utilizar los rellenos; los trazos se pasan por alto.

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 es una instancia de Shape que incluye un relleno con degradado.
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 arrastrable.

// Se supone que este código se ejecuta en un contenedor de objeto de visualización
// como una instancia de MovieClip o Sprite.

import flash.display.GradientType;
import flash.display.Loader;
import flash.display.Sprite;
import flash.geom.Matrix;
import flash.net.URLRequest;

// Cargar una imagen y añadirla a la lista de visualización.
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg");
loader.load(url);
this.addChild(loader);

// Crear un Sprite.
var oval:Sprite = new Sprite();
// Dibujar un óvalo con degradado.
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();
// Añadir el Sprite a la lista de visualización.
this.addChild(oval);

// Definir cacheAsBitmap = true en ambos objetos de visualización.
loader.cacheAsBitmap = true;
oval.cacheAsBitmap = true;
// Definir el óvalo como la máscara de Loader (y su elemento secundario, la imagen cargada).
loader.mask = oval;

// Convertir el óvalo en arrastrable.
oval.startDrag(true);