Difference between revisions of "Historical:Create object movies"

Revision as of 18:16, 12 November 2005

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 already 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.

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)

Object Turntable

See the tutorial on creating your own turntable! Self-made object turntable