[Tutorial] GUI Customization (EN)

[Florian Nücke]

GUI Customization

Here you will be shown the basics of how to change the GUI to accomodate your tastes, with the main focus on the control bar. A basic requirement is that you have the Flash IDE of the Adobe CS3 or higher at hand.


File Structure

All graphical elements used by the engine itself are stored in the interface.swf file, which can be generated using the interface.fla file. When you open it (the interface.fla) you will probably notice two things very quickly: there is nothing on the stage, but there is loads of stuff in the library.
This is because the interface.swf basically serves as a proxy for its library, which is then accessed by the engine to create new GUI elements.

All the elements you see in the library are sorted into three categories:

• classes: this folder contains all objects that are available to ActionScript as classes and can therefore be instantiated. It should normally not be necessary to change anything here. Exception: Background and BarBackground, which are the default background graphic and the graphic used inside the loading bar and window "title bar".
• elements: Composite elements used inside class objects. You may need to change something here.
• static: Basic graphics used by the classes and composite elements. This is where you will want to start changing things.

Changing Stuff

Now, say you change the look of some of the buttons. Chances are your graphics won't have the exact same size as the original ones. Although it is possible to use a different size, one thing has to be respected: buttons must always be of rectangular size! Also: the size of all (control bar) buttons must be equal! At least the space they will get will always be rectangular and equally sized. How you position them inside that space (individually) is up to you.

To change the size given to one button have a look at the ActionScript of the interface.fla's stage (exit editing mode if you're in it and press F9).
You will see a lot of comments. Scroll a bit down and you will see some indented comments, each followed by some command preceded by //. Those are some settings you can change. For the button size remove the // before the text setButtonSize(24); and replace the 24 with the size you need for your button in pixels.

A special case are the pagination buttons (the white circles in the default GUI, allowing to navigate to a certain page). Those always have the same height allotted as normal buttons, but can have a different width (although the size of each page button has to be the same again). This width can be adjusted via the next setting: setPageButtonWidth. Replace the 16 with whatever width you need.


Not Enough

So, you want to do real drastic changes to the control bar? That is possible, too, it just will require you to do some more work, if you wish to keep some of the functionality of the original control bar.

The very last setting you will find in the ActionScript code is named setCustom. It allows you to replace the normal control bar with whatever is on the stage of the interface.fla file. This way you can place some fancy buttons on the stage inside the fla and then have them displayed instead of the normal control bar.

As all functionality will have to be custom coded, you'll want to have a way to communicate with the engine. This is where the megazineSetup function comes into play, which can be found (in outcommented form) below the setCustom setting.
This function is called when the interface was loaded successfully, and gets passed

• mz of type IMegaZine: a reference to the MegaZine instance that loaded the interface. Main point for interaction, e.g. to navigate to pages or get thumbnails.
• currentPage of type uint: the number of the current page, e.g. to update custom page numbers or pagination.
• library of type ILibrary: a reference to the Library object that gets wrapped around the loaded interface. For cleaner instancing of elements contained within the library.

Going Deeper

To do some more complex changes, have a look at the classes in the gui folder. They model GUI elements or wrappers for them. You'll need to be rather proficient in ActionScript 3, though.