The Best Structure for your Flash Site - Page 1

Adobe's (formerly Macromedia's) Flash application is, according to them, "The industry's most advanced authoring environment for creating interactive web sites and digital experiences." However, many users have trouble structuring their site efficiently within Flash.

When Flash is opened, a blank canvas appears, and a single layer with multiple blank frames displays, waiting to be used, as you can see in the image below. There's little guidance on how to proceed, and many different directions that one can take. So it's easy to see why users can become confused:

Over the past six years of working with Flash and helping others with their own Flash projects, one thing has become clear to me: no two Flash web sites are laid out the same. Sadly, over 90% of the Flash sites I've seen are not structured efficiently; some are horribly inefficient. While there may be no one right way to structure a Flash web site, some ways certainly are better than others.

Keep in mind that when I say "structure" I'm not talking about how your web site looks; we don't care how your web site looks, at least, not in this article. Structure is about setting up your Flash site with Keyframes, ActionScript and MovieClips, and controlling the Flash playhead. Good structure can make your site load faster, make it easier to manage and update, and keep unexpected things from happening. A bad structure can increase load times, make it painful to make future changes, and cause unexpected headaches. The principles explained in this article apply to all Flash site designs.

In this article, we'll develop a navigation system. Though it might seem trivial, this will serve as a good example for this article and the techniques can be applied to any project you're working on, be it a full Flash web site, a Flash poll, or a Flash RSS reader. Incidentally, I've created all of these in the last month, and all exhibit the structure that we'll see here.

Now is a good time to go ahead and download the necessary files so that you can follow along. The code archive below contains a Flash FLA file, an XML file, a CSS file and a PNG image:

 Download Partial Source

 
Inside the .fla
Once you open the navigation.fla file, you'll immediately notice how empty it looks. This file contains but 2 layers spanning 4 frames. Almost all my Flash 'creations' have a similar structure: typically no more than 5 frames and a handful of layers. If your Flash structure looks like the one shown in the image below, you're doing something wrong -- it's a good thing you're reading this article.

Let's start with a tip: Never use Scenes. Scenes can cause unexpected results from the playhead. The playhead doesn't really move from scene-to-scene gracefully. Depending on your Flash site, you may or may not notice this. But, if you're playing a music file and your playhead moves to another scene, you can witness problems as the song skips. For this reason, you won't find more than one scene in our file.

1 | 2 | 3 | 4 | 5 | 6 | 7