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
tpryan.blog 
Such a great example Terry. I was doing something similar to this the other day, and struggled a bit to get it right.
One thing I was gonna ask you though, is that when you mention:
“This is a big no-no when it comes to mobile development, as that doesn’t scale to many screens well”
What would you suggest we use instead? Since when you use images as buttons, they will probably already not be very scalable anyway.
Cheers and thanks again for the example
LikeLike
The recommended solution is scalable FXG images: http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html.
It only works for abstract images, like the existing Button skins, and not concrete buttons like the one in my example.
If you look in the source code for the ButtonSkin, it looks like Flex has border images for each of the supported DPI settings 160, 240, and 320. So that might be the way to go.
In short, it works for me, and I couldn’t find any better advice, but that doesn’t make what I have here good advice 😉
LikeLike
Terry…
Can you export the button working and embed it in this blog post? I’d like to see it in action.
LikeLike
Will this button work using weebly as the website creator and do you do it in the html section or the CSS? Thanks.
LikeLike