Resource icon

Free Animated lower thirds with control panel 2020-04-12

Download
Overview Reviews (21) History Discussion
F

from1975

Member
from1975 submitted a new resource:

Animated lower thirds with control panel - Lower thirds on the fly. Completely free!

1. Unzip the file.
2. Add control panel: View/Panels/Browser panels. Add title in left column (ie. "Lower thirds", put a path to file "lower thirds/control-panel.html" from the extracted folder into right column. Click "Apply" and close window. You can dock the panel between existing panels.
3. Add new browser source, pointing to file "lower thirds/browser-source.html". Set width to 1920 (or any other you use for streaming).
4. You can use predefined list - just click on the name - or type...
Click to expand...

Read more about this resource...
 
Ken Lowrie

Ken Lowrie

New Member
This was exactly what I was looking for, unfortunately, Custom Docks seems to be a Windows thing, and is not available on macos. :( Thanks for creating it, I'll take a look at trying it out on my Windows laptop when I get a chance.
 
D

Darktimes

New Member
@from1975 This is amazing!

I did have two side questions as a non-coder: Is it possible to run 2 of these at the same time? Is it possible to make it generate more than 2 lines of text (lets just say I wanted 4 lines of text).
 
tbutler

tbutler

New Member
Is there any way to get around the custom docks being Windows only? This sounds so great if I could figure out a way to use it...
 
C

Citrom1978

New Member
It would be great, but I am using a MAC and I don't know how can I install and use the downloaded package.
I have no View/Panels/Browser panels... :)

May I ask you to help me, please?
 
C

ContentDeveloper

Member
Darktimes said:
@from1975 This is amazing!

I did have two side questions as a non-coder: Is it possible to run 2 of these at the same time? Is it possible to make it generate more than 2 lines of text (lets just say I wanted 4 lines of text).
Click to expand...

I am running 5 instances in the config I am setting up... had to make copies of the lower third tree to different names, go into the control-panel and browser html files for each and change the "lower third" references to be unique to the use at hand, and then also make copies of the "lower third" entries in the style-001.css file... all so each use cn be triggered independently with a scene change.
 
C

ContentDeveloper

Member
I am using this over the the built-in "Text(GDI+)" option..... which can read the text from a file.

Currently, I have a few issues/questions:

  1. Is there a way to read the text from a file? (currently, the text entries in the form fields do not get saved, so have to be re-typed when the project is re-opened.)
  2. I am currently getting around this by coiding a way to store the text entries as cookies, which get reloaded when re-opening the project. However, I only did this because I could not figure oout a way to save/read a file via Javascript, except to the Downloads folder).
  3. If I were to use the Text(GDI+) feature to read a file, just to get it into OBS, is there a way that this "Animated lower thirds with control panel" tool could read from _that_ data?
 
A

aaronwe

New Member
Can confirm this does NOT work on MacOS, since OBS doesn't support browser panels on Mac. That said, you could theoretically load the panels in an actual web browser and use window capture. You'd lose transparency and/or have to use a chroma/luma key, but it should work.
 
A

aaronwe

New Member
ContentDeveloper said:
Is there a way to read the text from a file? (currently, the text entries in the form fields do not get saved, so have to be re-typed when the project is re-opened.
Click to expand...

The text is contained in the lower-thirds/control-panel.html file. Look for the <ul id ="predefined"> tag and edit away.
 
C

ChamRok

New Member
I soo want to use this.. but i am not a coder and i dont quite understand how to change the predefined names.. Please help
 
K

klutzo

New Member
Digging this so far, an awesome start!

I wonder how this can be automated, to say.... lower thirds pops out every 3 mins.. stays on for 5 seconds, then shoots off. Repeat.
 
A

aaronwe

New Member
ChamRok said:
I soo want to use this.. but i am not a coder and i dont quite understand how to change the predefined names.. Please help
Click to expand...

You'll need to open the lower-thirds/control-panel.html file in a text editor (Atom, TextEdit, Notepad, SublimeText, etc.) and look for the <ul id ="predefined"> section.

I won't walk you through how to work with basic HTML tags here (there are plenty of tutorials out there for that) but editing the defaults is pretty straightforward if you just edit what's there.
 
L

lajambe

New Member
This is absolutely fantastic. Thanks you so much for the tip. I'm very new to html, and I have a follow-up question. How can I change the colors in the lower third text to a bright white (#FFFFFF). If someone could point me in the right direction, this rookie would greatly appreciate it. Cheers.
 
T

tmadel

New Member
When I do this - I get the following browser control panel.
2020-05-05_15-07-35.png


What am i doing wrong
 
N

Newuseruk93

New Member
Hi,
Total newbie here. Apologies in advance if I sound like a total idiot! Any help on the following would be greatly appreciated.
1. following from one of the other questions. In order to have my name displayed all the time, do I just need to replace "predefined" with my name and leave the rest of the text underneath as it is?
2. How do I go about resizing,changing colour of the text? If you could post a link that has a guide for all that it would be really helpful.
3. Lastly, how can I make this animated? again, you did mention something along the lines of CSS, but I didn't understand due to my lack of knowledge. Any links that can guide me?

All help is much appreciated. You guys are amazing.
 
P

Patricias

New Member
Premiere Graphics can contain multiple text, shape and clip layers, similar to layers in Photoshop. Multiple Layers can be contained inside a single Graphic track item in your sequence. When you create a new layer, a graphic clip containing that layer is added to your timeline, starting at the playhead location.
 
You must log in or register to reply here.
Top