Splash screens in Virtual Tours serve as entry points, displaying titles, logos, or images. They indicate loading progress, offer branding opportunities, and may provide instructions or options. Balancing aesthetics with functionality, they set the tone for the tour, optimize for devices, and allow language selection. Splash screens are crucial for creating a positive first impression and smooth entry into the virtual experience.
Myanmar Sample Splash Screens
Building on our previous project, "A Clean Start", we will create different versions of Splash Screens:
Version A
Version B1
Version B2: Floating Image
Version B3: Fullscreen Image
Additionally, we will incorporate:
A Logo with an external link
Language selection buttons
Splash Screen Version A
Open the 1_CLEAN_START.p2vr file and save it with the name 2_SPLASHSCREEN.p2vr.
Open the Edit Skin Configuration window and scroll to the -[ SPLASH SCREEN ]- section.
Note: In the Project folder in *ASSETS/Myanmar/Splashcreen there is a text document myanmar_splash.txt that contains the text entries below.
Set the attributes for - [ SPLASH SCREEN ]-;
Show Splash Screen: = checked
Splash Screen Version A (uncheck = B): = checked
Splash Title: = Myanamar
Splash Description: = The only real prison is fear, and the only real freedom is freedom from fear <br><i>-Aung San Suu Kyi</i>
Splash Button Title: Enter the Tour
Show Splash Screen: Manages the visibility of both versions.
Note: If the checkbox is unchecked, no Splash Screen will be displayed, and the first node will be shown when the tour has loaded.
Splash Screen Version A (uncheck = B): When this option is checked, Version A of the Splash Screen will be displayed.
Splash Title: Main Title of the Tour.
Splash Description: A description of the Tour.
Splash Button Title: The title of the Start Button
Click OK to save the Edit Skin Configuration changes.
Save the project and output the project. The splash screen should look like the example below.
Version A: Logo
In the *TO_UPLOAD folder, there is a subfolder called logos. Inside the folder are three logos: 3fingerpeace.svg, redhead.png, and white-kencana-statue.svg.
Note: these are uploaded and available within the project when the project is output.
For this splash screen, we will be using the 3fingerpeace.svg
FYI: As thousands of protesters in Myanmar continue to demonstrate against the military coup, one hand gesture has emerged as the movement's defining symbol - the three finger salute.
Open the 2_CLEAN_START.p2vr file if it’s not already open. Save it as 3_SPLASHSCREEN_VALOGO.p2vr
Open the Edit Skin Configuration window and scroll to the -[ LOGO ]- section. Add the following attributes;
Logo [inc. ext]: 3fingerpeace.svg
Logo Tooltip: Click to read Myanmar Now
Website URL [https://location]: https://myanmar-now.org
Logo Link Target [blank, parent, self, top]: blank
Scale logo [max 100% - 90,80,70 etc]: 70.00
Show Logo on Splashscreen: = checked
Note: you can find a text file splash_info.txt in the *ASSETS > Myanmar > Splashscreen that contains all the information so you can cut and paste.
Splash Logo [inc. ext]: The name of the logo (The logo is contained within the *TO_UPLOAD > logos folder.
Splash Logo Tooltip: The tooltip is shown when the mouse is over the Logo
Website URL [https://location]: This URL opens when the logo is clicked.
Logo Link Target [blank, parent, self, top]: Where the linked document will open when the logo is clicked. If target=blank, the linked document will open in a new tab.
Scale logo [max 100% - 90,80,70 etc]: A global setting that modifies the size of the original logo
Show Logo on Splashscreen: When checked, the logo will appear on the splashscreen.
Close the Edit Skin Configuration window,
Save the project and output the project. The splash screen should look like the example below.
Note: Mousing over the logo reveals the tooltip, and clicking on the logo will load the Myanmar Now page in a new tab/window
Version A: Language
This section is optional as it requires knowledge of Pano2VR's Translation functionality and access to the Software Application POEdit.
Note: If you are unfamiliar with the translation process there are 2 Webinar videos on Pano2VR’s YouTube Channel. However the essential information is in the first webinar.
If you wish to continue, the first step is to create the translation file.
Open the 3_SPLASHSCREEN_VALOGO.(p2vr) if it’s not already open. Save it as 4_SPLASHSCREEN_VALAN.(p2vr).
In Properties - Project > Translations, set the following;
Include Files: Hotspots = unchecked
Include Files: Media = unchecked
Note: In another post we will be including the above but for now it keeps it easier to find the translations.
Click on the Translations Folder: icon to select the language folder.
In the root of the RPGTV2024_Project folder, select the folder **LANGUAGE_CLEAN_START and click Open.
Note: The location will appear in the Translations Folder: setting.
Click on the Generate Translations Template: button to create the translation file.
Note: After the translation file has been created you will see the following message.
Note: you can use the links in the message to view the files location, go to the Poedit site or view the Pano2VR documentation on languages.
The .pot file is located within the **LANGUAGE_CLEAN_START folder
Once you have located the file, double-click the .pot file to open it. Then click “Create new translation”
Select Burmese (Myanmar [Burma]) as the language and click OK.
In the my_MM.po open a Find window (⌘F) and enter the name Splash
Note: This helps you quickly find all entries that are associated with the word Splash or have it as part of a variable etc. You can see in the Notes for translators the it’s showing the skin variable that the entry is contained in.
The first entry found will be “Enter the Tour”
Click on the translation to apply it.
Go back to the Find window and click next to find all the following entries;
Myanmar
The only real prison is fear…
To find the logo tooltip, in the Find window, enter a part of the tooltip name, e.g. Click to…
When all the Splashscreen/Logo entries are translated, close the my_MM.po file and save it into the **RPGTV2024_LANGUAGE folder.
In the **LANGUAGE_CLEAN_START folder you can see the my_MM.mo and .po files.
Note: in Pano2VR the .mo file isn’t used only the .po file
In the project Properties - Project > Translations > Translations: change the my_MM.po title to MY
Open the Edit Skin Configuration window and scroll to -[ LANGUAGE ]- and set Show/Hide language buttons [ uncheck = false ]: = checked
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project. The splash screen should look like the example below.
Click on the MY button to show the Burmese version.
Note: All of the text has been translated including the tooltip on the logo.
Version A & B Minimal
You can check the “Splash Button Minimal” checkbox for a straightforward text-only entry option.
Note: Checking will hide all elements except the actual Splash Button text and Language button text if they are active.
Open the Edit Skin Configuration window and scroll to the -[ SPLASH SCREEN ]- section and set Splash Button Minimal: = checked
Click OK to save the Edit Skin Configuration changes.
Don’t save the project just output it.
The splash screen should look like the example below. (click to view large image)
Version A & B Common Settings
Regardless of the version, some settings are common to both. They are;
Splash Button Title: = Enter the Tour
Splash Button Minimal
Splash Filter Blur
Splash Filter Saturation
Splash Filter Tint
If you want to change the attributes of the Splash Filters, Blur, and Saturation the settings are managed in the -[ GRADIENTS & TINTS ]- section of the Edit Skin configuration.
Blur Strength [ 50, 25, 15, 10, Default = 5 ]: 5
Saturation Strength [ 0, 1, 2, 3, 4, 5 Default = 2 ]: 0
Note: with saturation strength 0 = no color while 5 provides super-saturated results
Settings for the Splash Filter, Tint, are managed via the Skin Colors section of the Edit Skin configuration. The default setting is Black with an Alpha (125)
Note: the filters can be used individually. The composite below shows Left to Right: Saturation = 0, Blur = 5, Tint = Hex: ##760000 & Alpha: 150
Note: the filters can also be combined. In the example below all three, Saturation, Blur and Tint are combined.
Splash Screen Version B
Open the 4_SPLASHSCREEN_VALAN.(p2vr) if it’s not already open. Save it as 5_SPLASHSCREEN_VB.(p2vr).
Open the Edit Skin Configuration window and scroll to -[ SPLASH SCREEN ]-.
Set the attributes for - [ SPLASH SCREEN ]-;
Screen Version A (uncheck = B): = unchecked
Splash Button Minimal: = unchecked.
Leave the other settings as they are.
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project. The splash screen should look like the example below.
Note: Splash Screen Version B is similar to Version A. but the Title and Description sit higher in the screen, the logo is smaller and positioned under the Enter button
Version B: Floating Image
Splash Screen Version BFloat is quite different from version B, with the addition of a floating image.
Open the 5_SPLASHSCREEN_VB.(p2vr) if it’s not already open. Save it as 6_SPLASHSCREEN_VBFLOAT.(p2vr).
To accommodate the mobile screen, the Splash Screen settings can add a Version B Mobile floating image (usually square) of the Version B Image.
Open the Edit Skin Configuration window and scroll to the -[ SPLASH SCREEN ]- section.
Set the additional attributes for - [ SPLASH SCREEN ]-;
Version B Image: = myanmar_monks_landscape.jpg
Version B Image Mobile version: = myanmar_monks_mobile.jpg
Splash Filter Blur: = checked
Splash Filter Saturation: = checked
Splash Filter Tint: = checked
Leave the other settings as they are.
Note: in this version we want to lighten the background and make the floating image more dominant so we will change the color of the Tint.
Scroll to the top of the Edit Skin Configuration window
Click in the “Modified” square to open the Select Color window
Set the color to white and the Alpha Channel to 125.
Select OK to update the color.
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project. The splash screen should look like the example below.
Version B: Fullscreen Image
Splash Screen Version B3 is the same as Version B1, except it displays a full-screen image.
Note: The fullscreen image scales to match the viewport size without distortion. However, as shown on the mobile version, this may lead to cropping of the image.
Open the 6_SPLASHSCREEN_VBFLOAT.(p2vr) if it’s not already open. Save it as 7_SPLASHSCREEN_VBFULL.(p2vr).
Open the Edit Skin Configuration window and scroll to -[ SPLASH SCREEN ]-
Modify the attributes for - [ SPLASH SCREEN ]-;
Splash Version B Image: = myanmar_monks_fullscreen.jpg
Splash Version B Image Mobile: =
Splash Version B Image Fullscreen: = checked
Splash Filter Blur: = unchecked
Splash Filter Saturation: = unchecked
Splash Filter Tint: = unchecked
Leave the other settings as they are.
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project. The splash screen should look like the example below.
Note: as with the other versions Splash Filters can be used to modify the underlying image.
Open the Edit Skin Configuration window and scroll to the -[ SPLASH SCREEN ]- section.
Set the attributes for - [ SPLASH SCREEN ]-;
Splash Filter Blur: = checked
Click OK to save the Edit Skin Configuration changes.
Save the project and then output the project. The splash screen should look like the example below.
This finishes the section on Splash Screens.
In the next post, we will examine the function Warning with Cookies that allows us to post pre-tour information managed by a cookie.
