Tutorial: Responsive Animated Lower Third Banner

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

Sun Dec 29, 2019 4:59 am


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.


lower_third_ipad.jpg (200.43 KiB) Viewed 3933 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


Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
Post Reply