How to create lower third in pano2vr and responsive format

Q&A about the latest versions
Post Reply
Panopics360
Posts: 64
Joined: Thu Jun 21, 2018 11:15 pm
Location: india
Contact:

Hi,,

How to create lower third in pano2vr and responsive format.
Any idea.with help of illustrator or after effect.or any other way?
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Panopics360,
I have no idea what you are referring to, can you explain a bit more.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Panopics360
Posts: 64
Joined: Thu Jun 21, 2018 11:15 pm
Location: india
Contact:

Lower third typography

When we listening news channel you can see ,some animation typography appear from left side and move to right side screen.i need that effects.in responsive format.

In simple
Moving text animation left side to right side in output file
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

You wrote:
i need that effect in responsive format.
I wrote:
For the Tele (vison) it is called:

A news ticker (sometimes called a Crawler or Slide ) is a essentially Horizontal, Text based Display this on in the form of a Graphic that Commonly Occupy in the low third of the Screen Pass/Screen Space. Financial news avenue use two or more tickers advance at disparate speeds, advertise basic prices and job profession headlines.

But you already knew this....
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Panopics360,

Here is a sample file with a responsive lower third, is this what you are after?

https://p2vr.s3-ap-southeast-2.amazonaw ... index.html

The lower third is made up of several svg elements so they retain their quality when resizing for mobile.

Timers control the movement, reveal and alpha change of the lower third components.

There is also a link to an external site on the lower right text.

The lower third fades out after 5 seconds but can be restored by a mouse enter on the bottom right of the screen.

It is responsive for mobile phones, iPad and Desktop. Tested on Samsung S8, Samsung Galaxy Tab, iPad Air and iMac.

iPad Air

grab-13.jpg
grab-13.jpg (295.04 KiB) Viewed 4876 times
grab-14.jpg
grab-14.jpg (101.93 KiB) Viewed 4876 times

Samsung S8

grab-15.jpg
grab-15.jpg (102.03 KiB) Viewed 4876 times
grab-9.jpg
grab-9.jpg (108.14 KiB) Viewed 4876 times

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/
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Ok, I was still not sure what a lower third was. Doing a Google search did not show any results but the keyword that was missing was banner!
Now I know, Lower Third Banner!

Every year I like to make a project for Christmas. This year is playing with text boxes and tour titles.
It will use Rectangles and text boxes and if I did not know any better I would have said Tony has seen it already as his project is very similar.
In between running around for Christmas, I hope to have it finished very soon.

Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

Okay here's another version using the timer from Hopki's "Click & Drag" component.

https://p2vr.s3-ap-southeast-2.amazonaw ... index.html

When you move the pano the lower third is hidden, when you stop it shows again.

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/
Panopics360
Posts: 64
Joined: Thu Jun 21, 2018 11:15 pm
Location: india
Contact:

Tony wrote: Sun Dec 22, 2019 1:12 pm Hi Panopics360,

Hi Sir

long time back i was searching for this .thanks for tutorial ,it amaze. can i get that pano2vr skin sir .so i can study all detail and style .


"it dream"
when after effects file directly insert in pano2vr ,it is amazing option
Panopics360
Posts: 64
Joined: Thu Jun 21, 2018 11:15 pm
Location: india
Contact:

ok sir i see both file amazing .thanks for support, can your skin

this is my website

http://panopics360.com/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Sorry not quite sure what you mean by 'can your skin'?
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/
Panopics360
Posts: 64
Joined: Thu Jun 21, 2018 11:15 pm
Location: india
Contact:

Tony wrote: Wed Dec 25, 2019 12:29 pm Sorry not quite sure what you mean by 'can your skin'?
Sorry text

Can you share that skin components file
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,
Can you share that skin components file
Unfortunately it's a bit more complex than just the component so I'm writing up a tutorial for it. Should be done in a couple of days and I'll post a link once it's done.

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/
User avatar
Tony
Posts: 1341
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

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/
Panopics360
Posts: 64
Joined: Thu Jun 21, 2018 11:15 pm
Location: india
Contact:

Tony wrote: Sun Dec 29, 2019 4:53 am 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

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
Thanks for information ,tutorial website also nice .nice work
Lot of information is inside your website .
Post Reply