Hi folks,
Yes, I know the Text:HTML filter is due to disappear shortly, and I will soon be waving a teary goodbye to it. However, I still enjoy designing text effects for it - so here is a collection of 23 “Flip and Spin” text title effects I just designed.
I PM’ed fellow Shotcutter (and amazing coding guru) @elusien about this a week or so ago when I was working on it, and he kindly created some clever javascript code which centres the text title, and which also assigns each typed character to its own “span” tag. I created the animations themselves using the traditional (“at keyframes”) method of HTML/CSS animation, and converted them using @elusien’s CSS /HTML animation generator: http://www.elusien.co.uk/shotcut/animations/index.html
The javascript code is fantastic because it makes it easy for the user to use the HTML files as templates, and simply change the text to create custom animated video titles (without this users would have to type each character of their text into a separate “span” tag, which is tedious).
I’ve made a demo video of the 23 animation styles I created. If you’d like to try them out yourself, feel free to download the HTML files from the Google drive link below.
Also, If anyone shows an interest I’m happy at some point to provide step-by-step instructions showing how to use these in Shotcut. It’s easy, even for inexperienced users - don’t be daunted, give it a whirl!! In a nutshell, you apply a Tex:HTML filter to a transparent clip and place it on a video track above your main video.
PS Just to repeat that unfortunately these titles won’t work in Shotcut soon, because the Text:HTML filter is about to be discontinued (full details of the timing of this has not been given just yet). Users can, however, revert easily to using the last version of Shotcut which has the Text:HTML filter. It’s certainly included with version 20.07.
It’s possible to run different versions of Shotcut on the same computer, and previous versions are readily available to download.
C’est génial
En plus vous avez choisi une musique qui colle parfaitement.
Oui mais ???
J’ai téléchargé votre dossier, mais j’en fais quoi ?
Ou dois-mettre tous ces fichiers ?
Oui, oui pour la procédure pas à pas
This is awesome.
Besides you chose a music that fits perfectly.
Yes, but ???
I downloaded your file, but what do I do with it?
Where should I put all these files?
Yes, yes for the step-by-step procedure
@shotcut J’avoue que je n’ai jamais bien compris comment fonctionnait ce fameux HTML. Mais quand je vois ce que @jonray arrive à faire avec, je me dis que vous ne pouvez pas supprimer cela.
Ou alors vous allez le remplacer par quelquechose d’équivalent qui nous permette de faire la même chose?
Peut-être un petit programme à exécuter pour ajouter cette fonctionnalité aux futures versions?
@shotcut I must admit that I never really understood how this famous HTML works. But when I see what @jonray manages to do with it, I tell myself that you can’t remove it.
Or are you going to replace it with something equivalent that allows us to do the same thing?
Maybe a small program to run to add this feature to future versions?
(Note to @elusien - the stems of some text characters (h, y, p, g etc…) appear suddenly just before each span completes its rotation. This doesn’t happen in the Chrome preview (totally smooth). Is there a way I can fix this in the coding?)
In the meantime I’ve already started to simplify the HTML/javascript. With a bit of luck I can reduce it to a single HTML file with a parameter that specifies which of the 24 animations to use.
Thanks @elusien. Looking forward to seeing how you can make it even more user-friendly with some of your coding wizardry @bentacular and @ejmillan - thanks for your words of encouragement and appreciation!!
I would gladly send you some clouds in return for some sun!! This is our weather for this week. Not too promising, although the end of the week looks OK …
Bonjour,
Je ne sais pas si cela est possible en HTML/javascript, mais ce serait super de pouvoir choisir les paramètres à l’aide d’un dialogue “formulaire” plutôt que devoir modifier les différents fichiers avec un éditeur de texte.
Hello,
I don’t know if this is possible in HTML/javascript, but it would be great to be able to choose the parameters using a “form” dialog instead of having to modify the different files with a text editor.
Interesting. I was using this website for the Astronomical seeing predictions. @Jonray, draw up the contract and @Elusien and I will send you some heat and humidity. Specify in the conditions, that the clouds come during the day, I don’t want cloudy skies at night.
I wonder what this means of this new feature adaption to text:HTML that Jon Ray has so nicely develop this flig&spin features and share with us.
I don’t think Blender video sequence editor is so rich in feature as Shotcut that I really like. I uses Blender mostly on 3D model/animation after effects … but also adopting to scene build … but I still like this simple text addon from Jonray in shotcut !!
Oh thanks Jonray for this incredible resource contribution to us users of Shotcut.
Well test run using Jon Ray new template … … in my little Blender video still in the making … https://streamable.com/1kldpg
It would be possible to convert this into a proper Shotcut filter with parameters such as the text string and the type of transformation, but then you’d need to also factor in Font-Face and Font-Size, Font-Colour, Background-Color etc… All of which are fairly simple to do by editing the CSS code, not so simple in the QML filter interface…
Also, it uses Shotcut’s WebVfx framework, which is vanishing soon (possibly with the next release), so it would be quite a lot of effort for little gain. At least the simplified HTML/CSS/Javascript version can still be run in a browser and that animation recorded (e.g. by OBS) and the result used in future versions of Shotcut.
Just to add that I purposefully annotated the CSS style file in a way to assist users who may not be too familiar with HTML/CSS to change the font, font-size, etc. easily… see screenshot -
Je ne parlais pas de l’avoir dans Shotcut.
Je demandais si il était possible de le faire dans le fichier HTML. Autrement dit, j’ouvre le fichier HTML avec Chrome ou Firefox … J’ai un bouton sur la page blanche qui ouvre une boite de dialogue dans laquelle je saisi mon texte, la police, etc.
Quand je suis satisfait du résultat dans mon navigateur, j’enregistre le fichier HTML en c’est celui-ci que j’ouvre ensuite avec Shotcut.
Hello,
I wasn’t talking about having him in Shotcut.
I was asking if it was possible to do it in the HTML file. In other words, I open the HTML file with Chrome or Firefox … I have a button on the white page that opens a dialog box where I enter my text, font, etc…
When I am satisfied with the result in my browser, I save the HTML file and open it with Shotcut.
However, I still enjoy designing text effects for it - so here is a collection of 23 “Flip and Spin” text title effects I just designed.
