… 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:
My HTML file (which uses the standard"@keyframes" method of animation which works in Browsers but not in Shotcut),
The same HTML file but “converted” by using @elusien’s CSS animations generator/converter,
My PDF documentation.
4 the two .js files from @elusien’s site which are necessary for the HTML effect to work in Shotcut.
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.
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.
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.
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.
LOL, and you are the MATS (Master of All Things Shotcut) (!). 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!!
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:
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.
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…
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…
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.
Brilliant idea!! Actually quite a simple concept . Wish I’d thought of that!! 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
Thank you! I love your demo! The “zillion video tracks” made me laugh… 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”.
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!! …
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:
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.
WordSync HTML templates (CONVERTED for Shotcut - PURPLE background). I converted these using @elusien’s CSS animation generator so they can be used in Shotcut.
You can also preview in your browser by double-clicking. They all have a purple background colour.
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!
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 !!
Hi @kinuris (I just happened to be on my computer when your message was posted so I reply immediatley!)
Yes, I see that the text of the first and second lines appear right from the start. I think I know the problem - you need to set “opacity:0;” in the css at the top of your code, and control the opacity (fade-in) by the animation (keyframes) section of your code (further down).
If you’d like to post your .html file here (either zip it add .txt to the end of the file, like xxx.html.txt, or send it just as a .txt file, I’d be glad to have a look at it)…
Yes, I can’t see what’s the difference with your original code… Well, I changed timing (need some more time to read the page), and add some elements to line 6.
So here is the first page. Please if you can, explain me what is failing so I can learn (I finished last Saturday your super tutorial for HTML animations).
(!). 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!!
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…).
Glad you got it working.