all groups > flash actionscript > november 2004 >
You're in the

flash actionscript

group:

Countdown Timer to An Event


Countdown Timer to An Event mksalva
11/15/2004 9:48:18 PM
flash actionscript:
:confused; Hi! I will start out by saying that I am an idiot. I can do a
little with Flash, but not much. I want to use an existing FLA file to make a
countdown clock to an event that takes place March 5, 2005, at 8 pm Central
Time. I was able to make the appropriate graphics and movie clips The current
file that I have is set up to count down the number of days until Christmas.
One problem with the text in this file is that it looks at the date and time of
the user's computer. This won't work if the user is in another time zone. The
other problem is that it only works if the event takes place in the current
calendar year. Since the event will take place March 4, it looks like the clock
doesn't have to count because March 4 has already taken place for this year. I
will use to attach the code below. If someone can tell me what I'd have to do
to set this up for March 4, 2005, 8 pm, Central Time, please let me know.
Thanks, Mike // stop the timeline stop(); // first get this current year so
this example // remains valid for some time to come currentDate = new Date();
thisYear = currentDate.getFullYear(); // define the event date counting down
to // this is constant so it won't need to be // calculated in the onEnterFrame
function below // currently counting down 'til christmas of 2003 // Date( year,
month-1, date [, hour [, minute [, second [, millisecond]]]]) eventDate = new
Date(thisYear, 11, 25); eventMillisecs = eventDate.getTime();
counter.onEnterFrame = function(){ // get the current date and time as it
exists at // this instance in time when the frame is entered currentDate =
new Date(); currentMillisecs = currentDate.getTime(); // the milliseconds
between the current time and the // time of the event can then be calculated
by simply // subtracting the current time's milliseconds from the //
milliseconds of the time of the event this.msecs = eventMillisecs -
currentMillisecs; // if the msecs variable is less than 0, that means the
// current time is greater that the time of the event if (this.msecs <= 0){
// and the event time has been reached! // play the next frame for the
result of the countdown. play(); // a return can be used to exit the
function since // in going to the next frame, there's no need to //
continue with the remaining operations. return; } // if the date hasn't
been reached, continue to // devise seconds, minutes, hours and days from //
the calculated milliseconds this.secs = Math.floor(this.msecs/1000); // 1000
milliseconds make a second this.mins = Math.floor(this.secs/60); // 60 seconds
make a minute this.hours = Math.floor(this.mins/60); // 60 minutes make a hour
this.days = Math.floor(this.hours/24); // 24 hours make a second // make
sure each value doesn't exceed the range in // which they exist.
Milliseconds, for example, will // be shown in a range of 0 - 999. The
modulous // operator, or %, well help in that. Here the values // are also
turned into strings preparing for the next step this.msecs = string(this.msecs
% 1000); this.secs = string(this.secs % 60); this.mins = string(this.mins %
60); this.hours = string(this.hours % 24); this.days = string(this.days);
// add on leading zeros for all the number values (which are // now strings)
that aren't 3 or 2 characters long based on the // range being used to
represent them. Because mseconds and // days have up to 3 characters, a while
loop is used to // continuously add 0s until they have 3. Other values which
// only need 2 leading 0s can get by on a single if check while
(this.msecs.length < 3) this.msecs = '0' + this.msecs; if (this.secs.length <
2) this.secs = '0' + this.secs; if (this.mins.length < 2) this.mins = '0' +
this.mins; if (this.hours.length < 2) this.hours = '0' + this.hours; while
(this.days.length < 3) this.days = '0' + this.days; // finally, display your
values. If you want to put your values // in a textField, you can pretty much
just stop here and throw them // into your textField as desired. This
example, however will go a step // further and use images for numbers for each
numerical value in the // countdown to the desired date. // So, for that,
loop through all the movies in this counter clip using the //
evaluateFrameFrom prototype method on each. A single check for a // _parent
variable is used to make sure the property found in a for // loop is a
movieclip and is within the timeline of this counter clip. // TextFields and
buttons would also be true here, but since the contents // within counter are
strictly those numbers movieclips, we won't have to // be concerned with such
complications. The only movieclips in this counter // clip are the numbers
movieclips with the frames of the imagery making up // the numbers of 0-9.
for(movie in this){ if (this[movie]._parent == this)
this[movie].evaluateFrameFrom(this); } }; // this function is a
MovieClip.prototype meaning its available to be used by // all movieclips.
It's a sneaky function that saves a lot of work by using // name each numbers
movieclip in the counter movieclip to determine which value // it needs to
display based on the times derived from the previous // calculations of the
onEnterFrame. What it does is seperates a movieclip's // _name into a variable
word and a number. The variable word will represent // the variable to look up
a value for in the passed variableClip and the // number will be used to get a
character from that value (a string) which // represents which number this
movieclip should display. MovieClip.prototype.evaluateFrameFrom =
function(variableClip){ // split this _name into an array of 2 values
seperated by an underscore var nameArray = this._name.split('_'); // the
first value represents what variable in variableClip (counter clip) // this
movieclip is used to represent whether it be mins or hours etc. var numberSet
= variableClip[nameArray[0]]; // next a number representing which character in
that first value this // movieclip should display. this will be between 0 and
2 (any one of // three values). number() is used to force it to be a number
value. var character = number(nameArray[1]); // a frame number can then be
derived from the value of the numberset // variable based on the character
defined by character. number() is // used to force it to a number value and 1
is added to offset the // frame value by one since 0 is at frame 1 and 1 at
frame 2 etc. var frame = 1 + number(numberSet.charAt(character)); // if the
movieclip is not already at the frame, move it there! if (this._currentframe
!= frame) this.gotoAndStop(frame); }; // an example of the above function in
action would be for a movieclip // with the name 'days_1'. days_1 is seperated
Re: Countdown Timer to An Event NSurveyor
11/15/2004 9:54:03 PM
I want to help, but it's a bit hard reading your script. So, could you add a
reply? And when you go to reply, there is a button marked 'Attach Code'. Click
it, and then add your code. It lets the code stay correctly formatted without
the removal of enters. Thanks.
Re: Countdown Timer to An Event mksalva
11/15/2004 9:56:40 PM
Yuck! Forgive me! I just saw the text in my last post. It looked okay in
Preview. Either way, here it is:

// stop the timeline
stop();

// first get this current year so this example
// remains valid for some time to come
currentDate = new Date();
thisYear = currentDate.getFullYear();

// define the event date counting down to
// this is constant so it won't need to be
// calculated in the onEnterFrame function below
// currently counting down 'til christmas of 2003
// Date( year, month-1, date [, hour [, minute [, second [, millisecond]]]])
eventDate = new Date(thisYear, 11, 25);
eventMillisecs = eventDate.getTime();

counter.onEnterFrame = function(){
// get the current date and time as it exists at
// this instance in time when the frame is entered
currentDate = new Date();
currentMillisecs = currentDate.getTime();

// the milliseconds between the current time and the
// time of the event can then be calculated by simply
// subtracting the current time's milliseconds from the
// milliseconds of the time of the event
this.msecs = eventMillisecs - currentMillisecs;

// if the msecs variable is less than 0, that means the
// current time is greater that the time of the event
if (this.msecs <= 0){
// and the event time has been reached!
// play the next frame for the result of the countdown.
play();
// a return can be used to exit the function since
// in going to the next frame, there's no need to
// continue with the remaining operations.
return;
}

// if the date hasn't been reached, continue to
// devise seconds, minutes, hours and days from
// the calculated milliseconds
this.secs = Math.floor(this.msecs/1000); // 1000 milliseconds make a second
this.mins = Math.floor(this.secs/60); // 60 seconds make a minute
this.hours = Math.floor(this.mins/60); // 60 minutes make a hour
this.days = Math.floor(this.hours/24); // 24 hours make a second

// make sure each value doesn't exceed the range in
// which they exist. Milliseconds, for example, will
// be shown in a range of 0 - 999. The modulous
// operator, or %, well help in that. Here the values
// are also turned into strings preparing for the next step
this.msecs = string(this.msecs % 1000);
this.secs = string(this.secs % 60);
this.mins = string(this.mins % 60);
this.hours = string(this.hours % 24);
this.days = string(this.days);

// add on leading zeros for all the number values (which are
// now strings) that aren't 3 or 2 characters long based on the
// range being used to represent them. Because mseconds and
// days have up to 3 characters, a while loop is used to
// continuously add 0s until they have 3. Other values which
// only need 2 leading 0s can get by on a single if check
while (this.msecs.length < 3) this.msecs = "0" + this.msecs;
if (this.secs.length < 2) this.secs = "0" + this.secs;
if (this.mins.length < 2) this.mins = "0" + this.mins;
if (this.hours.length < 2) this.hours = "0" + this.hours;
while (this.days.length < 3) this.days = "0" + this.days;

// finally, display your values. If you want to put your values
// in a textField, you can pretty much just stop here and throw them
// into your textField as desired. This example, however will go a step
// further and use images for numbers for each numerical value in the
// countdown to the desired date.

// So, for that, loop through all the movies in this counter clip using the
// evaluateFrameFrom prototype method on each. A single check for a
// _parent variable is used to make sure the property found in a for
// loop is a movieclip and is within the timeline of this counter clip.
// TextFields and buttons would also be true here, but since the contents
// within counter are strictly those numbers movieclips, we won't have to
// be concerned with such complications. The only movieclips in this counter
// clip are the numbers movieclips with the frames of the imagery making up
// the numbers of 0-9.
for(movie in this){
if (this[movie]._parent == this) this[movie].evaluateFrameFrom(this);
}
};

// this function is a MovieClip.prototype meaning its available to be used by
// all movieclips. It's a sneaky function that saves a lot of work by using
// name each numbers movieclip in the counter movieclip to determine which
value
// it needs to display based on the times derived from the previous
// calculations of the onEnterFrame. What it does is seperates a movieclip's
// _name into a variable word and a number. The variable word will represent
// the variable to look up a value for in the passed variableClip and the
// number will be used to get a character from that value (a string) which
// represents which number this movieclip should display.
MovieClip.prototype.evaluateFrameFrom = function(variableClip){
// split this _name into an array of 2 values seperated by an underscore
var nameArray = this._name.split("_");
// the first value represents what variable in variableClip (counter clip)
// this movieclip is used to represent whether it be mins or hours etc.
var numberSet = variableClip[nameArray[0]];
// next a number representing which character in that first value this
// movieclip should display. this will be between 0 and 2 (any one of
// three values). number() is used to force it to be a number value.
var character = number(nameArray[1]);
// a frame number can then be derived from the value of the numberset
// variable based on the character defined by character. number() is
// used to force it to a number value and 1 is added to offset the
// frame value by one since 0 is at frame 1 and 1 at frame 2 etc.
var frame = 1 + number(numberSet.charAt(character));
// if the movieclip is not already at the frame, move it there!
if (this._currentframe != frame) this.gotoAndStop(frame);
};

// an example of the above function in action would be for a movieclip
// with the name "days_1". days_1 is seperated 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 using
// associative array ssntax 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.
Re: Countdown Timer to An Event mksalva
11/15/2004 10:03:26 PM
I have added the code in a reply, but, if necessary, I can also upload the current FLA file. (If that's possible.)

Re: Countdown Timer to An Event NSurveyor
11/15/2004 10:10:34 PM
Re: Countdown Timer to An Event Rothrock
11/15/2004 10:11:39 PM
Ummmm, that is lovely, but I might take a different approach. Do you need to
know how many months or just how many days? If so, convert the time of your
event into its Julian Day Number. Then convert the current time into a Julian
Day number, then do a simple subtraction and that gives you the initial value
for when you load in the value. Do you really need to keep this to the
millisecond? Personally I would find the second enough, but in any event...I
would then set up a setInterval every 100 milliseconds or so that checked a
current time and then updated the display. Also since your only choice is to
get the time from the users computer, you might want to convert everything to
UTC. Check out the Date documentation in the help files, where just about
everything also has a UTC version. (Oh yeah, the Julian Day Number stuff is
here in the forums. Search on my name and Julian.)
Re: Countdown Timer to An Event Rothrock
11/15/2004 10:13:18 PM
Never mind about the Julian Day Number I notice that it converts to
milliseconds which is just a slightly different version of that part. But I do
recommend you check out the UTC stuff in the help files.
Re: Countdown Timer to An Event mksalva
11/15/2004 10:21:56 PM
I made it '2005, 2, 4' since the clock is counting down to 8 pm March 4.
(That's okay, right?) If this works, then all I have to do is figure out a way
to make the hours and minutes count down to March 4, 8:00pm, Central time.
Thanks, Mike
Re: Countdown Timer to An Event mksalva
11/15/2004 10:25:59 PM
The milliseconds doesn't have to be there, but this is a countdown to a
youth-related event, so it's just there to make it look cool. No one is really
expecting specifics on the milliseconds of seconds. It looks like the days are
working, now that the 12th line was changed to eventDate = new Date(2005, 2,
4); Now all I have to do is figure out a way to get the clock to count down
to 8 PM on that day, Central Time. Best, Mike
Re: Countdown Timer to An Event NSurveyor
11/15/2004 10:33:04 PM
I think I have a way to make it central. Replace the 5th line, (currentDate =
new Date();) with these two lines:

cdnc = new Date();
//CDNC is abbreviation Current Date, Non-Central
currentDate = new
Date(cdnc.getUTCFullYear(),cdnc.getUTCMonth(),cdnc.getUTCDate(),cdnc.getUTCHours
()-6,cdnc.getUTCMinutes(),cdnc.getUTCSeconds(),cdnc.getUTCSeconds())
Re: Countdown Timer to An Event NSurveyor
11/15/2004 10:36:17 PM
UTC Time is the current time in GMT, Greenwich Meridian Time. Since Central
Time is GMT - 6:00, you can have currentDate equal the UTC time - 6 hours. I'm
not quite sure if that will work, but it might!
Re: Countdown Timer to An Event mksalva
11/15/2004 10:39:46 PM
Yes, I tried it. Right now it will go to Midnight, Central Time. I wonder if
there is a way to back it up another four hours to go to 8 pm, instead of
midnight. Would it work if I just cheat, and make the '-6' part to '-10'?
Again, thank you for your help, I really appreciate this. Mike
Re: Countdown Timer to An Event mksalva
11/15/2004 10:44:24 PM
Re: Countdown Timer to An Event NSurveyor
11/15/2004 10:46:31 PM
Re: Countdown Timer to An Event mksalva
11/16/2004 12:02:39 AM
I tried it out. It works for my Time Zone (Central), but a friend of mine in
Eastern Time said that the hours counter is one hour less on his computer.
(Currently, it says 2 hours in Central Time, and 1 hour in Eastern time.)
Re: Countdown Timer to An Event mksalva
11/16/2004 2:33:58 PM
It looks like the Time Zone problem is now coming from the addition to line 12:
when the number 20 was added, then it assumes 8 pm. But if someone is in a
different Time Zone, then 8 pm will mean something different to them, and the
clock looks different. If I take out the '20' in line 12, is there a way to
simply tell it to subtract five hours? Thanks, Mike
AddThis Social Bookmark Button