Image Skinning a Button in Flex 4

Question

Hi All I'm trying to skin a button with images. The following code is for flex 3, but i need equivalent in flex 4 code. not using skin class.Please post the flex 4 code.

.muteVolumeButton {

upSkin: Embed(source='images/sound-mute.gif');
overSkin:Embed(source='images/sound-hover.gif');
downSkin: Embed(source='images/sound-on.gif');
disabledSkin: Embed(source='images/sound-mute.gif');

}

Thanks in advance Naveenkumar.R

Answer 1

Dear naveen, I should say that skinning in Spark framework is a bit different from Halo way.

The best description is here. And its a best and simplest way to solve your problem. Here is code:

components.ImageButton.as

package components  
{  
 import spark.components.Button;  

 [Style(name="imageSkin",type="*")]  
 [Style(name="imageSkinDisabled",type="*")]  
 [Style(name="imageSkinDown",type="*")]  
 [Style(name="imageSkinOver",type="*")]  

 public class ImageButton extends Button  
 {  
  public function ImageButton()  
  {  
   super();  
  }  
 }  
}  

Script:

[Embed('assets/images/btnGoUp.png')]  
[Bindable]  
public var btnGo:Class;  

[Embed('assets/images/btnGoOver.png')]  
[Bindable]  
public var btnGoOver:Class;  

[Embed('assets/images/btnGoDisabled.png')]  
[Bindable]  
public var btnGoDisabled:Class;  

MXML part:

<components:ImageButton buttonMode="true"  
   imageSkin="{btnGo}" imageSkinDisabled="{btnGoDisabled}"  
   imageSkinDown="{btnGoOver}" imageSkinOver="{btnGoOver}"  
   skinClass="assets.skins.ImageButtonSkin"/>  

In all other cases you always can skin the states via CSS.

1. You should always put your skin: @namespace s "library://ns.adobe.com/flex/spark";
2. You can access component states: s|Button:down
3. You can extend your skin, with image, and override it via CSS, but it will be not a core component.

Here is some useful links:

http://blog.flexexamples.com/2009/03/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/

http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/

http://opensource.adobe.com/wiki/display/flexsdk/CSS+Namespaces+Support

http://cookbooks.adobe.com/post_How_to_use_the_new_CSS_syntax_in_Flex_4-15726.html

Please, feel free to ask any question about this.
Thank you.