My personal challenge - to replicate a BBC News text effect with Text:HTML

Tutorial
1

I screen-captured a short video from the BBC News site a few months ago. Here’s the original:

…and edited out the non-text bits.

Then I set myself a challenge: can I recreate these text captions in Shotcut?

I did it!! :smiley: By making HTML files and applying them via the Text:HTML filter. Actually I adapted my “WordSync” files (see at the bottom of this thread).

Result below! (I’ve positioned my captions above the original BBC ones as a direct comparison):

https://streamable.com/wm2ad

I searched for a comparable font and the nearest one I found was called “D-Din Expanded”.

I had an issue with the “easing” (smoothness of the text movement) (warning, this is a bit technical…) … In the HTML animation I used the “ease” timing function to mimic the smooth action of the text when the line moves upwards. It worked OK when using the “@keyframes” method but after I converted the code using @elusien’s CSS animation generator, the action was much less smooth and the movement was close to linear. Getting the smoothness of the text movement was crucial to recreating the text, so I persevered and got round it by using a bezier curve code

    easing:"cubic-bezier(0.320, 0.475, 0.185, 1.010)"

instead of just “ease”.
(I created the bezier curve code from the site https://matthewlein.com/tools/ceaser (there’s another on
cubic-bezier.com, by drawing the required curve). Solved!!

Anyway, I was pleased with the result! So just for fun I made a completely new video using my own captions and applied them to footage from Youtube. I used the font “Open Sans” for this one:

https://streamable.com/kb5wl

I’ve attached a zip of all the HTML files I used - feel free to adapt for you own captions.

HTML TEMPLATES (Jonray) - BBC NEWS animation.zip (72.6 KB)

5 Likes
2

Fantastic! :smiley:

3

Really great work! :grinning: Thanks also for sharing the name of the font that you used!

I was seeing the work you were posting in the other thread regarding animated text like this and it got me thinking. I am wondering if somehow the templates you have been creating for this can somehow be used to make a GUI for either an added component to one of the Text filters or a separate filter of its own. It could be some sort of feature where you can customize the different ways to manipulate the animation to produce this kind of text presentation that is very common now.

I suppose though that would be a question for Text: HTML in general. Text: HTML does have a lot of possibilities but all of the manual HTML coding will turn most people off. A user-friendly GUI would make it attractive to most. Sort of like adapting some of @Elusien’s work but make it a built in feature in Shotcut to be an equivalent of those built in text animation features that you see in proprietary video software all the time but perhaps even more customizable.

I know with the list of things on the road map this wouldn’t make it so high on the priority list but I am just thinking out loud here. :grin:

1 Like
4

Hi @dvs and @drm, thanks so much for your kind comments!

@drm, yes, good idea! Although I personally wouldn’t have a clue about how to go about making these animations totally user-friendly and customisable. I agree, and appreciate, that the manual HTML coding involved in doing these animations will indeed turn most people off - that’s why I provided my HTML files, so users may use them as templates, and possibly examine and analyse them to learn what’s going on…

The only reason I am able to create these animations is that I spent literally hours learning HTML from examples online - it was hard and often frustrating but I was determined to learn how to do it!

@elusien’s css animation generator, and his webvfx generator are brilliant and go a long way to making it more user friendly though - I’d be lost without his fantastic work.

Good to think out loud sometimes! I appreciate your comments. :+1:

5

Not trying to be a kill-joy or anything but generally permission is required when utilising BBC content

6

Other than inclusion of the logo, this should fall under “Teaching” and “Fair dealing”, so allowable uses of the clips.

7

Hi @PaulusMaximus, you may have a point. In truth I never thought about that aspect. My gut feeling is the same as GordC’s comment, “Other than inclusion of the logo, this should fall under “Teaching” and “Fair dealing”, so allowable uses of the clips” but - I don’t know.

So - I think the best thing for me to do is to contact the BBC News permissions team for a definitive answer. Until then, I’m requesting that @shotcut please removes this entire thread. If permission is granted by the BBC, I’ll re - post. Thanks!

9

Hi @jonray. As I say it wasn’t anything malicious, just wanted to protect you and the forum. I’ve was admin on a forum for about 8 years and just naturally wary of sites that don’t offer embedding to their content and the Beeb didn’t (maybe that’s changed since), though a direct link and a small amount of “extract” was acceptable for explanatory purposes but if someone copied the news story in it’s entirety then it would be removed.

Anything with Getty images would be removed instantly, they are not shy in pursuing copyright infringements and I wasn’t going to be liable for such.

As I say, that was a while back and things change of course but my goal was just to highlight the potential infringements.

10

That’s fine, @PaulusMaximus. Best to bring these things up. I had assumed that because the BBC link to the planes news report wasn’t going to viewed by too many people, and only those who got the link from my post, that it would be OK and didn’t really give it a second thought.

I followed the BBC link you gave in your post and I’ve now emailed the BBC News permission team. It will certainly be interesting to read their reply. Dan has removed the thread from the forum. If I get the necessary permission or if I find it isn’t necessary, I’ll ask Dan if he can put it back on view.

Thanks for your assistance. Always better safe than sorry! Cheers!