The next two pieces of the MSG Jigsaw are Text and Web. Both are similar in their configurations so I’ve put them together in one tutorial.
In this tutorial we will create a Text only popup with large and small text boxes and a Web popup that loads a website.
Project Overview
In this tutorial, we will add and configure the project by;
Note: Click on any image to enlarge it
Step 1 - Assigning the Text Assets ⇑
Note: In this step we will assign the text assets so they are loaded when the project is published.
1. In the Tutorial folder open the To_Upload > gallery folder
2. Create a new folder and name it threefavourites (all lower case) (figure #1)
Figure #1: threefavourites folder
Note: the ‘threefavourites’ name identifies the location of the poupup elements.
3. Copy all of the threeofmyfavourite .mp3 assets into the threefavourites folder (figure #2)
Figure #2: threeofmyfavourite assets copied
Step 2 - Configuring a Point Hotspot as a Text Popup ⇑
1. Open the MSG_Gallery_Language.p2vr project
2. Save the project as MSG_Text.p2vr
3. In the Viewer window add a new Point Hotspot
4. In the Properties - Point Hotspot panel add the following;
ID: Text 1 (this can be anything you like)
Type: Info
Skin-ID: msg_gallery_tmp
Title: Three of my Favourite Animals (this can be anything you like)
Target: text
Pan/Tilt: I’ve set -30/0 (you can choose any position) (figure #3)
Figure #3: New hotspot and updated properties - point hotspot for text popup
5. Populate the Custom Properties
Popup Gallery ID: threefavourites
Popup Responsive: false
Popup Text Box Size: true
Popup Image: | (just a single pipe)
Popup File Extension: text
Popup Title: Three of My Favourite Animals
Popup Body Copy: (threeofmyfavourites.txt in Tutorial Assets > 5.Text and Web folder)
Popup Audio Files: threeofmyfavourites
Popup Enable Audio: true
Popup Image Shadow: true
Popup Border: true (figure #4)
Figure #4: Custom Properties for 400px x 400px text popup
Note: In regard to the Text popup there are two default sizes for the popup size; True = 400px x 400px and False = 400px x 200px. These defaults can be modified in the skin element msg_169_ratio > Size > logic block. This and other skin modification will be covered in a separate tutorial.
To test the variations we will copy and modify the Text Point Hotspot.
6. In the viewer right click and select ‘Copy Active Point Hotspot’ (figure #5)
Figure #5: Copy active point hotspot
7. Right Click in the viewer and select ‘Paste Point Hotspot’ (figure #6)
Figure #6: Paste point hotspot
8. In the Properties - Point Hotspot panel change the following;
ID: Text 2 (this can be anything you like)
Pan/Tilt: -15/-15 (figure #7)
Figure #7: Update point hotspot properties
10. In the Custom Properties set the following;
Popup Text Box Size: false (figure #8)
Figure #8: Updated custom property
11. In the Properties - Project > Translations change the Translations Folder to MSG_Component_text_translations (figure #9)
Note: This updated version contains translations for the threeofmyfavourites.txt file
Figure #9: Updated translations folder
11. Save the project
Step 3 - Publishing & Testing Text Popup ⇑
1. Publish the project
The two text hotspots are visible and when each is clicked in turn the different sizing of the text popups are clearly visible. (figures #10 & 11)
Figure #10: Text box size = true
Figure #11: Text box size = false
2. Set the language to Spanish and now the text is translated and the audio plays in Spanish. (figure #12)
Figure #12: Spanish language version
Step 4 - Configuring a Point Hotspot as a Web Popup ⇑
1. Open the MSG_Text.p2vr project
2. Save the project as MSG_Web.p2vr
3. In the Viewer window add a new Point Hotspot
4. In the Properties - Point Hotspot panel add the following;
ID: Web 1 (this can be anything you like)
Type: URL
Skin-ID: msg_gallery_tmp
Title: Tony Redhead Website (this can be anything you like)
Link Target URL: tonyredhead.com (note do not include https://)
Target: web
Pan/Tilt: I’ve set 15/0 (you can choose any position) (figure #13)
Figure #13: New hotspot and updated properties - point hotspot for web popup
5. Populate the Custom Properties
Popup Gallery ID: tonyweb
Popup Image: | (just a single pipe)
Popup File Extension: web
Popup Title: Tony Redhead Website
Popup Audio Files: tonyweb
Popup Enable Audio: true
Popup Image Shadow: true
Popup Border: true (figure #24)
Figure #24:
Step 5 - Assigning the Web Assets ⇑
Note: In this step we will assign the web assets so they are loaded when the project is published.
1. In the Tutorial folder open the To_Upload > gallery folder create a new folder and name it tonyweb (all lower case)
2. Copy the three tonyweb .mp3 files from Tutorial_Assets > 5. Text and Web. (figure #25)
Figure #25
Step 6 - Publishing & Testing Web ⇑
1. Save the project as MSG_Web.p2vr
2. Publish the project
The new web hotspot is visible and when clicked the popup opens and the website loads. (figures #26 & 27)
Figure #26: Web icon
Figure #27: Website loaded
Note: the Globe icon opens the website in a new tab.
Summary ⇑
Finally we are at the last type of MSG Gallery, Video. In the next tutorial we will create a Youtube, Vimeo, Vimeo 360˚ and Local File video popup with Headlines, and Body Copy overlay.
