Having done several CSS skins for various projects in the past, recently, I had the opportunity to create a set of almost entirely graphical skins. Having stepped through that process, I wanted to write down some tips when attempting to create graphical skins. All of these skins were created using Flash CS3 as opposed to Photoshop or Fireworks. This isn’t so much a step by step tutorial (a good tutorial by Narciso Jaramillo can be found on DevNet) as it is a list of pointers as there are a few issues you may run into when implementing graphical skins.
I’ll start by saying that my experience in general was positive and in large part, the tutorial was a great resource. For a large number of the components, skinning was super simple and Adobe really did a good job (though skinning in Gumbo is that much better). However, there are some little things that needed massaging in order to work. I’ll touch on each of those below.
As mentioned in the tutorial, install the Flex Component Kit for Flash CS3 as well as the Flex Design Extensions. These will make your life a whole lot easier as they include template files for most components (New > Templates > Flex Skins). Once you publish from the template file as a swc, you can import them easily into Flex Builder.
When modifying graphics in Flash, here are a few tips:
Try to make the size of your graphics match the size of the default graphics in the template fla. If you change the size and position of graphics, you may get unexpected results.
Make sure the size of graphics in all states is the same. If sizes change across states, it will likely result in text labels or other parts of your component moving when the state changes. This includes things like keeping the “check” in your checkbox inside the bounds of your “box.”
When importing a slider skin into Flex from your template, you’ll need to add a CSS style definition for both HSlider and VSlider. By default, the swc imports a definition for Slider only which doesn’t change skins for either Slider component.
When customizing the shape of your skin, you can round or unround corners, but if you do, make sure you use the “focusRoundedCorners” style along with “cornerRadius” for that component to either round or unround the focus rectangle.
When customizing the indeterminate graphic for ProgressBar, be careful with the spacing of your barber pole or you’ll get skipping during the animation. Going with the same spacing in the template file of course is the easiest way to go.
An obvious one, but make sure that you don’t use MovieClip symbols inside of your skin clips that require 9-slice scaling as they won’t scale properly. I’ve also found that using Graphic symbols can also cause weirdness. In general, it’s best to just use shapes in your skin clips.
The skin for the MenuBar_itemSkin doesn’t work properly. By default, the template contains a single clip with separate states for up/over/down. However, in order to get it to work properly in Flex, I had to break it into separate clips (MenuBar_itemUpSkin, MenuBar_itemOverSkin, MenuBar_itemDownSkin), each representing a single state only.
When customizing background skins for List based components, keep in mind that by default, the ItemRenderer background extends to the edge of the component, so that it will obscure your border at the very least in over and selected states. In order to have your ItemRenderer background sit inside your component border, you need to create a custom renderer. The other options are to either have no border or to make your ItemRenderer backgroundColor style the same color as your border.
Remember that some component skins are used by other components either via inheritance or composition (i.e., NumericStepper uses the TextInput borderSkin, ComboBox uses List’s, TextArea uses ScrollBars, etc.). So if your TextInput skin graphic has rounded corners, take that into account when creating your stepper button skins.
Another obvious one, but remember that CSS styles don’t work with custom skin graphics. Unfortunately, this means that creating a set of graphical skins that can be styled using CSS isn’t possible by default (i.e., backgroundColor, borderColor, etc.). Not sure if anyone has implemented this ability with graphical skins, but I’ve started looking into it so stay tuned.
Unfortunately, there isn’t a simple way to graphically skin the DateChooser background as it’s baked into updateDisplayList of the DateChooser class, so your easiest bet is via CSS.
ComboBox’s editableSkin doesn’t work properly. The symbol actually needs to be broken down into 4 separate symbols (ComboBox_editableUpSkin, ComboBox_editableOverSkin, ComboBox_editableDownSkin, ComboBox_editableDisabledSkin) and imported into Flex that way in order to work properly. Also note that even though the template symbol is 21 pixels wide, the default width for the editable ComboBox's button is 22 pixels so you may want to resize the symbol so your arrow doesn't get stretched.
Unfortunately, using graphical skins for Panel can result in a bit of a mess as discussed here. Basically, the contents of the panel don't respect the padding values. One workaround is to set up the panel contents in a container and set the top/bottom/left/right values of that container to the same as the border in your panel graphic.
iCandy was my entry into the ScaleNine Skin to Win competition. It took third place and a copy of CS4 Web Premium. There were some hiccups in the process of getting these graphical skins into a Flex app, which anyone doing graphical skinning should be aware of (I've documented here), but overall I was happy with the result.
Thanks to Juan for putting this on, and to Adobe and EffectiveUI for sponsoring with some great prizes.