|
October 21st, 2008 |
Countdown Timer in FlashRecently at work, I was asked to add a Countdown Timer to a few of our pages giving the time remaining until a Sale kicked in. While I could have whipped this up pretty quickly in Javascript, I decided to use the opportunity to expand my Flash knowledge a little.
One of my key considerations was using the Server's time, rather than the time of the User's system clock. This meant passing two Timestamps from PHP to Flash, which luckily is very easy to do. I'll walk you through the entire design process here. I'll be using Flash CS3, and ActionScript 2.0.
1. Set up the Document
In Flash, select File, New, and choose "Flash File (ActionScript 2.0)"
Select Modify, Document and change the Document Size. I'll be using 200px by 100px for this example.
Add a New Layer named Actions.
In the Timeline, add a Keyframe to Layer 1 at Frame 2.
2. Add Text Elements
On Frame 1 of Layer 1, use the Text Tool to create a Text Area that will contain the Countdown Time. Start this with a Default Text of 00:00:00:00. If you use a Monospace Font, Alignment won't matter.
Change the Text from 'Static Text' to 'Dynamic Text', and give the Text an Instance Name such as 'time_until'.
To make sure your chosen font is available to the Visitor, we're going to embed part of it. Click the 'Embed' button, and select 'Numerals'. Type a Semi-colon in the 'Include these characters:' field. Click OK.
3. Add Labels
Still in Layer 1/Frame 1, create a new Text Area. Set this area back to Static Text. Enter the text 'sec', and reduce the font size. Center this below the rightmost '00'. Copy (Ctrl+C) this field, and Paste in Place (Ctrl+Shift+V). Move the copied field under the next set of 00s, and change the text to 'min'. Repeat for 'hrs' and 'days' with the remaining 00s.
4. Add our ActionScript
Select Frame 1 of the Actions Layer, and press F9 to load the Actions Window. Add the Code shown in each block below:
stop();
This stops the Movie from playing, keeping it at Frame 1.
this.onEnterFrame = function () { var currTime = (Number(timeNow) * 1000) + getTimer(); var targTime = Number(timeThen) * 1000; var timeLeft = targTime - currTime;
This begins our function to update the Countdown Timer. timeNow and timeThen are UNIX Timestamp values that will be passed in from the server via the flashvars attribute of the embed tag. We multiply these both by 1000 in order to convert them to a value in milliseconds, rather than seconds. getTimer returns how long the Flash Movie has been running in milliseconds, and is added to our Current Time to produce a countdown effect. timeLeft is simply the difference between these two values.
if (timeLeft <= 0) { time_until.text = "00:00:00:00"; gotoAndStop(2); return; }
If we've reached or past the Target Time of our Countdown, proceed to the second frame of the Movie, and stop there.
var secs = Math.floor(timeLeft / 1000); var mins = Math.floor(secs/60); var hrs = Math.floor (mins/60); var days = Math.floor (hrs/24);
Since timeLeft is currently measured in milliseconds, we need to determine how many seconds, minutes, hours, and days that represents.
secs = String(secs % 60); mins = String(mins % 60); hrs = String(hrs % 24); days = String(days);
The String function here converts the Numerical values into, well, Strings. The modulus of each timepart is taken so that only the significant portion is kept. We want an hour to appear as "00:01:00:00", rather than "00:01:60:3600".
if (secs.length < 2) secs = "0" + secs; if (mins.length < 2) mins = "0" + mins; if (hrs.length < 2) hrs = "0" + hrs; if (days.length < 2) days = "0" + days;
These lines add 'zero-fill' to each value, ensuring that they are 2 digits long. If you need a 3-digit field for days, try replacing the last line with:
while (days.length < 3) days = "0" + days;
Lastly, we need to output our time to the screen, and close our function.
time_until.text = days + ":" + hrs + ":" + mins + ":" + secs; }
5. Add our 'Times Up!' Frame
In the Timeline, select Layer 1, Frame 2. Add whatever Text or Graphics you'd like here. This will appear when the Target Time has been reached.
6. Publish the .SWF
First, save the Document - Flash will publish to the same folder as the Document by default. Next, go File, Publish Settings... and detoggle the HTML file - we're going to need to customize it anyway, and I prefer my code a little less bloated than Flash's output. Only the .swf output should be enabled. Click Publish, and there should now be a .swf in the same folder as your Document.
7. Test it out!
Load the .swf file in a browser, and... it'll likely skip straight to Frame 2. Since no timestamps were supplied via flashvars, both timeNow and timeThen are undefined, which causes our timeLeft to evaluate to zero.
Luckily, testing the timer is very simple. In your browser window, simply add the two values to the .swf file's address. Just use a small number for timeNow, and a larger number for timeThen. The URL should be something like:
file:///C:/local_path/flashtimer.swf?timeNow=5&timeThen=18000
If you've done that correctly, you should now have a working countdown timer! The last step is loading this from your website, using PHP to pass in the timestamps required.
8. The PHP/HTML Document
Since you'll likely be adding this to part of another document, I'll only cover the necessary HTML here.
<embed src='flashtimer.swf' width='200' height='100'
flashvars='timeNow=<?=time();>&timeThen=1230163200'
type='application/x-shockwave-flash' />
Note that timeNow is passed in as the current Timestamp by PHP when the page loads. In this example, timeThen is Christmas Day 2008, a timestamp I simply generated using Epoch Converter.
The result will look something like this:
You'll obviously want to improve on the timer visually to match your site, or the occasion you're counting to. Oh, if you want to be really lazy, you can just Download the .FLA file. I don't mind, really 
9. Using with Wordpress
If you're placing your Countdown Timer in a Wordpress post (like mine), you may have some difficulty using PHP to add the timestamp. Luckily, I whipped up a quick Wordpress Plugin to do just that. Duck's Timestamp Inserter is a small, free plugin that can output timestamps into Wordpress content.