Create Your Own Web-based Screensaver

Note: This code was written quickly and has only been tested on one machine, so let me know if it doesn't work right away and we'll work through the problems.

Ever wanted to make your own quick screensaver? Wanted to turn a cool Flash animation or RSS-based page into a screensaver? Turns out it's not that difficult. Anything you can put into a web page can be used. This includes Flash, DHTML animations, Iframes loading remote data, AJAX calls, etc.

What you need:

• Autohotkey
• The Flash Animation - http://www.levitated.net/daily/levEmotionFractal.html
• Possibly messing with your security settings to let .hta files run. (I didn't need to do this, but it's always a caveat).

Overview
What we're essentially going to do is this. A screensaver file (.scr) is nothing more than a renamed EXE. So, we'll use Autohotkey and their compiler to compile 2 lines that launches our screensaver. We'll rename that .exe into an .scr. That file will launch screensaver.hta, which *is* our screensaver. And, as mentioned plenty of other places on wynia.org, an HTA is an HTML file renamed to an .hta and freed from the confines of the full browser interface. We'll set that .hta file up to be fullscreen, to be a complete screensaver.

The basic HTA
Build an empty HTML file in a new empty directory and call it screensaver.hta. In the HEAD tag, after your title, put the following:


<hta :APPLICATION ID="screensaver"
APPLICATIONNAME="screensaver"
BORDER="none"
INNERBORDER = "no"
CAPTION="no"
SHOWINTASKBAR="no"
SINGLEINSTANCE="yes"
SYSMENU="no"
SCROLL = "no"
WINDOWSTATE="maximize">
</hta>

The content
I used the Flash animation mentioned above. I loaded the demo page for it, viewed the source, grabbed the .swf file URL and saved a copy to my HTA directory. I also grabbed the OBJECT tag for displaying the Flash from that same source. The stuff on the levitated.net (in the section this animation came from) is open source, so if you wanted to grab the .fla and modify it, you can (including changing the word list). At any rate, here's the object code to put in the body of the .hta. I set it to 98% to leave room for my close window button at the bottom.


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100%" height="98%">
<param name="movie" value="levEmotionFractal.swf">
</param><param name=quality value=high>
<embed src="levEmotionFractal.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="98%">
</embed>
</param></object>

Method of killing the screensaver.
Ironically enough, this method gives you some control in screensavers that a lot of people want. By default, the only way to kill the thing is ALT-F4. The sample includes a close() on keypress, but not mouse movement as many of the animations at levitated.net require mouse interaction. As such, you can allow mouse and keyboard interaction with your screensaver. Attach this code to your body tag for ESC and other keys to close the screensaver automatically.

onkeydown="window.close();"

If you choose not to use one of the global closing functions, make sure you include a button like this on the screen somewhere to ensure that people can easily close the screensaver. Floating it to one of the screen corners via CSS works fairly well.


<button onclick='window.close();'>Close Screensaver</button>


Refreshing the screensaver
The original point of screensavers was to prevent burn in on monitors. This is less of a problem today, but should still be addressed by your screensaver. You should avoid anything that is going to leave a specific set of pixels set to the same color/brightnesss (other than black) for any extended period of time. Additionally, some things need refreshing to restart them, like our sample Flash animation. For the sample, I determined that if the page was reloaded about every 15 seconds or so, it would work well. The words are randomly placed, so the other shouldn't be a problem and we're using black as our background. So, all we need to do is reload every 15 seconds. Put this in the "head" tag in your screensaver.hta file after the HTA declarations. Change the interval on both to whatever refresh rate makes sense for your setup.


<script language="JavaScript">
<!--
function repaint() {
location.reload();
setTimeout('repaint()', 15000);
}
setTimeout('repaint()', 15000);
//-->
</script>


That completes the .hta. You should now be able to run it directly from Explorer and see your full screen animation. If not, double check that the .hta itself is right before moving forward.

The .ahk
If you haven't already installed it, make sure Autohotkey is installed and working. Create an empty text file with an .ahk extension. Name it whatever you want your screensaver to be called. I had issues with one version that had spaces in the name, but that may not have been the reason (there were several problems in working through this solution). In that file, put the following line, modified for where you put your .hta and .swf files. You need to use the absolute path (unless you put that path into your system path environment variable) in order for it to work.


RunWait, "C:/dev/screensaver/test/screensaver.hta", , min


Right click that file and choose "Compile Script". You'll get an .exe in the same directory.

Create and install screensaver file
Rename that file to an .scr file. That will be your screensaver. Right click that and choose "Install". The screensaver will launch, so hit ESC and you'll get the control panel applet for setting the screensaver options. Don't bother with the preview or settings options. We didn't build any and you already saw the preview. Set your timeout and password options and click OK. For testing purposes, I recommend dropping it down to 1 minute and leaving it idle until it kicks in. Do that a couple of times to make sure it's going to work and you're set.

Sharing
You'll need to distribute the .scr file, the .hta file and any supporting images, animations, etc. in the directory. In this case, that's just the .swf file.

Improvements
This doesn't do anything with the "/s", "/p" and other options that Windows passes to screensavers for preview and configuration. This is OK for me as I don't really mess with screensavers once I set them up. The way this is set up, it will execute several times while you're running the control panel portion of setting it up. The .ahk file can be set up to handle those permutations and not launch the .hta every time, but I haven't found it worth the effort so far (in the day of testing since I started this).

What Next?
If you've managed to get the sample working, you have all of the tools you need to build screensavers. One of the most common projects (photo slideshow) is the one I'd recommend trying next. There are a ton of Javascript slideshow scripts out there that you can use as the basis of your screensaver. Mix things up a bit by putting an 800×600 slideshow in a DIV tag that is positioned randomly on a 1024×768 screen. Or, make the entire slideshow fullscreen.