Skinning Flex component

Skinning the flex component is too easy than it seems to be.
with the help of the beautiful templates (flash file and the css file given ),
we can just edit in the flash file given and use it in our flex project.
If we don't want to use that css file and just want to skin few component, we can do that also.

Ex: if we want to skin the tab bar component then,
1) create on css file (my_Skin_css.css) and write this


TabBar
{
firstButtonStyleName: "tabStyle";
tabStyleName: "tabStyle";
lastButtonStyleName: "tabStyle";

}
.tabStyle {
disabledSkin: Embed(source="my_skins.swf", symbol="Tab_disabledSkin");
downSkin: Embed(source="my_skins.swf", symbol="Tab_downSkin");
overSkin: Embed(source="my_skins.swf", symbol="Tab_overSkin"); selectedDisabledSkin: Embed(source="my_skins.swf", symbol="TabSelected_disabledSkin");
selectedDownSkin: Embed(source="my_skins.swf", symbol="TabSelected_upSkin");
selectedOverSkin: Embed(source="my_skins.swf", symbol="TabSelected_upSkin");
selectedUpSkin: Embed(source="my_skins.swf", symbol="TabSelected_upSkin");
upSkin: Embed(source="my_skins.swf", symbol="Tab_upSkin");

}

Note:
Tab bar is the component which aligns tabs in vertical or horizontal manner.
So it needs to handle the toggling of tabs. hence the first tab and the last tab needs to have different styling.
For that reason the "firstButtonStyleName" and "lastButtonStyleName" are sepcially mentioned.
If these things are undefined then the default style is assumed i,e(tabStyleName) for the first and last tab also.
(These atrributes are present mostly in the bar component like: button bar , togglebutton bar and tabbar )
(we can always refer to the default css given for the name of classes which flex use to skin its component.)

2) create flash file with the name my_skins.fla contains the movieClips with linkage name specified in the symbol attribute in ths css file
publish this flash file

3) and package the published swf(my_skins.swf) and my_Skin_css.css with mxml file.
mentioned the path of the css like this :
<mx:Style source="my_Skin_css.css"/>

Just run yourmxml and see the the skined component.

Download the template for the flash and css here :
Soruce article : http://www.adobe.com/devnet/flex/articles/flex_skins_print.html