This is actually an old version of danielmall.com. For the latest and greatest, check out the new site.
 

Flash Course 4: Smarter Current States

Here’s a quick note about improving navigation in your Flash movies: make sure the user can easily tell where they are within your site by your navigation. You’ll find a couple of quick tips as to how you can enhance a barebones Flash navigation into a “You are here” roadmap.

Consider the following navigation:

 

Although there are much more efficient ways to code this, the code has been simplified for the sake of instruction. Here is the code that drives the navigation (same for every clip):


_root.nav1.onRollOver = function(){
this.gotoAndStop("over");
}

_root.nav1.onRollOut = function(){
this.gotoAndStop("up");
}

_root.nav1.onRelease = function(){
_root.gotoAndPlay("section1");
}

Technically, it works well enough to show users what section they’re in. However, there are definitely some areas that can be improved on:

Let’s revisit this a bit:

 

It’s getting there. Here’s what’s been added (shown in bold for distinction):


var currentSection:MovieClip = _root.nav1;
currentSection.gotoAndStop("current");


_root.nav1.onRollOver = function(){
if(currentSection != this){
this.gotoAndStop("over");
}
}

_root.nav1.onRollOut = function(){
if(currentSection != this){
this.gotoAndStop("up");
}
}

_root.nav1.onRelease = function(){
if(currentSection != this){
_root.gotoAndPlay("section1");
this.gotoAndStop("current");
currentSection.gotoAndStop("up");
currentSection = this;

}
}

Now, the user has a reference point within the navigation. Without going into a detailed description about variables, data typing, or conditionals, the basic logic of the added code is that it always tracks the current nav item. When a nav item is clicked, Flash checks to see if it is already the current section. If it is, there is no action. If it is not, Flash will make it the current section and deactivate the previous current section. This effectively gets rid of the ability to refresh the section that is already the current page.

However, one more improvement can be made. On the web, users are accustomed to a set of conventions. One major online convention is the link-feedback standard. When a user hovers over an clickable item, the cursor will change to a hand, providing the user with the feedback that she can interact with the item. By upsetting this precept, the user can become confused and even frustrated at times.

One last pass should clean things up:

 

Here’s what has been added:


_root.nav1.onRollOver = function(){
if(currentSection != this){
this.gotoAndStop("over");
this.useHandCursor = true;
}else{
this.useHandCursor = false;
}

}

While Flash still treats the current nav item as a clickable instance, the user will believe that the link is deactivated because of the lack of response on hover and on click, and she will treat it as any other non-clickable interface element.

There are many ways to accomplish things like this, but the important part is to pay attention to the smaller details to ensure that the user’s experience is being augmented by every decision that you make.

Comments

Sorry: comments are closed.