I just committed a new sample project demonstrating how to customize the appearance of the user interface components I released last week.

Here it is in action:

As you can see you can have multiple styles at the same time. Setting the styles couldn’t be much simpler. It just requires setting some static vars on the Factory class.

// -- gray and green
Factory.BACKGROUND_COLOR = 0x333333;
Factory.METER_FILL_COLOR_1 = 0xb4ff00;
Factory.METER_FILL_COLOR_2 = 0x76a700;
Factory.TEXT_COLOR_1 = 0xb4ff00
Factory.TEXT_COLOR_2 = 0xffffff;
Factory.MOUSE_UP_COLOR = Factory.BACKGROUND_COLOR;
Factory.MOUSE_OVER_COLOR = 0x555555
Factory.BACKGROUND_CORNER_RADIUS = 0;

It is also possible to customize the fonts used, like so:

All you need to do is change the source to the font in the embed state in the makemachine/display/text/fonts/Fonts.as class.

[Embed(source="Droid_Sans/DroidSans.ttf", embedAsCFF="false", fontName="default", mimeType="application/x-font")]

public static const DefaultFont:Class;