Skinning your Flex application with Inkscape and a SVG file

Jun 16

Skinning your Flex application with Inkscape and a SVG file - Part I

Adobe AIR, Applications, FlexAdd comments

With Flex, you can easily style or skin your app. In skinning, you use external images or files (as swf files, actionscript files as programmatic skins) to give the exact and sometimes complex appearance you want.

As explained in a very good article from Adobe, you can use bitmap or vector files. Vector-based skins, ie swf files, are better for performance and scalabity. Available tools are Flash, Illustrator, Swish or Corel Draw ; all of them generate swf files that can then be used as skins by Flex (not sure that Corel generates symbols in its swf). These tools are great but most of them are expensive for someone like me, just developping for fun, or if you use them just for application skinning ;p

You can create bitmap skins using Fireworks for example, or your preferred image editing tool like Photoshop, quite easily using the instructions given in this articles. And I loved this way of generating skins :

a single template file containing skin elements that are distributed in layers,
a convenient export feature generating each individual files,
a CSS template file that can be used as is in the Flex app.

Again, great great tools but I would prefer to find a free vector drawing tool able to apply this easy process of skin generation (easy process once the huge labor of drawing is done, of course…).

There is probably a bunch of such tools but, I gave my preference to Inkscape. So let\’s talk about it…

Inkscape is an open source 2d vector graphics editor. It supports all of the standard drawing features you can find in similar commercial product as Illustrator.

Actually the process of generating bitmaps skins can be the same than with Fireworks. So I provide you the same kind of material than the Adobe\’s article :

a demo application,
a SVG skin template file that can be reused and modified,
a predefined CSS that can be used as the source or the Style Meta of your application.

You can download the zip file here: SVG Skin Demo

Now let\’s see the procedure:

Open the provided SVG file in Inkscape:
- By showing layers, you can see that the file contains one layer for each skin part.
- In each layer, you have only one graphic element: a group that is named like its parent layer.
- Some skins are external png files (mainly cursors).
You can edit any group of any layer by double-click or by selecting the context menu “Enter the group xxxx”.
Make any change in gradient definitions or in any shape. Just keep in mind that if you resize a skin, you will need to add or refine the scaleGrid parameters in the CSS file.
Once you are ready, select all skin elements.
In the File menu, select Export Bitmaps.
In the appearing dialog, check the first checkbox “Batch export” and click “Export” button.
Inkscape is now generating one PNG file, with transparency, for each skin group in your SVG file. Exported PNG files inherit the name of the group in each layer.
Check the name of the exported files : if you get names as \’rectxxxx\’, \’pathxxxx\’, or \’gxxxx\’… it\’s because you have probably omitted to name a group in a layer.
Place all exported files in a sub-folder \’images/\’.
Edit the CSS file with your preferred text editing tool \r\n
- add/change scaleGrid parameters if needed
- tweak styles.
Test your app with the new skin as the source of the Style Meta.
Repeat until the result is perfect !

You have now a complete skin for your Flex application. Test it here.

Now, You could ask me “why another way to skin a Flex app and why inkscape ?”. And I would answer : “Inkscape is free but it\’s not the right question”. The right question would be “why SVG file ?”. And, yes, why SVG files as finally, PNG files are used as skin elements ? The answer will be in the second post of this serie. And just to tease your curiosity, it will deal with Degrafa… If, you know Degrafa, I\’m sure you begin to understand ! :p