Difference between revisions of "Historical:Create object movies"
(Undo revision 12363 by Russel08 , revert link spamming) |
|||
| Line 231: | Line 231: | ||
This causes the image to rotate to a pre-set location. You're actually rotating the fake pano in the background, but the object rotates with it. | This causes the image to rotate to a pre-set location. You're actually rotating the fake pano in the background, but the object rotates with it. | ||
<small>--[[User:Add360.com|Add360.com]] 08:53, 17 Nov 2005 (EST)</small> | <small>--[[User:Add360.com|Add360.com]] 08:53, 17 Nov 2005 (EST)</small> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== Object Turntable == | == Object Turntable == | ||
Revision as of 08:34, 7 May 2010
Creating Objects
Introduction
PTools can be used to display virtual objects as well as panoramic images. It has the ability to add various views, so that with enough images you can actually view the object from any angle. PTools handles objects in a different manner than other programs, and you have to play with the HTML code. But it’s pretty easy, and you have the added advantage of using the free PTools. So you can have a file that shows a single angle, two angles, or every angle.
PTviewer has several helper add-ons. One of these is PTobject. You don’t have to bother looking for it – it’s usually supplied in the ptviewer.jar file (a .jar file is actually an archive, like .zip file, that can contain numerous files.) It’s automatically extracted and downloaded by the browser. PTobject is what makes the viewer display object files. Basically, the viewer loads the object helper, and the helper displays the image strip. It’s so easy that you only need to put three files on your server – the image strip, the ptviewer.jar file, and the .HTM file. Note: There are some "low overhead" or stripped down versions of PTviewer.jar with the helpers and add-ons removed. These are usually under 30K in size. If your PTviewer.jar is under 30K, chances are you'll need to get the complete version.
PTStripe Helper
As you read this tutorial, you'll see that the viewer uses an image strip (also called an image stripe.) This is simply a series of images stitched together side-by-side. When I first wrote this tutorial, I was not aware of PTstripe. I did the work in PhotoShop manually. Erik Krause sent me an e-mail letting me know about PTstripe, so I tried it – PTstripe greatly simplifies the strip creation! You'll find PTstripe.exe in the helpers directory of the PanoTools download. PTstripe is just another example of Helmet Dersh's forethought – it assembles images into a stripe / image strip for you! The readme file states that it will create a PhotoShop file, but what it creates is a TIF file, so you’ll have to convert it to a GIF or JPG.
It’s simple to use – just drag the images onto the icon for PTstripe. You’ll be asked for an output file name and destination. CAUTION: There is no overwrite warning. It WILL overwrite a file with the same name without asking you. The files are assembled alphabetically, right to left. So the first image should be the last image name. To simplify this I call the files image1.xxx, image2.xxx, etc. The output image is 100% size and quality. You can resize it and change the quality / compression when you change the format from TIF to JPG or GIF. On my Pentium 4, 3 gightz PC, it took under a second to assemble a 8 image strip – and each image was a 4 megapixel original!
So it's your choice - you can use Photoshop to assemble the strip, or PTstripe.exe --Add360.com 16:41, 1 Dec 2005 (EST)
Basic, Single View Object
Goal: create a simple virtual object that can be rotated left or right.
The first step is obvious – you need to capture your images. Four images are a suggested minimum, eight is better, and so on. The more images you have, the more detail you have, and the smoother the movement. More images=more views. But, more images equals a larger file size. That’s because you need to assemble all the images into a strip containing all your images.
The workflow is pretty straightforward:
Capture images
Crop and cleanup the images
Create the image strip
Create the HTML file
Upload them
The most confusing part is creating the .HTM file, so let’s look at a sample page:
(you can see it here: [1])
Here's a note for the sample page - the image seems to rotate in the opposite direction that you drag. I did this to illustrate a point - the images need to be in the correct order. The last image should be the first in the strip! In this sample, the first image is the first.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
</head>
<body>
<p align="center">
<APPLET archive=ptviewer.jar code=ptviewer.class width=341 height=500 name=ptviewer>
<PARAM name=applet0 value="{code=ptobject.class}{file=jivestrip0.jpg}{nhor=8}{nver=1}">
<PARAM name=inits value=ptviewer:startApplet(0)>
oops - need java
</APPLET>
</p>
</body>
</html>
The only part we need to look at is the code between the APPLET tags.
<APPLET archive=ptviewer.jar code=ptviewer.class width=341 height=500 name=ptviewer>
This is the line that specifies the display size of the applet. It’s directly related to the size of your final image strip. Say you have eight images, each 500 high and 341 wide. Your strip would be 500 pixels high and pixels 2728 wide. The width and height parameters must match the size of your images. If the height is too small, you’ll wind up cropping your image – too tall, and you’ll have empty space. If the width is incorrect, the thing will be a total mess!
<PARAM name=applet0 value="{code=ptobject.class}{file=jivestrip0.jpg}{nhor=8}{nver=1}">
This line tells the viewer to load the helper file with a variable named applet0, and contains the name of your strip image, in this case jivestrip0.jpg. The nhor tells the helper how many images you have in the strip (nhor=8, or 8 images). The nver is the number of vertical images (nver=1, or 1 image.)
<PARAM name=inits value=ptviewer:startApplet(0)>
This tells the viewer to load applet(0) created above.
oops - need java
Any text you place just before the close APPLET tag is displayed by browsers that don’t have java installed or running. It’s usually a warning message and/or a download link, and totally optional.
</APPLET>
Want to make a quick object? Copy this code, and change the following four variables: Width, height, jpg file name, and nhor value. Make sure the ptviewer.jar is in the same directory. You’ll have an object in no time!
<APPLET archive=ptviewer.jar code=ptviewer.class width=341 height=500 name=ptviewer>
<PARAM name=applet0 value="{code=ptobject.class}{file=jivestrip0.jpg}{nhor=8}{nver=1}">
<PARAM name=inits value=ptviewer:startApplet(0)>
oops - need java
</APPLET>
Note: For the single strip example I have here, you do not need a number in the image file name. Numbering is only required when using multiple strips for multiple angles. I just number mine out of habit.
--Add360.com 17:59, 6 Nov 2005 (EST)
Comment on work flow / automation: Make your script generic, and always name the image the same, for example objectstrip0.jpg. Also keep the file size, number of images, etc. the same. Then create different folders / directories for each object. Name the folder using the topic. Folder 1 would be called "statue," folder 2 "fishie" and so on. Rename the file that contains your code to default.htm (or index.htm if that’s what your server uses.) Copy this same htm file to each directory. Then place each unique strip image in the corresponding directory. Each directory would have three files: the .jar file, your image file, and the .htm file. Now you only need to link to the directory! Web servers automatically load either default.htm or index.htm as the default web page. --Add360.com 05:34, 9 Nov 2005 (EST)
Masked Object with Pano Background
Let’s take it to the next level. We’re still doing a single row object, so we’ll add to the work you have done in the previous steps. What’s different is that we’re adding a background panorama image. You’re probably thinking “Uh, why would I want to do that?” Well, it can look cool. For example, the object could be your company logo, and the background could be a pano of the building exterior. In my example, I’m using it as a sales tool. The background is generic, with floating text that drifts past the object while it’s rotating. It’s a pretty nice effect. See it here: [2]
When you’re writing a script for the object with a pano background things get more complex. That’s because you can use all the viewer commands you use with regular panoramas as well as the object settings. This enables the use of hotspots on the pano, etc. The focus of this tutorial is the object, and not all the PTools settings, so I’ll just cover what you need to know.
First, you can use the image strip created earlier, but you need to create a mask for the image strip. This will be saved as a separate image file. It can be GIF or JPG – the format you use depends on your software – you just need to have a transparent area. The “mask” will mask everything except what you want to see. What you do NOT want to see will be masked in black. The area you DO want to see is transparent – not white. Creating the mask can be tricky, and everyone has their technique. I simply open the original image strip, do a “save as,” and work on the copy. Since I work in PhotoShop, the object images are combined on their own layer. I simple select “all,” invert, and fill with black. Then I cut this, and paste it to a new file. The result is a black strip with the objects cut out. This takes about 2 minutes. Use whatever method you like best or works for you.
After you have your original image strip and a second image strip that is the mask file, you’re all ready. In this example I’m using a different image file than above.
First, you need to tell PTobject that you are using a mask. This is done by adding one setting to your existing HTM code:
<PARAM name=applet0 value="{code=ptobject.class}{file=koiphotostrip.jpg} {mask=koialphastrip.gif} {nhor=8}{nver=1}">
The new setting is: {mask=koialphastrip.gif} – that’s it! That adds the mask file. Give it a try and make sure your object is still visible. If it’s not, your mask file is messed up – make sure the area over the object is transparent. Now we need to add the background file. This is the most complex part as there are a limitless number of parameter combinations. If your background image is the same size as your film strip, you can synchronize the background and object (as in the sample of the Koi statue.) Changing the tiltmin, tiltmax, panmin, panmax, fovmin and fovmax will change the function and look of the background. More importantly, incorrect settings will cripple the object. That’s what’s happening with the Koi object on the right of the page. Since the background image can’t move correctly, the object can’t move correctly! So we’ll follow the old KISS method “Keep It Super Simple.” After you create your first masked image, then experiment with different backgrounds and settings. You can achieve some interesting results. To add the background requires a few settings. The code is slightly different than the standard PanoTools code. If you feel like it, you can compare this to the usual code. What’s important is that you follow the example here. This is the code used in the crippled Koi object.
<APPLET archive=ptviewer.jar code=ptviewer.class width=400 height=268 name=ptviewer>
<PARAM name=file value="back.gif">
<PARAM name=pan value="0">
<PARAM name=panmin value="-45">
<PARAM name=panmax value="45">
<PARAM name=tiltmin value="-45">
<PARAM name=tiltmax value="45">
<PARAM name=fovmin value="45">
<PARAM name=fovmax value="90">
<PARAM name=applet0 value="{code=ptobject.class}{file=koiphotostrip.jpg} {mask=koialphastrip.gif} {nhor=8}{nver=1}">
<PARAM name=inits value=ptviewer:startApplet(0)>
oops - need java
</APPLET>
Let’s break it down:
<APPLET archive=ptviewer.jar code=ptviewer.class width=400 height=268 name=ptviewer>
The above line is the basic code that tells the web browser what files to load, and how large to make the applet. The applet size is identical to your individual image/frame size.
<PARAM name=file value="back.gif"> <PARAM name=pan value="0"> <PARAM name=panmin value="-45"> <PARAM name=panmax value="45"> <PARAM name=tiltmin value="-45"> <PARAM name=tiltmax value="45"> <PARAM name=fovmin value="45"> <PARAM name=fovmax value="90">
These eight param settings control the background image/pano, and are the same settings you use with standard pano images. The only required setting is the one specifying the file name – name=file value=”back.gif” - adding the rest changes the functionality of the background image - leave these last seven settings out for now - you can experement with them later.
<PARAM name=applet0 value="{code=ptobject.class}{file=koiphotostrip.jpg} {mask=koialphastrip.gif} {nhor=8}{nver=1}">
<PARAM name=inits value=ptviewer:startApplet(0)>
These are the line that set up the object files as detailed in the first part of the tutorial. That’s it – you have a masked object! If you can’t get it to work correctly, check your mask file, look for typos in the code, and make sure the required files are in the directory. --Add360.com 04:36, 10 Nov 2005 (EST)
Multiple View Object
It’s a simple step to add multiple views. Basically you need one image strip for each view. If you have two views, that’s obviously two strips (if you wanted to mask these different views, you’d need one mask strip per image strip.) The critical part is the image name. The initial view must have the number 0 at the end. The next view has a number 1, and so on. The param specifying the image name uses a # instead of the complete image name, ie, file0.jpg would be referenced as file#.jpg. PTobject automatically loads the correct file.
Let’s look at the code ( the sample page is here: http://www.add360.com/objects/helmet/helmet.htm )
<APPLET archive=../koi/ptviewer.jar code=ptviewer.class width=300 height=290 name=ptviewer codebase="../koi/">
<PARAM name=applet0 value="{code=ptobject.class} {file=strip#.jpg} {nhor=16} {nver=3}">
<PARAM name=inits value=ptviewer:startApplet(0)>
oops - need java
</APPLET>
Dissecting this one line at a time….
<APPLET archive=../koi/ptviewer.jar code=ptviewer.class width=300 height=290 name=ptviewer codebase="../koi/">
Specifies the location of the PTviewer.jar file - in this instance, I’m loading it from a different directory. This way I don’t have to have multiple copies of PTviewer.jar on the server/website. We covered the other settinge earlier.
<PARAM name=applet0 value="{code=ptobject.class} {file=strip#.jpg} {nhor=16} {nver=3}">
There are a couple of differences from the previous examples on this page. First, the file name. My files are named strip0.jpg and strip1.jpg. The "file=" parameter automatically loads the correct image, indicated by the # sign. The "nver=" parameter is 3 in this example. This indicates 3 image strips. The first image strip MUST have a 0 at the end of the file name. The next strip has the number 1.
The rest of the code is the same as we covered before.
That’s all it takes to add a different view! Image strip 0 is always displayed first. So the “top” view would be seen first. Simply change the image name/number to change the order they are diaplayed in. For example, in a three angle image (three strips), the viewer loads image1 as the middle view/first fiew. Image0 is the top view, and image3 is the bottom view.
0 - Top 1 - Middle 2 - Bottom
Adding a toolbar and status bar
The three view helmet pano has a toolbar and status bar. These will only work if you are loading a background image. For my example I created a solid black background image, 400 wide, 200 high. It has to be twice as wide as it is high so it fools PTviewer into thinking you have a full 360x180 pano loading. Otherwise the multiple views will not work. Once you have PTviewer loading a pano (even though it’s hidden behind your object) you can take advantage of the other PTviewer features. See the example code:
<APPLET archive=../koi/ptviewer.jar code=ptviewer.class width=300 height=310 name=ptviewer codebase="../koi/">
<PARAM name=applet0 value="{code=ptobject.class}{file=strip#.jpg}{nhor=16}{nver=3}">
<param name = wait value = "loading.jpg">
<param name = file value = "back.gif">
<PARAM name = bar_x value = 43>
<PARAM name = bar_y value = 215>
<PARAM name = bar_width value = 210>
<PARAM name = bar_height value = 4>
<PARAM name = barcolor value = 3333ff>
<PARAM name = pan value = 120 >
<PARAM name = frame value = "bar.gif">
<PARAM name = shotspot0 value = " x268 y299 a298 b309 u'ptviewer:startAutoPan(0,-5.0,1.0)' ">
<PARAM name = shotspot1 value = " x268 y289 a298 b298 u'ptviewer:startAutoPan(0,5.1,1.0)' ">
<PARAM name = shotspot2 value = " x245 y291 a262 b309 u'ptviewer:startAutoPan(1.0,0,1.0)' ">
<PARAM name = shotspot3 value = " x227 y291 a244 b308 u'ptviewer:startAutoPan(-0.5,0,1.0)' ">
<PARAM name=inits value=ptviewer:startApplet(0)>
oops - need java
</APPLET>
<param name = wait value = "loading.jpg">
The logo / loading image. The status bar appears overlaid on this.
<param name = file value = "back.gif">
The solid black image used for this example. This is the substitute pano image.
<PARAM name = bar_x value = 43> <PARAM name = bar_y value = 215> <PARAM name = bar_width value = 210> <PARAM name = bar_height value = 4> <PARAM name = barcolor value = 3333ff>
The status bar code. X and Y coordinates, width, height and color.
<PARAM name = frame value = "bar.gif"> <PARAM name = shotspot0 value = " x268 y299 a298 b309 u'ptviewer:startAutoPan(0,-5.0,1.0)' "> <PARAM name = shotspot1 value = " x268 y289 a298 b298 u'ptviewer:startAutoPan(0,5.1,1.0)' "> <PARAM name = shotspot2 value = " x245 y291 a262 b309 u'ptviewer:startAutoPan(1.0,0,1.0)' "> <PARAM name = shotspot3 value = " x227 y291 a244 b308 u'ptviewer:startAutoPan(-0.5,0,1.0)' ">
This defines the menu. I used a scripting program to create this, as it’s too tedious for me.
The menu bar appears on top of the pano, and behind the object. So you have to cheat a little. My menu bar is about 20 pixels high, so I added 20 pixels to the height of the applet. This extra space appears on the bottom of the applet. The pano image you used as a background is also visible in this extra 20 pixel space – that’s another reason a solid color works best as a substitute pano image. The end result is a 20 pixel high black bar with my menu in the lower right corner. --Add360.com 08:53, 17 Nov 2005 (EST)
Troubleshooting
Symptom: You copy and pasted the code, but it just won’t work.
Usual Cause: The PTviewer.jar file is missing the PTobject.class file. You’ll need a more complete PTviewer.jar. Some versions remove helper files to save space.
Symptom: All the strips will not display in a multi-angle image.
Usual cause: The numbering scheme is off. The file name must end in a number, and be sequential, starting with 0.
Symptom: The strip will not start with the first image.
Usual cause: I've only had this happen with multi-row objects and objects with pano backgrounds. My guess is that PTools starts rotating the object before it fully downloads all the strips. The only solution I have found it to add the fake pano background, and add the PARAM pan value = xxx:
<PARAM name=pan value=120>
This causes the image to rotate to a pre-set location. You're actually rotating the fake pano in the background, but the object rotates with it. --Add360.com 08:53, 17 Nov 2005 (EST)
Object Turntable
See the tutorial on creating your own turntable! Self-made object turntable