Page 1 of 1

Tutorial: Responsive Animated Lower Third Banner

Posted: Sun Dec 29, 2019 4:59 am
by Tony
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 5342 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