Resources

Virtual 360° Tour

This is an easy, fast loading, interactive 360° virtual tour that works in old and new versions of the most popular graphical browsers.  Although there are many ways to create virtual tours, this method is not only low cost, but it does not require users to download a special plug-in (assuming their browser is java enabled).  Have fun with this!  (If you create a virtual tour using this technique, send me the link and I'll compile a page of examples.)

Create the Panoramic Photo
Add the Image to the Web Page
Make the Tour Accessible to People with Disabilities
Helpful Link

Create the Panoramic Photo

• Stand in the center of the area you want to shoot.  Set the camera to take small file size images.  Take the first photo, move the camera so that the next photo overlaps the area in the first photo by 30%.  Continue turning until you complete a 360° circle.  Using a tripod is helpful for this.  The best pictures have the same focal length.  It's also important to avoid shooting things that move when creating a panoramic image.

• Transfer your pictures as .jpg files to your computer.  Use a photo stitching program to merge the pictures.  Some digital cameras come packaged with this type of software, an example is Canon's PowerShot Utilities - PhotoStitch.  Pixtra makes PanoStitcher available for a free trial download.  (If you use PanoSitcher, learn the specifics of this software via their tutorial.  One helpful hint, however, is to avoid using the Blend function in PanoStitcher.  After the picture is stitched as one long .jpeg, save it and import into a graphics program to crop, resize and enhance.  Try to keep the height of the image file 150-200 pixels.  If you click on Blend in the free trial version, your image will be watermarked.)  Save the finished panoramic picture as a .jpg file on your Desktop.

Add the Image to the Web Page

• With your website open in FrontPage, highlight the folder that contains the web page in which you want to add the virtual tour.  (If you don't use separate folders, highlight the root directory.)  Go to File on the menu bar and select Import.  Click on Add File and navigate to the Desktop where it says Look in.  Click on the panoramic picture jpg file, then click OK.

• Download this file: pt.exe.  (In Internet Explorer, when you're prompted to open or save the file, select save, then save it to your desktop.  Click on the desktop icon created.  Where it says Unzip to Folder, highlight Desktop, click Upzip.  You'll get a new icon for ptviewer.jar.)

• With FrontPage open, import the ptviewer.jar file to the same folder as the web page you want to have the virtual tour on.  Highlight the code below that begins with <APPLET.. and ends with </APPLET>.  Copy it to your clipboard.  Open Notepad (go to Start, Programs, Accessories, Notepad).  Paste the code into Notepad.  Highlight all of the text in Notepad and copy it to the clipboard.  
  
  <APPLET archive=ptviewer.jar code=ptviewer.class width=225 height=150 alt="very short description of your tour here">
  <PARAM name=file value="name of your jpg file here">
  <PARAM name=auto value="0.3"><strong>Please note: You are getting this message because your browser does not
  have Java enabled to view the virtual tour. You can, however, go to the 
  <a href="your text only page">text version</a> of the tour.</strong>
  </APPLET>
  
  Go back to FrontPage 2000. In Page view, click on the spot in your web page where you want the tour to appear.   Then click on the HTML view.  Paste in the code from the clipboard.  Change the height to match the height of your image, put in your description and the panoramic image file name.  Decide what you want to call the text only page you'll create later and add that file's name.

• Save the page and check it out online!

Make the Tour Accessible to People with Disabilities

An accessible virtual tour is viewable using either a mouse or a keyboard.  The user is told how to stop the movement of the automatic tour.  Audio and text only versions are available.  Here's how to do this.

• Add copy that explains how to view the tour with both a mouse and a keyboard.  Add a caption under the picture with information on stopping the motion.  See the example above.

• Create a new page with a detailed description of the panorama.  Save it using the same file name that you used in the applet script.  Create a separate link to it on your main virtual tour page to offer a text only version.

• The Windows Sound Recorder program can be used to make a one minute audio version of the tour.  Your computer needs to have a microphone.  Go to Start, select Programs, Accessories, Entertainment, then Sound Recorder.
  
  Click on File and select Properties.  Where is says Sound Formats, highlight All formats, click on Convert Now.  For Name, select Telephone Quality and for Attributes select the top choice - 8,000 Hz, 8 Bit, Mono, 8KB/s.  Click OK twice.  Click on the round button to begin your recording and on the rectangle to stop.  When you're happy with the recording, go to File, Save As, give it a name and save it to the Desktop.
  
  In FrontPage, import the sound file to the same folder as the web page you want to put it in.  With your web page open, click where you want the sound bar to go and switch to HTML view.  Just like you did with the applet code, cut and paste the following code into Notepad, highlight all of the Notepad text and copy it to the clipboard.  Back in the HTML view, paste the text in at the blinking cursor:
  
  <object><embed width="200" height="150" src="your sound file name here" align="middle">
  <noembed><strong>You are receiving this message because your browser cannot run the audio file. 
  Visit the <a href="your text only page">text version </a>of the tour instead.</strong></noembed></object>
  
  Put  your sound file name and text only version file name into the script.

• It's helpful to add a transcript on the same page as the sound file.  You can cut and paste this from the text only page.  Save the page and listen!  Go back to your main virtual tour page and add a link to your audio version.

Helpful Link

For tons of information on creating panoramic images, visit panoguide.com - the guide to panoramic photography.

Top of Page