Note: This post is a work-in-progress
In the post, “A Clean Start”, the section headed “Generate Output (Publish)” includes a review of the nodes included in the tutorial files as named below;
Galleries
360, Linked & External Video, Info, Web & Pin Popups
Audio
360˚ Video
Custom Images
Each of these nodes contains hotspots that display content, in a popup window, when the hotspots are interacted with.
I refer to them as Responsive Hotspots because they are designed to display the content in a way that reflects the browser screen size, aspect ratio, orientation (when viewing on a mobile device) and dependencies of different operating systems.
For example, a gallery hotspot popup can look like this on a browser that has a horizontal aspect ratio.
Or like this when the browser aspect ratio is vertical
Or like this when the device is a mobile phone.
Adding a Responsive Hotspot
#1 Copy and Paste
The simplest way to add a new hotspot is to copy and paste an existing one and then modify it.
In this example, we will copy a Responsive Gallery hotspot from the *BASE_EN_DEMO.p2vr project and add it to the 12_TAMAN_MULTINODES(.p2vr) project.
1. Open the BASE_EN_DEMO(.p2vr) project found in the **BASE folder
2. Publish the project
3. Click on the last hotspot on the top row
Note: As you can see from the tooltip this hotspot has a number of settings defined;
Responsive
Multiple Images
Slide Title & BG
Headline
Description
4. Click on the hotspot to open it.
Note: you can click the large “>” arrow to open the next image. As you do so the image title changes and the description changes. This gallery has five images in it.
5. In the project file select the hotspot
6. Right-click and select “Copy Active Point Hotspot” from the popup menu
7. Close the project
8. From the **TAMAN_FESTIVAL folder open any of the versions in the folder. In my example, I’m using 12_TAMAN_MULTINODES(.p2vr)
9. Right-click in the Gas Mask node and select Paste Point Hotspot from the popup menu.
10. With the hotspot selected you can see the settings attached to the hotspot in the Properties - Point Hotspot panel
11. Save the project as 14_TAMAN_RESHOTSPOTS(.p2vr)
12. Publish the project
13. On the Splash screen select “Enter the Park”
Note: on mouse-over the floating tooltip is shown and when the hotspot is clicked the Responsive Popup Gallery is displayed.
Note: at this point we would modify the Point Hotspot Properties by changing the images and text. In the next example we will create the same popup from scratch and this will provide examples that can be used to update the Copy and Paste version.
#2 Creating from Scratch
1. From the **TAMAN_FESTIVAL folder open the 12_TAMAN_MULTINODES(.p2vr) project
2. Select the second node “Gas Mask”
3. Add a Hotspot
