Hello fellow Flash users :),
Currently I am trying to learn flash day by day. It’s all very interesting and blablabla, but I have run into a little problem :P.
On this website you will find a very well done countdown timer: http://www.kirupa.com/developer/mx/countdown.htm. It works perfectly just the way I need it to work for my website. Specially the part for the Server Countdown is what I need.
Now, the script is working just fine if you leave it default. How ever, I want to make some minor adjustments. I am not too found with the images being used to display the numbers. Would rather prefer to create 4 dynamic text fields in Flash and then display the information in those text fields. Now, if I read the comments on the FLA, it says it should be possible. Here is the qoute:
// 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.
This is where I get into the problems. Cause no matter what I try, I cannot get a text field to show the information. It has most likely something to do with the whole way the FLA has been build up, because of the code to get the images working. But I just want to delete everything that has to do with it, replace it with a couple of text fields, and put the countdown information into those text fields. This allows me to be fully in control design wise.
Could anybody help out a newby and explain in detail how I can create simple text fields and put the information of the days, hours, minutes, seconds and miliseconds in it?
Thank you so much! Below is the entire Action Script being used.
// stop the timeline
stop();
// 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(2010, 11, 25);
eventMillisecs = eventDate.getTime();
// define the function used to compare the current date
// with the event date. This will be set to run every
// frame once the server date has been retrieved
countdown = function(){
// take the recieved server time and add on the milliseconds
// calculated from flash that have occurred since that
// time was recieved (which would match up to what that time
// would be now if it was again retrieved from the server
var currentMillisecs = server.time + getTimer();
// 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.
// make a new loadVars object to get the server date
server = new LoadVars();
server.onLoad = function(ok){
// check for loading success
if (!ok) return trace("Server error! Unable to obtain date from server");
// if ok, assign countdown to run every frame for counter
counter.onEnterFrame = countdown;
// show the counter clip as it was hidden before the countdown
counter._visible = true;
// offset the recieved server time by the current value of
// getTimer since getTimer starts at 0 when the movie starts. By
// the time the server time loads, getTimer will be some higher
// value. This accounts for the extra time added on from
// getTimer in countdown every frame. Plus, since time() in
// php returns seconds and not milliseconds (which is used here)
// *1000 is added to increase its value to represent milliseconds
this.time = Number(this.time)*1000 - getTimer();
};
// load in the time from a php file (or any other server-side resource)
// the value we want from the server is the milliseconds representation
// of the current time as the server sees it.
server.load("gettime.php");
/* gettime.php:
<?php
echo "time=" . time();
?>
*/
// now, since the counter clip has to wait for the time to be loaded,
// its a good idea not to show it act all wierd as it has nothing to control
// how it plays its numbers. We'll just hide it until the onLoad
counter._visible = false;
