By Chris Hendershot (Designer and Flash Developer) www.chrishendershot.com

Purpose

The purpose of this tutorial is to show how to enable the back button on Flash enabled sites, in almost any browser and platform.

Demo

To view the back button in action, visit http://www.tm5150.com .

Introduction: Why the back button is important
When I think of the browser's back button I think of a security blanket. I know that I'm always one click away from my previous location. If I don't like what I see, I click my back button, and I'm safely returned to the previous page. If the website I'm viewing is 100% Flash driven, the back button usually doesn't work this way, therefore no security blanket, and now I feel helpless and scared (well not really), but I'm forced to learn and remember a new navigation technique. I don't want to. I've been using the back button for more than 8 years! Luckily I have years of experience with the web that I can figure out someone's ?hidden spinning navigation wheel of doom!? I also know that if I press the back button when surfing a Flash site, I will return to the previous page, thus unloading the Flash content, causing major frustration. From there, I may try again, or just leave their page and find some other site. The average web users might not have the same insight that I do with (poorly designed) navigational structures. If you confuse them, they may just leave, and not come back.

Flash & the Back Button

Web browsers don't automatically track the user's actions within Flash. Therefore the browser can't record the history of the user. This is because Flash elements are single movies embedded into HTML pages. All the actions are called within Flash, and only Flash. A very basic way around this problem is to separate your Flash sites into individual SWF's for each major section, then embed each one into their own HTML file. This is not recommended since it would take away the continuity of a Flash site and defeat a major value of using Flash in the first place.

So we need a way for Flash to trigger page changes, so that the browser can track the history of the user. How do we do this? Well a brilliant man by the name of Robert Pennerhas developed an awesome workaround that uses frames and a JavaScript function that sends variables to Flash. This works very well, except one problem: it only works on Internet Explorer 5+ on PCs. While this does cover the majority of the web population, statistics show over 30% of users are on different browsers or platforms. Statistics of visitors to our site ( TM5150 ) show that almost 50% are on browsers other than Internet Explorer for PC. Getting the back button to work for 50% of the users is good, but getting it to work for 99% of the users is BETTER!

I started to research why it doesn't work in other browsers. I quickly found out that the way JavaScript and Flash communicate is different on the other browsers. I then set out to find a workaround. Since our Mac's in-house use Safari, I started to search for articles about JavaScript and Flash communication on Safari. After a few searches on Google, I found a tutorial on MustardLab.Developer about JavaScript communication with Flash. This was the help I needed to get the back button to work with Safari and other browsers.

How I got it to Work

I read over the tutorial at MustardLab.Developer a few times, and downloaded the source files. I also had a version of the Flash 99% Good back button script setup and working. I now had to combine the MustardLab.Developer script with Robert Penner's script .

Pre-requisites

I recommend you study both tutorials before doing this one. You need to be familiar with how each one is set up to get this to work properly. This tutorial only covers combining the Robert Penner script with the MustardLab.Developer tutorial.

Source Files

Robert Penner script
Flash99good (from the Flash In The Can presentation):
MustardLab.Developer
My Source files

The How-To

First thing you need to do is edit flashframe.html from the Flash99good.com source files. Look for Robert Penner's script:

< script language = "JavaScript" >
//back button javascript, Flash actionscript provided by Robert Penner
//sourc[email protected]
function setPage ( newPage ) {
        //check if Flash object exists
        if ( window . document . mymovie ) {
                //set page variable in _root timeline of Flash movie
                window . document . mymovie . SetVariable ( "page" , newPage );
        }
}
</ script >

We are going to remove this JavaScript and replace it with the MustardLab.Developer JavaScript include file:

< script type = "text/javascript" src = "pathToScript" ></ script >

The src = "pathToScript" is the path to the .js file. If you have an include or a JavaScript directory you can path to it here.

The code looks like this:

< script type = "text/javascript" src = "MLAB_flash_setvariables.js" ></ script >

Now we need to modify the Flash embed code a little bit.

Our current embed code is:

< OBJECT classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase = http://download.macromedia.com/pub/shockwave/cabs/Flash/swflash.cab#version=5,0,0,0 WIDTH = 742 HEIGHT = 1500 id = "mymovie" >
< PARAM NAME = movie VALUE = "test.swf" >
< PARAM NAME = quality VALUE = high >
< PARAM NAME = menu VALUE = false >
< PARAM NAME = bgcolor VALUE = #999999 >
< EMBED src = "test.swf" quality = high bgcolor = #999999 width = 742 height = 1500 NAME = mymovie swLiveConnect = true TYPE = "application/x-shockwave-Flash" PLUGINSPAGE = "http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" >

First note the id name of your Flash movie. This gives the Flash element a unique name so that JavaScript can communicate with it. Now notice in the OBJECT tag, at the end is id = "mymovie" this is the id . You can change this to anything you want. I changed mine to main. Now look in the EMBED tag. The EMBED tag is the tag used to embed Flash on web browsers OTHER than Internet Explorer. The EMBED tag doesn't have an id attribute. It used the NAME = name attribute. Make sure that you change the name attribute to the same name as the id attribute in the OBJECT tag. Now JavaScript knows who to talk to.

Next we need to add an additional PARAM tag to the Flash embed code. Add a new line after the last PARAM tag and before the EMBED tag.

On the new line put:

< PARAM NAME = "FlashVars" VALUE = "movieid=mymovie" >

Make sure movieid= the id you gave Flash. Now one last edit to the EMBED tag and we should be set.

After:

PLUGINSPAGE = "http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"


Add:

FlashVars = "movieid=mymovie"


The EMBED tag should now look like:

< EMBED src = "test.swf" quality = high bgcolor = #999999 width = 742 height = 1500 NAME = mymovie swLiveConnect = true TYPE = "application/x-shockwave-Flash" PLUGINSPAGE = "http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" FlashVars = "movieid=mymovie" >< /EMBED >

Now that that is done, we need to change all the numbered frame pages (i.e. 1.html , 2.html , etc.) to call the right function. This is important because they are trying to call Robert's setPage () ; JS function. We need to change this to call the new MustardLab.Developer function that is in the MLAB_flash_setvariables.js file. If you open up the MLAB_flash_setvariables.js in your editor you use, you'll notice there is a function called setFlashVariables (); This is the function we want to call from each frame page. So open up 1.html.

In your editor and find the javascript:

< script language = "JavaScript" >
parent . flashframe . setPage ( 1 );
</ script >

parent . flashframe is the path to the setPage () ; function. 1 is the variable passed to the function that tells Flash which page it's on. Since there is no longer a setPage () ; function we need to change setPage ( 1 ) to the new function setFlashVariables ( 'movieid' , 'page=newPage' );

Now setFlashVariables (); has 2 parameters that need to be passed to the function. The first being the 'movieid' . The movie id is used to tell JavaScript which Flash movie to talk to. This is very helpful if you have multiple Flash movies embedded on one page, and want to communicate to each one differently. Since we are dealing with one Flash movie at the moment, you just set movieid to mymovie, since mymovie is the id name of the Flash movie.

The next parameter, 'page=newPage' is the string to tell Flash which page just loaded in the historyframe. This is the same as Roberts's script, except it is passed differently.

Since we have 1.html open, we want to set this parameter to tell Flash that page=1 . For 2.html we would set it to page=2 , and so on for the other pages.

So the script in 1.html should now read:

< script language = "JavaScript" >
parent . flashframe . setFlashVariables ( 'mymovie' , 'page=1' );
</ script >

Now go ahead and edit the other frame pages, and change the script, but changing page=1 to page=2 for 2.html and so forth.

Okay, that should be it for the actual JavaScript portion of the script.

Now we need to do a couple things in Flash. So open up test.fla in Flash.

In the first frame on the "action" layer in Flash we need to add a line of code to include the external Actionscript file that is within the MustardLab.Developer source files.

So in the ActionScript editor put:

# include "MLAB_flash_setvariables.as"

When published, Flash will include the code from this file into the first frame of the Flash movie. The MustardLab.Developer tutorial explains in detail what this is for. We just need to make sure it is published with our movie.

Publish the file, and open index.html in your browser to make sure it works.

NOTE. If you're receiving a JavaScript error, it's because that script is trying to talk to Flash before Flash is fully loaded. What I did to fix this problem was open the index.html page and edit the frameset code to load a blank page in the historyframe. In my Flash file I call getURL ("1.html","historyframe"); when the Flash file is done loading, i.e., after the Preloader if you have one in your current movie.

Conclusion

There is now no excuse not to enable the back button within Flash. If you just take some time when developing your Flash driven sites, and you work this script into your arcitecture, then you can please your clients, and their audiences.

If you have any questions or comments feel free to contact me.


By Chris Hendershot (Designer and Flash Developer) www.chrishendershot.com