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_RPGTV2024_CLEAN_START.p2vr file and save it with the name 2_RPGTV2024_SPLASHSCREEN.p2vr.
Open the Edit Skin Configuration window and scroll to the -[ SPLASH SCREEN ]- section.
Note: In the Project folder in *RPGTV2024_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): Version A of the Splash Screen will be displayed when this option is checked.
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.
Studio Mac Desktop
iPhone 11 Pro
iPad Pro (12.9-inch) (4th Gen)
Version A: Logo
In the *RPGTV2024_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_RPGTV2024_CLEAN_START.p2vr file if it’s not already open. Save it as 3_RPGTV2024_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 *RPGTV2024_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 *RPGTV2024_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_RPGTV2024_SPLASHSCREEN_VALOGO.p2vr if it’s not already open. Save it as 4_RPGTV2024_SPLASHSCREEN_VALAN.p2vr.
In Properties - Project > Translations, click on the Translations Folder: icon to create a new folder.
In the root of the RPGTV2024_Project folder, select the folder **RPGTV2024_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 **RPGTV2024_LANGUAGE 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.
In the my_MM.po open a search window and search for 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, enter a part of the tooltip, 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 **RPGTV2024_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.
Save the project and then output the project. The splash screen should look like the example below.
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 B1
Open the R4_RPGTV2024_SPLASHSCREEN_VALAN.p2vr if it’s not already open. Save it as 5_RPGTV2024_SPLASHSCREEN_VB1.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 B1 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 B2: Floating Image
Splash Screen Version B2 is quite different to Version B1 with the addition of a floating image.
Open the 5_RPGTV2024_SPLASHSCREEN_VB1.p2vr if it’s not already open. Save it as 6_RPGTV2024_SPLASHSCREEN_VB2FLOAT.p2vr.
To accommodate the mobile screen, the Splash Screen settings can add a Version B Mobile 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 B3: 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_RPGTV2024_SPLASHSCREEN_VB2FLOAT.p2vr if it’s not already open. Save it as 7_RPGTV2024_SPLASHSCREEN_VB2FULL.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 different Navigational Menus available within the project.
