Short version

  1. Create a library project in Flash Builder 4
  2. Add style and skin classes
  3. Make sure you list your style classes with the -include-file compiler argument (Project > Properties > Flex Library Compiler > Additional compiler arguments)
  4. Build the library
  5. 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:


  1. Create a library project:
    In Flash Builder go to File > New and select Flex Library Project:

  3. 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.

  5. -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-file compiler 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


  7. Build the library

  9. 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:

About the Author