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.
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.
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)
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
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)
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)
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)
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)
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)
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)
8. Highlight the screen-tint-block element. In the Properties panel set the Appearance: Alpha: to 0.250 (Figure 13)
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)
Note: for more information on how to use the Integrated Web Server there is information on the Pano2VR Website here.
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.