Flex 4 Sample Themes
One of the more recent downloads of the Flex 4 Nightly builds contains some new Flex 4 Sample Themes. As a non-designer, I find these invaluable in helping me make my applications more appealing. Since the source is provided, I’m given an instant base to work with and can modify to my liking rather than starting from scratch.
These sample themes are located in the Flex 4 SDK zip under …/samples/themes. To apply one to your application, you simply go into your project properties (either right click on your app folder in Flash Builder and select Properties from the context menu or go to File | Properties while your project folder is selected) and select ‘Flex Theme’. Then click the ‘Import Theme’ button and find the location of the theme that you want to use in your …/samples/themes directory of your Flex 4 SDK and type in a name for it or accept the default name it creates. Once you see that it has been added to your choices (probably under category ‘Other’), then you can select it and your project will use it the next time it’s run.
In this post I’m going to show a preview of a very simple app with some of these sample themes. I’m using the Flex 4 States and Transitions Tour de Flex sample as the simple app that is showing the different previews. The source code for that sample can be found here.
The following set of themes are simply the default Spark theme with some CSS color properties changed to illustrate how you can use plain CSS to make some dramatic changes quickly. The CSS for these themes is also included in the samples/themes directory under the given theme.
If you don’t see the …/samples/themes directory in your Flex 4 SDK version then get a more recent one from here. I noticed the themes available sometime around the beginning of December, so if you’re SDK is more recent than that, you’ll likely have to get a more recent version.
Also, for all of you creative ones out there that are building really cool themes in Flex 4, I encourage you to submit your themes for the rest of us to use :).