Category Archives: UI

Previous and Next Buttons

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)

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

Relative Positioning

Actionscript:
  1. var size:Array = [1, 1.5, .5, 1, .4, 1, 1, 1, .2, 1.1]
  2. var boxes:Array = new Array();
  3. var spacing:Number = 4;
  4. var container:Sprite = Sprite(addChild(new Sprite()));
  5. container.x = container.y = 100;
  6.  
  7. for (var i:int = 0; i<size.length; i++){
  8.     var box:Sprite = makeBox();
  9.     var prev:int = i - 1;
  10.     box.scaleX= box.scaleY = size[i];
  11.     if (i == 0){
  12.         box.y = 10;
  13.     }else{
  14.         // here's the trick
  15.         // if you animate the height property you need to do this again and again:
  16.         box.y = boxes[prev].y + boxes[prev].height/2+ box.height/2 + spacing
  17.     }
  18.     boxes.push(box);
  19. }
  20.  
  21. function makeBox():Sprite{
  22.     var box:Sprite = Sprite(container.addChild(new Sprite()));
  23.     with (box.graphics) beginFill(0xFF0000), drawRect(-50,-10, 100, 20);
  24.     return box;
  25. }

Sometimes you need to position a bunch of Sprites or MovieClips that are different sizes - and you want to keep the spacing between them the same. This snippet shows a simple example of this.

For more info you could also do this tutorial that I wrote on learningactionscript3.com

Also posted in misc | Tagged , | Leave a comment

Slider Navigation

Actionscript:
  1. var thumbNum:Number = 20;
  2. var spacing:Number = 10;
  3. var thumbs:MovieClip = new MovieClip();
  4. addChild(thumbs);
  5. for (var i:int = 0; i<thumbNum; i++){
  6.     var t:MovieClip = new MovieClip();
  7.     with(t.graphics) beginFill(0x666666), drawRect(0,0,100,50);
  8.     t.x = i * (t.width + spacing);
  9.     t.y = 5;
  10.     t.buttonMode = true;
  11.     thumbs.addChild(t);
  12. }
  13. var minX:Number = stage.stageWidth - thumbs.width - spacing;
  14. var destX:Number = thumbs.x = spacing;
  15. var velX:Number = 10;
  16. var stageThird:Number =  stage.stageWidth / 3;
  17. var right:Number = stageThird * 2;
  18. var left:Number  = stageThird;
  19. addEventListener(Event.ENTER_FRAME, onLoop);
  20. function onLoop(evt:Event):void {
  21.     if (mouseX> right){
  22.        destX -= velX;
  23.     }
  24.     if (mouseX <left){
  25.         destX += velX;
  26.     }
  27.     if (destX <minX){
  28.         destX = minX;
  29.     }
  30.     if (destX> spacing){
  31.         destX = spacing;
  32.     }
  33.     thumbs.x += (destX - thumbs.x) /4;
  34. }

This snippet shows a technique for a common type of navigation.

Also posted in motion | Tagged , | Leave a comment

Snap to Grid

Actionscript:
  1. [SWF(width = 600, height = 400)]
  2.  
  3. // draw the same grid as yesterday
  4. var tileSize:int = 40;
  5. var cols:int = stage.stageWidth / tileSize;
  6. var rows:int = stage.stageHeight / tileSize;
  7. var grid:Sprite = Sprite(addChild(new Sprite()));
  8. grid.graphics.lineStyle(0,0x000000);
  9. var i:int = 0;
  10. for (i = 1; i<cols; i++){
  11.     var posX:Number = i * tileSize
  12.     grid.graphics.moveTo(posX, 0);
  13.     grid.graphics.lineTo(posX, stage.stageHeight);
  14. }
  15. for (i = 1; i<rows; i++){
  16.     var posY:Number = i * tileSize
  17.     grid.graphics.moveTo(0, posY);
  18.     grid.graphics.lineTo(stage.stageWidth, posY);
  19. }
  20.  
  21. //
  22. // -- add a circle that snaps to the grid when dragged
  23. //
  24. var circle:Sprite = Sprite(addChild(new Sprite()));
  25. with (circle.graphics) beginFill(0xFF0000), drawCircle(0,0,10);
  26. circle.x = circle.y =  tileSize * 3;
  27. circle.buttonMode = true;
  28.  
  29. circle.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  30. function onDown(evt:MouseEvent):void {
  31.     addEventListener(Event.ENTER_FRAME, onRunSnapping);
  32. }
  33.  
  34. function onRunSnapping(evt:Event):void {
  35.     circle.x =  Math.round(mouseX / tileSize) * tileSize;
  36.     circle.y =  Math.round(mouseY / tileSize) * tileSize;
  37. }
  38.  
  39. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  40. function onUp(evt:MouseEvent):void {
  41.     removeEventListener(Event.ENTER_FRAME, onRunSnapping);
  42. }

This builds on yesterdays post by adding a draggable red circle that snaps to the grid. This is the real trick:

Actionscript:
  1. circle.x =  Math.round(mouseX / tileSize) * tileSize;
  2. circle.y =  Math.round(mouseY / tileSize) * tileSize;

Also posted in Graphics, motion | Tagged , | Leave a comment

Dial UI, Record Scratch etc…

Actionscript:
  1. var angOffset:Number = 0;
  2. var percent:Number  = 0;
  3.  
  4. var dial:Sprite = Sprite(addChild(new Sprite()));
  5. with(dial.graphics) lineStyle(1, 0x000000), beginFill(0xCCCCCC), drawCircle(0,0,100), lineTo(0,0);
  6. dial.x = stage.stageWidth / 2;
  7. dial.y = stage.stageHeight / 2;
  8.  
  9. dial.addEventListener(MouseEvent.MOUSE_DOWN, onDialDown);
  10. stage.addEventListener(MouseEvent.MOUSE_UP, onStageUp);
  11. function onDialDown(evt:MouseEvent):void {
  12.     calcOffset();
  13.     dial.addEventListener(Event.ENTER_FRAME, onRotateDial);
  14. }
  15.  
  16. function calcOffset():void {
  17.     angOffset = Math.atan2(mouseY - dial.y, mouseX - dial.x) / Math.PI * 180 - dial.rotation;
  18. }
  19.  
  20. function onRotateDial(evt:Event):void {
  21.     dial.rotation =  Math.atan2(mouseY - dial.y, mouseX - dial.x) / Math.PI * 180 - angOffset;
  22.     percent = dial.rotation;
  23.     if (percent <0){
  24.         percent += 360;
  25.     }
  26.     percent /= 360;
  27.     // range 0 - 1
  28.     trace(percent);
  29. }
  30.  
  31. function onStageUp(evt:Event):void {
  32.     dial.removeEventListener(Event.ENTER_FRAME, onRotateDial);
  33. }

The above shows the meat of what you need to create some kind of dial UI... this would also work well if you need to create an interactive turntable (record scratching etc...).

Everytime I needed to create dials for UI, the client wanted left -> right mouse motion rather than a circular... like what you see in Reason. Someone recently asked me how to do a circular motion style dial and this is the technique I came up with.

Posted in UI | Tagged , | Leave a comment

Procedural Pattern - Navigation

Actionscript:
  1. var currentBtn:MovieClip;
  2.  
  3. var nav:Sprite = new Sprite();
  4. nav.x = nav.y = 20;
  5. addChild(nav);
  6.  
  7. createBtns();
  8.  
  9. nav.addEventListener(MouseEvent.CLICK, onClickBtn);
  10.  
  11. function createBtns():void{
  12.     for (var i:int = 0; i<10; i++){
  13.         var btn:MovieClip = new MovieClip();
  14.         with(btn.graphics) beginFill(0x666666), drawRect(-10,-10,20,20);
  15.         btn.x = i * (btn.width + 10);
  16.         btn.buttonMode = true;
  17.         btn.num = i;
  18.         btn.alpha = .5;
  19.         nav.addChild(btn);
  20.     }
  21. }
  22.  
  23. function onClickBtn(evt:MouseEvent):void {
  24.     //
  25.     // this is the important part
  26.     //
  27.     if (currentBtn){
  28.         currentBtn.scaleX = currentBtn.scaleY = 1;
  29.         currentBtn.alpha = .5;
  30.     }
  31.     currentBtn = MovieClip(evt.target);
  32.     currentBtn.scaleX = currentBtn.scaleY = 1.3;
  33.     currentBtn.alpha = 1;
  34.     trace("current button:", currentBtn.num);
  35.     //
  36. }

This code will create 10 boxes that represent buttons on a navigation. When you click a box it indicates that it is selected by scaling up and changing alpha. Simple enough...

The term Procedural Pattern is just a spin on the idea of Design Patterns. I've come up with lots of small patterns to solve simple recurring problems over the years. Most of these relate to things like drawing programs, ecards and games.

Posted in UI | Tagged , , | Leave a comment