Flash tutorial: Digital Timerflash mx 2004, tutorial, flash timer, digital timerDigital TimerSkill Level:Advanced Knowledge Needed:Button Instances, Dynamic Textboxes Number of Steps:8 The Movie
-----------------------------------------------
250200digital_timer.swf
------------------------------------------------ digital_timer.flaDownload Flash File
Learn how to create a digital using Flash's getTimer() function.
pict1.jpg236144Pict 11
Open up a new Flash Document. Make 2 layers. Name one actions and the other timer. First we will add all of the objects and then throw all of our actionscript together.
*Note: This tutorial was written using flash mx 2004 with ActionsScript 2.0 strict variable typing. It is not required by flash, but it is a very good programming practice and will
help flash out immensely with debugging your movie if you ever have errors. If you are using Flash mx please just remove all of the datatypes like
:Number or :String.
pict2.jpg224158Pict 22
You are going to need to create one dynamic textbox and three buttons. Make sure the textbox is big enough to hold the value 00:00:00:00 and give it a variable
name of timer_txt. Your three buttons should be a play, pause, and stop button with the follwing variable names play_btn, pause_btn, and stop_btn.
(Make sure that your pause button has a hit area that covers the entire are of the button including the gap. Otherwise the gap between the bars will not be recognized as part of the button.)
3
Now we get to add some functionality to this timer. First we are going to setup all of our variables, then we will work on the button actions, and finally write our last function
to update our timer every frame. Add the following code to your actions layer on Frame 1.
//initial variables
var timing:Boolean = false;
var paused:Boolean = false;
var remaining:Number;
var elapsedTime:Number;
var elapsedHours: Number;
var elapsedM:Number;
var elapsedS:Number;
var elapsedH:Number;
var startTime:Number;
var remaining:Number;
var hours:String;
var minutes:String;
var seconds:String;
var hundredths:String;
]]>
All we are doing here is setting up all of the variables we are going to need to make our timer work. If it looks like too much right now, don't worry, it's really quite simple.
4
Next we are going to add the functions to start our timer by pressing the play button. Add this code under the intial variables we just set.
_root.play_btn.onPress = function() {
if(!_root.timing) {
if (_root.paused) {
_root.startTime = getTimer() - _root.elapsedTime;
} else {
_root.startTime = getTimer();
}
//start timer
_root.paused = false;
_root.timing = true;
}
}
]]>
getTimer() simply outputs the time in miliseconds since the flash movie was opened. Since the timer doesn't start as soon as our movie starts we will need to offset the timer with the
value of startTime. This will tell flash how long the movie was open until we started the timer so we can subtract it later.
Once the play button is pushed we are checking to make sure that we haven't started the timer, next we find out if the timer had been paused. If the timer was paused we will offset
the getTimer function by subtracting the time that we haven't been timing. And if we are not paused we will simply start the timer at 0. Finally we will set the paused variable to false
and tell flash that we want to start timing.
5
This is the code for our pause button. Put it below the play button function.
_root.pause_btn.onPress = function() {
//only pause if the timer is actually going
if(_root.timing) {
_root.timing = false;
_root.paused = true;
}
}
]]>
all we are doing here is finding out if the timer is going. If it is we will set the timer to false and set our paused value to true.
6
This is the code for our stop button. Put it below the pause button function.
_root.stop_btn.onPress = function() {
//stop the timer
_root.timing = false;
//reset the paused variable
_root.paused = false;
//reset the display textbox
_root.timer_txt = "00:00:00:00";
}
]]>
By pressing the stop button we are going to reset the timer to 0 seconds again. So first we will tell flash to stop timing, make sure our paused value is set to false, and reset
the display so that it shows 0 seconds.
7
Finally it is time to put this timer to work. Add the following code below everything we have done so far.
_root.onEnterFrame = function() {
if (timing) {
//calculate values
elapsedTime = getTimer()-startTime;
//hours
elapsedHours = Math.floor(elapsedTime/3600000);
remaining = elapsedTime-(elapsedHours*3600000);
//minutes
elapsedM = Math.floor(remaining/60000);
remaining = remaining-(elapsedM*60000);
//seconds
elapsedS = Math.floor(remaining/1000);
remaining = remaining-(elapsedS*1000);
//hundredths
elapsedH = Math.floor(remaining/10);
//output to text box
//add a 0 on the front of the numbers
//if the number is less than 10
if (elapsedHours<10) {
hours = "0"+elapsedHours.toString();
} else {
hours = elapsedHours.toString();
}
if (elapsedM<10) {
minutes = "0"+elapsedM.toString();
} else {
minutes = elapsedM.toString();
}
if (elapsedS<10) {
seconds = "0"+elapsedS.toString();
} else {
seconds = elapsedS.toString();
}
if (elapsedH<10) {
hundredths = "0"+elapsedH.toString();
} else {
hundredths = elapsedH.toString();
}
_root.timer_txt = hours+":"+minutes+":"+seconds+":"+hundredths;
}
};
]]>
This function consists of 3 major parts. First we are getting the values for our hours, minutes, seconds, and hundredths. Next we are setting them up to display properly, and finally
we are outputting all the values to our text timer_txt. As I mentioned earlier getTimer() is the time in miliseconds that our movie has been open. So one hour is 3600000 miliseconds,
one minutes is 60000 miliseconds and one second is of course 1000 miliseconds. The variable remaining helps us keep track of how much extra time is left after every calculation.
The next thing we are doing is adding a 0 to the front of any single digit numbers. This will keep our display consistent the whole time. Something that might be new to you is the .toString()
function. Since the variables elapsedHours, elapsedM, etc. are all Numbers we want to convert them to strings to display them properly. (* this again could be skipped, but it allows for much better control
over your movie.)
And Finally the last thing we are doiing here is outputting our values to our timer_txt textbox.
8
Well we made it through it all. You can use this timer concept for many things in your flash movies. I wrote this timer for two puzzle games that I wrote to keep track of how long it takes the user to complete
each level. You can also use the timer idea to control things in your movie in real time instead of controlling them with frames. I Hope it will help add some functionality to your projects.