Flash Tutorials: The Browser Back Button

Home • Members Tutorials Forum iSnapChat Contact Us 


Flash Tutorials


Tutorial - Browser Back Buttons used with Flash

Free Flash Tutorial


In this tutorial you will learn how to integrate the Browser's Back and Forward buttons to navigate through your Flash Movie. People are use to the browser's back and forward buttons. This enables them to navigate through your Flash Movie just like any other web site. So if you incorporate this into your site it makes your Movies easier to navigate and users to feel familiar with the navigation system. Even if they have not mastered your (very clear and well designed??) navigation system they can still move back and forth with ease.


Example: Download the Flash file Int 137a

Click of few buttons, then click the back button and it will move back to the last thing you clicked, then the option before that and so on.
You can also click the forward button to move forward to.

Back & Forward buttons in the Browser.

Note: This method works in Netscape 7.1, Mozzila fire fox 1.0 and Microsoft Internet Explorer 6.0 service pack 2 but not Opera 7.54

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

Step One: Creating the Buttons

  1. Open up a: Flash Movie
  2. Place on the Main Stage a set of: 6 Buttons
  3. Select the first button and place the following code:
  4. on (press) {
       // Call the java script command on the web page
       getURL("1.html", "history frame");
       // Set the page number
       _root.page = 1;
       // Tell the movie clip where to go to and stop in the time line

  5. Place the same code on each of the other buttons but change ALL the values 1 to 2 for the second button and to 3 for the third button etc.
  6. Code for the second button:

    on (press) {
       // Call the java script command on the web page
       getURL("2.html", "history frame");
       // Set the page number
       _root.page = 2;
       // Tell the movie clip where to go to and stop in the time line

Step Two: Creating the Movie Content

  1. Create a new Symbol: Insert > New Symbol (Ctrl F8)
  2. Give it a name: Movie
  3. Select: Movie Clip
  4. Click: OK

  5. Inside that movie clip create a text box with the word: Page 1
  6. Insert a key frame on frame 10 and change the word to: Page 2
  7. Do the same for every 10 frames until you reach: Page 6
  8. Add a new: Layer
  9. Add a key frame followed by stop commands to every: 10 frames
  10. stop();

  11. Add a new: Layer
  12. Add a frame label starting with f1 working up to f6
  13. You should have something like this:

  14. Return to the: Main Stage
  15. Drag an Instance of the Movie Clip on the Main Stage: Movie
  16. In the Property Inspector give it an Instance Name: Movie

Step Three: Creating the Navigator

  1. Create a new Symbol: Insert > New Symbol (Ctrl F8)
  2. Give it a name:navigator
  3. Select: Movie Clip
  4. Click: OK
  5. Add this code to: Frame 1
  6. // This function is continually called
    function checkPage() {
       // Set the new page to the value of the new page loaded
       newPage = _root.page;
       // If the page variable has changed, navigate to new page
       if (oldPage != newPage) {
          // An object-oriented way of telling the
          // Content object to navigate to the new page
          // Trace(newPage);


       // Set the old page number to the new page number
       oldPage = newPage;

  7. Create a blank frame in: Frame 2
  8. Return to the: Main Stage
  9. Drag an Instance of the Movie Clip on the Main Stage:navigator
  10. Select the Movie Clip and add this code:
  11. // This Movie Clip checks for the next section to navigate to
    onClipEvent (enterFrame) {
       // Call the function inside this Movie Clip

Step Four: Completing the Main Stage & Publishing

  1. On the Main Stage create a Dynamic Text Box with the variable name: page
  2. My Dynamic Text Box:

  3. Now add this code to the first frame of your movie:
  4. // Set the starting page to load when movie first loads
    getURL("1.html", "history frame");
    _root.page = 1;

    Your Flash Movie is now complete so you need to save and publish the swf file.

  5. Go to: File > Publish Settings (Ctrl Shift F12)
  6. Under the Format Tab select: Flash (.swf)
  7. Click on: Publish
  8. Click on: OK
  9. Go to: File > Save (Ctrl S)

Step Five: Creating the Web Pages

You will now need to create 6 web pages. So you will need to go to your favourite web editor like Dreamweaver or a text editor like Notepad.

  1. Create 6 web pages with the following code:
  2. <html>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/javascript">

  3. Only change the value 1 to 2 for the second web page and to 3 for the third web page etc till you get to the sixth web page
  4. Now add the following HTML code in the HTML code view of your web page editor:

    <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=XXX height=XXX id="mymovie">
    <param name=movie value="YourFileName.swf">
    <param name=quality value=high>
    <param name=menu value=false>
    <param name=bgcolor value=#999999>
    <embed src="YourFileName.swf" quality=high bgcolor=#999999 width=XXX height=XXX name=mymovie swliveconnect= true type="application/x-shockwave-flash" pluginspage= "http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </embed>

    <iframe src="1.html" id="historyframe" name="historyframe" frameborder="0" width="0" height="0"></iframe>

    <script language="JavaScript" type="text/javascript">
    // This function is called from the page in the iframe
    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 );

  5. Note: Except for the two <p> paragraph </p> tags (which are optional) you MUST use this code or it will not work!! Also the iframe tags may cause a small frame or box to be visible in your web editor. Ignore this as it is set to a zero size so it will not be visible in on your web page.

  6. Change the XXX values for so that the width and height values are how you want your Flash Movie to display.

  7. Then replace YourFileName with the file name of your Movie. Be careful this is case sensitive and never use spaces for file names that are used on the web.

    Important Note: All the web pages, files and the swf movie MUST be uploaded to the same location. If however the Flash Movie is in a different location you must include the file path. If you don't know about file paths just make sure your Flash Movie is located in the same folder as your web pages.

You will of course have to upload the all the files to the web and test your buttons but more or less that's it. Have fun!

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!


Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1

25450 visitors to this page since 31 May 07 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.