Short version
- Create a library project in Flash Builder 4
- Add style and skin classes
- Make sure you list your style classes with the -include-file compiler argument (Project > Properties > Flex Library Compiler > Additional compiler arguments)
- Build the library
- Import the built .SWC as a theme
Short version with pictures and rambling
I often have to work with Actionscript and Flash Builder and lately had to spent some time looking for a simple way to create a theme in FB4. Most of what I found fell into two categories: tutorials for designers on how to make themes with Flash Catalyst or Adobe Illustrator and extensive information on what themes are and how to use the Flash compilers. All useful, but nothing to answer my question:
“How do I make a theme inside Flash Builder? What kind of project do I need, what files go into it and how do I handle them?”
It turned out to be rather simple. That is, after digging through pages and pages of Adobe manuals – useful, but a bit too detailed for their own good…
So here is my take on answering my own question – hope it saves you some time:
- Create a library project:
In Flash Builder go to File > New and select Flex Library Project:
- Add style and skin classes
I’m not going to go into skinning in this post, but if you are curious, here is a good blog post, which shows how to create skins for Flex 4 components.
- -include-file
This was the one that got me at first. In order for the .css or other files to be used in the theme, it doesn’t seem to be enough for them to be included as assets.
The compc compiler needs them listed with the-include-filecompiler argument. You can pass the -include-file arguments on the command line, if this is where you compile your project or put them in a configuration file or add them to the project’s properties in Flash Builder.
To add them to the project properties, with your theme project selected go to Project > Properties and on the left-hand side select Flex Library Compiler. The -include-file option goes in the Additional compiler arguments box, as shown below.
-include-file expects two arguments: file name and path to the file (including the name), like this:
-include-file coolIcon.jpg path/to/coolIcon.jpg
- Build the library
- Import the built .SWC as a theme
Give me a shout if you know a way of importing a theme without having an active project to apply it to. I don’t seem to know one.
So, to import your theme, open the Properties dialog of the project you’d like to apply the theme to (Project > Properties) and from the list on the left-hand side select Flex Theme.
Click Import Theme at the bottom of the dialog and navigate to the .SWC file you built with your theme library – after the import a thumbnail preview of your theme should show up. You can now select that and click OK to apply the theme. If you want to, of course.
If it all went well, you should see this progress dialog while the theme is being applied to your project:
To test what I learned from your post, I created a simple .CSS, compiled it to a .SWC and imported the .SWC as a theme. However, my testing application ignored the theme and used its default instead.
However, when I used the same procedure and imported the original .CSS file as the theme, it worked as I expected.
Did I do something wrong? The following is the .CSS file I used to test:
/* CSS file */
@namespace “library://ns.adobe.com/flex/spark”;
Application
{
backgroundColor: #444400;
}
Button
{
fontSize: 24;
color: #004444;
}
Since there were no additional assets, I didn’t specify the -include-file compiler argument when I compiled the .CSS.
Thank you, Angela.
Hi Roger,
The -include-file directive got me out too at first. You’ll have to specify your .css file with it, even if you don’t have other assets.
There are also a couple of syntax things in the .css – try this:
s|Application
{
background-color: #444400;
}
s|Button
{
fontSize: 24;
color: #004444;
}
Hope this works for you!
Thanks very much for this post. I tried the Adobe documentation but it’s terrible. You helped me get over an issue that has had me stumped for 2 days. Thanks!
So, This works great if you’re going to import the SWC as a theme in FlashBuilder, but what if you want to use the SWC or link to the Theme library project directly in your project? This method doesn’t seem to work for that.