Simple Flash GUI Tool 39 comments

Update: Keith himself has been working on a similar idea and has released MinimalConfigurator.

Keith Peter’s Minimal Components are an excellent tool for any Flash developer when it comes to adding realtime configuration to a SWF. I find myself using them a lot in my demos and prototypes but for sketches with many editable parameters it’s still a hassle writing boilerplate code to set up and arrange the components, as well as adding the appropriate event handlers.

Inspired by GUI tools for OpenFrameworks such as ofxSimpleGuiToo and ofxTweakbar, and ControlP5 for Processing; I thought it was time to have an equally fast and easy to use GUI tool for Flash AS3 projects.

Introducing SimpleGUI

SimpleGUI is a single Class utility designed for AS3 projects where a developer needs to quickly add UI controls for variables or functions to a sketch. Properties can be controlled with just one line of code using a variety of components from the fantastic Minimal Comps set, as well as custom components written for SimpleGUI such as the FileChooser.

SimpleGUI Currently exposes the following methods, as well as an open addControl method where any Class definition can be passed:

• addColumn: Starts a new column of components
• addGroup: Starts a new group of components
• addLabel: Adds a TextField for labels or instructions
• addToggle: Adds a CheckBox for Boolean values
• addButton: Adds a PushButton for triggering callbacks
• addSlider: Creates a slider for numerical values
• addRange: Creates a range slider for two numerical values
• addStepper: An alternative component to the slider for numbers
• addColour: Adds a colour picker for integers
• addComboBox: Adds a ComboBox box for any object
• addFileChooser: Allow the user to load in data
• addSaveButton: This triggers the save method for generating code

Other features include:

• HotKey: Assign a hot key for showing / hiding the GUI
• Context Menu: Toggle the GUI from a context menu item
• Message: Pulse a message to the user in the toolbar
• Show Toggle: Display a toggle when the GUI is hidden
• Save Settings: Generate AS3 code to commit your current values

Using SimpleGUI

Each method takes an optional parameter called options, which is simply a dynamic Object from which you can pass values for any parameter the corresponding component has, as well as callback and callbackParams properties for triggering methods each time the component changes.

For example, to create a Slider for controlling a Number, set it’s width, execute a callback and display a custom label, you would write:

_gui.addSlider("myNumber", 0, 100, {label:"My Number", width:200, callback:onNumberChanged});

Although you can pass custom labels to each component, omitting this parameter will simply cause the variable name to be parsed and used as the label. For example, a variable called ‘myNumber’ will generate the label ‘My Number’.

SimpleGUI also supports nested properties, to any depth, using normal dot syntax. So you could control a particle’s position by writing:

_gui.addSlider("myParticle.position.x", 0, 1000);

Here is the code for the demo above. Only 27 lines of code to control the whole sketch.

_gui = new SimpleGUI(this, "Example GUI", "C");

_gui.addGroup("General Settings");
_gui.addColour("backgroundColour");
_gui.addButton("Randomise Circle Position", {callback:positionCircle, width:160});
_gui.addSaveButton();

_gui.addColumn("Noise Options");
_gui.addSlider("noiseBase.x", 10, 200);
_gui.addSlider("noiseBase.y", 10, 200);
_gui.addSlider("noiseSeed", 1, 1000);
_gui.addSlider("noiseOctaves", 1, 4);
_gui.addSlider("turbulence.x", -10, 10);
_gui.addSlider("turbulence.y", -10, 10);

_gui.addGroup("Wave Options");
_gui.addStepper("waveCount", 1, 20);
_gui.addStepper("waveSteps", 2, MAX_WAVE_STEPS);
_gui.addSlider("amplitude", 0, 200);
_gui.addColour("waveColour");

_gui.addColumn("Circle Options");
_gui.addRange("minCircleSize", "maxCircleSize", 10, 120, {label:"Circle Size Range"});
_gui.addSlider("rotationSpeed", -10, 10);
_gui.addComboBox("circle.blendMode", [

	{label:"Normal",	data:BlendMode.NORMAL},
	{label:"Darken",	data:BlendMode.DARKEN},
	{label:"Overlay",	data:BlendMode.OVERLAY},
	{label:"Difference",	data:BlendMode.DIFFERENCE},
	
]);

_gui.addFileChooser("Circle Texture", textureFileRef, textureLoaded, [
	new FileFilter("Image Files", "*.jpg;*.jpeg;*.png")
]);

_gui.addToggle("animateCircle");

_gui.addColumn("Instructions:");
_gui.addLabel("Press 'C' to toggle GUI");
_gui.addLabel("Press 'S' to copy setup code to clipboard");

_gui.show();

So, SimpelGUI is really just a timesaver for developers looking to quickly prototype something in Flash, or for releasing demos with controls. The actual hard work has been done by Keith in building and maintaining his deservedly popular Minimal Comps.

You can browse the source code or download the SimpleGUI class below. SimpleGUI is part of the Soulwire AS3 Framework.

Download: SimpleGUI