coding and other fun

With bigger Flex applications you might consider separating parts of your application to modules (<mx:Module>). When I came to this point, I encountered into troubles handling the Eclipse projects with the separate module code. Here is the result of my analysis, which finally worked out, after trapping in to several error messages like “SWF is not a loadable module”.

The reason you want to separate parts of your application surely is that such a module will be loaded when needed, and not initially. This saves donwload time for the user, because the main part of your application will stay slim, because the module parts are in separate SWF files. The module SWF file doesn’t contain Flex framework code, because this parts are already in the main app, therefore is has a tiny file size.

The main application project AND the module project, they both reside in normal Eclipse Flex projects. I first made the mistake to put the module project into a FlexLibrary project, which doesn’t work. I always got the error message “SWF is not a loadable module” then. So make sure the module project is a normal Flex project.

In the main app project, link to the module project in the following way:

Go to the context menu “Properties” and select “Flex Build Path”. Click on “Source path” and “Add Folder…” to select the source folder of the other Eclipse project, containing your module. After clicking OK, Eclipse will add this additional sourde folder to the path.

Now tell Eclipse to create a separate SWF file containing the module:

In the “Flex Modules” menu you click “Add…” to choose the module file from your additional source path, which you just linked to your project’s path. As a result, Eclipse (or actually the FlexBuilder) will create a separate SWF file containing the module. There you go!

But wait! There’s more…

another bloody trap for me was that I set a new ApplicationDomain for the ModuleLoader, which again showed the error message “SWF is not a loadable module” - seems like someone didn’t have time for more detailed explanations, hm? So better leave this away to succeed.

If you still have questions about details of the settings, I provide a ZIP containing my two Eclipse test projects. Feel free to download and import both Eclipse projects in your workspace.

Eclipse Projects

The first thing you see when you load a Flash application in a browser is the progress bar of the preloader. This Flash preloader is a neutral piece of visual indicator, maybe too neutral. For a stylish application, you may want to use a preloader in the application’s look and leave an impressing first sight.

Jesse Warden wrote an excellent article on his blog about “Making a Cooler Preloader in Flex”, which got a lot of feedback from many Flex developers. With the new feature in Flex, making SWF files smaller by separating the application from the Flash runtime libraries (the RSL - runtime shared libraries), there is even more to present in the preloader for the curious audience. With Adobe’s support of RSL a Flash application’s SWF file can be as small as approx. 100 KB instead of 560 KB, which is an excellent speedup for many users suffering from low-range bandwidth.

The RSL has to be downloaded only once, risiding the the Flash players cache afterwards, available for other Flash applications. For the user this fact may be important to know, helping to understand why the first part of the download takes so much longer. As “Flash Turbo” we entitled the download of the RSL, just to make clear this is the download of the module, which boosts the future starts of this application.

The classic preloader that comes with Flash just shows a simple progress bar without the possibility to show any status text nor a percentage of the load progress. The enhanced preloader by Jesse Warden adds status text and a percentage value, as well as application’s style and fading out animation. The preloader I was working on can additionaly distinguish between the progress of the load of the RSL and the SWF. To handle the infos about the RSL we can use the RSLEvents dispatched by the Flash Player. In Adob’s Flex 3 Help there’s an article about “Showing the download progress of an application”.

The tricky thing about the correct handling of the loading progress is that as soon as the RSL starts to download, the event’s data suddenly show other bytesLoaded and bytesTotal values for the SWF download. Maybe this is a bug in the Flash system, I don’t know yet. Nevertheless we have to take care about this fact to prevent sudden progress bar jumps during the download.

Since all the steps have been explained already on Jesse’s blog, I will focus only on the enhanced preloader, written in Action Script 3 code. In the Flash project we have to add the second label “Flash Turbo” and the Dynamic Text field “rsl_amount_txt”. The first Dynamic Text field was renamed to “app_amount_txt” to make the difference more clear. I changed also the title showing “Loading Modules” to a Dynamic Text field and name it “status_txt” to make possible to show additional status here.

The AS3 code for the Preloader.as file, as well as the rest of the resources can be found here:

• Source View
• Application PreloaderExample

To see the download of the RSL in action, you need to clear your Flash-Player’s cache to remove the already downloaded RSL. Otherwise the “Flash Turbo” will be always on 100%. On my Mac I can do this manually by deleting all the files in /Users/bernhard/Library/Caches/Adobe/Flash Player/AssetCache/3UD53N2K. I couldn’t figure out a way do clear this cache otherways in the browser or in any Flash Player menu.

Using request parameters inside Flex/Flash is a common way to initialize the application during runtime startup. Adobe calls this FlashVars. Accessing those variables inside the code is often a bit confusing. I’d like to provide two examples for different environments, to show how to access the values.

A FlashVar can be set as a request parameter in the URL of the SWF application:

http://www.mydomain.com/apps/myapp.swf?var1=value1&var2=value2

In the upper example we call our “myapp.swf” and set 2 variables “var1″ and “var2″ with the values “value1″ and “value2″.

Accessing FlashVars in a MXML file

In a MXML file you can simply use the static reference “Application” to reach your FlashVars:

var myVar1:String = Application.application.parameters.var1;

Accessing FlashVars in a ActionScript file

Accessing the FlashVars within a AS file can be done using the flash.display.LoaderInfo object, which can be accessed using the DisplayObject root. All FlashVars are located in the object “parameters”:

// try getting the FlashVars
try {
	var myVar1:String = root.loaderInfo.parameters.var1;
	var myVar2:String = root.loaderInfo.parameters.var2;
}
catch (e:Error) {
	trace(e);
}