Overview
This “Little Bits” tutorial show you how to add a “Fly-in” effect to a node other than the starting node.
Note: this tutorial is designed for Pano2VR V6.1.3. You can download the software here. As “Little Bits” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.
Final Output
Tutorial Files
In the tutorial folder,”Fly-in-Node”, there is an Asset Folder with 2 x Equirectangular files. There is also a Project folder with a Pano2VR project 'fly-in.p2vr', a skin 'fly-in.ggsk' and an Output Folder called 'fly-in-node' with project files created from the .p2vr and .ggsk elements. (Figure #1)
Figure #1: Tutorial Folder
Project Overview
In this tutorial we will modify the fly-in.p2vr project file and the fly-in.ggsk skin by;
Setting a Stereographic default view for node 2
Adding a ‘Node Marker’ to the skin
Adding an action to change the View when node 2 opens
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it
Getting Started
1. Download the zipped tutorial folder here
2. Open the project file ‘fly-in.p2vr’ (Figure #2)
Figure #2: Project File
Set the Stereographic View
1. Preview the current project by clicking on the ‘Open Output’ button in the Output panel.
Note: at the moment we have two nodes in Rectilinear projection and two buttons to move through the nodes. Node 2 will be our fly-in so we need to modify the Viewing Parameters for that node.
2. Click on the 6x3-black node to activate it
3. Set the following parameters in the Default View:
Projection: Stereographic
Pan: 0.00˚
Tilt: -90.00˚
FoV: 270.00˚
4. Click on the ‘Set’ button to make them permanent (Figure #3)
Figure #3: Default View settings.
5. Save the project and click on the ‘Generate Output’ button
Note: now when we move between the nodes, node 2 shows us a stereographic view.
6. Save the project
Add the Node Marker and Action to the skin
Note: the next step is to add a Node Marker and assign an Action to it. Node Markers are activated by the current panorama, or node, in a virtual tour. In our case we will use it to action a change in projection from Stereoscopic to Equirectangular or Fly-in.
1. Click on the ‘Edit Skin’ button to open the skin.
2. Select the ‘Add Node Marker’ button from the menu bar and click once in the Canvas to add a Node Marker to the skin. (Figure #6)
Figure #6: Adding a node marker to the skin
3. In the Properties | Node Maker panel select the 6x3-black node from the Tour Panoramas dropdown menu (Figure #7)
Figure #7: Add tour panorama to the node marker
4. With the element ‘Marker 1’ selected click once in the Properties | Actions | Source field and add the following values in the Action Settings window.
Source: Activate
Action: View
Type: Move to View
Pan: 0.00
Tilt: 0.00
FoV: 70
Speed: 2.00
Projection: Rectilinear
Easing Function: Ease In Out
Click ‘OK’ (Figure #8)
Figure #8: Action Settings for the Node Marker 1
5. Save the skin
6. Publish the project to show the output below
7. Replace the tutorial panoramas with your own and set the Stereographic start position to suit your panorama.
Note: at this point the fly-in will happen every time the node is visited. If you want to make it only happen once you will need to add a new action and modifiers.
Disable the Fly-in
1. Open the Skin Editor and select the ‘Marker 1’ element
2. Double click in the Action to open the Action Settings window
3. In the Action Settings window click on the ‘Action Filter’ button
4. Add the following parameters; Trigger: Visited Comparison: = Value: false and click ‘OK’ (Figure #9)
Figure #9: Adding a modifier to the Action to only show fly-in on first view
Note: The Action will only execute if the node has not been visited (viewed). However if the node has been viewed the panorama will be presented in the default mode, Stereoscopic. Another Action has to be added to show the view in Rectilinear mode
5. With the ‘Marker 1’ still selected double click in a blank Action to open the Action Settings window.
6. Add the following values in the Action Settings window.
Source: Activate
Action: View
Type: Set View
Pan: 0.00
Tilt: 0.00
FoV: 70
Projection: Rectilinear
Click ‘OK’
7. In the Action Settings window click on the ‘Action Filter’ button
8. Add the following parameters; Trigger: Visited Comparison: = Value: true and click ‘OK’ (Figure #10)
Figure #10: Adding a modifier to the Action to set the view to Rectilinear after first view
9. Save the skin and publish the project
Note: this version has a button that resets the ‘viewed’ variable. It is a text field with an Action: Source: Mouse Click | Action: Go to URL | Parameters: javascript: player.clearVisitedNodes();
Summary
I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.
