The example shown below illustrates one of the nice features of the Timer class with respect to managing animation. A Timer object can be started and stopped at will, allowing motion's start and stop to be intuitively controlled. (The ENTER_FRAME animation illustrated in the tutorial, "Animating using the "Enter Frame" event" of the Intermediate section of www.flashandmath.com requires manipulation of listeners for this control.) Note that in the constructor for the Timer class, if no number is given for how many times to "fire" the timer, then the Timer object will run indefinitely, which is just what we want here.
Example
Setting up the Stage
The stage requires two buttons, btnSpin and btnStop, as well as a moveclip created as follows:
- Draw a filled triangle in object drawing mode with snap to object turned on. Have your triangle pointing to the right.
- Place this triangle centered at the right end of a line drawn with the Line tool.
- Select the entire graphic and selecte Modify > Converted to Symbol from the main menu. It doesn't matter whan name you give this symbol in the library, but it is important that you set the registration point to be on the left end.
- Give the on-stage instance of your arrow clip the name mcArrow.
In the example above, the rest of the stage consists of text and graphics to make the stage look nice and to make the instructions clear. We used a circle with numbers around the edges, and centered the registration point (i.e., left end) of mcArrow on that circle. Note that any number of numbers can be used, but the script below reflects twelve numbers equally-spaced in a circle.
The Code
The first two lines establish the speed and appearance of the spin. With the settings shown below, every 10 milliseconds the spinner arrow will be increased by 15 degrees.
var step:Number = 15;
var tm:Timer = new Timer(10);
Each time the timer event is fired, the spin function is called, simply causing the mcArrow clip rotation to increase by step degrees.
tm.addEventListener(TimerEvent.TIMER, spin);
function spin(tevt:TimerEvent):void {
mcArrow.rotation += step;
}
When the btnSpin button is clicked, we disable the startSpin button, enable the stopSpin button, and start the timer. Therefore, when the spinner is spinning, only the STOP button is available.
btnSpin.addEventListener(MouseEvent.CLICK, startSpin);
function startSpin(mevt:MouseEvent):void {
btnStop.addEventListener(MouseEvent.CLICK, stopSpin);
btnSpin.removeEventListener(MouseEvent.CLICK, startSpin);
tm.start();
}
When the btnStop button is clicked, we disable the stopSpin button, enable the startSpin button, and stop the timer. (Therefore, when the spinner is stopped, only the SPIN button is available.) In addition, we position the arrow to a rotation setting that is the closest multiple of 30 degrees to its current value so that it is pointing directly at a number when it stops. This multiplier will need to be changed if a spinner with a number of spaces other than 12 is desired.
function stopSpin(mevt:MouseEvent):void {
tm.stop();
btnSpin.addEventListener(MouseEvent.CLICK, startSpin);
btnStop.removeEventListener(MouseEvent.CLICK, stopSpin);
mcArrow.rotation = 30*Math.round(mcArrow.rotation/30);
}
Downloads
The source file for this example can be downloaded here: spinner.fla. The source file for all examples in this tutorial can be downloaded together in timers.zip.
