Actionscript:
-
var ui:QuickUI = new QuickUI();
-
ui.x = 20;
-
ui.y = 260;
-
ui.addEventListener(Event.CHANGE, onChange);
-
addChild(ui);
-
-
var spriteA:Sprite = makeSprite(150,150,0xFF0000);
-
spriteA.addEventListener(MouseEvent.CLICK, onShowAddProps);
-
-
var spriteB:Sprite = makeSprite(350,150, 0xCC6600);
-
spriteB.addEventListener(MouseEvent.CLICK, onShowExcludeProps);
-
-
var spriteC:Sprite = makeSprite(550,150, 0x550066);
-
spriteC.addEventListener(MouseEvent.CLICK, onShowExcludeProps);
-
-
function onChange(evt:Event):void{
-
// updates the property on the current target object
-
ui.updateObject(evt.target);
-
}
-
function onShowAddProps(evt:MouseEvent):void{
-
ui.rows = 3;
-
// onle show the following properties
-
// add(property, label)
-
ui.add("name", "name:");
-
ui.add("x", "x location:");
-
ui.add("y", "y location:");
-
ui.add("scaleX", "x scale:");
-
ui.add("buttonMode", "show hand cursor");
-
ui.create(evt.currentTarget);
-
ui.window({title:"Select Properties: "+ evt.currentTarget.name});
-
}
-
-
function onShowExcludeProps(evt:MouseEvent):void {
-
ui.rows = 5;
-
// don't show a few select properties - if add() is not called
-
// all properties will be shown
-
ui.exclude("doubleClickEnabled");
-
ui.exclude("useHandCursor");
-
// build the UI, give two custom labels to x and y properties
-
ui.create(evt.currentTarget, {x:"x loc:", y:"y loc:"});
-
// optionally render a window behind the UI elements
-
ui.window({title:"All Properties: " + evt.currentTarget.name});
-
}
-
-
-
function makeSprite(xp:Number, yp:Number, col:uint):Sprite{
-
var s:Sprite = Sprite(addChild(new Sprite()));
-
s.x = xp;
-
s.y = yp;
-
s.buttonMode = true;
-
with (s.graphics) beginFill(col), drawRect(-40, -40, 80, 80);
-
return s;
-
}
This snippet is my first stab at creating a library that makes certain types of UI creation very easy. It works by automatically creating input text fields and check boxes for all public properties that make sense with that type of UI. It has a long way to go, but this is a good start
Take a look at the swf to get an idea of what this snippet does.
Download the source for the library and the fla for the above demo.
I hope to get this library to the point that it will at least be useful for internal UI - that is, for level editors and mini-cms systems.
4 Comments
this would be a good project to open source, as well. I for one would be down to put some hours into it.
yeah… I basically have a few key things I need to fix in it - and a few things I need to add and then I can add it to google code…
It is very limited in terms of skinning etc… I’m starting with the goal of creating internal UI and then seeing how it evolves from there…
I made something similar a few weeks back (MinimalSettings)
https://github.com/IQAndreas/MinimalSettings
But instead I used Metadata tags to define which properties were readable or editable, as well as the ranges for numeric values.
I was planning on using MinimalComps for the GUI part (which I have been procrastinating actually applying, so it doesn’t do much at the moment
Do you mind if I grab your code for the GUI part and tie it into my project or something along those lines?
That’s pretty cool. Yes, feel free to use my code in any way you like - just let me know if it works out because I’d be curious to see what you do with it.