As of version 2.0 a new way of defining the GUI has been introduced. Where in earlier versions one had to make modifications to the interface.fla file and then compile/publish it into a new interface.swf, it is now possible to perform all GUI related adjustments using XML files.

Past (1.x)

The old method had the obvious drawback of being only accessible to people owning the Adobe Creative Suite 3 or higher, plus it was rather error prone, as people had to get some source files for proper compilation. Furthermore, it was rather inflexible.

Future (2.x)

With the newly introduced, so called ASUL Documents it becomes possible to define all components used by the engine or its plugins in a very dynamic way. In some cases restrictions regarding the component type may apply (e.g. the button for switching between fullscreen and normal mode in the NavigationBar plugin must be a ToggleButton). But except for that one is very free, even to the degree of creating additional containers, using basic layouting functionality and so on.

There are basically two kinds of such definition files: the one for the engine itself, and one for every plugin using GUI components. The difference between the two is, that styles defined in the engine's ASUL document get carried over into the plugin ones, but not vice versa.

Possibilities

The GUI definition leaves a lot of freedom, starting at the graphics used (images can be used, but it is also possible to "generate" basic graphics such as gradients, too) and going to the actual size and position of components.

One of the most basic examples is the definition of a cursor in the ASUL document for the engine itself, the megazine.asul file. Per default, they look like this:

<box id="cursor_turn_right" background="image(gui/core/cursor_turn_right.png)" width="24" height="24" x="-10" y="-6"/>

This defines a simple box component using the graphic of the cursor of the background. The element with the id cursor_turn_right will then be used as the cursor graphic.

For this case it would obviously be enough to just change the image that is being loaded, but notice the x and y attributes. They are used to offset the cursor graphic to the actual cursor position, i.e. they can be used to change the "click point" of the cursor.

Now, a real complex example is the definitions file of the Gallery plugin. It's a bit too long to insert it here in its entirety, but consider this part of it:

<galleryframe id="gallery_frame" background="color(0x7F000000)" anchors="0,0,pw,ph">
	<!-- Used to display the image's thumbnail if necessary -->
	<box name="$thumbnail$" style="container" anchors="(pw-w)/2, 10" alpha_out="0.2"/>
 
	...
 
</galleryframe>

The ... part was omitted, to keep things readable.

What you can see here is the thumbnail box used to display a thumbnail of the displayed image, in case it is larger than the display area. This is the basic definition of its shape, as well as the position. Now, if you would like to have the position somewhere else, you could just change the anchors attribute. E.g. if you would prefer the box to appear in the top left corner instead, you would just change the first part of the anchor to 0.

Generally, if you don't want to use a GUI element, e.g. you don't want to display the thumbbox at all, just remove the whole definition from the file.