2010 *will* be an eventful year - I've bought a new home with my best friend, fallen in love with an amazing girl, grown my business by leaps and bounds, and have a whole series of new challenges ahead - and it only makes sense to reboot this blog and start documenting said adventures!

I'll likely create a new layout for this blog to mark the occasion, but that's certainly not a priority so don't get your hopes up.

And for everyone who's wondering - I haven't forgotten about CoHLCD, and I've finally located my backup of the last functional source code.  I *hope* to have a v2.0 release in the next month, though my current workload might cause problems there.

As such, I whipped up a quick Wordpress plugin (as I often do for these tiny problems), and decided to make this one available to the public. So without further ado, I give you...

Duck's Timestamp Inserter! Ok, it could use a more creative title. Using some pretty simple markup, it allows me to insert the current timestamp, or offsets thereof, into my post content.

<!--ducktime--> becomes 1268313374, while <!--ducktime+5000--> becomes 1268318374 and <!--ducktime-1200--> becomes 1268312174. If you refresh the page, you'll see these all change.

UPDATE: This Plugin is now listed on the WordPress Plugin Repository! You can download Duck's Timestamp Inserter from there - and of course, Ratings are appreciated. I've released it under GPL3. If you find it useful, please consider Donating.

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.

I'll probably look for a used/broken G15 or G11, and just swipe the keytops from it. However, this definitely pushed this to the end of the project list.

Sheeb's Tau Battlesuits are nearly completed, as is the Necron 'Hand of Despair' Terrain piece. I'll be making some related terrain pieces soon, and creating templates so others can make the same Hand.

I'm going to be out of town all weekend, so the list itself won't really get knocked down all that much for a while. Ah well, I deserve a *few* days off

On top of that, I had the brilliant idea of giving the main plastic pieces (which were spraypainted with Krylon Fusion yesterday) a quick Clear Coat. Bad idea. It caused a fair bit of the Krylon Fusion to bubble up, and now I have to strip the paint off these as well.

So basically, the only part that's gone right in this whole project has been replacing the Blue LEDs with Red Ones - assuming you don't count the small soldering iron burn I self-inflicted. Hopefully this project turns around soon!

Now I just need to give my mom a quick tutorial on blogging with WordPress!

As an interesting side note, I found a small bug in my 'Display Category Children' sidebar widget, which I resolved as well. I may end up releasing this Widget soon, since it can be rather helpful, despite being really simple.

That said, I heard a bit of news on the radio today that, while upsetting, just made me realize how good we have it here.

Yesterday, the City of St. Catherines experienced its first homicide of the year. Just a few days shy of August, and there's only been ONE murder in a city with a metropolitan population of over 300,000.

I don't think I'll lose any sleep tonight.

Luckily, Dave came to the rescue. After an unexpected interview with yours truly, he put together a great video detailing how I pulled off the conversion.

Anyhow, you can watch the whole thing on YouTube. Or I might be nice and let you see it right here...

Though I've demonstrated this on a Necron Gauss-weapon Rod, there's all sorts of ways this technique can be used. Anyhow, check it out!

A few minutes later, my intended peanut butter sandwich became a small bowl of homemade Guacamole instead. No, I don't understand how my mind works either. I'll provide the recipe sometime though - it's deceptively simple.

On a more sane note, I've got another article up at MiniWarGaming.com, this time a detail of the Necron Summoning Core I've started building. This is my first piece of Terrain, so be gentle