In some applications we want an event to be broadcast a fixed number of times at regular intervals. The ActionScript Timer class does this admirably. The example shown below has the user pick a random number by clicking in the center square, and then a game piece moves that number of spaces around the board.
Example
The Code
The code below is somewhat lengthy because we opt to create all display objects at runtime. This allows us flexible positioning of the game board and easy control over the order of objects in the display list.
The first step is to describe the x and y coordinates of the square spaces' centers. We make them every 40 pixels in each direction with the upper left corner of the gameboard being (0,0).
var xCoord:Array = [20, 60, 100, 100, 100, 60, 20, 20];
var yCoord:Array = [100, 100, 100, 60, 20, 20, 20, 60];
We will use an array to hold the square shapes that make up the board spaces. The number of elements in this array should match the length of the arrays above.
var arrSquares:Array = new Array(8);
We create a timer that fires every 400 milliseconds. Changing this value will alter the speed the chip moves around the board.
var tm:Timer = new Timer(400);
The spaceIndex is the index of the current position of the chip in terms of the array of square shapes we created.
var spaceIndex:Number = 0;
The gameBoard sprite is a child of the main timeline. We can reposition it by changing the x and y properties below. We will add elements of the game (spaces, spinner square, chip) as children of the gameBoard.
var gameBoard:Sprite = new Sprite();
gameBoard.x = 80;
gameBoard.y = 50;
addChild(gameBoard);
Add each individual space (as a Shape object) to the array arrSquares and also as a child of gameBoard. Each is 40 by 40 with the registration point in the center so that it is easy to position using the xCoord and yCoord arrays defined at the beginning of the script.
for (var i=0; i<arrSquares.length; i++) {
arrSquares[i] = new Shape();
arrSquares[i].graphics.lineStyle(1,0);
arrSquares[i].graphics.beginFill(0xFFAAAA);
arrSquares[i].graphics.drawRect(-20,-20,40,40);
arrSquares[i].graphics.endFill();
arrSquares[i].x = xCoord[i];
arrSquares[i].y = yCoord[i];
gameBoard.addChild(arrSquares[i]);
}
The spinner is just another square in the center, but it is a Sprite object because it will have to listen for a mouse click.
var spinner:Sprite = new Sprite();
spinner.graphics.lineStyle(1,0);
spinner.graphics.beginFill(0xEEEEEE);
spinner.graphics.drawRect(-20,-20,40,40);
spinner.graphics.endFill();
spinner.x = 60,
spinner.y = 60;
We add a textfield as a child of spinner so that we can display text to show what number was randomly chosen. We make the mouseEnabled property of this textfield be false so that the mouse will ignore it. It starts off invisible so the user is prompted to click the spinner square. See the help file for defaultTextFormat property to learn about its options.
var txtCount:TextField = new TextField();
txtCount.x = -10;
txtCount.y = -10;
txtCount.width = 20;
txtCount.height = 25;
txtCount.mouseEnabled = false;
txtCount.defaultTextFormat = new TextFormat("Arial", 16,
0x000000,true,false,false,null,null,TextFormatAlign.CENTER);
txtCount.visible = false;
We add txtCount as a child of spinner (this makes it easy to get the positioning right) and we add the spinner Sprite as a child of gameBoard.
spinner.addChild(txtCount);
gameBoard.addChild(spinner);
The game piece is the Shape object chip, originally placed on the square corresponding to spaceIndex = 0. It contains a circle centered at its registration point so that when the chip has x and y coordinates from the xCoord and yCoord arrays, it will be centered on a space square.
var chip:Shape= new Shape();
chip.graphics.lineStyle(0,0);
chip.graphics.beginFill(0x3333FF,0.8);
chip.graphics.drawCircle(0,0,10);
chip.graphics.endFill();
chip.x = xCoord[0];
chip.y = yCoord[0];
Add chip to gameBoard. Since it is the last thing added, it will have the largest index in the display list, so the chip will sit on top of everything else.
gameBoard.addChild(chip);
When the spinner square is clicked, execute the function doSpin, which does the following: (1) get a random number from the range 3...9, (2) put this number into the txtCount textbox and make the textbox visible, (3) disable the spinner button by removing its mouse-click listener so the button cannot be pressed again while the chip is moving, (4) reset the timer so its currentCount starts with 0, (5) set the repeatCount of the timer to be the number that was "spun" and (6) start the timer.
spinner.addEventListener(MouseEvent.CLICK, doSpin);
function doSpin(mevt:MouseEvent):void {
var rn:Number = 2 + Math.ceil(7*Math.random());
txtCount.text = String(rn);
txtCount.visible = true;
spinner.removeEventListener(MouseEvent.CLICK, doSpin);
tm.reset();
tm.repeatCount = rn;
tm.start();
}
Each time the timer tm is fired, spaceIndex is increased and chip is moved to the next space.
function mover(tevt:TimerEvent):void {
spaceIndex = (spaceIndex+1)%(xCoord.length);
chip.x = xCoord[spaceIndex];
chip.y = yCoord[spaceIndex];
}
When the timer has finished with its count, we make the spinner square active again and make the text invisible so the user knows spinner is once again ready to be clicked.
function moveDone(tevt:TimerEvent):void{
spinner.addEventListener(MouseEvent.CLICK,doSpin);
txtCount.visible = false;
}
Downloads
The source file for this example can be downloaded here: game.fla. The source file for all examples in this tutorial can be downloaded together in timers.zip.
