My Overlay HTML tutorial PART 2 (Creating an Animated Video Title) - out now

Hi folks,
I’ve completed my draft of PART 2 of my tutorial “How to Create an Animated Video Title (using the Overlay HTML filter)”.

(Part 1 can be viewed here):
Part 1

Part 2 is 21 minutes long.
Streamable.com has a limit of 10 minutes, so I’ve split it into 3 sections:
Section 1 (9 minutes duration),
Section 2 (8 minutes duration), and
Section 3 (4 minutes duration).

I’ll put it on Youtube soon (maybe after Part 3 is done !!) but I’d welcome any comments from you guys before it goes public.

I’m aware that the animation I produced in these tutorials can (relatively easily) be done with the text filter and size/position filter (@sauron will be able to vouch for that!!). Where the overlay HTML filter excels is with more complex animations, but I wanted to show users the basics first.

@elusien, thanks as ever for your brilliant WebVfx framework. Also, please let me know if I described it OK or if I gave out any mis-information somehow (Part 1, approx 2:25 onwards), or if there’s anything I need to add about it.
Section 1 (9 minutes duration):

https://streamable.com/vxrnv

Section 2 (8 minutes duration):

https://streamable.com/kyc5o

and
Section 3 (4 minutes duration):

https://streamable.com/0qf21

PS the videos are best viewed full-screen, otherwise the html/css text is very small. To do this, click on the LINK below each preview (not the preview itself), and select the arrows icon (bottom right).

6 Likes

Jon,

I’m really impressed in your tutorial skills. Very clear and concise instructions spoken in a very clear and concise way.

The WebVfx description is fine. The only thing I would have pointed out is that although the “data-control=‘10:30’” instruction is to run the animation at 30fps for 10 seconds, this is only for the benefit of running in the browser. In Shotcut this instruction is ignored as the filter will run for the total duration of the clip and will have the frame-rate that is specified in Shotcut.

Gosh, thanks Elusien! In my job (music teacher) I guess I’m used to breaking information down into small chunks so that my pupils can understand it.

OK. All is clear now, thanks. I’ll try to think of a way of including that info in the voice-over so as not to overly confuse the viewer. Thanks for your feedback, and of course for your brilliant work enabling cool stuff to be done with Shotcut and HTML :smiley::smiley::+1::+1:

Jon, I’m not sure if you are using Windows, but if so, when you are making tutorials you can modify your pointer settings to enable you to highlight your mouse position by pressing the CTRL key.

Go to “SETTINGS” and click on “Additional mouse options” then in the popup window click on “Pointer Options” and select “Show location of pointer when I press the CTRL key”

I think this is better than waving the pointer around to details on the screen.

Brilliant, thanks @Elusien. Just the kind of feedback I welcome. I appreciate it.
Yes, good tip. Yes, I am on Windows 10. I kind of knew about it since I have my laptop set up like that - really useful when I’m working in sunlight. However when I screen-captured the tutorials I didn’t think about using this option. I will employ it for future.

As it happens I thought about this recently, so I created two short videos of animated handwritten circles. (I did it by first drawing the circles in pencil on paper, scanning (black/white), saving as a jpg, importing in GIMP, reversing the colours, then using a timelapse technique I thought of to create multiple pngs, then made it into the video via Shotcut’s image sequence feature).

Then I am able to overlay above a clip, use size/position filter to postion as required, and chroma-key out the black background. It works really well!
Handwritten circle #1:

https://streamable.com/qwif6
Handwritten circle #2:

https://streamable.com/1x4al

Here it is in action :grinning::grinning:

https://streamable.com/dlbty

Hi Jonray-

Would you please elaborate on the timelapse technique that you thought of? The effect you created is quite good.

Hi @t5montecarlo,
Sure.

Open Gimp, create a layer of size 1920 x1080.

Import the scanned image (black handwritten pencil circle with white background).

Reverse colours so pencil circle appears white on black background.

Create a new black layer, place it above the pencil layer.

Select the eraser tool, apply it to the black layer so it erases just a small part of the black layer, allowing a small part of the white pencil circle to show through.

Export as a png - call it “001.png” .

Erase again, showing a bit more of the white circle. Export as “002.png”.

Repeat many times, each time exposing more of the white circle. Be aware that it will take 25 or 30 pngs to create 1 second of footage so expose in gradual steps.

When you have multiple pngs, import into Shotcut using the “image sequence” feature.
Then export as a mp4 for you to use over other videos, chroma-keying out the black background.

I created this using this technique. Took a lot of patience, but I think it was worth the effort…
https://streamable.com/k1iv9

https://streamable.com/k1iv9

PS Tat took 531 pngs!! Here’s a snapshot of the folder :slight_smile:

1 Like

@jonray, that is brilliant! Thank you for the explanation.

That video is very good. You have extraordinary patience.

@jonray Thank you very much for your tutorials. I was at first hesitant to use WebVfx because I thought it would be quite difficult to use. First, CSS and HTML aren’t as difficult as I had in mind (I don’t know why I expected them to be difficult) and second, your style of explaining is perfect for me. I used WebVfx for various things (not for titles though :grin:) and I’m really happy by all the options it provides. Of course I want to thank @Elusien as well for publishing this framework.
I’m looking forward to any other tutorials you make.

If you need some video credits, go to my webpage: http://www.elusien.co.uk/shotcut/ and click on Video-Credits. You can use the flashy text effects there as well.

Interesting, I didn’t notice that you have a overlay generator on your webpage. If I need a shortcut for scrolling text, I will gladly use it. But I think I can use the example on the WebVfx page as a template.
Thanks a lot!

Hi @samth , thank you for your comments. Getting positive feedback like yours is great for me because it motivates me to create more tutorial videos - and also post things on here from time to time!!

Actually I am on the verge of posting my set of 4 parts of this HTML tutorial on Youtube. It became quite a large project and I ended up with 80 minutes of tutorials (split into 4 x 20 minute parts).

They are nearly finished - I’ll post the Youtube links here soon.

Yes, indeed, one of my personal goals with these tutorials was to show people that HTML/CSS coding isn’t that difficult so if I have achieved that I will be happy. Thanks!

Me too! :grinning::grinning::+1:

You have put quite a lot of effort in creating these tutorials :astonished:!
The YouTube links are really necessary now. With the streamable limit it gets messy very quickly. I will watch the entire series to be sure I get all the information and have more advanced options for future projects.

This topic was automatically closed after 90 days. New replies are no longer allowed.