Tag Archives: flash

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.

Posted in UI, motion | Also tagged | 4 Comments

3D Hypocycloid Shape

Actionscript:
  1. var matrix:Matrix3D = new Matrix3D();
  2. var verts:Vector.<Number> = new Vector.<Number>();
  3. var pVerts:Vector.<Number> = new Vector.<Number>();
  4. var uvts:Vector.<Number> = new Vector.<Number>();
  5. const TWO_PI:Number=Math.PI * 2;
  6. var step:Number=.05;
  7.  
  8. var brush:BitmapData = new BitmapData(3, 2, true, 0x41FFFFFF);
  9. var n:Number=8;
  10. var xp:Number=0,yp:Number=0,a:Number=12,t:Number=0;
  11. for (var i:Number = 0; i<TWO_PI; i+=step) {
  12.     for (var j:Number = 0; j<TWO_PI; j+=step) {
  13.         // unoptimized for readability
  14.     var cosi:Number = a/n * ((n - 1) * Math.cos(i) + Math.cos(Math.abs((n - 1) * i)));
  15.     var sini:Number = a/n * ((n - 1) * Math.sin(i) - Math.sin(Math.abs((n - 1) * i)));
  16.     var cosj:Number = a/n * ((n - 1) * Math.cos(j) + Math.cos(Math.abs((n - 1) * j)));
  17.     var sinj:Number = a/n * ((n - 1) * Math.sin(j) - Math.sin(Math.abs((n - 1) * j)));
  18.         verts.push(cosi * cosj);
  19.         verts.push(sini * cosj);
  20.         verts.push(a * sinj);
  21.         pVerts.push(0),pVerts.push(0);
  22.         uvts.push(0),uvts.push(0),uvts.push(0);
  23.     }
  24. }
  25. var canvas:BitmapData=new BitmapData(400,400,false,0x000000);
  26. addChild(new Bitmap(canvas));
  27. var dx:Number=0;
  28. var dy:Number=0;
  29. addEventListener(Event.ENTER_FRAME, onLoop);
  30. function onLoop(evt:Event):void {
  31.     dx += (mouseX - dx)/4;
  32.     dy += (mouseY - dy)/4;
  33.     matrix.identity();
  34.     matrix.appendRotation(dy,Vector3D.X_AXIS);
  35.     matrix.appendRotation(dx,Vector3D.Y_AXIS);
  36.     matrix.appendTranslation(200, 200, 0);
  37.     Utils3D.projectVectors(matrix, verts, pVerts, uvts);
  38.     canvas.lock();
  39.     canvas.fillRect(canvas.rect, 0x000000);
  40.     var p = new Point();
  41.     for (var i:int = 0; i<pVerts.length; i+=2) {
  42.         p.x = pVerts[i];
  43.         p.y = pVerts[i + 1];
  44.         canvas.copyPixels(brush, brush.rect, p, null, null, true);
  45.     }
  46.     canvas.unlock();
  47. }

Taking the Hypocycloid stuff from yesterday into 3D...

Posted in 3D, BitmapData, Math | Also tagged | 6 Comments

Hypocycloid Spiral

Actionscript:
  1. x = stage.stageWidth / 2;
  2. y = stage.stageHeight / 2;
  3. // change n to alter number of spikes (cuspes)
  4. var n:Number = 8;
  5. var xp:Number = 0, yp:Number = 0, a:Number = 10, t:Number = 0;
  6.  
  7. graphics.lineStyle(0, 0x000000);
  8. addEventListener(Event.ENTER_FRAME, onLoop);
  9. function onLoop(evt:Event):void {
  10.     for (var i:int = 0; i<10; i++){
  11.       // unoptimized for simplicity and similarity to original equations from here:
  12.           // http://mathworld.wolfram.com/Hypocycloid.html
  13.       xp = a/n * ((n - 1) * Math.cos(t) + Math.cos(Math.abs((n - 1) * t)));
  14.       yp = a/n * ((n - 1) * Math.sin(t) - Math.sin(Math.abs((n - 1) * t)))  ;
  15.      
  16.       a *= 1.002;
  17.        if (t == 0){
  18.            graphics.moveTo(xp, yp);
  19.        }else{
  20.            graphics.lineTo(xp, yp);  
  21.        }
  22.        t += .1;
  23.     }
  24. }

This code draws a Hypocycloid with a radius that increments - this results in a spiral formation.

I got the math from mathworld... here.

Posted in Math | Also tagged | 2 Comments

Pendulums

Actionscript:
  1. var mouseSpeedX:Number = 0;
  2. var prevX:Number = 0;
  3.  
  4. var pends:Array = new Array();
  5. for (var i:int = 0; i<10; i++){
  6.        pends.push(makePendulum(100+ i * 40, 100, 15, 100 + i * 10));
  7. }
  8.  
  9. addEventListener(Event.ENTER_FRAME, onRun);
  10. function onRun(evt:Event):void {
  11.        // mouseSpeed
  12.        mouseSpeedX = prevX - mouseX;
  13.        prevX = mouseX;
  14.  
  15.        for (var i:int = 0; i<pends.length; i++) pends[i]();
  16. }
  17.  
  18. function makePendulum(xp:Number, yp:Number, rad:Number, leng:Number):Function {
  19.        var rot:Number = 0;
  20.        var rotDest :Number = 0;
  21.        var rotVel:Number = 0
  22.        var string:Shape = Shape(addChild(new Shape()));
  23.        var ball:Sprite = Sprite(addChild(new Sprite()));
  24.        ball.buttonMode = true;
  25.        with(ball.graphics) beginFill(0xFF0000), drawCircle(0,leng, rad);
  26.        ball.x = xp;
  27.        ball.y = yp;
  28.        string.x = ball.x;
  29.        string.y = ball.y;
  30.        ball.addEventListener(MouseEvent.ROLL_OVER,function(){
  31.              rotDest = mouseSpeedX;
  32.        });
  33.        return function(){
  34.            // force rotDest back to 0
  35.            rotDest *= .8;
  36.                // elasticity (hooke's)
  37.                rotVel += (-1.9 * (rot - rotDest) - rotVel) / 4;
  38.                rot += rotVel
  39.                ball.rotation = rot;
  40.                // draw string:
  41.                string.graphics.clear();
  42.                string.graphics.lineStyle(0,0);
  43.                var pnt:Point = ball.localToGlobal(new Point(0, leng))
  44.                string.graphics.curveTo(0, leng / 2, pnt.x - ball.x, pnt.y-ball.y);
  45.   }
  46. }

This is a variation on something I wrote in response to a student question. It creates a few pendulums that can be pushed with the mouse.

Posted in motion | Also tagged | 5 Comments