Flex 4.6 : masquer une image ou une video avec un masque

On peut  des masques à tout les éléments d'un groupe.
Un masque définit la région dans laquelle le contenu du groupe est rendu.
Il existe deux types de masquage: clipping et l'alpha.

- le masque de type 'clipping' : la couche alpha n'est pas gérée.
- le masque de type 'alpha': la couche alpha est gérée

1. On crée le groupe qui va contenir le masque et l'objet à masquer
2. On lui donne un maskType alpha ou clipping
3. On crée la balise mask dans laquelle on insèrera l'objet qui servira de masque (ici, une image)
4. On crée l'objet à masquer (ici, une video)
..et roule ma poule :)

<s:Group maskType="alpha">
  <s:mask>
    <s:Group>
    <s:Image source="@Embed('monMasque.png')" />
    </s:Group>
  </s:mask>
  <s:VideoPlayer source="maVideo.flv" />
</s:Group>

Créer un masque avec une image

Créez sur Photoshop ou un autre logiciel de traitement d'image, l'image qui vous servira de masque. Elle peut être opaque, avec des 'trous' ou bien transparente par endroit.

• Dans Flex, créez un Canvas qui rassemblera l'image masque et l'image masquée.
• Indiquez pour l'image à masquer la référence à son masque (mask="...").
• Rajouter un filtre qui permettra de faire fonctionner ce masque (je n'ai pas encore saisi pourquoi sans ce code le masque ne marchait pas..).
• Insérez l'image qui doit servir de masque en mettant pour Id la valeur du mask de l'objet à masquer.
• Mettez la valeur "cacheAsBitmap" du masque sur true

<mx:Canvas height="119" width="124">
    <mx:Image mask="{ Maskopaque }" source="assets/MonImageAafficher.jpg">
        <mx:filters>
            <filters:DropShadowFilter alpha="0"/>
        </mx:filters>
   </mx:Image>
   <mx:Image cacheAsBitmap="true" id="Maskopaque" source="assets/opaque.png"/>
</mx:Canvas>

Et comme on utilise un filtre, il ne faut pas oublier de l'indiquer dans l'application ou dans l'image 'masque'

<mx:Application  ...  xmlns:filters="flash.filters.*"> ou
<mx:Image mask="..".. xmlns:filters="flash.filters.*">

Voici ce que cela peut donner avec, en premier, une image opaque, une creuse et une transparent

Utiliser un Canvas comme un masque

Tout d'abord, il vous faut afficher l'image qui va apparaitre derrière le masque puis lui donner une valeur pour mask.

<mx:Image source="assets/MonImage.jpg"  mask="{maskCanvas}"/>

Ensuite, créez votre composant et prenez comme Id la même valeur que pour le mask de l'image.

<mx:Canvas id="maskCanvas" width="267" height="363" borderStyle="solid" cornerRadius="30"/>