Latest Site: What can we learn about Flash and HTML/CSS? (Knozone)

The Basement recently released a new site... Knozone: Clean Air Matters.

I mainly played the roll of Technical Director on this project. Todd Shelton did most of the heavy development lifting. It was his first project with the basement team and he did an excellent job... altho I am biased.

The biggest technical challenge that we faced during this project was making sure all of the content was editable. We usually try to do that for every site so it shouldn't have been that big of deal. You either drop the content into XML or you setup a template and receive the content from some sort of CMS. We chose the latter path, but instead of setting up a template (such as 1 picture, title, body of text), we needed to make each page fully dynamic and editable with a WYSIWYG editor.

I figured, no problem, we will implement a Cascading Style Sheet and drop in some HTML text and we will be all set. In theory, sure. In practice, however, there were so many nuances and finicky things that came up it turned out to be quite a ride.

First of all, images and swfs loaded into HTML text is a tricky beast. I realize with Flash 10 they added Glyphs and all kinds of fun stuff that may have been helpful, but we were stuck with Flash 9. And in Flash 9, images/swfs that are dropped into HTML text do not effect the height of the text box (which is awesome for when you are setting up scrolling). Also, you can't do a "clear" on a <span> or <p> to force the next paragraph to drop below the image. The only two ways that we could get the text from wrapping around an image was to either A. make the image the width of the text field or B. add enough <br /> tags that the text appeared below the image.

Speaking of <br /> tags. It seems that on most computers and browsers that all white space carriage returns were treated similar to
tags. Macs using Flash 9 (10 was fine), however, decided to ignore these white space carriage returns. Awesome.

Here is another one. Firefox in Flash 9 on both Macs and PCs could not click in the input boxes of the swf forms that were being dynamically loaded into the html text field. You could still click on the submit button, but you could never get your cursor in an input box or type anything. This bug didn't seem to come up in Flash 10 or in IE. We ended up getting around it by making the 2 pages that required swf forms to use Movieclips instead of dynamic swfs. (A little hack-tastic, I'll admit... but necessary).

There were a couple other gems... but those were the biggies. The ones that had Todd and I hitting our heads against the wall. Its always painful when it works on one computer and not another without a clear explanation... hell, even with a clear explanation it would still be painful.

After this experience I would recommend setting up a more custom and rigid WYSIWYG than just passing straight HTML into Flash. If you do go the HTML route, I would definitely require Flash 10 and be ready for some interesting bugs, or "features" as some call them.

Technical hurdles aside, this was a fun project and I enjoy the end result. I loved Amy's and Brian's design. Especially the balloon/clouds, wisps, building load in, and birds... if you can find them.