Masquage des objets d'affichage -- Flash CS3

Vous pouvez utiliser un objet d'affichage comme masque pour créer un « trou » laissant apparaître le contenu d'un autre objet.

Sous-rubriques

Définition d'un masque

Pour indiquer qu'un objet d'affichage sera le masque d'un autre objet, définissez l'objet masque comme propriété mask de l'objet à masquer :

// définir l'objet maskSprite comme masque de l'objet mySprite.
mySprite.mask = maskSprite;

L'objet masqué apparaît sous toutes les zones opaques (non transparentes) de celui qui fait office de masque. Par exemple, le code suivant crée une instance de Shape contenant un carré rouge de 100 x 100 pixels, et une instance de Sprite contenant un cercle bleu d'un rayon de 25 pixels. Lorsque l'utilisateur clique sur le cercle, celui-ci est défini comme masque du carré, si bien que la seule partie visible du carré est celle qui est couverte par la partie solide du cercle. Autrement dit, seul un cercle rouge est visible.

// ce code doit être exécuté dans un conteneur d'objets d'affichage,
// par ex. une instance de MovieClip ou de Sprite.

import flash.display.Shape;

// tracer un carré et l'ajouter à la liste d'affichage.
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);

// tracer un cercle et l'ajouter à la liste d'affichage.
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'objet d'affichage qui fait office de masque peut être déplacé, animé, redimensionné dynamiquement, et il peut aussi utiliser des formes séparées au sein d'un même masque. Il n'est pas nécessaire que l'objet qui fait office de masque soit ajouté à la liste d'affichage. Toutefois, si vous avez l'intention de redimensionner cet objet masque en cas de mise à l'échelle de la scène, ou encore si vous voulez autoriser une interaction de l'utilisateur avec le masque (par exemple un glisser-déposer ou un redimensionnement), vous devez l'ajouter à la liste d'affichage. L'indice de profondeur (z-index, pour l'ordre de superposition) des objets d'affichage n'a pas d'importance, dès lors que l'objet masque est ajouté à la liste d'affichage. (L'objet masque n'apparaîtra pas à l'écran, si ce n'est sous forme de masque.) Si l'objet masque est une instance de MovieClip comportant plusieurs images, toutes les images de son scénario sont lues, au même titre que s'il n'était pas utilisé comme masque. Pour supprimer un masque, mettez la propriété mask à null:

// supprime le masque de mySprite
mySprite.mask = null;

Il est impossible d'utiliser un masque pour en masquer un autre. Il est impossible de définir la propriété alpha d'un objet utilisé comme masque. Seuls les remplissages sont utilisés dans un objet utilisé comme masque, les traits sont ignorés.

Masquage des polices de périphérique

Vous pouvez utiliser un objet d'affichage pour masquer du texte défini dans une police de périphérique. Dans ce cas, le cadre de sélection rectangulaire du masque est utilisé comme forme de masquage. Ainsi, si vous créez un objet masque non rectangulaire pour un texte, le masque qui apparaît dans le fichier SWF est la forme de la boîte de délimitation rectangulaire du masque, et non celle du masque lui-même.

Masquage du canal alpha

Le masquage de canal alpha est possible si le masque et les objets masqués utilisent la mise en cache sous forme de bitmap :

// maskShape est une instance de Shape qui comporte un remplissage en dégradé.
mySprite.cacheAsBitmap = true;
maskShape.cacheAsBitmap = true;
mySprite.mask = maskShape;

Par exemple, une application du masquage du canal alpha consiste à utiliser un filtre sur l'objet masque, indépendamment d'un autre filtre qui est appliqué à l'objet masqué.

Dans l'exemple suivant, un fichier image externe est chargé sur la scène. Cette image (ou, plus exactement, l'instance de Loader dans laquelle elle est chargée) représentera l'objet masqué. Un dégradé ovale (centre noir opaque devenant progressivement transparent sur les bords) est dessiné sur l'image. Il fera office de masque alpha. La mise en cache sous forme de bitmap est activée pour les deux objets d'affichage. L'ovale est défini comme masque de l'image, puis il est rendu déplaçable.

// ce code doit être exécuté dans un conteneur d'objets d'affichage,
// par ex. une instance de MovieClip ou de Sprite.

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

// charger une image et l'ajouter à la liste d'affichage.
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg");
loader.load(url);
this.addChild(loader);

// créer un Sprite.
var oval:Sprite = new Sprite();
// tracer un ovale dégradé.
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();
//ajouter le Sprite à la liste d'affichage.
this.addChild(oval);

// activer la propriété cacheAsBitmap pour les deux objets d'affichage.
loader.cacheAsBitmap = true;
oval.cacheAsBitmap = true;
// définir l'ovale comme masque du loader (et de son enfant, l'image chargée).
loader.mask = oval;

// rendre l'ovale déplaçable
oval.startDrag(true);