The Best Structure for your Flash Site

By Mark Angeletti

___________________________________________

Mark Angeletti

Mark runs Search-This.com, a resource site for Internet marketing and web development. He also enjoys talking about faith, music, and all things web-related on his blog, What a Savage.

Mark Angeletti has written 4 articles for SitePoint with an average reader rating of 8.

View all articles by Mark Angeletti...

___________________________________________

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 changes in future, 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. That code archive contains a Flash FLA file, an XML file, a CSS file and a PNG image.

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.

Let's examine each frame one by one.

Frame 1

Frame 1 is always -- and only -- used for setting global variables. This works well, as the playhead hits this frame first, sets our globals and moves on to the next frame. We never return to frame 1, ever. It's important always to control the Flash playhead and know where it's located at all times. Now, let's look at the code:

var xmlFile:String = "navigation.xml";
var cssFile:String = "navigation.css";
var nCounter:Number = 0;
var yPosition:Number = 0;
var nTotalButtons:Number = 0;

var astrImages:Array = new Array();
var astrText:Array = new Array();
var astrLinks:Array = new Array();

var image_mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();

// Formats our textField
var my_css = new TextField.StyleSheet();

// fun with filters (new in Flash 8)
import flash.filters.DropShadowFilter;
var distance:Number = 2;
var angleInDegrees:Number = 45;
var color:Number = 0x000000;
var alpha:Number = .8;
var blurX:Number = 2;
var blurY:Number = 2;
var strength:Number = 1;
var quality:Number = 3;
var inner:Boolean = false;
var knockout:Boolean = false;
var hideObject:Boolean = false;

var filter:DropShadowFilter = new DropShadowFilter(distance, angleInDegrees, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
var filterArray:Array = new Array();
filterArray.push(filter);

Here we see our global variables: some strings, some numbers, and some arrays -- your typical variables. But, wait. Some not-so-typical variables are also present: a MovieClipLoader, a StyleSheet and a Filter.

The MovieClipLoader class allows us to implement listener callbacks that provide status information while SWF, JPEG, GIF, and PNG files are being loaded into movie clips. This is a lot handier than the dated loadMovie() class, which failed to provide us with any information on how much of our file had already been downloaded. We'll use the MovieClipLoader class later to load our button image.

The StyleSheet class lets you create a StyleSheet object that contains text formatting rules for font size, color, and other styles. We'll use this StyleSheet in frame 4 to format the text on our navigation buttons.

Filters are new to Flash 8; they allow us to add some cool effects to our objects. For example, we can apply drop shadows, blurs, glows and bevels to objects. We'll apply the drop shadow filter to our text field later. Some will say, "Big deal. If I want a drop shadow I could use Photoshop or Fireworks for that." You could, but then your text would no longer be dynamic, as ours is.

Keep in mind that all the components that make up our Flash site don't reside in Flash. Perhaps I should have used an exclamation point instead of a period for that last sentence? Let me say it again, "All the components that make up our Flash site don't reside in Flash!" This approach allows for easy modification later. If, for example, I no longer like the image chosen for my buttons and I want to swap it out, that's no problem. Or maybe I want to have the button say something different, or perhaps I want to add or remove a button later. Neither will be a problem; in fact, I won't even have to open Flash to make these changes. That's very handy indeed, especially when you're creating a project for someone who doesn't have Flash, or much in the way of technical knowledge.

Before we move on to frame 2, notice our 3 arrays. These arrays will store the data for our buttons. Once our XML file has been parsed successfully, each array will be filled in with the proper data. This happens in frame 2.

Frame 2

To recap, what was the main purpose of frame 1? If you said, "Global variables", you get a gold star. If not, run down to Starbucks and get some coffee and come back.

The main purpose of frame 2 is to gather external data -- typically, literal files in the form of XML. If you haven't looked at our navigation XML file, this would be a good time to do so. This article is not intended to teach you XML, so just take a look at the structure and what's in there. We have a total of 4 buttons; each button is assigned an image, some text and a link.

A note to all you non-Flash 8 users: you won't be able to use a PNG image. You'll have to use the provided JPEG image and make the changes in the XML file. Previous versions of Flash are only able to load JPEG files.

Now, let's look at the code in frame 2. I'll break it down as we go.

var xmlData:XML = new XML();

We start by instantiating a new XML object and call it xmlData. The XML object contains all the methods and properties we will need in order to work with XML data in Flash.

xmlData.ignoreWhite = true;

Flash will read all spacing contained within the XML file, including empty text nodes. As this is not the desired result, we simply tell Flash to ignore white space.

xmlData.load( xmlFile );

This line loads an XML document from the specified URL. Remember, xmlFile was declared in frame 1 and set to "navigation.xml." Because our FLA file resides in the same directory as our XML file, we need only give the name. Had our XML file been located in a directory other than the one that houses our FLA file, we'd have included a relative path.

The load process is asynchronous; it does not finish immediately after the load() method is executed. When the load() method is executed, the XML object property loaded is set to false. When the XML data finishes downloading, the loaded property is set to true, and the onLoad event handler is invoked.

xmlData.onLoad = loadXML;

Here we set the onLoad event handler to call our function loadXML. Let's look at the function:

function loadXML(loaded) {
if (loaded) {
var xnRootNode:XMLNode = this;
trace( xnRootNode );
// number on buttons
nTotalButtons = xnRootNode.firstChild.childNodes.length;
// fill arrays
for (var i = 0; i astrImages.push(xnRootNode.firstChild.childNodes[i]
.childNodes[0].firstChild.nodeValue);
astrText.push(xnRootNode.firstChild.childNodes[i]
.childNodes[1].firstChild.nodeValue);
astrLinks.push(xnRootNode.firstChild.childNodes[i]
.childNodes[2].firstChild.nodeValue);
}
//everthing is loaded; we can move on
gotoAndStop(3);
}

This function runs only when the XML file has finished downloading and the loaded property is set to true.

If the XML file has completed loading, we execute the following code:

var xnRootNode:XMLNode = this;

We create an XML node variable (xnRootNode) and set it equal to this; this being the XML data that was just loaded.

nTotalButtons = xnRootNode.firstChild.childNodes.length;

At this point we need to talk about searching our XML to locate the values we need. This is a good time to revisit our navigation XML file.








In order to retrieve values from an XML file, we step through the family tree until you find the desired value. So in our code, xnRootNode.firstChild.childNodes.length;, the first child, is

and it has 4 child nodes -- you guessed it, they're our 4