QuickStart Tutorial - "The Gazebo Walk"

This tutorial introduces the basics of using CubicConnector by assembling a 4-node scene showing a walk into a garden gazebo. It covers importing nodes, defining hotspots, connecting hotspots to destination nodes, assembling a preview and exporting a multinode movie to disk.

Preparation

If you would like to follow along with this tutorial, download the tutorial materials. [1.5 MB]

Step 1

Drag the "gazebo node map.jpg" image into the empty layout area.

(Note: The 4-node Gazebo Walk scene that we are creating in this tutorial is probably too simple to really need a node map, but it demonstrates how to use such a diagram to orientate nodes - a useful technique when the number of nodes increases.)  

Step 2

Drag the first node movie "node001.mov" onto the leftmost red "X" (near the stone table).

The movie is imported into the project and a node marker (which looks like a "bubble") appears where you dropped the file. If you missed the position, you can move the node marker by dragging to reposition it.

Step 3

Drag the next three node movies - "node002.mov", "node003.mov" and "node004.mov" - onto the respective numbered red X.

Step 4

Click the first node marker "node001.mov" to select it. Then click the Hotspots tab to move to the hotspots area. (Or you can just double-click the node marker to move directly to the Hotspots area.)

Step 5

The Hotspots area will show the image of the first cube face. We don't need to place any hotspots on this face, so select the next cube face by clicking the control cube.

Step 6

We now need to place a hotspot over the area around the bird bath (the place where the next node is located). To place a hotspot, click and drag over the area. A hotspot will appear.

Make the hotspot

Step 7

We only need one hotspot on this node so select the next node "node002" from the popup menu.

(You can either use the regular popup menu, or simply click the special "Next Node" button at the right of it. This button loads the next node after the current one in the menu. If there are no more nodes the button dims. This can be useful if you are assigning all your hotspots in sequence.)

Step 8

On the first face of "node002", define a large hotspot over the area in front of the Gazebo.

Step 9

We need another hotspot that will take us back to "node001". This hotspot will be on the face directly behind the current one, so click the back face of the control cube to show the image.

Now define a hotspot over the shadowy area that goes back to "node001".

Step 10

With these two hotspots defined, we can move to the next node. Click the "Next Node button" to go to "node003".

Step 11

On the front face, define a hotspot to enter the gazebo, and on the back face define a hotspot to go back to the bird bath area.

Step 12

Click the "Next Node button" to go to "node004". This is the last node of the tour.

On the front face, define a hotspot that will take the user back to area in front of the gazebo. This is the only hotspot needed on this node.

Step 13

We have now defined all the hotspots needed for this movie.

Before proceeding to the Connections area to start connecting the nodes, choose "node001" again from the popup menu.

(You can start connecting nodes from any node, but to simplify this tutorial we will start with the first node.)

Proceed to Part Two of "The Gazebo Walk" Tutorial