XLEFF - an XML Layout Engine For Flash

People have been frequently asking for publishing the code of the XLEFF Sampler that you can try online.

The XLEFF Sampler is an application that allows you to experience interactively how XLEFF works and, because of that, it certainly is a cornerstone of this website.

However, there is no veal of secrecy about its source code. The only reason why I did not publish it until now was because I could not think of a convenient solution for distributing it since, like any other XLEFF application, the FLA file must include the component architecture's source code and such code cannot be distributed by Flash users.

Additionally, the online XLEFF Sampler uses its own set of sub-classed components (XLEFFtheme, with skewed buttons etc.). Since those components are created by sub-classing the original ones, their source code cannot be distributed either.

Eventually, I figured out that XLEFF users could implement an almost identical sampler if I provided a package after stripping the XLEFFtheme and the source code of the component architecture and providing instructions about how Flash users could re-add their own licensed copy of the component architecture's source code.

Therefore the XLEFF package now includes the "Simple" XLEFF Sampler, where the adjective "simple" refers to the absence of the XLEFFtheme (the only difference with the original XLEFF Sampler). And here there are the few steps required to build your first XLEFF application:

STEP1: Adding the Component Architecture's source code to simpleSampler.fla

After opening the simpleSampler.fla file in the Flash IDE, you must also open the StandardComponents.fla as an external library (File | Import | Open External Library).

The StandardComponents.fla comes with Flash and it is located somewhere under your Flash folder. I do not spend more time on this because if you want to use XLEFF, you certainly already know what I am talking about. Ensure that both libraries (simpleSampler.fla and StandardComponents.fla) are side by side, like it is shown in the following picture:

Drag the firstFrameExporter symbol into the simpleSampler.fla library. This step should result in having the simpleSampler.fla library look like in the following picture:

You can now close the StandardComponents.fla library, it will not be needed anymore.

STEP2: Place firstFrameExporter On The Stage

Select the second scene (named Dynamic Assets) in the simpleSampler.fla application, and drag the firstFrameExporter into the frame of the Standard Assets layer.

The final result will be similar to that shown in the following picture:

That's all! You can now compile and run the Simple XLEFF Sampler!

Final Notes (Important)

The simpleSampler.fla also provides a robust template for XLEFF applications thanks to its three scenes structure:

The first scene implements a basic preloader that you can replace or customize with your own. Be careful though, since this scene, as well as the other two, contributes to properly initialize the component that are later on generated dynamically by XLEFF.

The second scene stores the source code of components that are going to be generated dynamically by XLEFF. You are encouraged to try different structures for your application. However, do not be too surprised if they will present weird problems: ensuring the proper initialization of each kind of component can be a daunting task due to the presence of several bugs in the original component architecture.

The third scene is the main one and it's where XLEFF works at runtime.

The simpleSampler.fla and its complete source code is now included in the XLEFF package. Download it again, if it was not included in the copy that you already have.