Flash Countdown
It’s been a long time since I’ve done any Flash development. But we’re launching a really important new product so it’s all hands on deck, and I got to put on my ActionScript hat again for a bit.
Fortunately, I still had a computer running Flash8. Macromedia (now Adobe) really wants their developers to keep up with the times, and I never really made the move to AS2.0, let alone 3.0.
The challenge here was to create a sense of urgency to get signed up for the new product introduction. We reached out to people to get on an advance list, and planned to close it in two days’ time. The product itself is called “Double Your Money,” so the design aesthetic has a U.S. currency theme.
I’d done a countdown swf before, but the technical challenge was a lot more sticky than I remembered. First, you want to get the time from the server so you’re not dependent on the user to set his computer’s clock correctly.
loadVariables("gettime.php","");
I skipped that part in the piece you see here so it will continue to work after Saturday.
Next, I set the date of the event to which I’m counting down. My server’s calendar returns 0 as January, so I subtracted one from the month of my event when I entered the date.
eventDate = new Date(2009, 01, 14, 23, 59, 59);
eventMillisecs = eventDate.getTime();
eventNumber = eventMillisecs / 1000;
Here’s the part I forgot about. Even though I’m getting the time from the server, which is in the time zone I want to use, Flash makes an adjustment anyway, according to the time zone of the user. So I need to find out what time zone the user is in, and back that out.
d = new Date();
offset = d.getTimezoneOffset();
This function gives the offset in minutes and I need seconds
offset_secs = offset * 60
My countdown is on central time, which is 6 hours (2160 seconds) offset from GMT
offset_cst = 2160;
offset_secs = offset_secs - offset_cst;
Here’s where I get the difference between the server time and my event date, and add back in the timezone offset.
secs = (eventNumber - time)+offset_secs;
Once that’s done, I’m ready to calculate how many hours, minutes and seconds are left.
mins = Math.floor(secs/60);
hours = Math.floor(mins/60);
Now my minutes and seconds are the entire time expressed in those units. To make a countdown clock that makes sense, I’ll take out all the minutes that are accounted for in the hours, and all the seconds that are accounted for in the minutes.
minsLeft = mins - (hours*60);
secsLeft = secs - (mins*60);
With three dynamic text boxes on the stage to show hours, minsLeft and secsLeft, I was free to design the rest of the clock around that.
Incidently, time is running out if you’re interested in our “Double Your Money” product. You can get more information here: Double Your Money from Zacks.