Chinese Gardens Tutorial Walk

This tutorial introduces the fundamentals of CubicConnector 2.0 by creating a 7-node scene showing a section of the walk through the Chinese Gardens in Sydney, Australia. The tour used in this tutorial is showcased on the Samples page.

Preparation

If you would like to perform this tutorial, you can download the tutorial materials.
If you would like to view the tutorial being constructed, you can watch video of tutorial being performed  [5:41]

Step 1 - Import the map

Drag the "chinese gardens map.jpg" image into the empty layout area.

Not every project you create needs a map. In fact, for fewer than 10 nodes you can probably just remember where they are located.

A map is useful, however, to provide assistance when orientating the nodes to make sure all possible connections are made, or when a map is to be added to the final QuickTime VR movie (the subject of a later tutorial).

The map you have just imported contains the locations of the seven nodes in this tutorial, with red numbers indicating their positions.

Step 2 - Import the first node movie

Drag the first node movie "node001.mov" onto the red numeral "1" at the left side of the map next to the tree.

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.

Underneath the bubble is the name of the node movie. To the right of the name is the node number in brackets. The node number is optional: if you don't want it there you can turn it off in the preferences.

Step 3 - Import the rest of the nodes

Drag the next six node movies - "node002.mov", "node003.mov", "node004.mov", "node005.mov", "node006.mov", "node007.mov" - onto their respective numbers.

Step 4 - Move to the Hotspots area

Click the first node marker "node001" 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 - View the first cube face of node 1

The Hotspots area will show the image of the first cube face, indicated by the highlighted blue face on the cube on the left. The "Node:" popup at the top left shows that we are on the first node.

Step 6 - Define a hotspot over the pavilion

We now need to place a hotspot over the pavilion, which is where the next node is located. To place a hotspot, CLICK where you want a corner to be AND DRAG in the opposite direction. A hotspot will appear.

Make the hotspot fairly large as we want to give the user of the movie an easy time finding it.

To move a hotspot, just click somewhere in the blue area and drag it over. If you need to resize a hotspot, use the handles at the four corners.

If you want to delete a hotspot, click on it to select it (a selected hotspot turns blue, an un-selected hotspot is gray) then press DELETE on the keyboard.

Note: the procedure above is for defining rectangular hotspots. CubicConnector version 2.0 introduced the option of polygonal hotspots which are made a different way and are described in another tutorial. For the vast majority of uses, rectangular hotspots are both quicker and simpler to use, and are used throughout this tutorial.

Step 7 - Change to the next cube face

The next hotspot is on a side cube face, so change the cube face displayed by clicking the cube.

Step 8 - Define a hotspot leading to the bridge

Define another hotspot, by clicking a corner and dragging in the opposite direction, to cover the area along the path leading to the next node - the bridge.

Again, be mindful of making the hotspot large enough for the unfamiliar viewer to find.

Step 9 - Move to the next node

These two hotspots complete the hotspots needed for this node ("node001"). Display the next node by choosing "node002" from the Node popup menu at the top left.

(You can either use the regular popup menu, or simply click the special round button at the right of it - which means "go to the next node"). This button loads the next node alphabetically 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.)

Proceed to Part Two of "Chinese Gardens Tutorial Walk"

Watch Movie of Tutorial Being Performed  [5:41]

(Return to List of Tutorials)