Overview
This “little bit's” tutorial show you how to create a Fly-in effect and show a splash screen at the end of the fly-in.
Note: this tutorial is designed for Pano2VR V6.0.5. You can download the software here. As “Little Bit” 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_splash, there is an Asset Folder that contains an equirectangular image ‘8x4-green-grid.png’ and an ‘includes’ folder that contains a html file ‘popup.html’ and an image ‘pano2vr.png’. There is also a Project folder with a Pano2VR project 'fly-in_splash.p2vr' and a skin 'fly-in_splash.ggsk' and an Output Folder called 'fly-in_splash-screen' with project files created from the .p2vr and .ggsk elements. (Figure #1)
Project Overview
In this tutorial we will modify the fly-in_splash.p2vr project file and the fly-in_splash.ggsk skin by;
Adding in a Draw Text Field that loads the splash screen using an iFrame
Add a Logic Block to show the splash screen when the fly-in finishes
Add in a Blocking Tint to hide the splash screen loading
Enable a Mouse Click Action to hide the splash screen
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it
Note: this tutorial is based upon an example project from Martin Hopkins posted to the Pano2VR forum at https://forum.ggnome.com/viewtopic.php?t=11990
Add Draw Text field and add iFrame
1. Download the zipped tutorial folder here
2. Open the project file ‘fly-in_splash.p2vr’. The project has a 2 second Fly In set in the Auto Rotation & Animation panel. (Figure #2)
Figure #2: fly-in_splash Project File
3. Click on the Edit Skin button to open the fly-in_splash skin. To start the skin is empty of any elements. (Figure #3)
Figure #3: fly-in_splash Skin
4. Select ‘Draw a text field’ and in the Properties/Position panel set the ID to splash-screen, set the anchor to center, set the position to 0,0, set the size to 300px x 600px, In the Properties/Rectangle panel set the Background: Enabled: to unchecked and set the Border: Width: to 0. (Figure #4)
Note: this will be the size and position of our splash screen
Figure #4: Draw Text Field
Note: if the box doesn’t fit check the canvas size, it should be 900 x 700 pixels. Simply reset the size.
5. In the Properties/Text panel add the following iFrame code to the Text: area (Figure #5)
<IFRAME src="includes/popup.html" width="300px" height="600px" frameborder="no" scrolling="no"></IFRAME>
Note: this is the content of the splash screen and it is created using an image and CSS code.
Figure #5: iFrame code
6. Close the skin by selecting the ‘Close’ button, and select ‘Save’ from the dialog box. (Figure# 6)
Figure #6: Close and Save the skin
7. Copy the ‘includes’ folder from the Assets folder into the fly-in_splash-screen output folder and Output the project.
Note: The splash screen now appears above the panorama as it runs the fly-in program. The next step is to show it only when the fly-in has finished.
Show the Splash Screen with a Logic Block
1. Open the skin and select the splash-screen element. In the Properties/Appearance panel click on the Alpha Logic Block button and set the following Logic Block parameters and select OK (Figure #7)
Trigger: Projection | Comparison: = | Value: Stereographic | Operation: Or
Trigger: Projection | Comparison: = | Value: Fisheye
Alpha: 0.000
Figure #7: Alpha Logic Block for splash-screen element
2. Save the skin, re-output the project
Note: The splash screen only appears above the panorama after it finishes the fly-in program. You may however have seen a flash of splash screen, as it loads, when the page opens. The next step in the project will hide that initial flash.
Hide the Loading Flash with a Blocking Tint
The video below has been modified to show more clearly the loading of the Splash Screen element before the panorama loads. In order to hide it we will create an opaque screen tint. (Figure #8)
Figure # 8: Brief flash of the splash screen before the panorama loads
1. Add a ‘Draw Rectangle’ element to the skin and set the following Properties. (Figure #9)
Position:
ID: black-tint
Position: X: 0 Y:0
Anchor: Top Left
Size: Width: 100%, Height: 100%
Appearance:
Visible: Unchecked
Logic Block: Trigger: Loading | Comparison: = | Value: True
Visible: true
Rectangle:
Background: Enabled: checked
Color: #000000
Alpha Channel: 255
Border: Width: 0
Note: Make sure the black-tint element is above the splash-screen element in the tree
Figure #9: Black tint element
2. Save the skin and re-output the project
Note: the black-tint element hides the loading splash screen and is hidden once the panorama loads.
Enable a Mouse Click on the Splash Screen element
Note: if we simply add a Mouse Click action to the splash-screen element it will not work as there isn’t a solid element to catch the mouse click event. To enable it we will add a transparent element behind the splash-screen element.
1. Add a new ‘Draw Rectangle’ element to the skin. Drag the click-action element down the tree and onto the splash-screen element to make it a child of the element and set the following Properties: (Figure #10)
Position:
ID: click-action
Position: X: 0 Y:0
Anchor: Center
Size: Width: 300px, Height: 600px
Appearance:
Alpha: 0.010
Hand Cursor: checked
Rectangle:
Border: Width: 0
Actions:
Source: Mouse Click | Action: Visibility | Type: Hide Element | Target: splash-screen
Figure #10: click-action element
2. Close and save the skin. Re-output the project to finalise the Fly-In
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.
