Friday 7 January 2011

Create Quicktime panoramas and embed them in your website requiring only Flash on the user's PC


Here's how to make panoramas in the Quicktime format to be embedded in your website. Using this method the only plugin required on the user's computer is Flash:

  1. First take your photos, getting all 360 degrees – I think it will help if you use a tripod, as on my test run some objects had blurred edges because I moved around as I took them.
  2. Download and open up AutoStitch (Click on "Download (Windows demo)" at the top).
  3. Go to the edit menu, then options and set scale % to 25 in the top left corner and select the scale radio button. If set too high it will give out of memory errors, if you want a higher resolution try increasing it until it gives errors. The best setting for you will depend on the resolution of your camera.
  4. Go to the file menu and click open then find all of the photos you took, select them all and click open.The photos will be stitched together, and if you don’t get any out of memory errors, the finished picture will eventually appear. If you get an out of memory error, go to step 3 and decrease the scale.
  5. Next download and start PanoSphereConv (scroll down).
  6. Click on open in the top left, and find your pano.jpg file which will have been placed in the same folder as the original photos by Autostitch.
  7. The image will appear, click save at the top, then go down to single image, then use the highest resolution.
  8. A save box will appear, save this new file e.g. as pano2.jpg.
  9. Close PanoSphere.
  10. Download and open Pano2QTVR Gui.
  11. Click on create new project, and choose somewhere to save it.
  12. Select Equirectangular.
  13. Click on the "…" button indicated in the diagram, and locate the file you just created with PanoSphere.
  14. Click the create button.A .MOV file will be placed in the location you saved the project and a preview will be shown.
If you want to embed your panorama in a webpage only requiring users to have Flash installed on their system, check out CuTy. See a preview here.

To set up CuTy on your website:
  1. Find your .MOV file, and put it in the CuTy folder you've placed in your website directory.
  2. You can either rename CuTy.swf to the same name as the MOV file (with .swf at the end) or rename the .MOV file CuTy.mov.
  3. Upload the entire CuTy folder to the website (you can rename it as the name of the panorama shot). Create HTML to embed the swf (this can be generated using Dreamweaver – Insert>Media>Flash) - you will need to make the path to the swf relative so it will work online – e.g. "/panorama1/CuTy.swf" rather than "file://c:\documents etc".
The accuracy and effectiveness of these instructions is not guaranteed, as I wrote them some time ago!

No comments: