Practically every Flash site that I visit follows the same pattern: full-window Flash movie, lengthy preloader and some introductory animation, culminating in an all-Flash interface. The idea of foregoing regular HTML in favour of 100% Flash pages started about three years ago, and unfortunately, it caught on. They aren't easy to bookmark and they don't make the best use of the browser.

Favourites and bookmarks are fundamental browser features, yet single-page Flash sites don't support them properly; the only thing that can be bookmarked is the entry page.
As Flash's text-handling and data features have improved, a great many developers have ditched HTML text altogether and gone for SWF sites. This is fine for novel or experimental work, but it is not advisable for anything mainstream. Sites that mix HTML and Flash are faster and more user-friendly.

Featured site: emerils.com

Emeril Lagasse is a world-renowned chef, and his Web site http://www.emerils.com/ illustrates how Flash can be used to add to a page. It's the kind of thing that you'd do with dynamic HTML if it wasn't so finicky to use.

The body text (recipes, restaurant descriptions, a biography and so on) is all displayed with HTML, but on each page there is an animated Flash menu.

The Emerils menu seems to "know" which page you're currently viewing and it displays the title and highlights the current section. The developers kludged this by manually creating a new movie for each page, which is not the way we would do it at the Flash Workshop. So, I'm going to show you how to make a menu that does the same thing with one SWF file and a bit of ActionScript magic.

How to make it
I built an example of my own using assets from the fictional company AskPad Inc, maker of the amazing yet even more fictional AskPad device. You can find all the source files on disc 1 of this month's CD set.

The problem with Flash menus recurring over several pages is that they don't remember. Normally, you'd either have to make the menu exactly the same in all cases or export unique versions for every page.

The first option is not usually acceptable, because you want to provide some visual feedback about where the user is. And exporting multiple different versions will get messy for a site bigger than a few pages.

An swf for multiple pages

In my example site, I generated three HTML pages: index.html, who.html and where.html. Each page features the menu SWF at the top, with "designer's text" filling the remainder. If you're ever in need of a good lorem ipsum generator (a tool that generates dummy text to fill space), I recommend www.subterrane.com/loremipsum.shtml.

Embedding data in a file path

The trick that I've used here is to embed some additional data into the HTML. Usually, images and Flash files are simply added to the HTML with their filename, for example:

<embed src="movie.swf">

However, did you know that you can feed variables into your Flash file just by adding them to the file path? Here I will add a variable x and make it equal to 100:

<embed src="movie.swf?x=100">

Using this technique, you can pass all sorts of data into Flash Player, whether it be static (typed by hand) or dynamically generated by a server-side script. For the menu example, a variable PageName has been added to clue the movie in on which is the current page.

Where the data goes
Any data passed in this way appears in the main timeline (_root or _level0 for multi-level movies), and is available before the first frame plays. So you can always be sure that the information is there straight away, with no timing hassles. The variables take on the exact same name you write into the URL, for instance "movie.swf?x=100" produces a variable _root.x.

Checking the data against an array

Now, in order for the data being passed in to actually mean anything, there needs to be some kind of checking mechanism inside the menu movie itself. In this example, I created an ActionScript array named Pages to store the three different filenames used to make up the site.

Pages = new Array();
Pages[0] = "index.html";
Pages[1] = "who.html";
Pages[2] = "where.html";

Notice that array elements are numbered beginning with 0, rather than 1. This is important to remember when using the length property of an array object, because even if the length is 3, the index of the last element will still only be 2 (since the first is 0).

Along with the array, the following script is located on the first keyframe of the movie:

for (Counter = 0; Counter < Pages.length; Counter ++) {
if (PageName == Pages[Counter]) {
SectionTitles.gotoAndStop(Counter + 1);
SectionIndicator.gotoAndStop(Counter + 1);
break;
}
}

The idea is to take the PageName value being passed in via the HTML file, and compare it to each of the elements in the Pages array. The current page should match one of the filenames, so the movie can display the appropriate visual information.

Using script to display Movie Clip "states"

When the loop arrives at a matching set of PageName and Pages[Counter] values, it uses the gotoAndStop() method of two movie clips, forcing them to display frames that contain visuals specific to this page. SectionTitles contains title graphics for each page: the AskPad logo, a Who? graphic and a Where? graphic. SectionIndicator contains three coloured thumbs, corresponding to the menu buttons.

Because the Counter variable is the index of the current element in the Pages array, it needs to be altered prior to being fed into the gotoAndStop() action. Remember, arrays are numbered from zero, but frames are numbered from 1. So, gotoAndStop(Counter + 1) solves the mismatch.

Easy rollover buttons

At this point, the menu movie accurately detects what page it is being used on, and displays the correct title and section indicator. The final step is to add the menu buttons.
Looking back at Emerils.com, each button triggers a description of the corresponding page when the mouse is rolled over it. I wanted to achieve the same effect, but without resorting to more complicated movie clip setups. So, in my example I used regular button symbols, but if you take a look inside you'll discover something extra in the Over and Down states.

Nesting extra graphics in this way is great for quick rollover effects, especially when animation is not required.

Putting it all together

With the buttons and page indicators in place, the effect is complete. Hand-coded solutions such as this scale nicely for sites containing up to about 25 individual pages. Any more than that, and you should consider a database-driven solution such as ColdFusion or Generator.

Stop() right there!

Both the SectionTitles and SectionIndicator movie clips are being used like slideshows -- sets of frames that can be displayed at will. But the default behaviour of a movie clip in Flash is to loop, so you have to prevent that from happening manually, otherwise the effects will be messed up.

To stop a movie clip from looping, select the first keyframe and open the Actions panel. Add a simple stop() action, and you're set. Often it helps to clear that first keyframe if you're using it to display various graphics. In my example, the first frames hold the default page information, so there's no need to clear them out.

Remember instance names

It's easy to overlook, but movie clip instances need to be named using the Instance panel if they are to be addressable in ActionScript. Without an instance name, a movie clip will still work just the same internally, but you can't control it or store variables in it from the outside.