Splash screen

Q&A about the latest versions
Post Reply
User avatar
Posts: 10
Joined: Thu Feb 15, 2018 2:12 pm
Location: Italy

Tue Dec 04, 2018 7:20 pm

I would like to insert at the begin of the tour a flat (traditional) photo that acts as a splash screen.
As soon as I give the command, the splash screen closes and the tour begins with its fly-in
how do you advise me to proceed?
Thanks to everybody
User avatar
Posts: 10987
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Wed Dec 05, 2018 12:13 pm

Hi luca,
How you would do this.

• You need to know your Stereographic settings first. To do this select the Viewing Parameters panel, then right button click in the viewer and change the projection to Stereographic. Zoom out and get the start image you want and make a note if the Pan/Tilt/FoV, example -5.71/-90/270.
Once you have your data return back to the Rectilinear projection or just click the GoTo button as found under the Default View.

• Under the HTML5 outputs advanced tab select Assets and add file. This will be your splash screen image and on creation will put your image in an assets folder.

• Open the skin editor and add an External Image Loader. Under its properties set the path to your image using the External URL text field, it will be in the assets folder so the path will be: assets/splash.jpg, that's assuming that splash.jpg is your image file name.
Other settings for the External Loader are Content Scaling: Max and deselect, Never enlarge.
Also make sure the External Loader is the first element in the Skins Tree. This is because the higher up the tree the more forward it will be in the output and you want the splash screen to cover all other elements.

Add the actions to the external loader:

Source: Config Loaded
Action: View
Type: Set View
Pan: -5.71
Tilt: -90
FoV: 270
Projection: Stereographic
(This is the setting from your start stereographic projection)

Source: Mouse Click
Action: Alpha
Type: Change Element Alpha
Alpha: 0.00
Transition Time 0.500s
Target: -self
(This fades out the splash screen)

Action: Mouse click
Action: View
Type: Move to Default View
Speed: 2.00
Easing Function: Ease Out
(This starts the fly-in)

I have attached my skin, the external loader is looking for: assets/popup01.jpg but you can change that for your image.
(8.6 KiB) Downloaded 103 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
User avatar
Posts: 10
Joined: Thu Feb 15, 2018 2:12 pm
Location: Italy

Wed Dec 05, 2018 12:29 pm

grazie Martin
a.s.a.p. I'll try your precious indications
Posts: 14
Joined: Mon Jun 17, 2019 11:38 am

Tue Jun 18, 2019 4:21 pm

This works great.... is there a way to completely hide the tour that is loaded behind the image? if the window is scaled greater than the intro image everything behind it will show. If its set to 100% it does not scale proportionally.
Posts: 14
Joined: Mon Jun 17, 2019 11:38 am

Tue Jun 18, 2019 4:34 pm

Solved..... added a rectangle and placed in just under the image set to 100%
User avatar
Posts: 8
Joined: Wed Jul 17, 2019 9:54 pm
Location: Chicago

Mon Jul 29, 2019 7:58 pm

I really like this solution for my splash screen but I have another questions.
How do I make this image fade out on its own lets say after 3 seconds?
User avatar
Posts: 340
Joined: Thu Sep 20, 2018 10:18 pm

Wed Jul 31, 2019 7:47 pm

You have to use a timer which is very easy to do.

Here is a 2 minute video to show you how:

Creative expression is the Universe's only way of experiencing every configurative atomic possibility capable within a finite Universe.
Post Reply