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.

This entry was posted in UI, motion and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

4 Comments

  1. Ted
    Posted April 23, 2009 at 1:43 am | Permalink

    One thing I kind of miss with the highlighter is the possibility to use CTRL/CMD + A.

  2. Posted April 23, 2009 at 9:00 am | Permalink

    hmmm… yeah that is kind of annoying isn’t it… It’s hard to find a perfect highlighter. This one looks better, and you don’t have to click “PLAIN TEXT”, but not being able to select all IS annoying :)

  3. seth
    Posted April 28, 2009 at 10:10 pm | Permalink

    thanks for the scroller

  4. seth
    Posted April 29, 2009 at 6:09 am | Permalink

    Oh, btw I love the highlighter. Copying the previous snippets were causing #, space, characters in the code, even with plain text selected.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*