Monday, July 9, 2012

Posting Interactive 360 Panorama Images

How to create and post a 360 interactive panorama

Creation of the interactive image involves two steps; creation of the "stitched" panorama image, and creation of an interactive 360 degree image file. In the first step "stitching" software is used that combines the multiple images used to create the 360 degree panorama image into a single panorama image. Often this single image is used on its own to show a wide and narrow view of the subject. In the second step "virtual or interactive" panorama software is used to create the interactive 360 degree image out of the panorama image.

The interactive 360 panorama is an executable file that must be hosted on a website. The URL, or "link" to that file can be shared and / or embedded into another webpage. Common interactive file types are Applie Quick Time, Adobe Flash and open HTML. I used Adobe Flash and Apple Quicktime in this example; iFrame also works well.

Here are the steps:

1) Take the panorama images. This is a subject all in itself, but in a nutshell a camera mounted on a tripod is rotated 360 degrees, and multiple overlapping images are taken to cover the entire 360 degrees.

2) Use stitching software to combine the individual images into a single panorama image. I used AutopanoPro by Kolor for this. The single panorama images is saved as a jpg, tiff or png file and this single file can be enhanced in Photoshop as would any other image.

3) Use 360 panorama software to create the interactive 360 panorama file. I used Pano2VR by Garden Gnome, and use the options to output as an Adobe Flash file and a Apple Qucktime file. This software has many options change look and feel of interaction

4) Upload the flash and quictime files to a hosting website. I uploaded this images to a free Google page included with a Google account. After uploading the files reside on the website, and each has its own unique web address or URL. This link is used to share the image. The URL can be emailed or embedded to a blog post or webpage.

5) To embed the link to a blog or website, the following HTML code is used. This is web page programming and is not difficult once you have a little experience. Lots of free help on-line, and many companies will charge you a fee to do this for you.

This is an example of embedding a Adobe Flash File:

<embed src="http://sites.google.com/site/YOURFLASHFILE.SWF" width="540" height="140" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

This is an example of embedding an Apple QuickTime file:

<embed src="YOURQUICKTIMEMOVIE.MOV" width=240 height = 196 autoplay=true controller =true loop=false pluginspage=http://www.apple.com/quicktime/">

6) Publish blog or website; below is the interactive 360 degree panorama:




This is the Adobe Flash File; hover cursor over image to watch the image slowly scroll across the screen. Click and drag on the image to move the image, or, use the controls to interact with the panorama.




This is a simpler Quicktime Version; a bit cleaner but same interaction.



This is a static image that can be posted on your website; click the image to see the interactive panorama