Simple AS3 GUI

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
Posted on 19 Jan 2011
44 Comments
10 Trackbacks

Meta

Simple Flash GUI Tool was posted on January 19th 2011 in the category Code / Actionscript 3.0, Code, Flash, Lab, Open Source and tagged; , , , , .

You can Leave a comment.


Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 401 Authorization Required in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

40 Responses to Simple Flash GUI Tool

Leave a Reply

Pingbacks / Trackbacks

  1. 3 years ago MinimalComps Updates: Dark Style, HBox & VBox alignment | BIT-101

    [...] go over to soulwire and check out the great GUI tool created there. One thing that struck me about it was the dark [...]

  2. 3 years ago Cellular automatons – devboy

    [...] Thanks go out to @soulwire for his SimpleGUI. [...]

  3. 3 years ago Pixels + blur + paletteMap + colors « GrgrDvrt

    [...] the final result, especially the blur radius and the paletteMap. I haven’t used tools like Soulwire’s simle flash GUI tool and it’s a mistake, I spent too much time to changing the code and compiling the swf just to [...]

  4. 3 years ago The randomness of the digits of π

    [...] that can be used to efficiently calculate many digits of Pi, among other things. Keith Peters and Justin Windle are also awesome for creating the Simple GUI components set used in the [...]

  5. 3 years ago switch(case) » Why I keep going Back To Flash

    [...] Simple Flash GUI Tool – an extension of MinimalComps by Keith Peters, and probably one of my favorite Flash libraries outside of TweenMax. This one is by Justin Windle over at SoulWire. And was originally posted like 5 months ago. [...]

  6. 3 years ago For a few polygons more… | iq¹²

    [...] to their existing code, and I thank them for that. In their Broom stick example they often use SimpleGUI so I used it too. It’s a simple prototyping UI that works with Keith Peters [...]

  7. 3 years ago Cellular automatons | devboy

    [...] Thanks go out to @soulwire for his SimpleGUI. [...]

  1. Li 3 years ago

    Seems like adding more than one range slider causes a serious error.

    Reply to this comment

  2. Jakob 3 years ago

    Awesome, any plans for a datagrid?

    Reply to this comment

  3. li 3 years ago

    Please add ability to set lowercase labels:

    Modded method:
    public function addLabel(text : String, up:Boolean = true) : Label
    {
    return addControl(Label, {text : up ? text.toUpperCase() : text}) as Label;
    }

    Reply to this comment

  4. li 3 years ago

    Hey, me again!

    Sorry for spamming you, its just that SimpleGUI has become my best friend lately. If you would like I can contribute to your project instead of me merely asking for features.

    Btw, is there a way to load settings copied to the clipboard?

    Thanks,
    Li

    Reply to this comment

  5. Og2t 3 years ago

    Great stuff Justin. I should have do it so cleanly for HiSlope ;-) I might use it in the future release if you don’t mind.

    Reply to this comment

    1. Soulwire 3 years ago

      Hey Tomek. Use it for anything you like mate! Would be honoured to see it appear in HiSlope :D

  6. Oscar 3 years ago

    Hi,

    Nifty little thingy, just what I needed:)

    I added support for InputText, let me know if you want it.

    thx

    Reply to this comment

  7. Blaze 3 years ago

    Hi there!

    Just a wee question…

    Can I listen to any event on the gui to fire an `update` function, when a change is made ? Something like Event.CHANGE…

    Cheers!

    Blaze

    Reply to this comment

  8. Karina 2 years ago

    Hello! My name is Karina. I’m new to Adobe Flash and I loved this “Simple GUI”.
    Would like to know if there is a way to turn it into an animation in AS?
    I am developing an experimental project to complete my graduation, and these lines in motion, is exactly what I need.
    You can publish the FLA file with AS? Because I have no idea how to implement this code in a FLA file. Or maybe a tutorial …

    I also have interest in the GlitchMap, I need to turn it into animation too.
    What I want is very absurd?

    Sorry my English and the hassle.
    Thank you.

    Karina

    Reply to this comment

  9. P48l0 1 year ago

    This is awesome!! Thanks a lot for this! This is easy as pie now to play arround changing settings, literally no effort required to use this.

    Reply to this comment