Skinning With Flex 3 CSS Explorer
In this post, I talked about how easy it is to skin a button in Flex. While my example will work just as easy in Flex 2 as Flex 3, there is an easier way. Flex Builder 3 gives us the ability to visually style and skin Flex components. Flex Builder 3 includes a CSS editor with a design view which allows you to see your styles and skins as you edit them.
First, open up Flex Builder 3, if you do not have Flex Builder 3, you can get a beta version here, and create a new project. As before, under your source folder, create directories named {project}/assets/css and {project}/assets/images. Download the images we will use here and extract them to the {project}/assets/images directory.
Next, right-click on the {project}/assets/css directory and select ‘New –> CSS File’ and name it how you see fit. Flex Builder will create and open the file for you. If you are in source view, switch to design view by click the ‘Design’ button.
Once in Design View, click the ‘New Style’ Button.
In the window that pops up, make sure you select the ‘Specific Component’ radio button option, and in the Component drop down, you choose ‘Button’. Now click ‘OK’.
You will now have a preview of the default button styles and skin.
Click the ‘Skin’ button in the upper right corner of the ‘Flex Properties’ pod.
Next, select ‘Image Files’ from the drop down labeled ‘Skin:’
This will open up the ‘Choose Image Files’ window. In this window, select the image you wish to use for each ’state’ of a button and click ‘OK’.
You will probably receice a warning about the changes not being reflected until you ‘refreshsh’ the view. Click ‘OK’. If you don’t see the new images being used for the skin of the button, click ‘Design’ from the main toolbar menu and choose ‘Refresh’. You should now have a preview that looks like this:
Lastly to set the ’scale nine’ lines for scaling the image correctly click the ‘Edit Scale Grid’ button.
Your preview window shoud change slightly. You will now see scale line over the images. You can move these lines until the scaling areas are correct.
If you click the ‘Source’ button, you should now see code that looks similar to this.
Button
{
upSkin: Embed(source="../images/button_up.png",scaleGridBottom="17",scaleGridLeft="0",scaleGridTop="0",scaleGridRight="0");
overSkin: Embed(source="../images/button_over.png",scaleGridBottom="15",scaleGridLeft="0",scaleGridTop="0",scaleGridRight="0");
downSkin: Embed(source="../images/button_down.png",scaleGridBottom="15",scaleGridLeft="0",scaleGridTop="0",scaleGridRight="0");
disabledSkin: Embed(source="../images/button_disabled.png",scaleGridBottom="15",scaleGridLeft="0",scaleGridTop="0",scaleGridRight="0");
}
You can follow this procedure for other components you wish to skin as well. You can also edit the CSS file manually and the changes should be reflected in design view.
I have never been a big fan of ‘design’ views, but Adobe did it right in Flex Builder 2 and improved on it in Flex Builder 3.
Can one embed the background-image tag? I get compile errors when I try.
EVERY example of css embedding use the skin tags, and nothing else; either CSS embedding works for those and those alone, or something is broken.
Bad link, word 2.
Hey thanks man, I wasn’t aware about this.
thanks a lot !
I have seen this information and lots more at http://newfileengine.com/
It is one of the best searches of the internet! very useful!
It seems easy to skin with images, but how can I just remove every style from every state, and end up with a fully transparent button?
I’m having an error saying “Problem finding external stylesheet: assets/css/tryincssfile.css
can anybody help me out solving this error.
thanks:)
Thank you for this; it makes skinning a whole lot easier!
Our online store are available selling with all various kinds of replica ugg boots,cheap ugg boots,ugg kids boots,ugg dakota boots,ugg sandal boots and short ugg boots to you.
Welcome to http://www.elegantugg.com
I want to apply a skin when a button is selected by mouse click. how i do that?
thanks , i found this another easy tutorial about button skinning in flex
http://www.askmeflash.com/tutorial/4/skinning-a-flex-button-tutorial-using-skin-in-flex
Hi. I can’t see any of the screenshots. Please fix. Matt
Your site is very useful one.Its looking great.now i learning flex. so some help for me.
the Polo shirts article.The New Arrivals T-shirt evolved from undergarments used in the 19th century, through cutting the one-piece "union suit" underwear into separate top and bottom garments,Men’s RL World Cup Polo with the top long enough to tuck under the waistband of the bottoms. T-shirts, with and without buttons,Men’s Lacoste Polo Shirts were adopted by miners and stevedores during the late 1800s as a convenient covering for hot environments.i like the polo shirts very much.Named the T-shirt due to the shape of the garment’s outline, they soon became popular as a bottom layer of clothing for workers in various industries, including agriculture. The T-shirt was easily fitted, easily cleaned, and inexpensive, and for this reason,Men’s RL Crested Polo it became the shirt of choice for young boys (perhaps more the choice of their mothers than of the boys themselves). Boys’ shirts were made in various colors and patterns.can you follow me .
Men’s RL hoodies
Hi people… thx, but why oh why does this underwear seem to be green??