My new Overlay HTML tutorial - rerecorded and edited

Help/How To
1

Hi folks,

I’ve been working on my new tutorial video on using the Overlay HTML filter with Webvfx to create animated text titles.

I posted a draft on this forum a few weeks ago but the audio was poor and at a very low level so I’ve re-recorded the spoken audio track and also done a lot of video editing to the tutorial.

I’ve re-organised the tutorial into Part 1 and Part 2 (Part 1 is 17 minutes long, Part 2 will be quite long also…) and uploaded Part 1 to Streamable.com for forum members to take a look at now. Constructive advice would be welcome!!

Part 1 has been split into 2 sections because there’s a 10-minute maximum length on Streamable.

I haven’t made Part 2 yet!! Eventually I’m going to put them on Youtube but not until Part 2 is completed.

Part 1 section 1 (9 minutes):

https://streamable.com/wsk15

Part 1 section 2 (8 minutes):

https://streamable.com/snbrb

7 Likes
2

:star_struck: Great tutorial so far, just the shove needed to work on some templates of my own. The html and css workflow is so smooth. Maybe the intro could have fewer title examples. (Loved the voice over). Thanks for this, can’t wait for the animated part!

3

Very nicely done. Any chance you could share the code for the Video title #2?:slightly_smiling_face:

4

Thanks @ivenivid, good to get some feedback :grinning: Yes, I wondered about including the large number of title examples at the beginning. I think I will cut them down to two more (after video title #1) and use examples #4 and #5 at the end.

Of course!!! will post it when I get a chance…busy afternoon, got to go to work :disappointed_relieved: thanks for the reply…

5

@jonray thanks for the video. You should make the video text bigger. The punctuation is really hard to to see. Cant wait for the part 2.

6

Hi @sauron , I’ve zipped all my HTML files for videos #1 to #5. Feel free to experiment and dissect!!

London tutorial TITLES 1 to 5 by JonRay.zip (7.4 KB)

(NB as I’m sure you know (but for the benefit of others), these will all show with a purple background when previewed in your browser. Change “purple” in the code to “transparent” (or just add a # to make purple#) and it will be transparent when applied in the Overlay HTML filter. Also make sure the WebVfx.js file is located in the same folder as the HTML).

7

Thanks. I shall dissect.

8

Hi @vonzo , thanks for the feedback. I presume you mean the small HTML and CSS code on screen? Yes it was a video capture of the whole screen. It is quite small, unfortunately it would take ages to re-do it to make it bigger, sorry.

It looks readable when viewed full-screen - when I upload it to Youtube viewers will be able to select full screen then. Part 2 will be coming as soon as I can get it done :grinning:.

1 Like
9

Hi @Vonzo, I just found out that if you view the tutorial by selecting the LINK in the first post (not the preview screen) the video can be made full-screen when it appears on streamable.com (arrows icon, bottom right).

1 Like
10

Thanks for your work, man! :smile:

As maybe many of us, I already know HTML. So for me - and maybe a lot of others - the most important part (part 2) is missing: the animation. So far, this post gives no answer to the topic. :neutral_face:

You started with teaching HTML. Nice. But, maybe the wrong focus. I think you should have focussed on the animation part. (And maybe add the HTML-Basics later). :wink:

11

Thank you! Part 2 is in preparation now - watch this space!! I’ll try to get it done asap. Feedback like yours helps me to get motivated to complete it, so thanks for writing in! Best wishes!

1 Like
12

Great work…appreciate your effort and time…

13

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