Masquage des objets d’affichage

Flash Player 9 et les versions ultérieures, Adobe AIR 1.0 et les versions ultérieures

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

Définition d’un masque

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

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

L’objet d’affichage masqué est révélé sous toutes les zones opaques (non transparentes) de l’objet d’affichage servant de masque. Par exemple, le code suivant crée une occurrence de Shape qui contient un carré rouge de 100 pixels sur 100 et une occurrence de Sprite contenant un cercle bleu d’un rayon de 25 pixels. Lorsque l’utilisateur clique sur le cercle, il devient le masque du carré, de sorte que l’unique partie du carré affichée est la section couverte par la partie pleine du cercle. En d’autres termes, seul un cercle rouge est visible.

// 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’objet d’affichage qui sert de masque peut être glissé, animé, redimensionné dynamiquement et peut utiliser plusieurs formes au sein d’un masque unique. Il n’est pas nécessaire que l’objet qui fait office de masque soit ajouté à la liste d’affichage. Toutefois, pour que l’objet servant de masque soit mis à l’échelle lors de la mise à l’échelle de la scène ou pour activer l’interaction utilisateur avec le masque (opération de type glisser et redimensionner contrôlée par l’utilisateur, par exemple), 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 servant de masque ne s’affiche pas à l’écran, sauf en tant que masque). Si l’objet servant de masque est une occurrence de MovieClip dotée de plusieurs images, il lit toutes les images de son scénario, comme il le ferait s’il ne faisait pas office de masque. Pour supprimer un masque, définissez la propriété mask sur null :

// remove the mask from 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 d’affichage servant de masque. Seuls les remplissages sont utilisés dans un objet d’affichage employé comme masque ; les traits sont ignorés.

AIR 2

Si un objet d’affichage masqué est mis en cache en définissant les propriétés cacheAsBitmap et cacheAsBitmapMatrix , le masque doit correspondre à un enfant de l’objet d’affichage masqué. De même, si l’objet d’affichage masqué est un descendant d’un conteneur d’objet d’affichage mis en cache, le masque et l’objet d’affichage doivent tous deux être des descendants du conteneur. Si l’objet masqué est un descendant de plusieurs conteneurs d’objet d’affichage mis en cache, le masque doit être un descendant du conteneur mis en cache le plus proche de l’objet masqué dans la liste d’affichage.

A propos du masquage des polices de périphérique

Vous pouvez utiliser un objet d’affichage pour masquer le 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 masque objet d’affichage non rectangulaire pour un texte de police de périphérique, le masque qui apparaît dans le fichier SWF prend la forme du cadre de sélection rectangulaire du masque, et non celle du masque en tant que tel.

Masquage du canal alpha

Le masquage du canal alpha est pris en charge si le masque et les objets d’affichage masqués utilisent la mise en cache sous forme de bitmap, comme illustré ci-après :

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

Une application du masquage du canal alpha consiste par exemple à appliquer un filtre à l’objet masque indépendamment d’un filtre appliqué à l’objet d’affichage masqué.

Dans l’exemple suivant, un fichier d’image externe est chargé sur la scène. Cette image (ou, plus précisément, l’occurrence de Loader dans laquelle elle est chargée) correspondra à l’objet d’affichage masqué. Un ovale dégradé (centre noir uni dont les bords deviennent progressivement transparents) est dessiné sur l’image. Il s’agit-là du masque alpha. La mise en cache sous forme de bitmap est activée pour les deux objets d’affichage. L’ovale est défini en tant que masque de l’image, puis peut être déplacé.

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