How to UnFlex Your Flex – Making Flex applications look and feel unique

SPREAD THE LOVE - If You Like An Article, Vote It Up

Posted Under: Flex on December 19, 2008

An important part of your job as a flex developer (whether designing yourself or interfacing with designers) is skinning/styling the application in such a way as to disguise it’s default flex roots and breath a unique life and identity to the site/application.

Flex in many ways has made this process easy, in some ways it has made it not-so-easy. I think any one of the solutions offered is probably insufficient, and an “all of the above” approach will likely give you the best results.

Here are a few of the available options and some resources I’ve found along the way:

1) Flex Style Explorer
The first and easiest tool is the Flex Style Explorer. This is a great tool, and I use it often for generating css for my apps. You have to realize though, that it’s quite limited in what it can do, and should probably be used in conjuction with some of the other items. Keep in mind that of course css can be written manually and styles can be treated several ways in Flex, so be sure to read the recommended reading (see below)

here’s the style explorer:
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

2) CSS Design View.

CSS design view is a method by which you can tinker with a components style visually and convert it to a style. In the design window, in the flex properties panel, select ’standard view’ instead of list view. That’s where you can play with the style.

further reading:
http://www.informit.com/articles/article.aspx?p=1274964&seqNum=7

3) Custom Skins SWFs
This is a very powerful way of styling your apps. Basically this method has you create (or find online- I have yet to find a pre-made skin that I’ve actually used ) a Flash FLA with graphic elements which will correspond to Flex components. After the swf is published, you reference the elements in css. This is the best method to create customized looking components, with the utmost control – which is what we want of course. This method is also time-consuming. The second link below explains this method well.

further reading:
http://mayur-bais.blogspot.com/2007/03/skinning-flex-component.html

http://www.adobe.com/devnet/flex/articles/flex_skins.html

Here’s a css code sample of how to embed assets from an external swf skin:

VScrollBar

{

downArrowDisabledSkin: Embed(source=”./assets/skins/flex_skins.swf”, symbol=”ScrollArrowDown_upSkin”);

downArrowDownSkin: Embed(source=”./assets/skins/flex_skins.swf”, symbol=”ScrollArrowDown_upSkin”);

downArrowOverSkin: Embed(source=”./assets/skins/flex_skins.swf”, symbol=”ScrollArrowDown_upSkin”);

downArrowUpSkin: Embed(source=”./assets/skins/flex_skins.swf”, symbol=”ScrollArrowDown_upSkin”);

}

4) Bitmap Skins

here’s a css code sample of how to embed a bitmap image as a skin:
LinkButton {
cornerRadius: 0;
overSkin: Embed(’./assets/images/skin.png’);
downSkin: Embed(’./assets/images/skin.png’);
textRollOverColor: #ffffff;
textSelectedColor: #ffffff;
letterSpacing: .5;
fontFamily: myArial;
fontSize: 13;
}
further reading:
http://www.thomasdecaux.net/flex-tips/skin-flex-component-with-images.html

http://flexarena.blogspot.com/2006/05/bitmap-skinned-buttons.html

5) Programmatic Skins

This is probably the least user-freindly method for beginner/intermediate Flexers, but you should understand the basics of this, as it’s the most light-weight (using no embedded assets/ bitmaps) and will increase your actionscript 3.0 chops.

further reading:
http://www.bigroom.co.uk/blog/accessing-the-component-instance-from-a-flex-skin

http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_8.html

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=skinning_071_18.html

http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/

6) Themes

You can get ready made themes (skin sets) many of these aren’t usable in my opinion, unless you find exactly the right thing , or something close enough that you could modify to your liking (or the designer’s liking)

You can find some themes here:
http://www.scalenine.com/

7) Fonts (Custom/Embedded)

Just a quick word about fonts. If you want them to render the way you want for every user, I would embed the fonts (this will of course increase file size – and others may object – but this is a design opinion, not an application development one) Also if you want to do effects with your text, especially alpha effects, embedding the font is a must.
Here’s a css code sample of how to embed a font:

@font-face {
src:url(”./assets/fonts/Wingdings 3.ttf”);
fontWeight: normal;
fontFamily: myWingding;
}

Custom Preloader

I think this is a key element that many might ignore just out of laziness. The default preloader looks fine right?. The visual impact of a custom preloader I think is worth the time it takes to create one. It’s like the cherry on top.

further reading:
http://www.onflex.org/ted/2006/07/flex-2-preloaders-swf-png-gif-examples.php

http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/

http://www.webapper.net/index.cfm/2008/1/17/Flex-NotSo-Custom-Preloader

9) Integrating Flash Animations, components

Integrating Flash animations and/or components using the Flex component kit or just embedding a flash swf (which can be made to communicate with your application) is a great way to bring some other parts of your toolbox to the table. Flash has a couple component advantages (notably the flv Playback component) and if you want to embed something you’ve already developed in flash (like an mp3 Player), this is a good option. Also you can of course create flash animations, etc. Or anything for that matter, and turn it into a flex component. This is very cool.

further reading:
http://lordbron.wordpress.com/2007/05/01/flex-component-kit-step-by-step/

http://blog.flexcommunity.net/?p=40
http://www.onflex.org/ted/2008/03/flex-skin-design-extensions-flex.php

Hope some of these resources will help. Happy flexing!

More further reading:

http://www.rictus.com/muchado/2007/10/09/design-workflow-features-in-flex-builder-3/

http://blog.comtaste.com/2008/10/flex_skinning_with_adobe_illus.html

http://www.adobe.com/devnet/flex/articles/flex_skins.html

http://www.adobe.com/devnet/flex/quickstart/skinning_components/

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=skinning_071_08.html

http://didierburton.net/blog/2008/09/09/skinning-a-flex-component-with-video/

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000801.html

http://www.onflex.org/ted/2007/06/flex-3-monday-designerdeveloper.php