March 25th 2003 | Barry Munden

The Hidden Power of Flash, or The Lazy Luddite’s Guide to Making Flash Sites Your Mom Will Love

Flash has developed an odd reputation on the web. It is nearly synonymous with multimedia, with all of the undesirable baggage that goes with that. When I say Flash to many clients, it immediately conjures up images in their head of loading bars, techno music, badly drawn scatalogical cartoons and tortured typography in constant, pointless motion. And they run away screaming.

I can't blame them. We Flash developers have certainly earned this sort of cold reception. I have to confess that I am guilty of doing more than my share to perpetuate this unfortunate reputation. But no more! Because it finally occurred to me, while I was busy sculpting epic animated transitions and stunning intros, that I was missing out the true strengths of the .swf format. The stuff that makes it, in many ways, far superior to other web-based design solutions. And, even more importantly, I found a way to increase my productivity as a web designer and make my clients happier. I now know how to make a Flash site that will please almost any client, and perhaps even make Jacob Neilson happy (without resorting to hiring him).

My secret?
I don't tell anyone.

That is, I don't tell anyone I'm using Flash. Even more to the point, I build websites in Flash that a non-developer would never suspect were even made in Flash. There is no fancy animation, no music, no admonishment to download the latest version of the plug-in, no loading bars...just a simple, clean interface with attractive, readable buttons that behave predictably. Nobody knows it's Flash and nobody cares because it does what it's supposed to.

OK, I can hear you choking. Cough it up and bear with me. You are probably thinking, What's the point? Why use this nifty animation tool to build a humdrum interface that any geek with an HTML editor could replicate?

Because they couldn't. Not one that downloads this fast. Not one that appears exactly the same in every single browser and monitor it appears on. Not one that prints clear and crisp and without cropping. And, for all of that, is a breeze to maintain. Try it yourself and see.

I do this with Flash 4. I own a copy of Flash MX, but I have little use for it, at least until I have six more monitors to store all my palettes on. And I like the idea of my legacy Flash sites working without fuss on 90% of the browsers they appear in. It will be a while until the Flash MX plug-in is in use in anywhere near those numbers. (Many platforms do not support the version 6 player at all)

I have found many tricks to enable me to produce sites of this nature, which I intend to share with you. Because I would like to see more people do it. Because I like Flash. I like simplicity. I like bandwidth friendly solutions. I like websites that always look the same, even if someone got so fed up with pop-up windows that they disabled javascript. I like websites that give me complete freedom to design, without being squeezed into rectangular formats. And I am convinced that, once you learn more about some of these techniques, you will like them, too, and there will be many more websites like this out there. And then I will be forced out of business, so I can fulfill my dream of chucking it all and living the life of a happy Luddite out in Northwest Rockies, where the air is clear and there is little to do but hike, ski and make more little Luddites.

Anyway, take it or leave it, here's how I do it:
1) Every page of my website is a seperate HTML file. Period. Yes, that means no nifty transitions, no continuous music, nada. But it also means search engines like me, back buttons and bookmarks work, and integrating other non-Flash content is easier.

2) I confine my navigation elements to a single bar along the top (or sometimes the bottom) of the screen, which I save as separate Flash file. I can then use this single file for all of the navigation in my site, either by embedding it into the top of an HTML page, loading it on top of an all-Flash page on it's own level, or using it as the top frame of a frameset. Regardless of the size of the website, I then have only one (or at the most, three) files that I need to update whenever new navigation links need to be added. It simplifies expanding the website a great deal. A single modification updates navigation throughout the site.

This also has the incidental benefit of speeding up downloads. Since the navigational elements are cached after the first viewing, each page of the rest site loads that much more quickly. By placing the navigation elements at the top of the screen, I can adapt individual pages to the conventional HTML scrolling format with ease, and I make the most economical use of screen real estate on pages that don't scroll.

3) Whenever possible, I do the whole page in Flash. With the HTML publish settings set appropriately (and tweaked to eliminate borders, if neccessary), my page fills the browser window regardless of what screen resolution or window layout the person viewing it chooses to use. (For the Flash document settings, I prefer 780x410. It is a matter of debate which setting here produces a properly proportioned window. This particular size struck me as a nice compromise setting. Any distortion in windows of slightly different proportions is trivial.)

4) I often initially design the look of my site in a vector drawing program like Adobe Illustrator. This lets me focus on design and keeps me from worrying about technical considerations until after I have some creative direction. It also enables me to export and alter the layout for the benefit of clients, long before it reaches the coding stage. Once I have a design everyone is happy with, I can import the graphic elements into Flash easily and make it work. The drawing program also forces me to think vector, and means that most of the design elements will be very lean and clean vector art, yielding very good download times.

5) I avoid Actionscript like the plague. Flash 4 encourages me to do this, since it's scripting abilities are limited, and whenever possible, I code for Flash 3. My reasoning is that the less code there is, the more robust and bug free the file is likely to be. And updates are less likely to yield unexpected and unwanted behaviour. Given a choice between ten lines of code or another ten frames, I'll take the ten frames, any day. Or find another way to do it altogether.

6) I have a reason for everything I do. (Duh, you say) But consider how many people invest considerable effort (and KB's) into making some goofy animation follow the cursor(for example). Why? How does this improve your website? Time much better spent on actual content, or other tasks. This isn't so much a Flash technique, as it is sound advice for any designer. But the versatility of Flash seems to tempt Flash designers in particular into forgetting this principle. Don't be tempted.

7) The same can be said of flashy animated intro's. They are simply visual conceits. Beyond the gee whiz factor, they have nothing to offer. They consume time and money, and communicate nothing. It's analogous to the video game industry's obsession with cut scenes in games...how many hours of interesting game play were sacrificed to give the technicians the resources neccessary to produce that cut scene that you will be hastily clicking past after the first viewing? Wouldn't you rather they had spent their time working on the game itself? Well, your website vistors will probably feel the same way about your flashy intro. If you want to make a movie, make a movie. Otherwise, make a website. Don't confuse the two. Nuff said.

8) Use type responsibly. For a lack of anything else to animate, I suppose, many Flash designers seem to take great pleasure in torturing typefaces, and their site visitor's eyeballs along with them. I don't know when or why microscopic moving type became trendy, but it is a senseless, and I tend to take quite the opposite approach on my own websites. If I use type at all. After all, there is no sense in having graphics if they can't work for you! A picture is worth a thousand words...and is much easier to translate into Yiddish.

That's it. No holy grail or secret formula. Nothing new at all, really. Just a little restraint and common sense, and my arguments for using them. It works for me, and the same basic principle can work for you.

In a nutshell, simplicity is good. Consider this the Bauhaus movement of Flash design. Enough of the eye and ear candy. Too much candy rots your brain, and makes your website fat. Build a healthy, robust website that people will find both more attractive and more usable. Do it for your visitors. Do it for your clients. Do it for youself. Do it for your mom.

Seriously. If your mom can use your website, then you've done your job. If your three year old son (or sibling, or whatever) can use it, you've done your job even better. And if a three-year old Chinese kid can use it, then you are truly a Lazy Luddite Zen Webmaster.

It can be pretty without being pretty complicated. Think about it.