Hypermedia Production, Fall 1998
QTVR Project, Stage 4

Using hotspots to control pages in a frameset

  1. Go to one of the QTVR machines in the Graphics Lab or Hypermedia Room. Find the three files you created last week when you converted your original panorama into a scene. Double-click on the general file (the one without any extension). This should re-launch QTVR Authoring Studio and allow you to edit your scene.

  2. Double click on one of your URL nodes (the icons that look like little globes). A dialog box will open. Into this box type the following:

      javascript: getPage("someName.htm")

    ...where someName will be the name of a Web page that will be linked from an appropriate location inside the QTVR panorama. For example, if I'm editing the URL node called myDesk, I'll probably refer to a page called myDesk.htm. Write down the name of the page to which you refer. Keep a careful and accurate record of page names!

  3. Repeat Step 2 for all your URL nodes. Save your work as you go.

  4. Click the Make Scene button to re-compile your QTVR scene. Copy the resulting trio of files to your Zip disk for safe keeping. Quit QTVR Authoring Studio. You may do the rest of your work on any machine.

  5. Copy the .scene file from your latest build to a new directory (folder) on your local hard drive or Zip disk. Name this new directory qtvrFinal. Inside this directory, change the .scene extension to .mov.

  6. Open some text editor or HTML assistant. For Macintosh we recommend BBEdit Lite 4.0 (free) or BBEdit 4.5 ($100). For Windows we recommend Allaire Homesite 4.0 ($60). You can also use WordPad in Windows or SimpleText in MacOS. Create a series of Web pages as explained in the following steps and save them into qtvrFinal.

  7. Create a frameset page with two frames (two columns at 50% will do). Name this page index.html. If you don't remember how to deal with frames, consult http://raven.ubalt.edu/classes/basics/basics5.htm. Name one frame "left" and the other "right". The page assigned to the left frame should be called qtvr.htm. The righthand page should be called start.htm.

  8. Create the page qtvr.htm. Within the <BODY> container of this page should be the following tag:

      <embed src="nameOfYourQTVRFile.mov" width="320" height="240">

  9. Within the <HEAD> container of the page qtvr.htm, enter the following JavaScript code: 

      <script language="JavaScript">
    function getPage(whichPage)
      {
        parent.frames['right'].document.location=whichPage;
      }
</script>

  10. Create the page start.htm. This page may be blank.

  11. Create one page for each of the hot spots in your QTVR movie. You can leave the content of each page sketchy on the first pass, though you will have to improve it later; page content will count toward your grade for the project.

  12. Launch a browser (Netscape Navigator is suggested). Check to be sure your browser has a Quicktime plugin by using the About Plugins feature. For Windows users it will be called QuickTime Plug-In; for Mac users, QuickTime Plug-in 2.0. If you don't have the right plugin, either switch to a properly equipped machine or download the free installer from http://www.apple.com.quicktime. The MacOS installer is in the COMMON directory on Raven.

  13. Open the page index.html in your browser. Check all your hot spots. If any one fails to work, first check that you gave the page a name that corresponds to the names you recorded when you scripted your hot spots in Step 2. If that's not the problem, go back into QTVR Authoring Studio, re-open the last version of your general scene file, and check your work there.

  14. When all your hot spots work and all your linked pages look the way you'd like, transfer the entire qtvrFinal directory to your personal folder on Raven. You can do this either by FTP or by direct AppleTalk connection from the lab -- provided Raven's AppleTalk connection is working; remember that this is not guaranteed. If you're using FTP, be sure to transfer any images as "raw data" and all HTML pages as "text".

Once you've uploaded your project, you are finished.