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.
Posted in UI, motion | Also tagged actionscript |
By Zevan | April 21, 2009
Actionscript:
-
var matrix:Matrix3D = new Matrix3D();
-
var verts:Vector.<Number> = new Vector.<Number>();
-
var pVerts:Vector.<Number> = new Vector.<Number>();
-
var uvts:Vector.<Number> = new Vector.<Number>();
-
const TWO_PI:Number=Math.PI * 2;
-
var step:Number=.05;
-
-
var brush:BitmapData = new BitmapData(3, 2, true, 0x41FFFFFF);
-
var n:Number=8;
-
var xp:Number=0,yp:Number=0,a:Number=12,t:Number=0;
-
for (var i:Number = 0; i<TWO_PI; i+=step) {
-
for (var j:Number = 0; j<TWO_PI; j+=step) {
-
// unoptimized for readability
-
var cosi:Number = a/n * ((n - 1) * Math.cos(i) + Math.cos(Math.abs((n - 1) * i)));
-
var sini:Number = a/n * ((n - 1) * Math.sin(i) - Math.sin(Math.abs((n - 1) * i)));
-
var cosj:Number = a/n * ((n - 1) * Math.cos(j) + Math.cos(Math.abs((n - 1) * j)));
-
var sinj:Number = a/n * ((n - 1) * Math.sin(j) - Math.sin(Math.abs((n - 1) * j)));
-
verts.push(cosi * cosj);
-
verts.push(sini * cosj);
-
verts.push(a * sinj);
-
pVerts.push(0),pVerts.push(0);
-
uvts.push(0),uvts.push(0),uvts.push(0);
-
}
-
}
-
var canvas:BitmapData=new BitmapData(400,400,false,0x000000);
-
addChild(new Bitmap(canvas));
-
var dx:Number=0;
-
var dy:Number=0;
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
dx += (mouseX - dx)/4;
-
dy += (mouseY - dy)/4;
-
matrix.identity();
-
matrix.appendRotation(dy,Vector3D.X_AXIS);
-
matrix.appendRotation(dx,Vector3D.Y_AXIS);
-
matrix.appendTranslation(200, 200, 0);
-
Utils3D.projectVectors(matrix, verts, pVerts, uvts);
-
canvas.lock();
-
canvas.fillRect(canvas.rect, 0x000000);
-
var p = new Point();
-
for (var i:int = 0; i<pVerts.length; i+=2) {
-
p.x = pVerts[i];
-
p.y = pVerts[i + 1];
-
canvas.copyPixels(brush, brush.rect, p, null, null, true);
-
}
-
canvas.unlock();
-
}
Taking the Hypocycloid stuff from yesterday into 3D...
Posted in 3D, BitmapData, Math | Also tagged actionscript |
By Zevan | April 19, 2009
Actionscript:
-
x = stage.stageWidth / 2;
-
y = stage.stageHeight / 2;
-
// change n to alter number of spikes (cuspes)
-
var n:Number = 8;
-
var xp:Number = 0, yp:Number = 0, a:Number = 10, t:Number = 0;
-
-
graphics.lineStyle(0, 0x000000);
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
for (var i:int = 0; i<10; i++){
-
// unoptimized for simplicity and similarity to original equations from here:
-
// http://mathworld.wolfram.com/Hypocycloid.html
-
xp = a/n * ((n - 1) * Math.cos(t) + Math.cos(Math.abs((n - 1) * t)));
-
yp = a/n * ((n - 1) * Math.sin(t) - Math.sin(Math.abs((n - 1) * t))) ;
-
-
a *= 1.002;
-
if (t == 0){
-
graphics.moveTo(xp, yp);
-
}else{
-
graphics.lineTo(xp, yp);
-
}
-
t += .1;
-
}
-
}
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 actionscript |
By Zevan | April 19, 2009
Actionscript:
-
var mouseSpeedX:Number = 0;
-
var prevX:Number = 0;
-
-
var pends:Array = new Array();
-
for (var i:int = 0; i<10; i++){
-
pends.push(makePendulum(100+ i * 40, 100, 15, 100 + i * 10));
-
}
-
-
addEventListener(Event.ENTER_FRAME, onRun);
-
function onRun(evt:Event):void {
-
// mouseSpeed
-
mouseSpeedX = prevX - mouseX;
-
prevX = mouseX;
-
-
for (var i:int = 0; i<pends.length; i++) pends[i]();
-
}
-
-
function makePendulum(xp:Number, yp:Number, rad:Number, leng:Number):Function {
-
var rot:Number = 0;
-
var rotDest :Number = 0;
-
var rotVel:Number = 0
-
var string:Shape = Shape(addChild(new Shape()));
-
var ball:Sprite = Sprite(addChild(new Sprite()));
-
ball.buttonMode = true;
-
with(ball.graphics) beginFill(0xFF0000), drawCircle(0,leng, rad);
-
ball.x = xp;
-
ball.y = yp;
-
string.x = ball.x;
-
string.y = ball.y;
-
ball.addEventListener(MouseEvent.ROLL_OVER,function(){
-
rotDest = mouseSpeedX;
-
});
-
return function(){
-
// force rotDest back to 0
-
rotDest *= .8;
-
// elasticity (hooke's)
-
rotVel += (-1.9 * (rot - rotDest) - rotVel) / 4;
-
rot += rotVel
-
ball.rotation = rot;
-
// draw string:
-
string.graphics.clear();
-
string.graphics.lineStyle(0,0);
-
var pnt:Point = ball.localToGlobal(new Point(0, leng))
-
string.graphics.curveTo(0, leng / 2, pnt.x - ball.x, pnt.y-ball.y);
-
}
-
}
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 actionscript |