Flash Tutorial: Browser Back Buttons used with Flash.	Home • Members • Tutorials • Forum • iSnapChat • Contact Us

Click by Click: Browser Back Buttons used with Flash

See Full Version: This is a shortened click by click version of a: Full Length Tutorial

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

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:

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
   _root.Movie.gotoAndStop("f1");
}

4. 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.

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
   _root.Movie.gotoAndStop("f2");
}

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

stop();

10. Add a new: Layer
11. Add a frame label starting with f1 working up to f6
12. Return to the: Main Stage
13. Drag an Instance of the Movie Clip on the Main Stage: Movie
14. 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

// 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);
      _root.Movie.gotoAndStop("f"+newPage);
   }
   // Set the old page number to the new page number
   oldPage = newPage;
}

6. Create a blank frame in: Frame 2
7. Return to the: Main Stage
8. Drag an Instance of the Movie Clip on the Main Stage:navigator
9. Select the Movie Clip and add this code:

// This Movie Clip checks for the next section to navigate to
onClipEvent (enterFrame) {
   // Call the function inside this Movie Clip
   this.checkPage();
}

Step Four: Setting Up the Main Stage & Publishing

1. On the Main Stage create a Dynamic Text Box with the variable name: page
2. Now add this code to the first frame of your movie:

// Set the starting page to load when movie first loads
getURL("1.html", "history frame");
_root.page = 1;
stop();

3. Go to: File > Publish Settings (Ctrl Shift F12)
4. Under the Format Tab select: Flash (.swf)
5. Click on: Publish
6. Click on: OK
7. 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:

<html>
<head>
<title>1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
parent.setPage(1);
</script>
</head>
<body>
</body>
</html>

2. 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
3. Now add the following HTML code in the HTML code view of your web page editor:

   <p>
   <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>
   </object>

   <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 );
   }
   }
   </script>
   </p>

4. Change the XXX values for so that the width and height values are how you want your Flash Movie to display.
   
   
5. 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!

See Full Version of this: Tutorial

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