Overview
This two part “Pano2VR” tutorial show you how to animate a multilevel Lower Third Banner that is responsive to mobile devices such as smartphones.
Part 2 requires a finished project files from Part 1, please finalise that tutorial before starting this one.
Note: this tutorial is designed for Pano2VR V6.1.2 You can download the software here.
Part 2 Final Output
Testing Links
If you would like to test the Part 2 Final Output in your browser you can use the link https://rebrand.ly/lower-third-active
Tutorial Files
This project uses the tutorial files from Part 1, you can find the tutorial here.
Project Overview
In the second part of this tutorial we will continue to modify the lower_third.ggsk skin by;
Develop a break size to determine at what point we require the responsive logic to apply to the banner
Add logic to the Scale property of the lower third banner elements
Add logic to hide the Lower Third Banner when the panorama is interacted with
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it
Getting Started
1. Complete Part 1 of the tutorial
2. Double Click on the final Part 1 project file ‘lower_third.p2vr’ to open it if it’s not already open (Figure #1)
Figure #1: lower_third.p2vr project w
3. Click on the ‘Open Output’ button to see the current state of the project (Figure #2 & 3)
Figure #2: Open Output button
Figure #3: Current state of the project
The Skin
1. Click on the ‘Edit Skin’ button to open the skin editor (Figures #4 & 5”)
Figure #4: Skin Editor button
Figure #5: lower_third skin after completion of Part 1
2. Click on the ‘Live Preview’ button to see the current skin with text rendering (Figures #6 & 7)
Figure #6: Live Preview button
Figure #7: Live Preview window showing stacked elements from Part 1
Note: In this tutorial I am using Google Fonts, Barlow, for the text elements. For more information on using Google Fonts in Pano2VR projects check out my Google Fonts for Text Fields tutorial
Creating a Responsive Skin
Note: If we view the published project from Part 1 it looks fine on a Desktop and okay on a tablet, but there is a major issue when viewed on a smartphone such as the Samsung S8. (Figures #8, 9 & 10)
Figure #8: Apple iPad Air
Figure #9: Samsung Galaxy Tab
Figure #10: Samsung S8
What we want to do is maintain the current size of the lower third for desktop and most larger tablets but scale it for smartphones and smaller tablets.
For this tutorial I’m benchmarking off the Apple iPhone 11, Pro & Max. Apple iPad 12.9” iPad Pro, 11” iPad Pro, iPad Air, iPad & iPad Mini.
iPhone 11: 1792 x 828 px
iPhone 11 Pro: 2436 x 1125 px
iPhone 11 Max: 2688 x 1242 px
12.9-in iPad Pro: 2732 x 2048 px
11-in iPad Pro: 2388 x 1668 px
iPad Air: 2224 x 1668 px
iPad: 2160 x 1620 px
iPad Mini: 2048 x 1536 pxI’ve also included the Samsung S8 and Samsung Galaxy Tab A (old I know it)
Samsung S8: 2960 x 1440 px
Samsung Galaxy Tab A: 1024 x 768 pxAfter reviewing the pixel screen sizes of these devices I’ve come up with a break size of 1792 x 828 px
Based on this my logic will be;
a. if the player width >= (greater than or equal to) 1792 and the player height >= 828 and the device Is Mobile then the scaling stays at 100%.
b. if the player width >= (greater than or equal to) 828 and the player height >= 1792 and the device Is Mobile then the scaling stays at 100%.
c. if the player width <= (lesser than or equal to) 1791 and the player height <= 827 and the device Is Mobile then the scaling changes to 75%.
d. if the player width <= (lesser than or equal to) 827 and the player height <= 1791 and the device Is Mobile then the scaling changes to 75%.
This logic this means that the tablets, other than the Tab, will remain at 100% but the smaller iPhones and S8 will change to 75%
1. Select the svg_green_stripe element to make it active and and set the following properties:
Properties / Appearance / Scaling: Logic Block
Trigger #1
Trigger = Player Width | Comparison: >= | Value = 1792 | Operation = And
Trigger = Player Height | Comparison: >= | Value = 828 | Operation = And
Trigger = Is Mobile | Comparison: = | Value = true
X: = 1.00 Y: = 1.00
Trigger #2
Trigger = Player Width | Comparison: >= | Value = 828 | Operation = And
Trigger = Player Height | Comparison: >= | Value = 1792 | Operation = And
Trigger = Is Mobile | Comparison: = | Value = true
X: = 1.00 Y: = 1.00
Trigger #3
Trigger = Player Width | Comparison: <= | Value = 1791 | Operation = And
Trigger = Player Height | Comparison: <= | Value = 827 | Operation = And
Trigger = Is Mobile | Comparison: = | Value = true
X: = 0.75 Y: = 0.75
Trigger #4
Trigger = Player Width | Comparison: <= | Value = 827 | Operation = And
Trigger = Player Height | Comparison: <= | Value = 1791 | Operation = And
Trigger = Is Mobile | Comparison: = | Value = true
X: = 0.75 Y: = 0.75 (Figure #11)
Figure #11: svg_green_stripe scaling logic block
2. Open the svg_green_stripe scaling logic block if it’s not already open.
3. Select ‘Copy’ and close the logic block
Note: rather than copy and paste into each individual element we will do it all at one time
4. Command select (Mac) the following elements within the con_lower_third folder con_text_links, svg_yellow_over, svg_yellow_under, svg_black_over and svg_black_under
5. Click on Properties / Appearance / Scaling: Logic Block button and select ‘Paste’ to add the logic code. The logic is now added to each of the selected elements. (Figure #12)
Figure #12: logic block code copied to selected elements
6. Save the skin
7. Republish the project
Note: on the desktop you will not see any difference as the logic only applies to mobile devices.
If you are using the Integrated Web Server you can open the published file on your device using the http address shown on the server window.The following image show the updated skin on the Samsung S8 (Figures #13 & 14)
Figure #13: Portrait orientation Samsung S8
Figure #14: Landscape orientation Samsung S8
Auto Hide Lower Third Banner
1. Select ‘Draw Timer’ from the menu and click once in the skin to add it
2. With the timer selected set the following properties:
Properties / Position / ID: hide_lower_third_timer
Properties / Appearance / Visible: Delete Logic Block
Properties / Appearance / Alpha: Logic Block
Trigger #1
Trigger = Active | Comparison: = | Value = true | Alpha = 0.000
Transition / Enabled (checked) | Time: = 1.000 seconds
Properties / Timer / Type: Player Inactive | Timeout: 2.000 seconds | Repeat: One Time (Figure #15)
Figure #15: hide_lower_third_banner alpha logic block and timer settings
3. Select the hide_lower_third_timer timer and drag it into the con_lower_third container
4. Shift select contextlinks, consvgyellow, consvgblack and svggreenstripe and drag them into the hide_lower_third_timer to make them children of the timer (Figure #16)
Figure #16: child elements of hide_lower_third_time
6. Save the skin
7. Republish the project
Note: now as you interact with the panorama the Lower Third Banner fades out and when you stop it fades back in
Summary
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.
