Website Generation Tool Take II

Many moons ago I posted an AIR tool that would allow a user to drag a .swf file into a target area and have it spit out all the javascript, html, etc into a designated output directory. I’m not sure if anyone other than I ever used the thing, but I actually use it constantly at work and it seemed high time for a little update.

Well version 2 is here, and while it has the same bad name (“OBO Site GatherAIR”), it’s much more user friendly. This version now features template html files that can be selected. It ships with three templates (“Basic”, “Fullscreen with SWFFIT” and “Flash Centered in HTML” – personally, I don’t care much for the last as it relies on a table to do the centering. All are standards compliant though). Creating your own templates is a piece of cake. Just create a .html file that you’d like to use as a template and give it a memorable name (the name of the file is what will appear in the templates drop down box). Use the following abbreviatations inside the .html file (check out the included templates for examples of how to use the abbreviations):

$DESC		- description of website
$KEY		- website keywords
$AUTH 		- website author
$TITLE 		- title of html page
$WIDTH 		- width of swf file
$HEIGHT 	- height of swf file
$BG 		- background color (6 digit hex number)
$MENU 		- true or false (whether or not to show the Flash context menu)
$FULLSCREEN	- true or false (whether or not to allow full screen)
$SWF 		- name of .swf file
$DIV 		- name of div that will house the .swf file
$VERSION 	- version of .swf file

Finally, just save the html file inside the “templates” directory that is inside the application’s installation directory. The next time you run the app, your template will be selectable from the drop down menu.

The application comes packaged with swfobject.js v 2.1, swfaddress.js v 2.2, and swffit.js v 2.0 (please, no one sue me). To update to newer versions as they appear, just plunk the newer versions into the “includes” directory inside the installation directory (make sure they have the same name’s as the older versions and overwrite those obsolete ones).

*** UPDATE (30DEC08) ***

Yes, already an update to v 2.1. In the previous version (yesterday’s that is), I was moving the files using the File.copyTo() method. Worked fine, but lacked any feedback and, for large .swf files, you may end up sitting there awhile wondering if anything was actually happening. Now, I’ve switched to transferring the files with File.copyToAsync(). Long story short, once all files have been copied to the output directory, you will receive a nice little “Mission accomplished!” message to let you know everything is done.

A few gotchas to watch out for:

• Selecting the “fullscreen with swffit” template does not automatically include the swffit.js file – make sure to check the checkbox to include it in the output.
• When publishing to a full screen site, be sure to set up the .swf’s stage properties accordingly (i.e. set the align, set the scale to no scale, etc.).
• Also, even though there is a checkbox to  include swfaddress.js, none of the html templates include the swfaddress.js script. You’ll either have to modify the final html file – or create your own template!
• The width, height, and file version variables are taken directly from the .swf file. If you would like to change these or add a minor version to your html, you’ll have to do so manually.

Below is a screenshot:

If interested you can install the application using the badge below:

[kml_flashembed fversion=”9.0.0″ movie=”http://blog.onebyonedesign.com/wp-content/uploads/2008/12/sitegatherer_badge.swf” publishmethod=”static” width=”217″ height=”180″ quality=”high” allowscriptaccess=”always”]

[/kml_flashembed]

Or you can download the .air file directly here.

Let me know if you find it useful, create your own templates, or have any ideas for further improvements.