Getting Started (Object2VR)

From Garden Gnome Software

This tutorial will get you started with outputting object VR movies.

There are project files (packed ZIP) for you to follow along and practice with.

Watch this video on YouTube

Contents 1 Creating a Single-Row Object Movie 1.1 Import Images Via the Light Table 1.2 Viewing Parameters and User Data 1.3 Adding Area Hotspots: No Hotspot Reuse 1.4 Outputting a QuickTime Movie 2 Creating a Multi-Row Object Movie 2.1 Import Using Select Input 2.2 Viewing Parameters and User Data 2.3 Add Area Hotspots: Reusing Hotspots 2.4 Outputting a Flash Movie 3 See also

Creating a Single-Row Object Movie

To keep this tutorial consistent with the project files and the screencast, it will refer to the file names and images used in the screencast.

This section uses the Single-Row project.

Import Images Via the Light Table

Importing via the Light Table is the easiest way to import. However, if you have a very large amount of images to import, you may find importing them via Select Input easier.

1. In the Input section, choose Light Table.
   
   
2. Define how many columns and rows your images make up in the top section:
   This project has 24 columns and 1 row.
   
   
   
3. Click Update.
   
   
   
   • This will add placeholders in the Input Images section which represent the amount of columns and rows the images make up.
     
     
4. Next, add the images. Click Add Images and navigate to the folder that holds the images. Select them all and then click Open.
   The images should now be in the Input Images section and correctly aligned.
   TIP: Another way to import the images is to select all the images within the folder and drag and drop them onto the first placeholder.
   
   
5. If needed, simply move the images around to rearrange them.
   TIP: The images can be resized to make viewing all of them easier with the Image Size slider.
   
   
6. Click OK to return to the main project window.

Viewing Parameters and User Data

1. Go to the Viewing Parameters section and choose Modify.
   This is where you can set the default view for the movie and choose the type of control.
   
   
2. In the preview window, you can drag the movie to the desired default view. Once you have chosen the best view, click in the Default View section.
   • You will notice the column and row values change accordingly.
     
     
3. The next section, Control, is where you choose how your movie moves. For this project, choose the Grabber/Scroller as the type of control. This allows the user to click and grab the image to move it. Try it for yourself in the preview window.
   • For a detailed description of what each option does, go the Viewing Parameters page.
     
     
4. Click OK to return to the main project window.
   
   
5. Go to the User Data section and choose Modify.
   
   
   
6. Enter any information you like in the text fields.
   At the least, for this project, add a description.
   • The data entered in these fields will be visible in the HTML template's user data table.

Adding Area Hotspots: No Hotspot Reuse

1. Go to the Hotspots section and choose Modify to add an area hotspot.
   
   
2. Select Enable.
   • This allows you to add and edit hotspots. You'll notice that now all the fields are selectable.
     
     
3. Add two hotspots. Make sure that Reuse Hotspots is not selected and that Column 0 is the visible image. Click on the rounded rectangle tool, , and then draw a shape over the car's door.
   • The shape should be the color red, indicating that this is the current hotspot.
     
4. Give this hotspot a Title (in the Title field).
   
   
5. If you wish for this hotspot to be interactive, enter a web address in the Url Field.
   
   
   
6. Add a second hotspot. Click this button, , to add a new hotspot.
   • The ID will change to, Hotspot 2.
     
     
7. Add the second hotspot to image Column 13. Choose Column 13 from the Image menu. Use the rounded rectangle tool and draw a shape over the car door.
   
   
8. Give this hotspot a Title.
   
   
9. If you wish, add a web address in the Url field.
   NOTE: Remember to include the full web address (like this: http://www.example.com).
   
   
10. When all is good, click OK to return to the main project window.
    • You'll now notice that in the Hotspots section, it indicates that two hotspots have been defined.
      

Outputting a QuickTime Movie

1. In the Output section, choose QuickTime as the Output Format from the menu and click, Add.
   
   
2. In the QuickTime parameters window, keep the image settings at their defaults.
   
   
   
3. With Keep aspect ratio selected, in the Display section, change the Window Size to 350x232.
   • Only one value needs to be entered. The other value will be automatically added.
     
     
4. Enable zoom (in the Zoom section) by selecting Enable zoom.
   
   
5. Change the center of the zoom to a coordinate of 10, 10.
   
   
   
6. In the Output section, choose Open to save the movie to a new location, or to simply check it is being saved where you like.
   
   
7. Next, go the HTML tab and enable the HTML file by selecting, Enable HTML file.
   
   
8. Choose the normal.ggt template.
   
   
9. In the Template Parameters, make sure that Include Userdata Table is selected.
   
   
10. Change the Border, Text, and Background colors of the Userdata Table if you wish.
    
    
11. As done in the Settings tab, choose Open, in the Output section to save the movie to a new location, or to simply check it is being saved where you like.
    TIP: It is best practice to save the HTML template in the same folder or directory as the movie file.
    
    
12. Click OK. Object2VR will ask you if the output file should be created now. Click, Yes.
    
    
    
    • The object movie should open within a browser window (HTML page) displaying the userdata table.
    • Check your output destination folder to make sure all files (HTML, MOV, and JS) are present.

Creating a Multi-Row Object Movie

To keep this tutorial consistent with the project files and the screencast, it will refer to the file names and images used in the screencast.

This part uses the multi-row project.

Import Using Select Input

When creating object movies, it is likely that a project has many images; so many images, that importing via the light table simply is not a practical option. To make importing these many images easier, import using Select Input.

Start by opening a new Object2VR project (File > New) and continue to follow these steps:

1. In the main project window, in the Input Section, choose Select Input.
   
   
2. If your images are already in an order or pattern, choose Image Sequence from the Type menu.
   
   
   
3. Next, define the base path of your images. This points to the folder or directory that holds the images so Object2VR knows where to look for them. Choose, Open and then choose the folder or directory that holds the images.
   
   
4. Now, set up your image sequence. Define how many columns and rows your images make up.
   • If you're following along with the project files, the multi-row project images make up 10 columns and 5 rows.
     
     
5. Define the pattern of the image sequence. In our example, the images are named in sequence: filename_row number_column number.tiff or out_0_0.tif (row 0; column 0) to out_4_9.tif (row 5;column 9). Object2VR needs to understand the naming convention and this is where we describe it (using JavaScript). In the Pattern field enter: 'out_'+ (row) + '_' + (column) + '.tif'
   • You will see the Object2VR update the file names below this field.
     
     
6. Click, Test Pattern.
   If the pattern description is correct, a dialog will appear that says, All files found. Click, OK, to continue.
   • If the dialog says that it cannot find the file, then you must go back and correct the pattern.
   • Make sure the examples given under the Pattern field are identical to your file naming conventions.
   • Here is more information on describing patterns.
     

Viewing Parameters and User Data

Now that your pattern is set and the images are recognized by Object2VR, the next step is to set up the viewing parameters.

1. Start by setting the default view and then the controller type.
   TIP: Perhaps choose one other than the Grabber/Scroller, so you can see how the others work.
   
   
2. For this project, we need to change how the movement of the skin scrolls. Currently, it covers the skull in an upward movement when the mouse scrolls downwards. To make this movement more natural, so that the skin moves in the same direction as the mouse, select reverse for the Vertical movement.
   The skin should now cover the skull with the same direction as the mouse.
   
   
   
3. Enter User Data if you wish.

Add Area Hotspots: Reusing Hotspots

1. In the main project window, go to the Hotspots section and choose Modify to add an area hotspot.
   
   
2. Select Enable to turn on editing.
   
   
3. Select both Columns and Rows for the reuse of the hotspots.
   • This means that the hotspots you will now draw will be visible on all images. Hence, each hotspot will be reused for each image. You'll also notice that in the hotspot editor, all is automatically chosen for Image.
     
     
4. Pick a drawing tool and draw your chosen shape over the image in the hotspot editor.
   
   
5. Give it a title.
   
   
6. To make it interactive, you can add a web address to the URL field.
   • Make sure the full web address is entered.
   • Your hotspot editor should look something like this:
     
     
     
7. Click OK when you're done to return to the main project window.

Outputting a Flash Movie

1. In the Output section, choose Flash as the new output format by selecting it from the menu and then clicking Add.
   • The Flash parameters window will appear.
     
     
2. Leave the Image Settings at their defaults.
   
   
3. Increase the window size to 300 x 300 pixels (px).
   • Notice that when you enter in one value the other value will automatically update. This is because Keep aspect ratio is selected.
     
     
4. Choose With Window from the Stage Scaling menu.
   • This will allow the movie to maintain its aspect ratio when the movie window's size changes.
     
     
5. Choose the Auto play mode, Rotate.
   • Keep the speed at its default of 1.
     
     
6. To make the movie zoom-able, select Enable Zoom to turn on the zoom parameters. Keep everything at their defaults.
   
   
7. Next, add a skin. From the Skin menu in the Skin/Controller section, choose controller_new.ggsk and then click Edit.
   • This will open the Skin Editor.
   • Here you can choose to leave the skin as is or to edit it. If you would like to edit it, start by saving the skin under a different name. Go to File > Save As. Give your new skin a name and save it in the skins folder. Make changes to your skin.
   • In this example, the buttons are scaled down to 70 percent. Otherwise, the original size of the buttons would look too large against the small movie. To change the size of the buttons, double-click on the button in the Tree and change the scale values for x and y to 0.70. You can then moved each button closer to each other to close the gap between them that is caused from scaling them down.
     
     
8. When you are finished click, OK. Object2VR asks to save changes. Choose Save.
   • This is what your parameters may look like:
     
     
     
9. In the Output section, choose Open to make sure your movie file will be saved where you wish.
   TIP: Keep in mind that is best practice to keep all files in the same folder.
   
   
10. Go to the Advanced Settings tab and make some changes to the hotspot text box. Choose Auto for the Size and perhaps different colors for the Text, Background and Border.
    
    
    
11. Click OK and choose Yes to output the Flash movie. It should look something like this:

Please enable Javascript!

See also

Using the Light Table (Object2VR)

Importing with Select Input (Object2VR)

Hotspot Editor (Object2VR)

Add Hotspots (Object2VR)