31 Mar, 2009
AIR & Flex : Skinner le contrôle Button
Posted by: Guillaume Andre In: ActionScript| Air| Flex
Pour substituer l’apparence par défaut d’un bouton Flex (mx:Button) sans utiliser la suite CS3 + FlexBuilder + l’extension Flex Skin Design il existe 3 possibilités.
Déclarativement avec MXML
<mx:Button upSkin=”@Embed(’../assets/boutonEtatUp.png’)”
              overSkin=”@Embed(’../assets/boutonEtatOver.png’)”
              downSkin=”@Embed(’/assets/boutonEtatDown.png’)” />
Pour comprendre la syntaxe des méta données Embed, je vous invite à lire ce post : ActionScript 3, embarquer des ressources au sein d’un SWF.
Avec les feuilles de style “CSS”
.monStyle {
   upSkin: Embed(”../assets/boutonEtatUp.png”);
   overSkin: Embed(”../assets/boutonEtatOver.png”);
   downSkin: Embed(”../assets/boutonEtatDown.png”);
}
A insérer dans une balise <mx:Style /> ou dans un fichier .css externe. Ne pas oublier de renseigner le styleName sur le bouton en question.
Avec du code behind ActionScript
Les métas données :
private var boutonEtatUp:Class;
[Embed(source="../assets/boutonEtatOver.png")]
private var boutonEtatOver:Class;
[Embed(source="../assets/boutonEtatDown.png")]
private var boutonEtatDown:Class;
Le code Actionscript :Â
monBouton.setStyle("overSkin", boutonEtatOver);
monBouton.setStyle("downSkin", boutonEtatDown);
monBouton étant l’ID du bouton renseigné dans le MXML.
Notez dans ces exemples l’utilisation d’un fichier image PNG. Il est possible de remplacer ce fichier PNG par un fichier GIF, JPG mais aussi une animation SWF.