Tutorial: Responsive Animated Lower Third Banner

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

I've just finished a two part tutorial "Responsive Animated Lower Third" tutorial. The tutorial comes with a complete set of files you can use to create the final responsive project.

https://tonyredhead.com/pano2vr/lower-third-part1

lower_third_ipad.jpg
lower_third_ipad.jpg (200.43 KiB) Viewed 5449 times


Part 1 deals with setting the Z-index of the elements in order to manage the stacking order when viewing the project. Normally you would simply arrange elements in their correct order in the tree however for better management of elements I've used containers to group related elements together and used their Z-index to manage the order.

Part 1 also covers the implementation of the Timers and Actions to move/change elements in a sequence. At the end of Part 1 we have a working, animated lower third.

Part 2 discusses how I chose the break size that determines at what point we require the responsive logic to apply to the banner and provides the logic to Scale the elements.

Part 2 also covers using a Timer to hide the banner when the panorama is being interacted with.

If you would like to test the final projects you can find them here...

Part 1: https://rebrand.ly/lower-third

Part 2: https://rebrand.ly/lower-third-active

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Post Reply