"WordFlash" text effect, done with the Text:HTML filter

I watched @ewan360’s video about Chimpanzees (and Dieting) in this thread Chimpanzees and the No-Diet Diet

… and I liked the text animations. @ewan360 created them with After Effects. So I thought I’d try to create a similar effect using a HTML file and applying it to a clip in Shotcut. I’ve called it the “WordFlash” text effect.

I thought folks here would like to see the HTML file I made, but instead of just posting the file I spent some time annotating the file and also producing a PDF with notes/observations/instructions on how to use it and apply it in Shotcut.
So here it is. The zip contains:

  1. My HTML file (which uses the standard"@keyframes" method of animation which works in Browsers but not in Shotcut),
  2. The same HTML file but “converted” by using @elusien’s CSS animations generator/converter,
  3. My PDF documentation.
    4 the two .js files from @elusien’s site which are necessary for the HTML effect to work in Shotcut.

Files relating to the WordFlash text effect (Jonray).zip (1.5 MB)

Here’s a short demo of the effect, made in Shotcut. NOTE: apart from the first text effect about Vivaldi, the text content are examples so make no sense in the context of the Venice clip.

Here’s the PDF file as a direct download from this post:
Notes about the WORDFLASH text effect HTML files by Jonray.pdf (1.5 MB)

Elusien’s CSS converter is here:
elusien.co.uk/shotcut/animations/index.html

I appreciate that creating animations this way is complicated and requires quite a bit of work for the user - and a fair bit of HTML coding knowledge ( especially having to position the words manually ) - so I’m not suggesting that it would be an ideal method for most. I enjoyed figuring it all out though and now I’ve made the template I’ll attempt to make a left-aligned version and also other variations with slightly different animation effects.

9 Likes

As always, very interesting and an expansive explanation. The pdf is rather an explanation of various techniques than a simple guide. I will read it throughly at another time, but skimming alone lets me appreciate your effort.
I might use this to elevate my simple text effects; I am very intrigued.

Brilliant.:+1:
I tried to reproduce this text effect with simple text, key frames, and opacity. It was too much work. Gave up.:frowning:

Even Sauron has to surrender some times.
But after seeing so many times, you simplifying an approach or discovering another method, I am positive that you might be able to find one in the future.

Thanks @samth and @sauron for your replies.

LOL, and you are the MATS (Master of All Things Shotcut) :smiley:(!). Yes, for the Vivaldi effect alone you’d need 17 text:simple filters on one clip (one for each word) (or 17 text clips on 17 tracks…) and positioning/ fading them all would indeed be a pain!!

He will have plenty of time to do it after he retires. :laughing:

Don’t you believe it. I retired 10 years ago and although I get some time to mess about a bit with shotcut and web technology the time just flies by.

I’ve been busy trying to develop this “Wordflash” text effect.

First of all, I tweaked the HTML/CSS to provide a template for LEFT- ALIGNED text in addition to the right-aligned text effect which I had created previously. That was the easy bit!!

This still leaves a big problem, though - the fact that each word has to be horizontally positioned manually, so each individual word can be animated.

Using the “ch” method I thought of (see my PDF file above) helped, but it was still inaccurate and very fiddly.
SO - I devised THIS:

I made it with Serif PagePlus. It’s a pixels ruler, 1920 wide.

It works like this in a nutshell:

  1. I added some code to the HTML to get the ruler showing behind the text. I nested the div inside the words container.

    #ruler_container {
             width:100%;	
             height:100%;	
              top:-200px; 		
             background-image: url("RULER TEMPLATE HTML PIXELS (LEFT TO RIGHT).png"); }            
    
  2. Used the ruler to position each word (using “margin-left”) so it is adjacent to the next word,

(So for example, the “V” of "Vivaldi (first line) has a value of

margin-left:290px;
  1. Used “padding-left” to each word to add a 25-pixel space between each word.

(here’s part of the code):

Ta - Da… the words are positioned exactly.

Then, I converted the HTML file with Elusien’s Animation generator (as before), applied to a transparent clip in SC, and here’s a quick DEMO about Antonio Vivaldi I made using 10 html files. Still quite a lot of work, but I enjoyed working it all out.


https://streamable.com/rb5wb

It’s still nowhere near user-friendly enough for most to use, I think. Much too complicated. I’m wondering if there would be a way of automating the spacing of the words instead of having to input the values manually? My coding skills are getting better, but I have no idea if this could be done…

1 Like

It is indeed very tedious to implement.
Perhaps it would be possible to modify Elusien’s typewriter effect to display a word, i. e. a group of characters followed by a space, instead of single characters. But how to acutally write this code is beyond my abilities…

Brilliant work @jonray.

A specific effect such as this would not be difficult to program. Anything more general would take quite a bit of planning. Each sentence would be in a <div> container. The code would surround each word in a <span> tag, and declare each of these elements as “display: inline-block” then you could easily animate each element (and hence each word) using the animation features of CSS.

You can actually create the HTML/CSS yourself without too much effort. If I have time later today I’ll have a look and let you know how I get on.

The text effect is cool. Just need to make it easier to use.
Found a minor bug in the template that created some frustration. Other than that it was peachy.

image


https://streamable.com/heifs

1 Like

Brilliant idea!! Actually quite a simple concept . Wish I’d thought of that!!:+1::grin: Thank you! I’ll try this out when I get a moment. I have to spend some time over the next two days doing some music stuff (I’m arranging the “Arrival of The Queen of Sheba” by Handel for piano duet, for two of my pupils to play…).

It is tedious. However I found my “Pixels Ruler” helped a lot. I was able to input accurate values quite quickly but it was still a big fiddle :disappointed_relieved:

Thank you! I love your demo! The “zillion video tracks” made me laugh… :smile: Glad you got it working.

The minor bug - oh yes, thanks for pointing it out. Quite difficult to check everything is changed correctly when you do a lot of cutting and pasting. Sorry that it caused confusion.

Hi folks! - A development!! Woo HOO!
(I finally found some time to play around with some Shotcut stuff)!

I tinkered with @Elusien’s idea of using the “span” html tag to make it possible to align the words next to each other without the need for really tricky and time-consuming pixel-by-pixel positioning - and I’ve had some success!

I made this demo presentation with my new system. I did it by creating 28 HTML files!! First using the “standard” “@keyframes” method of animation, then converting the code for use in Shotcut using @elusien’s brilliant CSS converter.

I’ve renamed the system the “WordSync” text effect because I think that represents more accurately what it does than “WordFlash”.

https://streamable.com/n14kl

I plan to post some of my HTML files as templates, for others to try, when I get a few moments to spare.

Just to add that although it’s now much easier to use regarding the positioning of words, a little tweaking of the code might be necessary regarding the timings of the animations. However, I discovered a method of doing this fairly easily, making use of the “column editing” in Notepad ++ (holding ALT while typing selects the text in a column), and also the handy column editor which enables you to automatically input incremental numbers into a column.

I must try sometime to make a “WordSync” effect Youtube tutorial!! … :smiley:

5 Likes

As promised, zip file attached:

WordSync by Jonray HTML templates from the video presentation.zip (385.3 KB)

The zip file contains 3 folders. Each folder contains ALL 28 HTML files I used to create the WordSync presentation (above post)!! Folders 2 and 3 also contain @elusien’s JS files, necessary for the HTML files to work in Shotcut.

The 3 folders are:

  1. WordSync HTML templates (AT KEYFRAMES) - the standard way of animating things in HTML. Open in any browser by double-clicking to preview, but they won’t work in Shotcut.

  2. WordSync HTML templates (CONVERTED for Shotcut - PURPLE background). I converted these using @elusien’s CSS animation generator so they can be used in Shotcut.

http://www.elusien.co.uk/shotcut/animations/index.html

You can also preview in your browser by double-clicking. They all have a purple background colour.

  1. WordSync HTML templates (CONVERTED for Shotcut - TRANSPARENT background). Same files as in folder 2, but the purple colour (and the light blue body colour) have been removed (a # added to the colours in the code). You won’t see anything when previewing in a browser because the text is white on a white background, but they work in Shotcut and allow you to apply to a colour or transparent clip on V2 so it overlays a clip of your choice on V1.

Feel free to play with these by replacing the text with your own (in the DIV section at the bottom of the file). Enjoy!

1 Like

One of the best Shotcut demos I have seen in a long time. On a par with the ones @sauron has made on transitions. Thanks for supplying the ZIP file, When I get back into using Shotcut again I’ll be making use of this technique.

Very kind comments, @elusien … thank you. But of course I couldn’t have made this without your brilliant HTML animation converter and all the work you’e done with Webvfx. So thank YOU !! :smiley::+1: