If you are targeting Flash Player 8 and above I suggest checking out SWFAddress, it's a much better solution! :)
Introduction:
In the quest for better Flash usability in the browser, there have been some good articles written by some talented Flash developers to tackle the various issues associated with it. Two of the major problems have been the ability to 'deep link' or bookmark a certain state within a Flash application, and the ability to use the browser back and forward buttons to navigate between states of a Flash application. While both of the issues have been dealt with separately, integrating the two into one working solution has been a sort of 'Holy Grail' for Flash developers. The following technique aims to solve this problem by combining Kevin Lynch's BrowserStateManager and Mike Chamber's Pet Market Back Button technique into a simple solution that works across all major browsers and platforms.Click here for browser compatibility table
An overview of the process:
When the page first loads, javascript in the frameset grabs the document.URL and parses it to get a value for the "subswf.html" variable for the initial loading. If there is no initial variable (in the url), then one is created ("?mode=home") that sets the default state to 'home' for the hidden frame. This works in conjunction with the main content page and theBrowserFrameStateManager, which also pulls the frameset URL to set the initial 'stageIndex' variable.It is the
BrowserFrameStateManager that creates the initial state with the "subswf.html" page acting to ensure that it keeps that correct state when everything is finished loading and the first LocalConnection event is sent. As the application state is changed, the 'stageIndex' variable (in the main flash movie) is set with a new value and a backFunction() is called. This function sends a call to the hidden frame with the current 'stageIndex' variable attached to it. The browser records this page, along with the variable in the browser history table. When the back button is used, a LocalConnection event is called, which checks the variable (gotoState()) from the subswf.html page to the current stageIndex, if they are different, the stageIndex is changed and a showCurrentState() function is called which changes the state of the flash movie.
1. Stateful Linking The first thing is to become familiar with Kevin Lynch's Stateful Linking technique. His
BrowserStateManager class has been slightly modified (and re-named "BrowserFrameStateManager") so that it works with the frameset that is required by the back button technique. This was partly done by creating two new functions (setFrameValue() and getFrameValue()) that reference the frameset , as well as some code to parse the 'initialFrameURL' that is passed by the FlashVars. (*note: Kevin's original code has been left intact, with the frameset code just being added to it.. this class could be re-written for efficiency and clarity...) Basically, this class is being used only when the application first loads. It gets the URL of the frameset to determine what the initial state of the application should be and sets a value for the variable "demoID", which is then used to set the stageIndex (the variable that the state is created from).
// set up initial state
var demoID = browserState.getFrameValue("demoID");
var stageIndex:String = demoID;
After this point the BrowserFrameStateManager is no longer needed. Alternatively, it could be used to change the title of the frameset after each state change(this code was included in the example). Unfortunately the URL string cannot be changed in a frameset, as it automatically refreshes the page.
2. Bookmarking
When using IE, the 'link to this page' function directly opens the Add To Favorites window, otherwise the bookmarking feature is similar to the Google Maps technique, whereas the link refreshes the frameset with the stateful URL which can then be bookmarked for later use.
3. The Back Button The technique used for enabling the browser navigation is a simplified version of the one featured in Mike Chamber's Developer Center article on the Pet Market back button. It uses hidden frames and LocalConnection and essentially works in the same way. Although no History Object is being used for this example, there should be no reason why one can't be implemented. A thorough overview of Mike's article is highly recommended.
Some notes:
"DLBB_demo.html"This is the frameset that contains content page and hidden frame. To ensure that the hidden frame doesn't interfere with the stateful links when the page is loaded, the URL of the subswf.html page needed to be dynamically set based on the URL in the browser window. This was done by adding a bit of javascript to parse the URL:
<SCRIPT language="JavaScript">
s = new String(document.URL);
s = s.replace(/#/g,"?");
s = s.replace(/demoID/g,"mode");
var f_str = s.substring(s.indexOf("?"), s.length);
if(f_str.length > 15){
f_str = "?mode=Home"
}
</SCRIPT>
which the variable 'f_str' is appended to the hidden frame src:
<FRAME name="_bottom" scrolling="NO" noresize src="subswf.html"'+f_str+'>
"subswf.html"
This is the page for the hidden frameset. It remains unchanged from the Pet Market example.
"subswf.as"
This is actionscript for the hidden frame. It remains unchanged from the Pet Market example, except for a few lines that were not needed and have been commented out.
"main.html"
This page holds the main flash movie with javascript functions for changing the title of the frameset. Also, an additional FlashVars was added for the 'initialFrameState' variable. With the .swf being put inside a <div> named 'flashid', it allows easy integration with MLAB's flash resize technique. * updated to use Geoff Stearns' FlashObject to embed flash file.
"DLBB_demo.as"
This file contains the actionscript for the main movie.
"BrowserFrameStateManager.as"
Kevin's original class modified to work with the frameset and re-named to differentiate it. All modified code can be identified by the word 'frame' that has been added to the naming convention.
Download the source files
Disclaimer: There may be a better way to do any of the above. Suggestions, optimizations, and corrections are welcomed and encouraged. Contact me.
resources:
http://blog.deconcept.com/flashobject/
http://www.robertpenner.com/index2.html
http://www.klynch.com/apps/flashlinking/
http://www.macromedia.com/devnet/blueprint/
http://www.actionscripts.org/tutorials/intermediate/Enabling_a_back_button_within_flash/index.shtml
Another implementation of deep link/ back button integration
http://www.unfocus.com/Projects/FlashSuite/
Another implementation of deep link/ back button integration
http://blixt.gotdns.com/blixt/getDownload.php?id=3