By: Nathan Smith Flash Designer Creative Forces.

Also see this tutorial at My Creative Collective 

Purpose:
This has been out for awhile now, but I haven't seen a lot of tutorials showing how to implement it. This tutorial uses the unFocus History Keeper to add back button functionality to your flash sites. The unFocus History Keeper is great because it doesn't use frames like one of the most used methods created by Robert Penner.

Demo & Introduction:
You can view this in action here. Personally, I don't know how many times I have been asked why the back buttons don't work in the all flash site I have just created for a client. With this being said I really like this method because it works in most common browsers out there right now and with the popularity of Fire Fox growing everyday, this is a definite benefit.

How I came across the concept:
I first saw this was an option after it was posted on flash99good.com. After looking into it more, I noticed that no one really had any idea how to make it work at first. In come the great people on the forums at the unFocus history keeper site who eventually worked the problem out.

Before you start:
First download the source files

Using the unFocus History Keeper:
Fist thing you need to do is copy the JavaScript folder into the root of your site. After this, start a new .fla and create two layers. Name the first layer: Back AS and the second one: Player Type. Next, insert the following code into the Back AS layer:

import flash.external.ExternalInterface;
_root.watch('unFocusHistoryUpdate', function(propName, oldValue, newValue) {
query_string_txt.text = propName + " || " + oldValue + " || " + newValue;
trace('watch: '+ newValue);
if (newValue == '') newValue = 'Home';
gotoAndStop(newValue);
// reset the document title (set here so that it maintains
// the title even from a history recall)
ExternalInterface.call('History_setTitle', newValue);
return newValue;
});
_root.gotoNewSection = function (newSection) {
trace('gotoNewSection called');
// first add the history
ExternalInterface.call('History_addHistory', newSection);
// now update the state, otherwise the title gets messed up in the history
_root.unFocusHistoryUpdate = newSection;
ExternalInterface.call('History_setTitle', newSection);
}
if (typeof _root.unFocusHistoryUpdate == 'undefined') {
_root.unFocusHistoryUpdate = 'Home';
}
gotoAndStop(_root.unFocusHistoryUpdate);

We want to put this code into the Player type layer:

_root.playerType = System.capabilities.playerType;

Now create another layer named labels and go to frame 15 and press F5. Separate this layer into three sections by clicking on frame 5 and hitting F6, do the same for frame 10.

After you have done this, give each section a frame label. The first should be Home, the second About and the third Contact. Make sure you capitalize the first letter of the labels. Here is a screenshot of what it should look like:



In the .fla create another layer and label it buttons. Once you have done this, create three buttons, naming them whatever you want. On the Home button you want to insert this code:

on (release) {
_root.gotoNewSection('Home');
}

Add the same code to the other two buttons, but change the 'Home" to About or Contact. Now you want to create another layer named content. Separate this layer into three sections like you did for the labels layer. In each section add some content, it can be anything you want for this example. Now that's it for the Flash side of things.

Copy the index.html file into your project folder and open it up in your favorite code editor, such as Dreamweaver or even Notepad will do. Scroll down until you see this code:

with (unFocus.Flash) {
if (Player.getVersion() >= 6) {
// output flash html
testHTML = new HTML();
testHTML.setSrc("test.swf");
testHTML.setWidth(930);
testHTML.setHeight(585);
testHTML.setId('testSwf');
testHTML.setName('testSwf');
testHTML.setSwliveconnect(true);
testHTML.setMenu(false);
testHTML.setQuality('high');
testHTML.setScale('noscale');
testHTML.setAllowscriptaccess('always');
testHTML.setPlay(true);

Find this line:

testHTML.setSrc("test.swf");

Replace test.swf with the name of your .swf. Now change the width, height and other settings according to match your .swf file. Save your file and upload the index.html, your .swf and the JavaScript folder to a directory on your webserver.

That's it; you should be ready to go.

Nathan Smith-
CREATIVE FORCES
http://www.thecreativeforces.com
http://www.mycreativecollective.com