Flex 3 – How to load a complied css swf

When attempting to load external compiled css swfs that have an embedded font into my flex application I was getting this error: Unable to load style(SWF is not a loadable module). This is reported as an official bug on adobe’s site at: Enable Local App to load RunTime CSS.swf from Server

To solve this, you require two things.

  1. Crossdomain Policy
  2. Local Apache Web Server

Regardless if this is a bug, the host server still needs a crossdomain policy at the root of the domain. Here’s an example crossdomain.xml policy.

The next problem is that you cannot load external compiled swfs from a
document root (c:/my documents/flex projects/myProject/myProject.html) until the bug is fixed.

PC Users:
What I did is installed easyphp. Next, I set up an alias in easyphp. Right click on the ‘easyphp’ icon in the taskbar -> administration. I set the alias to my bin folder of my project so that when I access the url http://127.0.0.1/myProject/myProject.html it loads up my bin directory. Also in my debug settings in flex I set the default debug and run path to launch as http://127.0.0.1/myProject/myProject.html.

Now my css/style swfs are loading great remotely. The only downside is having to run easyphp on top of everything just to load in my external compiled font swfs.

Mac Users:
Thanks to Bryce Barrand

  • go to system preferences
  • click on sharing
  • click on “web sharing” (this will turn on the automatically installed version of apache)
  • edit apache’s httpd.conf file (should be found at disk/private/etc/apache2/httpd.conf)
  • Find the line that says /Directory>
  • Just after that, add an Alias for each project that you want to test such as this:

    Alias /nameOfAlias /pathToYourFlexBinFolder

  • Set your directory node attribute to “/pathToYourFlexBinFolder”. Set the directory node value to:

    Options Indexes FollowSymLinks MultiViews
    AllowOverride None
    Order allow,deny
    Allow from all

  • Restart the webserver by unchecking and rechecking the “web sharing” checkbox

should be good to go after this. you can see the results by going to http://localhost/nameOfAlias in your browser