Scott Stroz specializes in developing
and deploying enterprise-level web applications, as well as integrating
new programming features into older applications to help organizations
achieve growth by migrating data management to advanced web technology.
His experience with web application development technology spans nearly
a decade, during which he was named an Adobe Community Expert. Scott
excels at completing unusual, complex and challenging tasks, and he
embraces new technology and its possible inclusion in current and future
projects, earning him the title “Chief Problem Solver.” Scott is
recognized as an industry expert through his speaking engagements at
conferences and user groups and contributions to a number of technical
publications.
- 84 entries Alagad
- 12 entries Ant
- 167 entries ColdFusion
- 10 entries ColdSpring
- 20 entries Conferences and Events
- 1 entries Development Tools
- 5 entries Dynamic Programming
- 1 entries Flexmaniacs
- 52 entries General
- 4 entries Groovy
- 5 entries JRun
- 17 entries Jobs
- 17 entries Model-Glue
- 27 entries OO Development
- 52 entries Programming
- 31 entries Reactor For ColdFusion
- 13 entries SQL
- 14 entries The Server Side
- 7 entries Validat
- 8 entries Farcry CMS
- 32 entries Flex
- 10 entries Flex
- 3 entries Hibernate
- 3 entries jQuery
- 1 entries Presentations
- 1 entries Press
Subscribe to our The Alagad Technical Team Blog
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.
12 responses to “Skinning With Flex 3 CSS Explorer”
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,<a href="http://www.elegantugg.com/">cheap ugg boots</a>,<a href="http://www.elegantugg.com/">ugg kids boots</a>,ugg dakota boots,<a href="http://www.elegantugg.com/">ugg sandal boots</a> and short ugg boots to you.
Welcome to 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
<a href='http://www.askmeflash.com/tutorial/4/skinning-a-flex-button-tutorial-using-skin-in-flex'>http://www.askmeflash.com/tutorial/4/skinning-a-flex-button-tutorial-using-skin-in-flex</a>;
Leave a Reply
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.
Posted By: Richard C Haven on Mar 5, 2008 at 12:00 AM