PDA

Click to See Complete Forum and Search --> : Anyone know a way of making 360 degree panoramas?

guyd
08-09-2006, 10:44 AM
I'd like to make a side-by side montage of images, that I can change into a seamless 360 degree panorama. I've seen this done (on a big scale) on www.peroniitaly.com and I'm really impressed. I've access to DreamWeaver, Flash, Photoshop and PaintShop Pro - any advice / ideas?
Juparis
08-09-2006, 11:06 AM
On the site you listed, they used a full (or partial?) circle of cameras, and just took a picture from all of them simultaneously. Each image is just flashed by in their Flash program to make the movie look like it's going around the people in 3D.

The only practical way I can think of doing it is to take the pictures in a circle (hopefully this is still life, because it would be expensive buying all those individual cameras to capture an action shot). I honestly don't know how you'd make it into a movie using those programs, but I'm sure there's a tutorial somewhere.

Or, if you're going the easy route like I would, use a program like PhotoStitch to combine each of the images. It'll be pretty darn wide, but easy to scroll by if you use a marquee (I don't know the translation of this in a flash project, sorry).
guyd
08-15-2006, 03:59 AM
OK - I can see that they spent a lot of money on that site to get it looking so good, is there not a way of turning all of the images into a single strip and converting that into a movie clip - that way wouldnt you be able to write actionscript to restart from the beginning when the end is reached? Is it possible to get the other interactive elements working inside a movie clip?
WebJoel
08-17-2006, 10:36 AM
From Dynamicdrive.com, is this:

It takes four images (or fewer, or more. -depends upon you) and 'stitches' them together and scrolls.

I don't have an example to show, but here's the code. If it raises an 'error', try inserting images in the four places given, -maybe that will stop it from throwing a *js error.

If it still does, just go to dynamicdrive.com and look around 'gallery' or 'slideshow' for this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title>Panoramic Image Viewer</title>
<style>
body
{ font-family: Verdana,Arial,sans-serif;
padding-top: 10em;
}

#nav
{ margin: 0px auto;
width: 760px;
text-align: center;
cursor: pointer;
cursor: hand;
}

#panim
{ position: relative;
margin: 1em auto;
display: block;
width: 400px;
height: 266px;
border: solid black 1px;
white-space: nowrap;
overflow: hidden;
}

#panim img
{ position:relative;
}
</style>
<script>
var slideStep = 0;
var slideTimer = null;


function startSlide(step)
{ slideStep = step;
slideTimer = setInterval("slide()",20);
}

function stopSlide()
{ clearInterval(slideTimer);
}

function slide()
{ var panim=document.getElementById('panim');
panim.firstChild.style.left = (panim.firstChild.offsetLeft + slideStep) + 'px';
if(slideStep>0 && panim.firstChild.offsetLeft>0)
{ nodeWidth = panim.lastChild.offsetWidth;
imNode = panim.removeChild(panim.lastChild);
imNode.style.left = (panim.firstChild.offsetLeft - nodeWidth) + 'px';
panim.insertBefore(imNode,panim.firstChild);
}
panim.lastChild.style.left = (panim.firstChild.offsetLeft) + 'px';
if(slideStep<0 && panim.lastChild.offsetWidth + panim.lastChild.offsetLeft<panim.offsetWidth)
{ nodeWidth = panim.lastChild.offsetWidth;
imNode = panim.removeChild(panim.firstChild);
panim.firstChild.style.left = (panim.firstChild.offsetLeft + nodeWidth) + 'px';
imNode.style.left = (panim.firstChild.offsetLeft) + 'px';
panim.appendChild(imNode);
}

}

</script>
</head>
<body>

<div id="panim">

<img src="panim1.gif" alt="First half of the panoramic image" width="400" height="266" border="1" />

<img src="panim2.gif" alt="Second half of the panoramic image" width="400" height="266" border="1" />

</div>
<div id="nav"><span onmouseover="startSlide(10);" onmouseout="stopSlide();"> << </span> <span onmouseover="startSlide(6);" onmouseout="stopSlide();"> < </span> <span onmouseover="return startSlide(-6);" onmouseout="stopSlide()"> > </span> <span onmouseover="return startSlide(-10);" onmouseout="stopSlide()"> >> </span></div>
<button onclick="document.getElementById('panim').style.overflow='visible';">See How</button>

</body>
</html>