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.

48 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 Flash Engineer PopCap Games, International Ltd.

Portfolio

Santabot: A Unity3D Flash Game


All right, so a Christmas game like “Santabot vs. The Flying Saucers from Mars” may be a day late[...]

Magnify – a jQuery Plugin


Let me begin by saying right up front, I have not given up on Flash[...]

It’s a Starling Halloween


Getting some practice for the upcoming Zombie Apocalypse[...]

Getting Started with Proscenium

So I had a chance this weekend to sit down and play around with Adobe’s new 3D framework for Stage3D, Proscenium, and thought I’d share a few of the results (a word of caution, there are no preloaders for any of the examples and may load a bit slowly). The first shows some reflections and [...]

Particle Editor for Starling Framework

An in-browser particle editor for the Starling 2D Framework for Flash Player 11.

So Long and Thanks for all the Flash on the Beach

So, another Flash on the Beach has just has just drawn to a close[...]

Game Development Tips from the Trenches of PopCap

Well, this is a post that’s a bit overdue, but, thanks to a well timed bank holiday, I finally had the opportunity to sit down and type up what I’ve been meaning to for some time now…

Old Skool Demoscene FX as 3D Textures

Many moons ago, I got the idea to create some demoscene plane deformation effects in Flash based on the formulas found here: http://www.iquilezles.org/www/articles/deform/deform.htm. I posted my less than desired results up on wonderfl. Thankfully, fellow wonderfl user, Hasufel, forked my attempt and optimized the hell out of it coming up with this. Well, today, for no [...]

Making The Gaming Scene (A Change in Careers)

And for my second blog post of the day, a much more personal note. After about three years of working with, what I would consider as objectively as possible, the best digital agency in Ireland, vStream Digital Media, I have made the immense career decision to leave the agency world and enter the arena of [...]

Feeling Lucky?

Images to dice, kick ascii style [...]

Adventures in Playbook Land

Adventures in Playbook Land


Now that the ordeal is over, I thought I’d take the time to sit down and share my account of what it was like to develop a Blackberry Playbook application using the Adobe Flex SDK[...]

Flash

Draw it for Me

So many ideas – so little time….

Kinect Application Running in Dublin

So, on Friday I just wrapped up our latest project at vStream Digital Media, a Kinect powered flipbook that lets users flip through the hand written notebooks of Philip Lynott of Thin Lizzy. The app uses OpenNI, runs in Adobe AIR and is currently on display at a pretty bitchin’ Phil Lynott exhibition running in [...]

Beach Ball Kinect Party

So we finally got a Kinect camera hooked up to a pc at work and, while it doesn’t seem to be legal to use it for commercial projects (but, hey, I’m no lawyer), the boss asked me to get it figured out and come up with some ideas just in case it would be feasible [...]

Facebook and Flash – A Book Review

Now, I should begin by saying I absolutely hate building Facebook applications. And I build a lot of them at work. Every time I get the word from above that we’re doing another FB app, I just groan – both inwardly and out. It’s become a running joke of the office. Why do I dislike [...]

Multitouch Fluid Dynamics with AIR for Android and RTMFP

The other day I was having some fun playing around with Eugene Zatepyakin’s (aka @inspirit) FluidSolverHD (Actionscript port of C++ fluid dynamics library, MSAFluid. Or is MSAFluid, the processing/java port of the C++ library? In any case it’s a very cool fluid dynamics thingamabob – the HD version using Alchemy). After a bit of tinkering, [...]