Recipe 21.6. Integrating Flash with the Browser Back Button

Problem

You want your Flash application to work with the browser back button.

Solution

Use a frameset with a hidden SWF that uses LocalConnection to communicate with the main SWF.

Discussion

One of the major usability drawbacks with Flash in a web browser is that by default it doesn't integrate with the browser back button. People are used to clicking the back button on the browser to navigate back through a web site or application. However, normally when a user clicks on the back button when a Flash application is running in the browser, it causes the browser to return to the HTML page that was open prior to the Flash application. Even if the user was navigating through the Flash application for the past hour, the default behavior of the back button causes the browser to jump out of the Flash application entirely. That can cause users to feel frustrated, particularly if the application doesn't have a way of remembering the state, so that the user has to start over again when clicking the forward button to return to the Flash application.

Although there is a feature in Flash called Anchors that is supposed to correct the issue with the back button, the feature does not work with most browsers, and it appears to have been deprecated in Flash 8. However, with a little work, it is possible to build a Flash application that works with the browser back button in every browser. This approach requires the following:

• A navigator .swf file and the .html file within which the content is embedded. The navigator SWF does not need any artwork because it is hidden from the user.

• A frameset HTML page that has two frames. One frame adds the navigator SWF such that it is hidden. One frame displays the main content.

• A main .swf file and the .html file within which the content is embedded.

• The main SWF must define a LocalConnection object that listens for navigation commands.

• The navigation commands within the main SWF must use getURL( ) to load the navigator SWF in a hidden frame with parameters passed to indicate the navigation command.

The way it works is that the main SWF listens for navigation commands from the navigator .swf. Every time the user navigates through the main SWF, it calls getURL( ) to load the navigation HTML page in the hidden frame, and it passes the navigator a parameter or parameters specifying the navigation commands. For example, when the user clicks on a button in the main SWF, it might call the following code:

	getURL("navigator.html?frame=2", "navigator");

The preceding code tells the browser to load navigator.html in a frame called navigator. Presumably. the navigator frame is hidden. When navigator.html is loaded, it is passed a query string of frame=2. The HTML page then passes the parameters along to the navigator SWF. The navigator SWF then uses LocalConnection to call a function within the main SWF, and it passes that function the navigation commands. That way a new (hidden) page is loaded each time the user navigates through the main SWF. And when the user clicks the back button, the hidden page gets loaded again with the navigation parameters from the browser history list. That means that the back button can effectively manage the navigation of the main SWF.

Let's consider a specific example. In the following example, a main SWF has four movie clip buttons and four frames. The four movie clips are called mA, mB, mC, and mD. When the user clicks the buttons, Flash jumps to a specified frame on the main timeline. For example, when the user clicks on mA, it jumps to frame 1, and when the user clicks on mB, it jumps to frame 2. The application requires the following code on the first keyframe of the main timeline:

	// Only run the following code once. If lcNavigator is defined then the code was
	already run, so
	// don't run it again.
	if(lcNavigator == undefined) {

	  // The LocalConnection object, lcNavigator, is the way in which the main SWF can
	listen
	// for commands from the navigator SWF. In this case it's listening for messages sent
	  // over a channel called _navigation. That means that the navigator SWF must send
	the messages
	  // using the same channel.
	  var lcNavigator:LocalConnection = new LocalConnection();
	  lcNavigator.connect("_navigation");

	  // Define a method called navigate() that expects one parameter specifying the frame 
number to
	  // which to navigate. The navigate() method name (exp 3pod.com) is arbitrary, but the navigator
SWF must know
	  // the name (exp 3pod.com) of the method so it can call the method in order to send the navigation
	  // instructions.
	  lcNavigator.navigate = function(nFrame:Number):Void {
	    gotoAndStop(nFrame);
	  };

	  // Define event handler methods for the movie clip buttons. In each case call getURL() 
such that
	  // BackButtonNavigator.html gets loaded into the navigator frame with a query 
string specifying
	  // the frame number to which to jump.
	  mA.onPress = function():Void {
	    getURL("BackButtonNavigator.html?frame=1", "navigator");
	  };
	  mB.onPress = function():Void {
	    getURL("BackButtonNavigator.html?frame=2", "navigator");
	  };
	  mC.onPress = function():Void {
	    getURL("BackButtonNavigator.html?frame=3", "navigator");
	  };
	  mD.onPress = function():Void {
	    getURL("BackButtonNavigator.html?frame=4", "navigator");
	};

	// Tell the timeline to stop.
	  stop();
	}

For the purposes of this example, we'll assume that the main SWF is embedded in an HTML document called BackButtonMain.html using standard HTML <object> and <embed> tags as discussed previously in this chapter.

The navigator SWF is very simple. It simply calls the navigate( ) method of the main SWF by way of LocalConnection. It passes the method the frame number that it retrieves using flashvars. The code for the navigator Flash document is as follows:

	var lcNavigator:LocalConnection = new LocalConnection();
	lcNavigator.send("_navigation", "navigate", frame);

The HTML for the navigator is slightly unconventional, because it must use JavaScript to pass the data from the query string to the SWF via flashvars. Assuming that the .swf file is called BackButtonNavigator.swf, the code for the HTML looks like the following:

	<html>
	<body bgcolor="#ffffff">
	<script language="JavaScript">

	// Define a variable that contains the <object> and <embed> tag text. This is
	necessary because
	// part of the code must be dynamically determined from the query string.
	var html = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
	codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.
	cab#version=8,0,0,0" width="550" height="400" id="BackButtonNavigator"
	align="middle">';
	html += '<param name (exp 3pod.com)="allowScriptAccess" value="sameDomain" />';
	html += '<param name (exp 3pod.com)="movie" value="BackButtonNavigator.swf" />';
	html += '<param name (exp 3pod.com)="quality" value="high" />';
	html += '<param name (exp 3pod.com)="bgcolor" value="#ffffff" />';

	// The following adds a flashvars parameter that has a value such as frame=1 or
	frame=2
	html += '<param name (exp 3pod.com)="flashvars" value="' + location.search.substring(1) + '" />';
	// The  
following <embed> tag string also uses location.search to retrieve the query
	string value
	// and assign it to the flashvars attribute.
	html += '<embed src="BackButtonNavigator.swf" quality="high" bgcolor="#ffffff"
	width="550" height="400" name (exp 3pod.com)="BackButtonNavigator" align="middle"
	allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
	pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="' + location.
	search.substring(1) + '" />';
	html += '</object>';

	// Write the code to the document.
	document.write(html);
	</script>
	</body>
	</html>

Assuming that the preceding HTML page is called BackButtonNavigator.html, the frameset HTML looks like the following:

	<html>
	  <frameset rows="0,*" frameborder="0">
	    <frame name (exp 3pod.com)="navigator" src="BackButtonNavigator.html" />
	    <frame name (exp 3pod.com)="main" src="BackButtonMain.html" />
	  <frameset>
	</html>

Notice that the navigator frame has a height of 0, which effectively hides that frame.