Category Archives: UI

Quick UI Creation (Brainstorming)

By Zevan | May 23, 2009
CLICK HERE TO COPY
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 dynamic | Tagged , | 4 Comments

static BitmapData References

By Zevan | May 9, 2009
CLICK HERE TO COPY
Actionscript:
  1. package{
  2.    
  3.     import flash.display.*;
  4.     import flash.events.*;
  5.     import flash.geom.*;
  6.    
  7.     public class QuickCheckBox extends Sprite{
  8.        
  9.         private var _checked:Boolean;
  10.         private var _bitmap:Bitmap;
  11.         private var _canvas:BitmapData;
  12.        
  13.         private static var checked:BitmapData;
  14.         private static var unchecked:BitmapData;
  15.         private static var bg:Shape;
  16.         private static var ex:Shape;
  17.         private static var pnt:Point;
  18.        
  19.         // static init for BitmapData and drawing
  20.         {
  21.             trace("only render your graphics once");
  22.             pnt = new Point(0,0);
  23.             checked = new BitmapData(10,10, true, 0x00000000);
  24.             unchecked = new BitmapData(10, 10, true, 0x00000000);
  25.             bg = new Shape();
  26.             with(bg.graphics) lineStyle(0,0x000000), beginFill(0xEFEFEF), drawRect(0,0,9,9);
  27.             unchecked.draw(bg);
  28.             ex = new Shape();
  29.             with(ex.graphics) {
  30.                 lineStyle(2,0x333333), moveTo(3, 3),
  31.                 lineTo(7, 7), moveTo(7, 3), lineTo(3, 7);
  32.             }
  33.             checked.draw(bg);
  34.             checked.draw(ex);
  35.         }
  36.        
  37.         public function QuickCheckBox(value:Boolean = false):void{
  38.             _checked = value;
  39.             _canvas =  new BitmapData(10,10, true, 0x00000000);
  40.             _bitmap = new Bitmap(_canvas);
  41.             addChild(_bitmap);
  42.             buttonMode = true;
  43.             render();
  44.             addEventListener(MouseEvent.CLICK, onClick);
  45.         }
  46.        
  47.         public function render():void{
  48.              if (_checked){
  49.                  _canvas.copyPixels(QuickCheckBox.checked, _canvas.rect, pnt);
  50.              }else{
  51.                  _canvas.copyPixels(unchecked, _canvas.rect, pnt);
  52.             }
  53.         }
  54.        
  55.         private function onClick(evt:Event):void{
  56.             _checked = !_checked;
  57.             render();
  58.             this.dispatchEvent(new Event(Event.CHANGE, true));
  59.         }
  60.        
  61.         public function get checked():Boolean{
  62.             return _checked;
  63.         }
  64.        
  65.         public function set checked(val:Boolean):void{
  66.             _checked = val;
  67.             render();
  68.         }
  69.     }
  70. }

This checkbox class uses a static initializer. Static initializers can come in handy to initialize some static variables for all class instances to make use of. In this case I'm using the static initializer to create checked and unchecked BitmapData objects - all instances of QuickCheckBox use these two static BitmapData objects rather than create their own unique ones.

Here is some client code if you want to test this class out:

CLICK HERE TO COPY
Actionscript:
  1. for (var i:int = 0; i<100; i++){
  2.  var checkBox:QuickCheckBox = new QuickCheckBox(true);
  3.  checkBox.x =100 +  i % 10 * 12;
  4.  checkBox.y = 100 + int(i / 10) * 12;
  5.  // uncheck a few checkboxes
  6.  if (checkBox.x == checkBox.y){
  7.      checkBox.checked = false;
  8.  }
  9.  addChild( checkBox);
  10.  // checkBox dispatches a change event
  11.  checkBox.addEventListener(Event.CHANGE, onChange);
  12. }
  13. function onChange(evt:Event):void{
  14.     trace(evt.currentTarget.checked);
  15. }
  16. /*outputs
  17. only render your graphics once
  18. */

This draws 100 checkboxes, - you'll also notice in the output window that the trace statement from QuickCheckBox only runs once.

Here are 100 instances of QuickCheckBox:

Also posted in BitmapData, OOP | Tagged , | 4 Comments

Previous and Next Buttons

By Zevan | May 3, 2009
CLICK HERE TO COPY
Actionscript:
  1. var prevBtn:Sprite = makeArrow(100, 100);
  2. prevBtn.rotation = 180;
  3. var nextBtn:Sprite = makeArrow(130, 100);
  4.  
  5. var index:int = 0;
  6. var vals:Array = [1,2,3,4,5,6,7,8,9,10,11];
  7. var leng:int = vals.length;
  8.  
  9. trace(vals[index]);
  10.  
  11. prevBtn.addEventListener(MouseEvent.CLICK, onPrev);
  12. function onPrev(evt:MouseEvent):void {
  13.     index--;
  14.     if (index <0){
  15.         index = leng - 1;
  16.     }
  17.     trace(vals[index%leng]);
  18. }
  19. nextBtn.addEventListener(MouseEvent.CLICK, onNext);
  20. function onNext(evt:MouseEvent):void {
  21.     index++;
  22.     trace(vals[index%leng]);
  23. }
  24.  
  25. function makeArrow(xp:Number, yp:Number):Sprite {
  26.     var s:Sprite = Sprite(addChild(new Sprite()));
  27.     s.buttonMode = true;
  28.     with(s.graphics) beginFill(0x666666), moveTo(0,-10), lineTo(20, 0), lineTo(0,10);
  29.     s.x = xp;
  30.     s.y = yp;
  31.     return s;
  32. }

Previous and next buttons....

Also posted in misc | Tagged , | Leave a comment

Infinity Scroller (repeating navigation)

By Zevan | April 22, 2009
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

var buttonsWidth:Number = 0;
var buttonsA:Sprite = new Sprite();
var buttonsB:Sprite = new Sprite();
var nav:Sprite = new Sprite();
 
var buttonData:Array = ["one", "two", "three", "four", "five", "six", 
                                    "seven", "eight", "nine", "ten"];
 
buildNav();
 
function buildNav():void{
	nav.addChild(buttonsA);
        nav.addChild(buttonsB);
        addChild(nav);
	buildButtons(buttonsA);
	buttonsWidth = buttonsA.width;
	buildButtons(buttonsB);
	buttonsB.x = buttonsWidth;
}
 
function buildButtons(container:Sprite):void{
	for (var i:int = 0; i<buttonData.length; i++){
		var b:MovieClip = new MovieClip();
	        with(b.graphics){
			lineStyle(0,0x000000);
			beginFill(0xCCCCCC);
			drawRect(0,0,100,30);
		}
		b.x = i * b.width;
		var txt:TextField = new TextField();
		txt.scaleX = txt.scaleY = 1.5
		txt.selectable = false;
		txt.multiline = false;
		txt.autoSize = TextFieldAutoSize.LEFT;
		txt.mouseEnabled = false;
		txt.x = 3;
		txt.text = buttonData[i];
		b.buttonMode = true;
		b.addChild(txt)
	        container.addChild(b);
	}
}
 
var velX:Number = 0;
var navSpeed:Number = 8;
var leftSide:Number = stage.stageWidth / 3;
var rightSide:Number = leftSide * 2;
addEventListener(Event.ENTER_FRAME, onRunNav);
function onRunNav(evt:Event):void {
	if (mouseY < 100){
		if (mouseX  < leftSide){
			velX = navSpeed;
		}
		if (mouseX > rightSide){
			velX = -navSpeed;
		}
		if (nav.x < -buttonsWidth){
			nav.x = -navSpeed;
		}
		if (nav.x > -navSpeed){
			nav.x = -buttonsWidth 
		}
	}
	velX *=.9;
	nav.x += velX;
}

This snippet creates a navigation that will scroll to the left or right forever - the buttons will simply repeat. I'm not a big fan of this kind of navigation - especially if you have lots of buttons, but it seems to be a common request. This technique can be modified for use in a side-scroller style game.

Just added a new syntax highlighter, please posts comments if you have any issues viewing this snippet.

Also posted in motion | Tagged , | 4 Comments