Ingo Reschke » Posts for tag 'Button'

Flex 3 Button Skinning

Einen Button kann in Flex 3 einfach über css gestyled werden.

/*Cutom Buttons css*/
.imgBtnLeft
{
    up-skin: Embed("../assets/buttons/Links.png");
    down-skin: Embed("../assets/buttons/LinksAktiv.png");
    over-skin: Embed("../assets/buttons/LinksAktiv.png");
    disabled-skin: Embed("../assets/buttons/Links.png");
} 
 
.imgBtnRight
{
    up-skin: Embed("../assets/buttons/Rechts.png");
    down-skin: Embed("../assets/buttons/RechtsAktiv.png");
    over-skin: Embed("../assets/buttons/RechtsAktiv.png");
    disabled-skin: Embed("../assets/buttons/Links.png");
}

Damit sich die Maus beim Überfahren des Custombuttons auch zu einer “Hand” verwandelt muß der buttonMode=”true” und mouseChildren=”false” gesetzt werden.

Codebeispiel Flex.

<mx:Canvas id="control" width="100%">
  <mx:Button id="btnBack" left="5"  buttonMode="true" mouseChildren="false" styleName="imgBtnLeft" click="nextPic(DIR_PREV)" toolTip="Vorheriges Bild"/>
  <mx:Button id="btnNext" right="5" buttonMode="true" mouseChildren="false" styleName="imgBtnRight" click="nextPic(DIR_NEXT)" toolTip="Nächstes Bild" />
</mx:Canvas>

Quelle und ausführliche Beschreibung:

http://userflex.wordpress.com/2008/03/13/button-image-skinning/

Posted in Flex 3
Tags: ,