Animated Loading Gif with Fly-in

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.3. You can download the beta here. As “Little Bit” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.

Final Output

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, .svg file and equirectangular image. 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)

 

Figure #1: Tutorial Folder

 

Project Overview

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

  • Modified a loading component

  • 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 of the panorama and set a final view

Note: this tutorial assumes a basic knowledge of Pano2VR V6.0.3

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 Stereographic and the settings are Pan: 0.00˚ | Title: -90˚ | Fov: 265˚ (Figure #2)

Figure #2: Project File

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

Figure #3: Skin Editor

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

 

Figure #4: Delete loading elements

 

5. 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 unchecked (Figure #5)

 

Figure #5: loadingtext updated

 

6. Highlight the Timer 1 element, In the Properties panel set the Timer: Type: to Loaded, set the Timeout: to 1.00 seconds and the Repeat: One Time. Add two Actions as shown below: (Figures #6, 7 & 8)

 

Figure #6: Timer Deactivate Action

Figure #7: Timer Deactivate Action

 
 

Figure #8: Timer Deactivation Actions

 

Note: As an element, running Mario loads 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 actions and the click to start button is made visible and the mario-animated-gif is made invisible

7. Highlight the click to start element. In the Properties panel set the Appearance: Alpha: to 0.000 and add three Actions as shown below: (Figures 9, 10, 11 & 12)

Figure #9: Click to start Actions

Figure #10: Click to start Actions

Figure #11: Click to start Actions

 

Figure #12: Click to start Actions

8. Highlight the screen-tint-block element. In the Properties panel set the Appearance: Alpha: to 0.250 (Figure 13)

 
 

Figure #13: Screen-tint-block alpha setting

 

9. Save the Skin, save the project and select Generate Output

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 #14)

 

Figure #14: Integrated Web Server

 

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

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia