FlairSkin – Stateless Skinning for Flex

For Flex skinning I have usually used Flash with the Flex skinning extension. This is called the stateful approach because you can also add transitions between the states. This worked out fine and the workflow was ok and you ended up in Flex to define the skin via CSS like this:

.myButton{
	skin: ClassReference("MyButton_skin");
}

You may have followed the discussion in March that this approach is CPU intensive because the Button subclasses mx.flash.UIMovieClip which has an enterFrame event listener which decreases the performance of your application.
Bam! What? So the apps I have written in the past could be faster if I would avoid Flash for Flex skinning? Damn! I first tried to use another base class like explained here. However this did not change much so I decided to switch over to stateless skins because they are obviously the fastest solution.

Ok, the app I wanted to refactor had about 15 different buttons and a bunch of other skinned components and almost all need a scale-9 grid to resize decently. Scale-9 grid is easy to define in Flash because you get kind of rulers which you can drag to the right position. For stateless skins you have to define them by setting the numeric value for scaleGridTop, scaleGridBottom, scaleGridLeft and scaleGridRight so you end up with an Embed directive for a toggle button like this:

.myButton {
	up-skin: Embed(source='/../assets/default_up.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	over-skin: Embed(source='/../assets/default_over.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	down-skin: Embed(source='/../assets/default_down.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	disabled-skin: Embed(source='/../assets/default_disabled.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	selected-up-skin: Embed(source='/../assets/default_selected_up.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	selected-over-skin: Embed(source='/../assets/default_selected_over.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	selected-down-skin: Embed(source='/../assets/default_selected_down.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	selected-disabled-skin: Embed(source='/../assets/default_selected_disabled.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
}

Yeah, this look looks like a hell of fun to measure and write! Not!

So long story short, this is where FlairSkin comes into play.
FlairSkin is a little pet project I have been working on in my spare time to create stateless Flex skins in a more decent way. This is the first release so expect new features soon. Besides generating embed directives I also implemented a little font browser which also outputs the CSS needed by Flex.
Thanks to Inara for the logo and design!

Install it here:

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

Screenshots:

Watch a screen video here:

FlairSkin from Sönke Rohde on Vimeo.

After refactoring my app to stateless skins with FlairSkin the performance improvement was very significant so bye bye Flash for Flex skinning at least for now!
One thing I am missing though is that in Flash I can define the registration point meaning around which point a graphic would rotate. In Flash you can simply move the graphic to the right position and I think there is no way to do this with stateless skins so you need to calculate it programatically which can be a pain. So it would be nice if the Embed metadata would support something like this:

Embed(source="foo.png" centerX="20" centerY="10")

where default would be 0,0

Additional Links

11 comments to FlairSkin – Stateless Skinning for Flex

  • Chris

    This is great! Thanks for releasing.

  • Thanks for using it. Feedback and improvement ideas are welcome. Some things are already planned like a zoom, a preview and also toggle button css with 8 states etc.

  • Weird I left a comment here the other day but it don’t seem to have shown.

    Anyway I’ve been using this app for a couple of days and its proved to be really useful. Couple of immediate things that would imrpove it for me.

    1. the ability to zoom into the graphic for fine tuning as you mentioned above
    2. add a little lock the the scale 9 controls, much like that on the corner radius on the rectangle drawing tool in Flash, so that its easy to create a scale9Grid thats the same all round (i.e. a 1 pixel border), but only editing one control.

  • Thanks for he feedback Tink! The zoom is already in the backlock.
    For the 2nd thing. Can you please explain a bit more what you mean. I don’t get it completely. Or write me soenke.rohde -> GMAIL

  • jp

    This seems great, but I can’t use it. All my assets are in swf libraries. Any chance of being able to specify a swf and its symbol so that we can work with a library in that manner?

  • jp, are your assets all vectors or why do you have them in a SWF? If you are using bitmaps I would suggest to avoid using SWF because it is easier to update single assets in the file system than in an SWF also considering version control.
    I will evaluate if this fits into FlairSkin and thanks for the feedback!

  • Andrew Skorik

    Hey, dude :) ! This is realy great! Simple, clever and usefull application.

  • […] – png Bitmap Scale 9 approach So I did more research and found this site FlairSkin – Stateless Skinning for Flex which did not give me a warm feeling inside about my previous process(Importing Skins into Flex […]

  • Looks like a nice app. Any chance of open sourcing it or releasing the source? I was planning a swc browser Air app for testing and viewing flash generated assets. Seems like a natural extension to your tool.
    I’m pretty sure that the MovieClip problem has been fixed now, at least in Flex 4.

  • Very handy app, thanks!

    My suggestions:
    – Allow a “resizable preview” of the asset with sclae9grid applied
    – Make the grid lines draggable
    – Zoom, yep!

  • Thanks for the feedback.
    Actually these features are already on my plate but I honestly don’t know when I will have time to continue this project.