Date
Countdown Timer - Pg. 2
by senocular
The idea behind the counter is having two
dates in time and finding the difference between them. At
first, that may seem difficult because you would have to
think that you would need to first find the difference in
days, then figure into that the difference in hours and then
minutes and so on. The good news is that it's not that
difficult and the difference can actually be done directly
on the millisecond level meaning only one calculating in
difference of milliseconds needed to find the number of
milliseconds between two dates. The bad news is that the
days, hours, minutes etc. will still need to be figured out
from those milliseconds so some tedious work will
still be needed.
-
The first step is defining your event date - or the date
in time you'll be counting down to. This is done using the
Date object to create a date. Be wary of the
month input for your Date definition, however, as the Date
object uses month values of 0 to 11 and not 1 to 12 as you
may be used to. This example uses Christmas, so Christmas
will be used as the date to countdown to. You can use any
date you want though. Also, because the comparison between
the current date and this event date is done through
milliseconds, those milliseconds will need to be retrieved
as well using getTime();
-
Now that the eventDate has been defined, we can start
running an enterFrame event to continuously countdown from
the current date to that date. Because the current date is
always changing, its never now for longer than it is...
now, we need to keep calculating the current date
(variable currentDate) and its milliseconds from getTime()
on each frame so the timer can be updated accordingly. The
comparison is a simple subtraction of the currentDate's
milliseconds from the eventDate's milliseconds. This will
be set to a msecs variable which will also provide the
display of the milliseconds on the countdown timer. Since
the counter movieclip has all the numbers within it, it's
easiest to use it's onEnterFrame event to handle this, and
in fact necessary given this approach.
-
Next we can do a simple check to see if the eventDate has
been reached. All this requires is checking to see if the
msecs is a negative number. If it is, it would mean the
current time is past the event time and therefore the
event has been reached. If that is the case, you would
want to display the result of the countdown, where here,
its playing to the next frame showing the big Horah!
-
If the date hasn't yet been reached, which will most
likely be the case, then you'll need to start calculating
and formatting your numbers. This means getting days,
hours, minutes and seconds out of your milliseconds and
making sure they fit the format of your counter. This
counter uses 3 characters or digits for days, 2 for hours,
2 for minutes, 2 for seconds and 3 for milliseconds - each
will have to be formatted accordingly. There are 3 steps
in this process:
-
Determine each days, hours, minutes and seconds values
out of your milliseconds
- Reduce
the value of each to not exceed it's expected range,
i.e. hours should not go above 24 and minutes not above
60. Days can go higher since that is the highest value
and expected to be high.
- Convert
each value to a string and add leading 0s to make the
value reach the number of digits needed to fulfill its
requirement. If seconds for example is 5, it needs to
become "05".
The first step is easily accomplished with division.
You should already know to find out how many seconds are
in 3000 milliseconds you just divide by 1000, and to get
the minutes from the seconds, divide by 60.
Step number 2 is accomplished using the modulo (%)
operator which takes any value and returns the remainder
of a division. Take, for instance, 90 seconds. This, when
divided by 60 gives you 1 for 1 minute. But there's still
30 seconds remaining. How is that retained? From a mod! If
you take that 90 and mod it by 60, you'd get 30 - the
remaining number of seconds or the remainder left over
from a division.
The last part just means adding 0s in front of the
number (as a string) if it's not long enough.
-
Finally, at the end of the counter onEnterFrame function,
run through all the movieclips in this counter movieclip
(each numbers movieclip) and call the function which
dissects the name of each of those clips and tells it to
go to the appropriate frame based on the value of the
previously defined variable it references.
What is this function you ask? It's the
evaluateFrameFrom function which is the very last thing
that needs to be defined for all this to work, fully
implementing the trick that makes what could have been a
lot of work... less. This will be made as a
MovieClip.prototype so that all movieclips will inherently
have access to the function whenever they want - namely,
all the numbers movieclips.
-
So, for this thing to function we need it to dissect the
name of each movie as we have so cautiously and carefully
preplanned and find out which number value and ultimately
which frame each numbers movieclip is to display. The
names, if you'll remember, are made up of the variable
they use and the character in the variable they represent
(a reason for making sure each value had the right number
of digits). With that information we can snag the value of
the variable as a string (this is the variable as its
stored in the counter movieclip - its passed as an
argument so that variable can be accessed from it), then
use charAt and with the correct character number to find
out which number it should show. Add 1 to that number and
you have a frame to go to (remember 0 is on frame one, so
all frames are offset by 1).
Just to further enforce what's going on
here, let's do a quick example using the day_1 numbers
movieclip. In looping through its movieclips, counter will
eventually reach days_1 and run evaluateFrameFrom on it
passing in itself (counter). days_1 is separated into an
array by dividing the name by its "_" character giving
"days" (nameArray[0]) and "1" (nameArray[1]). The value of
days is then retrieved from the passed variableClip
(counter) using associative array syntax and is set to
numberset.
The value of days in variableClip would be
a string something along the lines of "045". Character is
then used to get which of those 3 values this movieclip is
to represent. It is just nameArray[1] turned into a number
or "1" to 1. So, charAt(1) of "045" would be 4. Turn that
into a number and add one and you get frame 5 where the
image of the 4 is located. The movieclip, days_1, is then
played to that frame to show it.
|
 |
Ask
Sen |
Hey Sen!
How can I tell Flash to get the time from the
server instead of the user's own PC? I do not
want people to change their system clocks in
order to "cheat" and find out what is at the end
of the countdown tutorial?
Dan
Well Dan,
You will need to do the following:
-
Get event date in
Flash
-
Get 'real' time
from server
-
Every frame add
to the 'real' time the change in milliseconds
from when it was first received using
getTimer()
-
With that new
'real' time + change in time, you have the
real time as the server would see it,
which can then be compared with the event time
and a counter created.
Here
is an example using PHP:
servercountdown.zip |
|
|
Though a bit tricky in some senses, you
can now have a template for making countdown timers to any
date! Should you want to countdown to Christmas, or maybe
your birthday or even the release of a new movie, you now
know how to make that happen and how to do so with your own
custom images to display for numbers - and they technically
don't even have to be numbers. Instead you could use 3 cows
standing on top of each other to represent 3 or something
even more abstract all together. The decision is yours. Have
fun with it.
If you have any questions, feel free to post them on the
forums by clicking the following link:
kirupaForum.
|
