Home | Flash AS3 Tutorials | Flash Animation Tutorials | Store

Flash ActionScript Timer Class Clock with Adjustable Counting Speed

Actually the speed of animation (timer) can be adjusted or controlled (either faster or slowe) during the runtime. This Flash Timer Class animation tutorial shows how to adjust the delay of Timer.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

In this Flash Timer Class animation tutorial, we use a "Faster" button and a "Slower" button to adjust the counting speed of the timer clock. The "Faster" button use to speed up the counting of the timer clock and the "Slower" button to slow down the counting of the timer clock.

The complete Flash Movie of this tutorial is shown as above. Click on the Flash movie to activate it and play around to see how it works. Same as previous Timer Class tutorial, the timer clock will start counting when the Play button is clicked and stop when the Stop button is clicked. Click on the "+" button to speed up the counting of the clock. Click on the "-" button to slow down the counting of the clock.

Flash ActionScript Codes:

//Create a Timer object and store it in a variable called myClock.
//The timer will trigger every 100 milliseconds (0.1 seconds)
//1000 milliseconds = 1 second
//The repeatCount is zero, i.e. timer will trigger infinitely
//Summary:
//Create a Timer instance that will trigger every 0.1 seconds infinitely
var myClock:Timer = new Timer(100, 0);
output_txt.text = "The clock will be counting at: " + myClock.delay + " milliseconds";

 

//Start the time at zero
var time:Number =0;

 

function countingClock(evt:TimerEvent):void {

//Increase the time by 0.1
time += .1;
//Only need one decimal place of myClock
time = (Math.round(time*10)) / 10;
//Show the time
clock_txt.text = String(time);

}

 

//Add an event listener to the timer object (myClock)
//The event that listen is called TIMER which will be trigger every 0.1 seconds
//Every time the TIMER event is triggered, it will call the countingClock function
myClock.addEventListener(TimerEvent.TIMER, countingClock);

 

function startClock(evt:MouseEvent):void {

//Timer object created will not start automatically
//Start myClock when startClock function is called
myClock.start();

}

 

play_btn.addEventListener(MouseEvent.CLICK, startClock);

 

function stopClock(evt:MouseEvent):void {

//Stop the clock
myClock.stop();

}

 

stop_btn.addEventListener(MouseEvent.CLICK, stopClock);

 

//Draw two buttons - faster and slower button
//Use to control the speed (delay) of the clock

function faster(evt:MouseEvent):void {

//The delay defines how frequently this function is called
//In this example, the speed is double faster each time the faster button is clicked
myClock.delay /= 2;
output_txt.text = "The clock will now be counting at: " + myClock.delay + " milliseconds";

}

 

faster_btn.addEventListener(MouseEvent.CLICK, faster);

 

function slower(evt:MouseEvent):void {

//The delay defines how frequently this function is called
//In this example, the speed will be slowed down to half each time the slower button is clicked
myClock.delay *= 2;
output_txt.text = "The clock will now be counting at: " + myClock.delay + " milliseconds";

}

 

slower_btn.addEventListener(MouseEvent.CLICK, slower);

Download Flash Source File:

Flash Source File timer-4.fla

Remarks:

Flash ActionScript Timer Class can be used for sequence animation. The next Flash ActionScript tutorial will do a sequence (reciprocal) animation with Timer Class.