I’m working on a mobile project and trying to implement based on a beautiful design comp. Unfortunately I haven’t had a lot of luck finding out how to do this right… So I’ll tell you how I did it, right or wrong.
So I start off with the design comp. This is what I want to achieve:
First, I create a blank skin that extends spark.skins.mobile.ButtonSkin.
The mobile skins use an image named “border” to render the border of the button. I’ll exploit that to show the new background image of my skin. There are two images for mobile skins: an up and a down. The Button has a function to return, which should be the correct image for either the up or down state… so:
I import new background images to replace the default up and down backgrounds of the button.
http://snipplr.com/js/embed.js
http://snipplr.com/json/54891
I override the getBorderClassForCurrentState function. (I’m also changing the font color here on the down state, probably the wrong place to do it but it works.)
http://snipplr.com/js/embed.js
http://snipplr.com/json/54892
This will yield this result:
It’s using the background but it’s small, so I hardset the size in the constructor.
http://snipplr.com/js/embed.js
http://snipplr.com/json/54893
This is a big no-no when it comes to mobile development, as that doesn’t scale to many screens well. But my app is pretty specific and I can get away with it.
This yields: 
Good, but I need to remove the background shape. I do this by overriding drawBackground and setting it to do nothing.
http://snipplr.com/js/embed.js
http://snipplr.com/json/54894
Which yields this:
Finally I need to set the fonts. Mobile buttons have drop shadows on their text, but they don’t render using an actual dropshadow filter; they do it by having a second textfield behind the first. So I need to alter and tweak that font to the same settings by overriding the labelDisplay_valueCommitHandler.
http://snipplr.com/js/embed.js
http://snipplr.com/json/54895
And there you have it, a custom skinned button in Flex Mobile. If anyone sees glaring problems with this let me know.
Here’s the entire source if you are interested.
http://snipplr.com/js/embed.js
http://snipplr.com/json/54896
The difficulty with this approach in my opinion, is that you end up with suboptimal icons. For my current cross screen applications, I need to make icons that range in size from 512×512 pixels, to 29×29 pixels. The automatic approach will have you create an icon at 512×512 and size down to each size you need until you hit 29×29 pixels. But 512×512 is so much more room to work with. You could add extra text, more graphics, or detail. At the other end, 29×29 is so small, words aren’t able to fit and be legible. Often you want to just have initials or one letter. Often you have to change the font to make it legible at that size even for one letter. 
To use:
My first full fledged mobile app is now on the Android Market.
tpryan.blog 
