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:

Get Adobe Flash player

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.

53 Comments »

  1. David King says:

    I’ve sent it over to Ajaxian cause it’s awesome!

  2. Devon O. says:

    Bitchin’! Thanks, David…

  3. Scott Rockers says:

    Nice Devon, I might have to play around with this.

  4. Edward Souza says:

    Devon,

    I’m a long-time admirer of yours. I started to fool around Flash a year ago, and learned a lot mainly ’cause of you. As a matter of fact, I’d place you as one of my “Gurus”. I’ll try your application and will keep in touch.
    Thanks for sharing your expertise.
    Ed

  5. Devon O. says:

    Hi Ed,
    Thank you for the kind words. Funny you should just try this out now. I was just planning on updating the app this weekend (fix a small bug, add some new templates and update swfobject and swfaddress). So you might want to hold off – or check back on Monday…
    d.

  6. [...] For those unfamiliar with the AIR Website Generation Tool with the god awful name of Site GeneratAIR (still no good suggestions), check out this old post. [...]

  7. web360 says:

    Thanks for creating this tool! Just found it through Refreshing Apps. Can’t wait to try it out….

  8. [...] other news, just saw that my Site GatherAIR thingamabob has now been listed over on Refreshing Apps. Very cool stuff! And thanks to whoever submitted [...]

  9. samBrown says:

    Holy crap! this is incrediably useful. Embedding swfs for proofs and such is a daily work chore that this app will make a pleasure.

    thank you – very cool app!

  10. chand says:

    Amazing, Stupendous, tremendous, fantastic,…………I love the Flash community, here the Gurus are real Gurus. They are so nice that I can’t explain. Devon, ;-) difficult to show my happiness here in text, but the thing is just that you are great. I am 20 years old novice and attached with flash on and off from 3 to 4 years. I don’t know a lot but every time I have this feeling that, If I caught in some problem there is no problem because we have such (Devon) mentors. Great Job. I am looking forward for some professional tips to become superhero in Actionscript 3.0, any resources, techniques, tricks and I am also impressed from Gugga framework what you said about it. I am eager to listen from you.

    Thanks
    Take care.

  11. Summer says:

    works great! although would rather have a “go” button and an swf file name field instead of just dropping the swf in there… but hey it’s free so not really complaining. thanks!

  12. [...] 20. Website Generation Tool Take II [...]

  13. ZoiX says:

    Amazing! Really. Thank you for this great Application.

  14. [...] Website Generation Tool Take II. Para la creación de plantillas de sitios sencillos para los trabajos de diseño rápido y fácil. [...]

  15. [...] OBO Site GatherAIR » This AIR application can take a SWF file that you drag onto it and then after choosing an HTML template it will convert all of the files out into a directory you specify complete with all the SWFObject code and SWFFit code if you choose to select it. It ships with three standard compliant templates ("Basic", "Fullscreen with SWFFIT" and "Flash Centered in HTML"), you can also create your own template by following the instructions here: Create your own template. [...]

  16. [...] OBO Site GatherAIR is a website generation tool that lets you create Html templates with ease. You can also use it to drag and drop SWF files into your template. [...]

  17. [...] OBO Site GatherAIR is a website era apparatus which lets we emanate Html templates with ease. You can additionally make make make make make make make use of of of of of of of it to draw towards as well as dump SWF files in to your template. [...]

  18. [...] OBO Site GatherAIR es una herramienta para la generación de sitios web que te permite crear templates Html fácilmente. También lo puedes utilizar para arrastrar y soltar archivos SWF en tu template. [...]

  19. [...] OBO Site GatherAIR es una herramienta para la generación de sitios web que te permite crear templates Html fácilmente. También lo puedes utilizar para arrastrar y soltar archivos SWF en tu template. [...]

  20. [...] OBO Site GatherAIR is a website generation tool that lets you create Html templates with ease. You can also use it to drag and drop SWF files into your template. [...]

  21. Abel says:

    A improvement, could be add Falsh variables generation, including javascript url params reader as flash variables.

  22. [...] You can use it to create image annotations and interactive presentations. 17. OBO Site GatherAIR: OBO Site GatherAIR is a website generation tool that lets you create Html templates with ease. You can also use it to [...]

  23. [...] admin on Aug.10, 2010, under AIR – Herramientas específicas de diseño OBO Site GatherAIR es una herramienta para la generación de sitios web que te permite crear templates Html [...]

  24. Roger W says:

    Hi Devon, I ended up on this site after posting a Flash problem up on Kirupa. I got a reply from neys who you had helped back in March and he pointed me to your site.
    Your tool is great and thanks v much for sharing this with us – I’d spent 24 hours trying to figure out how to fix this and 10 mins after visiting your site the problem was fixed.
    Cheers
    Rog

  25. Devon O. says:

    Hey Roger, Thanks for the kind words. Glad the app helped you out. Haven’t been over to Kirupa in quite some time, myself. I’ll have to go over and check it out.

  26. Steve says:

    Devon,

    This is awesome. I was sitting and struggling with the swffit as the instructions weren’t clear and then I found you app… WORKS GREAT! Good JOB!

    My only suggestion if you ever do any modifying to your application, it would be extremely helpful to be able to set the min and max without going into coding.

    Do you mind if I edit this application? What tool did you use to create it?

    Thanks,
    Steve

  27. Steve says:

    I just reread creating a template and that works great for what I just posted… Very impressed… This app is great.

  28. Steve says:

    Devon… I was trying to get this to work and it seems to work great when I open index.html from a local folder. However, as soon as I post it online, SWFFIT does not operate.

    Is there an area I should key in on? The coding it kicked out is the following and dropping this folder on the server and accessing index.html shows the flash video without the SWFFIT feature.

    Thanks for your input in advanced, I admittedly am about 5 months into working with flash videos so I’d say I am an amateur but would like to learn more like this very valuable SWFFIT feature.

    ADAMS P8-Mod8

    You need The latest Flash Player and javascript enabled to see the content of this site.

  29. Steve says:

    “ADAMS P8-Mod8

    You need The latest Flash Player and javascript enabled to see the content of this site.

  30. Devon O. says:

    Hey Steve,

    sorry for the difficulty. Since I haven’t updated that software in quite some time, the first thing I would do is make sure all the javascript libraries are up to date. You can find them each easily by a bit of googling. Download the latest stable version of each and add them to the ‘includes’ directory within the application install directory (make sure you keep the same file names and overwrite the files there – you can back them up somewhere if you’d like). If that doesn’t solve the problems you’re having, let me know and I’ll see what other ideas I can come up with.

    d.

  31. Steve says:

    Hey Devon,

    swffit.fit which appears on line 34 for me, is called before the flash file loads. As I understand it… when I am opening the index file locally, the flash file loads much quicker. As soon as it is hosted online, it appears the swffit.fit appears to resize the flash video before the flash video is loaded.

    Here is an example at this website:

    http://smmeadia.com/ExpandingSWF/index.html

    This same index file works great when run locally.

    If there is an extra line of code I could inject to that asks to hold off running swffit.fit until the flash video is fully loaded, I believe that would correct the situation.

    However, I’m very new at this… Maybe you would know what line of coding would do that?

    Enjoying your site!
    Thanks,

    Steve

  32. Steve says:

    The advice I received was to use swfobject.addDomLoadEvent(fn)…

    This coding should hold off implementing swffit.fit until the video is loaded.
    I just gotta figure out where to place this in the grand scheme of things and what I need to place inside this function.

    I’m sure you got a enough on you plate Devon but if you are ever available to take a moment to show me how to successfully implement a 5 Mb flash video I would be eternally grateful.

    Your OBO Site GatherAIR seems to work great when index files are accessed locally on my machine, but online the swffit features are ignored.

    Feel free to shoot me an email and I could shoot you the flash file. I got a few hundred files like it and I’ve been charged with figuring out how to get them to work online using something like swffit expanding and shrinking.

    Thanks,
    Steve

  33. Devon O. says:

    Hey Steve,

    the first thing I’d try is updating the swffit.js file with a version from here: http://swffit.millermedeiros.com/ . In fact, I would update all the .js files that are included. This tool hasn’t been updated in quite some time and I’m sure all the javascript files that come included are fairly out of date.

    Hopefully, just doing that will help out.

  34. Steve says:

    Devon,

    Thanks anyway… No dice… I don’t get it. It will resize locally but not when I put it online… It’s very sad… I don’t know if it is because my swf video is too big or what… This problem is kicking my butt big time.

    Sigh.. I may have to manually code in specific sizing buttons which is really going to be a pain. If you’d like to take a look let me know…

    This issue is killer. It blinks the right size for just a moment then when video is 100% loaded it reverts to the swf original publish size.

  35. Steve says:

    I will add… your tool would be a life saver if I could find out what is going wrong… I’m using all the up to date JS files.

  36. Steve says:

    At this point, I’m willing to offer $100 to anyone who could find the error in my coding and fix it so I can implement the fix in the rest of them.

    I’m trying to code a website that has a few hundred of these and I need to figure out what I’m doing wrong.

    SWFFIT Locally = Works Perfect
    SWFFIT Placed online = Unresponsive

  37. Devon O. says:

    Hey Steve,

    One thing to make sure of when using SWFFit is that the stage.scaleMode property is set to no-scale and the stage alignment is set to top left. It seems when first visiting your example site, when I resize the browser the content scales as well.

    If all else fails, send me the swf (make sure you set the two stage properties first) and I’ll check it out..

  38. Steve says:

    Devon,

    I didn’t see your email off hand, so I shot a message to you through your website. I wanted to shoot you the swf file.

    I think my JS is running before my video is fully loaded and that is creating the issues.

    Could you send me your email so that I can shoot you the swf and my index.html file.

    Thanks,
    Steve

  39. felix says:

    Devon,

    First of all this tool rocks my socks!

    But I noticed that the scroll bars don’t appear in firefox, it works flawlessly with all other browsers. Is there something with the java I need to do different? Any help would be great.

    Thanks,

    Felix

  40. Devon O. says:

    Hey Felix,

    Thanks for the comments. I noticed that about Firefox as well. There some been some changes to how it handles embedded Flash recently. There’s a really simple fix, but to be honest, I can’t remember it off the top of my head. A bit of googling should quickly find the solution though. After that, you may want to edit the template file appropriately. One of these days I’ll do so myself and release an update to the tool.

    -d

RSS feed for comments on this post. / TrackBack URI

Leave a Reply

Devon O. Wolfgang

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development”

Contributing Author of “Flash AS3 for Interactive Agencies”

Senior Software Engineer at Meez

Starling Particle Editor

vignette

Some Photographic Shaders


A couple weeks ago I was contacted and asked to develop some filters for Starling that could be used in a mobile camera app[...]

boids

Animated Particles, Books, and Code – It’s a New Year


It’s a new year[...]

bug

Logical Or Assignment Bug in ASC2


So, here’s something to keep an eye on if switching to AIR 3.8[...]

Starling Filter Collection

Starling Filter Collection


Building up a collection of filters for the Starling framework[...]

Starling Warp

Warp Filter for Starling


Another filter for the Starling framework[...]

promise

Promises Promises


What it boils down to is handling asynchronous tasks [...] in a clean, intelligent fashion [...]

GodRays

Starling ‘God Ray’ Filter


While cruising the internet today looking for interesting things to try out I ran across this fun little GPU Gem[...]

Alpha in Starling Filters and Basic Branching in AGAL


In plain English to create a circular mask we would want to do something like this[...]

Starling, Nape Physics, and PhysicsEditor


A look at using the PhysicsEditor tool for Nape and Starling [...]

Playing With a Couple Game Ideas


Just a couple game fragments, really[...]

One More Filter For Starling


Another filter for the Starling framework[...]

Filters in Starling


Using and writing filters in the Starling framework[...]

Towards a Better Scratch


Perhaps it was too much Meat Beat Manifesto in the late 80’s [...]

Learning AGAL with AGALMacroAssembler and OpenGL Examples

So the other day I sat down and thought to myself: self, it’s high time you learn you some of this new fancy pants AGAL[...]

UV Scrolling in Starling


Obviously this could come in pretty darned handy for space games, side scrollers, etc, etc[...]

Drawing on Stuff in Away3D 4.0

So, Easter Day, I thought I’d sit down and make a little ‘Paint on an Egg and Send it to Your Friend’ app.