Flash: Enabling a browser's back button inside Flash
UPDATE: This post using ActionScript 1. If you need to use ActionScript 2, try reading this post.
I spent the last day or so working on enabling a browser's back (and consequently forward button) to navigate inside my company's website, MB2 test site (NOTE: back button may not work at test side do to debugging).
The Idea
The idea is that you have HTML pages load into a hidden frame. If you would like to see an example, check out NikeID.com. The browser's back button will work between sections of the all-Flash website, because a change in a hidden HTML frame will trigger a new entry in the browsers history. Then, the final trick is for the hidden HTML file to tell flash what page it is (1.html, 2.html, or 3.html) and change a variable inside the Flash movie that if changed will jump to the correct label (page1, page2, or page3) on the Flash movie's timeline. To view my example, visit this link.
On the Shoulders of . . .
After a Google search I found this ActionScript.org Tutorial by Chris Hendershot. He based his code on Robert Penner's script, Flash99good's, and MustardLab.Developer's. I was unable to find an ActionScript 2.0 version of this. If anyone know how to update this, please send an updated copy to me.
My Changes
As Chris mentions at ActionScript.org, Penner's script doesn't work in Safari, Mac IE 5, and Opera. My source files are a copy of Chris's, but I believe that I have made my comments and code inside the Flash file a little clearer, so that people will not have to understand 99% of the programming in order to produce a working browser back button. I also made the page variable change when a new "page" is loaded (inside flash) instead of when the navigation button is clicked to go to the new "page." This allows for animation between the "pages" (inside flash) which Chris's ActionScript did not allow. I also was unable to get my version to work in Mac IE 5.
A short description of files available to download:
To download or view the individual files, click here. The Flash file, "test.fla" is down saved to Flash MX 2004 format. A zipped archive, backbuttoninflash_SMJ.zip, of all the files can also be found in the same directory or downloaded here.
The following is a copy of the comments located in the first frame of "test.fla. Click here to view the comments.
Layer: checkPage Script
The script in this frame should go in the first frame of your movie.
Layer: page Script / labels
This is the ActionScript that changes the page variable and the HTML page
(1.html, 2.html, etc) that is loaded into the hidden frame, "historyframe" of
"index.html." The "page" labels (page1, page 2, etc) correspond to HTML pages named 1.html, 2.html, etc.
Layers: Current State/Label, variableDisplays, and FormLabels
These layers are for debugging/development purposes, so that you can see when the page variables change.
Layer: button Script
This square is present to click to go to and play the next secrion ("page") of the Flash movie.
Layer: onClipEventEnterFrameMovie
This rectangle is present to constantly check to see if the page variable has
changed. The rectangle has a movieclip script instead of a timeline frame script. It calls the function checkPage() which is on the checkPage Script layer. That function will constantly check to see if you are on the right page
(according to the JavaScript inside the HTML pages).
--Stephen M. James
http://www.smjdesign.com/
I spent the last day or so working on enabling a browser's back (and consequently forward button) to navigate inside my company's website, MB2 test site (NOTE: back button may not work at test side do to debugging).
The Idea
The idea is that you have HTML pages load into a hidden frame. If you would like to see an example, check out NikeID.com. The browser's back button will work between sections of the all-Flash website, because a change in a hidden HTML frame will trigger a new entry in the browsers history. Then, the final trick is for the hidden HTML file to tell flash what page it is (1.html, 2.html, or 3.html) and change a variable inside the Flash movie that if changed will jump to the correct label (page1, page2, or page3) on the Flash movie's timeline. To view my example, visit this link.
On the Shoulders of . . .
After a Google search I found this ActionScript.org Tutorial by Chris Hendershot. He based his code on Robert Penner's script, Flash99good's, and MustardLab.Developer's. I was unable to find an ActionScript 2.0 version of this. If anyone know how to update this, please send an updated copy to me.
My Changes
As Chris mentions at ActionScript.org, Penner's script doesn't work in Safari, Mac IE 5, and Opera. My source files are a copy of Chris's, but I believe that I have made my comments and code inside the Flash file a little clearer, so that people will not have to understand 99% of the programming in order to produce a working browser back button. I also made the page variable change when a new "page" is loaded (inside flash) instead of when the navigation button is clicked to go to the new "page." This allows for animation between the "pages" (inside flash) which Chris's ActionScript did not allow. I also was unable to get my version to work in Mac IE 5.
A short description of files available to download:
- 1.html - This is a file that is loaded into the hidden frame "historyframe" of "index.html" when ActionScript inside a frame labeled "page1" inside the flash file, "test.fla", calls a "getURL()" function
- 2.html - This is a file that is loaded into the hidden frame "historyframe" of "index.html" when ActionScript inside a frame labeled "page2" inside the flash file, "test.fla", calls a "getURL()" function
- 3.html - This is a file that is loaded into the hidden frame "historyframe" of "index.html" when ActionScript inside a frame labeled "page3" inside the flash file, "test.fla", calls a "getURL()" function
- 4.html - This is a file that is loaded into the hidden frame "historyframe" of "index.html" when ActionScript inside a frame labeled "page4" inside the flash file, "test.fla", calls a "getURL()" function
- MLAB_flash_setvariables.js - This is a JavaScript file that is included within flashpage.html contains functions that communicate with Flash (there is no reason to edit this file)
- flashpage.html - This is a page that loads the main flash movie (test.swf)
- gateway.fla - This is the source file for gateway.swf (there is no reason to edit this file)
- gateway.swf - This is a flash movie that contains functions that communicate with JavaScript.
- index.html - This is page that contains a frameset that has two frames, "historyframe" (for 1.html, 2.html, etc.) and "flashframe" (for flashpage.html)
- test.fla - This is the source file for test.swf that you will either need to copy ActionScript from or make the basis for your own flash movie.
- test.swf - This is the main flash movie.
To download or view the individual files, click here. The Flash file, "test.fla" is down saved to Flash MX 2004 format. A zipped archive, backbuttoninflash_SMJ.zip, of all the files can also be found in the same directory or downloaded here.
The following is a copy of the comments located in the first frame of "test.fla. Click here to view the comments.
Layer: checkPage Script
The script in this frame should go in the first frame of your movie.
Layer: page Script / labels
This is the ActionScript that changes the page variable and the HTML page
(1.html, 2.html, etc) that is loaded into the hidden frame, "historyframe" of
"index.html." The "page" labels (page1, page 2, etc) correspond to HTML pages named 1.html, 2.html, etc.
Layers: Current State/Label, variableDisplays, and FormLabels
These layers are for debugging/development purposes, so that you can see when the page variables change.
Layer: button Script
This square is present to click to go to and play the next secrion ("page") of the Flash movie.
Layer: onClipEventEnterFrameMovie
This rectangle is present to constantly check to see if the page variable has
changed. The rectangle has a movieclip script instead of a timeline frame script. It calls the function checkPage() which is on the checkPage Script layer. That function will constantly check to see if you are on the right page
(according to the JavaScript inside the HTML pages).
--Stephen M. James
http://www.smjdesign.com/
posted by Stephen M. James at 3/23/2006 03:21:00 PM
2 comments
