Updated: 26/4/19 - In order to make the tutorial compatible with multi-node tours I’ve modified the tutorial including;

Setting the initial view (stereographic) using the Config loaded Action,
Constrained the timers to only activate once by adding Action Filters to the Timer Deactivation Actions
Hidden the ‘click to start’ button by using projection type in a logic block

Overview

This “little bit's” tutorial show you how to add an animated gif to a tour that runs until the loading is complete and then displays a ‘Start’ button that triggers the fly-in.

Note: this tutorial is designed for Pano2VR V6.0.5. As “Little Bit” tutorials don’t go into a lot of detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.

Final Output (Single Node)

Note: with faster internet the loading option is often not seen. In order to show you what happens over a slow connection I’ve set the Integrated Pano2VR Web Server to a speed limit of 56kb. The video below shows you the Mario animated gif appear, the loading counter shows the amount downloaded. Once the image has fully loaded the animated gif disappears and a ‘Start’ button is shown. Clicking on the start button changes the projection to rectilinear, hides the button and the screen tint.

Tutorial Files

In the tutorial folder, Animated-Loading-Gif, there is an Asset Folder with an animated gif, a button.svg file and two equirectangular images. There is also a Project folder with a Pano2VR project 'animated-loading-gif.p2vr', a skin 'animated-loading-gif.ggsk' and an Output Folder called 'animated-loading-gif' with project files created from the .p2vr and .ggsk elements. (Figure #1)

Project Overview

In this tutorial we will modify the animated-gif-loading.p2vr project file and the animated-gif-loading.ggsk skin by;

Modify a Loading component to set the initial view (stereographic)
Setting a Timer that shows the arrow button once the loading has finished
Add Actions to the ‘Arrow’ button to hide itself, the screen tint and change the projection and orientation of the panorama to the default view (rectilinear)
Add Action Filters so the timers only activate once
Add ‘previous/next’ component to navigate through the nodes

Note: this tutorial assumes a basic knowledge of Pano2VR V6.0.4
Note: click on any image in the tutorial to enlarge it

Getting Started

1. Download the zipped tutorial folder here

2. Click on the animated-loading-gif.p2vr file to open it. In the Viewing Parameters the Default View: Projection: is Rectilinear and the settings are Pan: 0.00˚ | Tilt: 0.00˚ | Fov: 70.00˚ (Figure #2)

3. Click on the Edit Skin button to open the Skin Editor. In the Tree there are the following elements, loading (Component), button_next_previous (Component), timer-animation (Draw Timer), click-to-start button (SVG), mario-animated-gif (Draw External Image) and a screen-tint-block (Draw rectangle) (Figure #3)

4. We want to reduce the number of elements in the loading element to just show the ‘percentage loaded’ number . Open the ‘loading’ container and delete the loadingbar and loadingbg elements (Figure #4)

Note: when the tour opens we want the initial view of the panorama to be set to a projection of stereographic with a set of parameters that show a ‘little planet’ view

Figure #5: Setting the initial view of the node

Note: rather than show a loading bar we want to just display a percentage loading number so we will modify the text attributes of the loadingtext element

6. In the ‘loading’ container, click to highlight the ‘loadingtext’ element and set the Position: Anchor to center, in the Text: remove the ‘Loading…’ just leaving $p%, set the Font: uncheck Default, Size: 20px, Align: Center, all other align checkboxes set to unchecked (Figure #6)

Note: we don’t want to show the ‘button_next_previous’ element until the fly-in is finished so we will set some Appearance settings based on the change of projection from stereographic to rectilinear.

7. Click on the ‘button_next_previous’ container to highlight it and in the Properties panel - Appearance uncheck Visible. Set the Alpha to 0.000 then click on the Alpha Logic Block button and set Trigger: View = Projection | Comparison == | Value = Rectilinear | Alpha: 1.000 and Transition = Enabled / Time: 1.000 (Figure #7)

Figure #7: Appearance settings for the button_next_previous component

Note: after the panorama has loaded we want to hide the mario-animated-gif element and show the click-to-start element.

8. Click to highlight the ‘timer-animation’ element, In the Properties panel - Actions add two Actions as shown below: (Figures #8, 9 & 10)

Note: the element, mario-animated-gif, loads when the tour is opened and is visible while the counter shows the loading percentage. Once everything is loaded the timer is activated and a second later it deactivates. The deactivation triggers the two actions and the click-to-start button alpha value is set to 1 and becomes visible and the mario-animated-gif alpha value is set to 0 and becomes invisible.
We only want the animation and fly-in to happen once so we need to disable the timers from activating if the node is revisited. We do this by adding Action Filters to each Action

9. With the ‘timer-animation’ element selected. In the Properties panel - Actions double click on the first Action to open the ‘Action Setting’ window. In the window click on the ‘Action Filter’ button to open the ‘Action Filter’ window. In the window add the following: Trigger = Tour: Visited | Comparison = = | Value = False. Click OK to close the windows and apply the filter (Figure #11)

Figure #11: Adding the Action Filter to the Deactivate Action

10. Repeat the same steps with the second Action

Note: visited is only detected once you leave and come back to a node. So as it will be ‘false’ to start with the actions will be executed. As you leave and come back, Visited will be ‘true’ so the actions will not execute. As the Mario gif has had it’s alpha set to 0 it will not be seen.

(thanks to Martin Hopkins for this insight)

Note: the click-to-start buttons initiates a number of actions including the move of the panorama from stereographic to rectilinear projection, the fade out of the screen-tint-block, the fade out of the button itself. We also need to ensure that the button doesn’t load again after the fly-in. To do so we will set a number of parameters in the Properties panel.

11. Click on the ‘click-to-start’ element. In the Properties panel - Visible uncheck Visible. Click on the Logic block button and set two Triggers: View = Projection | Comparison == | Value = Rectilinear | Visible = false and
View = Projection | Comparison == | Value = Stereographic | Visible = true. Set Appearance: Alpha: to 0.000 (Figure #12)

Figure #12: Logic block to hide the click-to-start button

12: with the ‘click-to-start’ element still selected add 4 Actions as shown below: (Figures 13, 14, 15, 16 & 17)

13. Save the skin, close the skin, save the project and select ‘Generate Output’ to create and show the final project (as shown below) or viewed at https://s3-ap-southeast-2.amazonaws.com/p2vrlittlebits/Animated-Loading-Gif-Tutorial-Sample/index.html

Note: To test the loading it may be necessary to set the Integrated Web Server to a slower speed. You can open the server under Menu: Tools: Integrated Web Server. (Figure #15)

Note: for more information on how to use the Integrated Web Server there is information on the Pano2VR Website here.

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.

I'd like to Donate

Back to "Little Bits" Homepage

Animated Loading Gif with Fly-in