Getting Started Tutorial - creating your panoramic viewer
We have created a step-by-step guide on how to create your own panoramic image viewer for your blog or sites. We have tried to make the process as simple as possible and only using free, readily available software from the web together with our Flash viewer app.
Step 1 - Creating the panoramic image
To create the panoramic image, we have a few options: a) we can take photographs and stitch them together or b) render them with a 3d program such as 3D Studio Max.
a) Creating the panomaric image using Photographs
What you need for this:
- Standard Digital Camera (or a standard camera and a scanner)
- Tripod (or a very steady hand)
- Download the Autostitch program.
For best results you should use a tripod, so that you can easily take the pictures and keep them aligned. You should take pictures at 1MB size, which should be enough, otherwise it might take too much time to process the images later.
In our app we are mapping the image to a sphere, the image below illustrates that we should imagine that each picture we are taking will be from a small section of this sphere.
The best technique to take the pictures is to take pictures at three different heights. So we first start at waist level and take around 20 pictures at the same height. Each image should horizontally overlap the previous one in about 20% so that later we have enough reference points so that the autostitch program can join the images.
We can then repeat the procedure at floor and roof levels, taking another 20 pictures in each position. You should again overlap in 20% horizontally each image, but also remember to also overlap in about 20% de images you took at waist level, otherwise we won’t be able to automatically join the photos.
You should end up with 50 to 70 photographs after you follow the steps above. These will be used within Autostitch to blend them all together into a single image.
Note: if you have moving objects in the scence (such as people), make sure they stand still for the whole process, otherwise images will looked blurred or you will have funny ghost effects!
Using Autostitch to create the panoramic image from the pictures
You can use other programs to create the panoramic image need for the Viewer, amongst others Adobe Photoshop CS3, but for this tutorial we will show how to use Autostitch, which has a free demo for download and is very easy to use.
1) We have to make a single adjustment to Autostitch default options, so open Edit > Options
2) Under Output size, select and change the scale size from the default 10% option to 50% and click OK to close the dialog box.
3) Now let’s select the files we want to process from File > Open
4) You can control+click to select multiple files, or control+A to select all files in the directory
5) Depending on the number of images and size, this might take a few minutes. In the end we will have created in the same directory as our photographs a file called pano.jpg
6) Check the final width and height of the JPG program with your favorite Drawing program, or use the excellent IrfanView to resize the image if you don’t have any image program. If it is bigger than 5000×2800, it is better to scale down proportionally, otherwise it might take too long to download and we might not be able to open the file.
Here is what our image should look like:
b) Creating the panoramic image from a 3D Model
3ds Studio Max has a “Panorama Render” option under Utilities, you should use sphere mode to use with our viewer. In our Gallery we have a sample render of one of our offices.
We will be adding more information on how to do this on Maya and other 3D render programs, if you know how to do this on other programs, send us the information (if possible with screen captures) and we will put them here!
c) Find some pictures online
If you just want to try out the Flash viewer without having to create the image, you can search online for “panoramic 360″ pictures, click on the links below to do this:
- Images must be spherical panoramic and “wrap around” in order to work properly.
- Click here to read more about panoramic projections on Wikipedia.
- We don´t recommend stealing other peoples work, use this only for tests, and don´t publish any unauthourized work in your blog or site.
Step 2 - Upload the panoramic image to a public URL
In order to use our viewer program, we must host it somewhere on the web. There are many free services for doing this, such as Flickr and PicasaWeb amongst others. Or you can simply upload it to your site.
An aditional step is to check if the site which is hosting the image has a crossdomain.xml policy file. This is a simple xml file, to allow us to load the file from our Flash which is hosted in a different domain than our site. If you are hosting on your server, you can copy this file and save it to the root of your hosting space. If you have problems, check the troubleshooting section below.
Step 3 - Generate the Flash Viewer Embed Code
We have created a simple form below to make it easy to generate the code necessary to embed the panoramic viewer within your blog, MySpace or website. Input your image URL, viewer size you would like and render quality and click generate code. You will automatically see a preview of the Dimension 360 viewer, so you can play around with the options untill you are happy.
Troubleshooting: Images aren´t showing up!
If after following this tutorial you have a problem that pictures aren´t being loaded. You might have one of the two situations:
Crossdomain.xml security policy
Flash can only load images from the same site or from sites that allow this to happen. For this to happen a crossdomain.xml file must exist in the root directory, some sites, such as Flickr have this, click here to see what the file looks like. Depending on the browser you use, you might have to click “view source” or save the link to a file to be able to view the XML.
Image is too big!
The maximum size we recommend using is 5000×2800, otherwise it becomes too slow, or Flash cannot load the image.
Image is in the correct format
The image must be either in PNG or JPEG formats.