Category Archives: dynamic

Quick UI Creation (Brainstorming)

Actionscript:
  1. var ui:QuickUI = new QuickUI();
  2. ui.x = 20;
  3. ui.y = 260;
  4. ui.addEventListener(Event.CHANGE, onChange);
  5. addChild(ui);
  6.  
  7. var spriteA:Sprite = makeSprite(150,150,0xFF0000);
  8. spriteA.addEventListener(MouseEvent.CLICK, onShowAddProps);
  9.  
  10. var spriteB:Sprite = makeSprite(350,150, 0xCC6600);
  11. spriteB.addEventListener(MouseEvent.CLICK, onShowExcludeProps);
  12.  
  13. var spriteC:Sprite = makeSprite(550,150, 0x550066);
  14. spriteC.addEventListener(MouseEvent.CLICK, onShowExcludeProps);
  15.  
  16. function onChange(evt:Event):void{
  17.     // updates the property on the current target object
  18.     ui.updateObject(evt.target);
  19. }
  20. function onShowAddProps(evt:MouseEvent):void{
  21.     ui.rows = 3;
  22.     // onle show the following properties
  23.     //  add(property, label)
  24.     ui.add("name", "name:");
  25.     ui.add("x", "x location:");
  26.     ui.add("y", "y location:");
  27.     ui.add("scaleX", "x scale:");
  28.     ui.add("buttonMode", "show hand cursor");
  29.     ui.create(evt.currentTarget);
  30.     ui.window({title:"Select Properties: "+ evt.currentTarget.name});
  31. }
  32.  
  33. function onShowExcludeProps(evt:MouseEvent):void {
  34.     ui.rows = 5;
  35.     // don't show a few select properties - if add() is not called
  36.     // all properties will be shown
  37.     ui.exclude("doubleClickEnabled");
  38.     ui.exclude("useHandCursor");
  39.     // build the UI, give two custom labels to x and y properties
  40.     ui.create(evt.currentTarget, {x:"x loc:", y:"y loc:"});
  41.     // optionally render a window behind the UI elements
  42.     ui.window({title:"All Properties: " + evt.currentTarget.name});
  43. }
  44.  
  45.  
  46. function makeSprite(xp:Number, yp:Number, col:uint):Sprite{
  47.     var s:Sprite = Sprite(addChild(new Sprite()));
  48.     s.x = xp;
  49.     s.y = yp;
  50.     s.buttonMode = true;
  51.     with (s.graphics) beginFill(col), drawRect(-40, -40, 80, 80);
  52.     return s;
  53. }

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.

Also posted in UI | Tagged , | 4 Comments

Instantiate and Set Properties

Actionscript:
  1. function create(obj:Class, props:Object):*{
  2.     var o:* = new obj();
  3.     for (var p:String in props){
  4.         o[p] = props[p];
  5.     }
  6.     return o;
  7. }
  8.  
  9. // test out the function
  10.  
  11. var txt:TextField = create(TextField, {x:200, y:100, selectable:false, text:"hello there", textColor:0xFF0000, defaultTextFormat:new TextFormat("_sans", 20)});
  12. addChild(txt);
  13.  
  14. var s:Sprite = Sprite(addChild(create(Sprite, {x:100, y:100, rotation:45, alpha:.5})));
  15.  
  16. with (s.graphics) beginFill(0xFF0000), drawRect(-20,-20,40,40);
  17.  
  18. var blur:BlurFilter = create(BlurFilter, {blurX:2, blurY:8, quality:1});
  19.  
  20. s.filters = [blur];

This snippet shows a function called create() that takes two arguments. The first argument is the name of a class to instantiate. The second is an Object with a list of properties to set on a newly created instance of the class (referenced in the first argument).

This could be particularly useful for TextFields which for some reason have no arguments in their constructor.

This will currently only work for classes that have either all optional constructor arguments or no constructor arguments.

Also posted in functions, one-liners, properties | Tagged , | Comments closed

Loop Through All Properties of a Class

Actionscript:
  1. package {
  2.    
  3.     import flash.display.Sprite;
  4.     import flash.utils.describeType;
  5.    
  6.     public class Main extends Sprite {
  7.        
  8.         public function Main(){
  9.             var test:Test = new Test();
  10.             var desc:XML= describeType(test);
  11.             // public vars
  12.             for each (var v:XML in desc.variable){
  13.                 trace(v.@name, test[v.@name]);
  14.             }
  15.             // getters
  16.             for each (v in desc.accessor){
  17.                 trace(v.@name, test[v.@name]);
  18.             }
  19.         }
  20.        
  21.     }
  22. }
  23.  
  24. class Test{
  25.     public var a:Number = 123;
  26.     public var b:Number = 100;   
  27.     private var _getterVal:Boolean = false;
  28.     public function get getter():Boolean{
  29.         return _getterVal;
  30.     }
  31. }
  32. /*
  33. outputs:
  34. b 100
  35. a 123
  36. getter false
  37. */

I'm working on a few libraries, QuickBox2D and a library for auto-generated UI stuff... this technique just came in handy. It shows how to use describeType() to loop through public vars and getters of a given class.

The title of this post should really be Loop Through All PUBLIC properties of a class.... but it was long enough as it is....
Note: this should be run as document class

Also posted in OOP, Object, XML | Tagged , | 3 Comments

Command Draw Source

Actionscript:
  1. [SWF(width = 600, height = 500, frameRate=30, background = 0xFFFFFF)]
  2.  
  3. var cmd:String = "1000 small orange circles, 9000 black lines,3 large white circles"
  4. // try some of these commands:
  5. //"300 small red triangles and 2 big orange circle 3 big black lines";
  6. //"100 big black triangles, ten small white rectangles 1 big white circle and 1 big gray poly";
  7. // "300 small red triangles and 2 big orange circle 3 big black lines";
  8. //"10 big black circles 1000 big white lines 100 small white rects 1 big red circle and 1 green poly"
  9. stage.align = "TL"
  10. var msk:Shape = new Shape();
  11. with(msk.graphics) beginFill(0x00FF00), drawRect(0,0,600, 400);
  12. this.mask = msk;
  13. var amount:Number;
  14. var color:uint = 0;
  15. var shape:String;
  16.  
  17. var hexLookup:Object = {red:0xFF0000, green:0x00FF00, blue:0x0000FF, yellow:0xFFFF00, orange:0xFFCC00, white:0xFFFFFF, gray:0xCCCCCC, grey:0xCCCCCC, black:0x000001};
  18. var sizeLookup:Object = {large:true, big:true, small:true, tiny:true};
  19. var defaultSize:Number = 50;
  20. var size:Number = defaultSize;
  21. var halfSize:Number = size / 2;
  22. var circles:Function = circle;
  23. var ovals:Function = oval, ellipse:Function = oval;
  24. var rects:Function = rect, rectangle:Function = rect, rectangles:Function = rect;
  25. var lines:Function = line;
  26. var triangles:Function = triangle;
  27. var polygon:Function = poly, polygons:Function = poly;
  28. var large:Function = big;
  29. var tiny:Function = small;
  30.  
  31. parse();
  32. function parse():void {
  33.     amount = 1;
  34.     color = 0x000000;
  35.     shape = "circle";
  36.     var words:Array = cmd.split(/[\W]+/g)
  37.     for (var i:int = 0; i<words.length; i++){
  38.         var w:* = words[i];
  39.         if (isNaN(Number(w))){
  40.             if (hexLookup[w]){
  41.                 color = hexLookup[w];
  42.                 trace(w, "color");
  43.             }else
  44.             if (sizeLookup[w]){
  45.                 this[w]();
  46.             }else
  47.             if (this[w]){
  48.                 for (var j:int = 0; j<amount; j++){
  49.                    this[w]();
  50.                 }
  51.                 color = 0x000000;
  52.                 size = defaultSize;
  53.                 trace(w, "command");
  54.             }
  55.         }else{
  56.             trace(w, "number");
  57.             amount = w;
  58.         }
  59.     }
  60. }
  61. function makeShape(p:Array):void{
  62.         var s:Shape = Shape(addChild(new Shape()));
  63.          for (var i:int = 0; i<p.length; i++) {
  64.             s.graphics[p[i][0]].apply(graphics,p[i].splice(1));
  65.          }
  66.         s.rotation = Math.random() * 360;
  67.         s.x = Math.random() * stage.stageWidth;
  68.         s.y = Math.random() * stage.stageHeight;
  69. }
  70.  
  71. function circle():void{
  72.       makeShape([["beginFill",color], ["drawCircle",0,0,Math.random() * halfSize + halfSize]]);
  73. }
  74. function oval():void{
  75.       makeShape([["beginFill",color],["drawEllipse", 0,0,Math.random() * size + halfSize]]);  
  76. }
  77. function square():void{
  78.         var s:Number = Math.random() * halfSize + halfSize;
  79.         var p:Number = -s/2;
  80.         makeShape([["beginFill",color],["drawRect", p, p, s, s]]);  
  81. }
  82. function rect():void{
  83.         var w:Number = Math.random() * halfSize + halfSize;
  84.         var h:Number = Math.random() * halfSize + halfSize;
  85.         makeShape([["beginFill",color],["drawRect", -w/2, -h/2, w, h]]);
  86. }
  87. function line():void{
  88.     var s:Number = size * 2;
  89.     makeShape([["lineStyle",Math.random()*3, color],["lineTo", Math.random()*s - size, Math.random()*s - size]])
  90. }
  91. function triangle():void {
  92.      var s:Number = size * 2;
  93.      makeShape([["beginFill",color],["lineTo", Math.random()*s - size, Math.random()*s - size], ["lineTo", Math.random()*s - size, Math.random()*s - size]]);
  94. }
  95. function poly():void {
  96.      var s:Number = size * 2;
  97.      var cmds:Array = [["beginFill",color]]
  98.      var num:Number = int(Math.random()*8) + 2;
  99.      for (var i:int = 0; i<num; i++){
  100.           cmds.push(["lineTo", Math.random()*s - size, Math.random()*s - size]);
  101.      }
  102.      makeShape(cmds);
  103. }
  104. function big():void{
  105.     size = 100 + Math.random() * 40;
  106.     halfSize = size / 2;
  107. }
  108. function small():void {
  109.     size = 3 + Math.random() * 20;
  110.     halfSize = size / 2;
  111. }

I've been meaning to post this source for a long time. It's a project I created for shapevent called Command Draw. It allows you to use simple sentence structure to create textures and patterns.

See it in action here (this one has some minimal UI and uses flashvars for the command string).


As a side note, this is the 200th post on ActionSnippet.com

Also posted in Graphics, strings | Tagged , | 3 Comments