Many of my clients have designers that give me assets for the Flex/AIR apps that I’m creating for them. I’m very happy when I get PNG files that are perfectly exported from Photoshop and ready to drop into the assets folder. Unfortunately I’m rarely happy. :( I get all sorts of things: jpgs, unorganized PSDs, you name it. And don’t get me started about file naming conventions.

The most common asset that gets skinned and then reskinned over and over are buttons. So I’m going to cover how I would like to get my assets. I’m sure many Flex developers will have similar workflows.

Button States
Buttons in the Flex framework have 4 states: upSkin, overSkin, downSkin, and disabledSkin. There are three main ways to skin a button – or most any component: using bitmap assets, CSS, or programatically. The majority of cases can be handled with a combination of the first two: bitmaps and CSS.

The example to the right displays the basics of creating skins for a Button. I have graphical assets as the backgrounds for the various states and then the text is generated in the code. You have no idea how much of a time saver that is. If you create assets for Flex do not put the text on them. You know why right: because that label will eventfully change which requires editing a PSD file, exporting, emailing, downloading, etc. A good 5-10 minutes for just changing the label of a simple button that could have been done in 5-10 seconds if it were done in code. And it’s the numerous changes like these that take just a few minutes that pile up over the course of a project to drive it well beyond the quoted time.

If you change the button label in the example you’ll notice that it grows horizontally as much as you need without distorting the corners. That’s 9-slice at work and it’s very handy. But the design has to work if the center of the button assets is stretched horizontally. If you added details you’ll have problems with the appearance. In that case it might be a job for a programatic skinning and that takes time.

If I’m designing a Flex app I’m almost certainly going to do it entirely with CSS and no bitmaps. That’s because I start by modifying the CSS to get the look that I want. But if a designer gives me even a simple button, like the example here, it could take a good hour or so of tweaking to get it almost identical. So it’s more time effective to just use bitmaps. And if the design changes then all I have to do is replace a bitmap instead of trying to figure out the exact changes to make to the CSS.

If you’re a designer and you want to style a component without bitmaps then go to the FlexCSS explorer and play around with the look you want and then send the exact CSS declaration to the developer you’re working with. That will make them very, very happy.

Naming Conventions
I find it best if the file name of the asset starts with a description of the style followed by the state. Bonus points if it includes the type of component it applies to. The assets for the example are: basic_btn_up.png, basic_btn_over.png, basic_btn_press.png and basic_btn_dis.png which is stylename_component_state.png.

Photoshop organization
There are two kinds of designers in the world: those who organize their PSDs and those who don’t. :)

The PSD that I used to create the assets for the example is available to download. It isn’t perfect but here are a few things that make working with PSDs much easier:

• The button states stack up on top of each other. That makes it easier for me to export and it makes it easier for you to get an idea what the change of states will look like since you can just toggle a folders visibility off/on to see the change.
• The PSD is cropped to the exact size that is needed for export. I don’t need to go in and select a part of the image and copy it to another PSD before saving for web.
• The button labels are in there so I can select the text layers and get the font colors right out of Photoshop.
• The 9-slice rectangle has been drawn which makes it very easy for me to make a few quick measurements and then add that to the CSS.

Can you think of anything else that makes the designer/developer workflow go smoother?