22/09/2009

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

Aucun commentaire:

Enregistrer un commentaire