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
46 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 410 Gone in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

40 Responses to Simple Flash GUI Tool

1 2 3

Leave a Reply

Pingbacks / Trackbacks

  1. 6 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. 6 years ago Cellular automatons – devboy

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

  3. 6 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. 6 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. 5 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. 5 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. 5 years ago Cellular automatons | devboy

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

  1. Mark 6 years ago

    Hi there. Great + useful class. I like the way how you bind variables, this will make it easy to use.
    You need to change the downloadlink, it includes a ; sign, so now it looks like the link is broken. I think this is really awesome! Maybe you should combine the new minimalcomps configurator class with this class to make it even faster. Great stuff, thanks!
    BTW, love your minimalcomps theme too :)

    Reply to this comment

    1. Soulwire 6 years ago

      Cheers Mark and thanks for the heads up on the link – fixed now. I don’t think I’ve seen the configurator class, where can I find out about that?

  2. pethan 6 years ago
  3. Mark 6 years ago

    Hi Justin, you can find the configurator here, it is made by Keith himself.
    http://www.bit-101.com/blog/?p=2961

    Reply to this comment

    1. Soulwire 6 years ago

      Ahh, that’s fantastic! And posted the day before this – I guess we were thinking the same thing at the same time!

  4. Pavel 6 years ago

    Have submitted couple issues on GitHub.

    Reply to this comment

    1. Soulwire 6 years ago

      Cheers Pavel, I’m looking into them

    2. Soulwire 6 years ago

      Fixed the issues you mentioned and implemented your suggestion. All on GitHub

  5. xero 6 years ago

    this is awesome!
    i code this kind of thing to debug my work all the time.
    glad to see im not the only one ;D
    thanx so much!

    Reply to this comment

    1. Soulwire 6 years ago

      No worries! Yeah, I actually wrote something like this a while back due to exactly the situation you described, called ControlUI but thought I’d rewrite so I could open source it. Hope it comes in handy and I’ll be trying to keep it well maintained.

  6. lab9 6 years ago

    Nice work, very easy to use.

    Just to let you know, got an error on line 666 (coincidence ?) in a specific situation :
    I have added at least one combobox and one stepper.
    When trying to modify the value of the stepper through the textinput, it triggers an error because the combobox selectedItem is null (as it tries to update all components when changing the value of the textInput).

    Hopes it helps :)

    Reply to this comment

    1. Soulwire 6 years ago

      Hey Bertrand.

      Thanks for the bug report (great line to find it on too!). You’re right, there needs to be some more error catching / handling. The reason they all update each time is so that values can be synced and the GUI can pick up changes in the values from any other component. I’ll have a look at this and file it as fixed on GitHub once it’s done.

      Thanks for letting me know and for giving it a try :)

    2. Soulwire 6 years ago

      I’ve fixed the issue you mentioned (in the repo :)

  7. Robin 6 years ago

    This looks incredible – look forward to giving it a go! Would also love to see some oF lab posts in the future! :)

    Reply to this comment

  8. Keith Peters 6 years ago

    That’s very, very… very cool. Thanks!

    Reply to this comment

    1. Soulwire 6 years ago

      Hey Keith. Thank you for the components! And I’ve just seen your MinimalConfigurator which is a much better solution than this one :) It’s funny that we were working on them in parallel!

  9. Andros 6 years ago

    Very good! :)
    It reminds me of an experiment I did a while ago: http://www.cocobongo.tv/lab/experiment.php?swf=aqua.swf
    I came to the same solution to represent water.

    Reply to this comment

  10. jc 6 years ago

    nice one!

    I’ve just has a quick play w/ it and noticed a small bug (not sure if its for you or Keith so I’ll post at both) but this code:

    _gui = new SimpleGUI(this, “pref pane”, “P”);

    _gui.addGroup(“slider options);
    _gui.addSlider(“sliderOptions”, 5, 30, {callback:sliderOptionsUpdated, label:”slider values: “});

    _gui.addGroup(“toggle options”);
    _gui.addToggle(“toggleOptions”, {callback:toggleOptionsUpdated, label:” toggle me”});

    when clicking the toggle button, the callback for both the toggle button AND the slider are getting called.

    cheers

    Reply to this comment

  11. li 6 years ago

    This is an awesome idea. Thanks so much for this.

    A suggestion: the options object is a bit obfuscating if you are not familiar with the MinimalComps library. I’m thinking of a way that IDE’s like IntelliJ could show what options are available for something like addSlider, and all I can think of is the function to return the created instance of HUSlider, so you could place a dot add the end of the function call and quickly check the available options. Once found you remove the dot at the end and place your option in the parameters. That would be helpful, but a bit hacky, I’m sure there is a better solution.

    Reply to this comment

    1. Soulwire 6 years ago

      Fair point. I had the TweenLite API in mind with the options object – it gives a lot of flexibility but this does mean sacrificing strongly typed options. The generic addControl method does return the Component object which it creates, but I do like your idea of returning specific types from the other methods. The reason I omitted this in the current release is because it could be dangerous to have references to components inside the gui, it was indented to be a black box. That said, design patterns aside, the concept of this class is simplicity and flexibility for prototyping predominantly, as opposed to production builds – with that in mind it certainly makes sense to open it up like that, which would indeed give the added benefit of object inspection from within your IDE. I have to make a few updates soon and will probably implement this too. Thanks for the feedback and for trying the class! :)

    2. li 6 years ago

      Great. I will be using this class a lot! I have more feedback, check out this experiment: http://www.lidev.com.ar/demos/simplegui/
      You can alter the camera position using the gui AND by dragging in the stage. While altering the camera’s parameters from outside the gui (by dragging on the stage), I found that the components in the gui didn’t update, so I had to change the update() method in your class to public and call it on every frame from my main class. Hence dragging on the stage updates the slider values in the gui as you see in the demo. SimpleGUI does not do this out of the box. My solution seems overkill to me, but perhaps something that can be solved more subtly. It would be nice if the gui would update to params even if they are changed externally.

  12. Nick 6 years ago

    Excellent tool! I’ve been extending it (lightly) here and there for my needs, mainly just adding more component, log sliders, etc and have run into one problem … using Keith’s Knob (i know) component.

    i’m creating a demo of a little sound mixer and need Knobs.. but when i change the default Knob “mode” to anything other than “horizontal” I don’t get any Event.CHANGE firing through SimpleGUI. The Knob moves with correct mode, but it’s as though it’s been disconnected from the SimpleGUI event system.

    Any ideas?

    Reply to this comment