"Flip and Spin" Text Effect - VERSION 2 (more user-friendly)

Tutorial
#1

Hi Folks, a few months ago I devised a “Flip and Spin” text effect which was done with HTML and Webvfx.

Last September (yes, ages ago)! I collaborated with @elusien via private messages, and @elusien kindly wrote extra code to make this system more user-friendly. You can now write the text out normally, rather than having to put in each letter of every word vertically.

I promised @elusien then that I’d post it on the forum for users, but I’ve been so busy with other projects (mainly music ones) that I’ve only just had time to get it all ready for posting. So here is how to do the … (drum roll) …

Flip and Spin Text Effect - version 2

I’ve written an extensive “Complete instructions” PDF - which is one of the reasons for the delay.
Please note - it will only work with Shotcut 20.07.11 or earlier, because the Text(HTML) filter has now been discontinued - but it’s easy to revert back to v. 20.07.11 (full instructions are given).

Back in September, I made this demo video using this system. Apologies, it’s a Christmas video (It’s one of my compositions performed by a bunch of kids I used to teach many moons ago when I was a High School music teacher). TheFlipSpin effect starts at 0:14.


FlipSpin text effect - version 2 - ALL FILES.zip (260.8 KB)

FlipSpin text effect - version 2 - COMPLETE INSTRUCTIONS.pdf (250.4 KB)

@elusien - feel free to add anything to my description or point out any errors in the instructions - doing this in a bit of a rush!

4 Likes
#2

Great job!

#3

It’s working well, folks - I just made this. The text effects appear at the beginning and at 2:05.

I made the video in 20.11 (haven’t got round to upgrading to 21.01 yet), then opened the MLT as a clip in 20.07.11, added the HTML text and exported from there. Cool.

3 Likes
#4

Vous ( @jonray et @Elusien ) avez encore fait un travail formidable, merci pour le partage.
La procédure fonctionne bien, je ne ferai qu’une seule remarque:
Il y a un problème d’ombrage à droite sur certaines lettres (voyez dans cet exemple les “u, h, i, n”)

You ( @jonray and @Elusien ) did a great job again, thank you for sharing.
The procedure works well, I will make just one comment:
There is a problem of right shading on some letters (see in this example the “u, h, i, n”)

Capture d’écran 2021-02-09 à 16.31.01
Capture d’écran 2021-02-09 à 16.31.01822×287 28.1 KB

#5

Amazing tool @jonray and @Elusien ! Lots of pleasure ahead I’m sure :+1:
It was weird working again with this ancien (but dignified) version of Shotcut though :slight_smile:


https://streamable.com/xpgvxk

#6

@MusicalBox Quel est le N° de l’effet que vous avez employé pour le texte sur 3 lignes ?
Je n’arrive pas à reproduire, la première ligne s’efface avant que la troisième soit finie.

@MusicalBox What is the Effect No. you used for the 3-line text?
I can’t reproduce, the first line fades before the third is finished.

#7

No6
No6514×650 67.7 KB

Peut-être que votre clip contenant Text: HTML n’est pas assez long. Le miens fait environ 11 secondes.

Maybe your Text: HTML clip is not long enough. Mine is about 11 seconds long.

#8

@MusicalBox Merci, j’étais sur 11, 12, 13
Avec 6, effectivement le temps entre l’écriture et l’effacement est plus long.
Ce temps de pause doit pouvoir se régler quelque part ?

@MusicalBox Thanks, I was on 11, 12, 13
With 6, the time between writing and erasing is actually longer.
This pause time must be adjustable somewhere?

#9

Hi @namna, I’m not a total expert, and @elusien will correct me if I’m wrong but I think this can be adjusted in the flipspin.js file - around line 284 (and below) for effect 6 (called “case 6”).

#10

LOL! A bit like writing with chalk on a slate … :grinning: :wink:

1 Like
#11

@Elusien @jonray

Savez-vous quel paramètre on doit modifier pour aligner le texte à gauche ou à droite plutôt qu’au centre ?

Do you know which parameter should be changed to align the text to the left or to the right instead of to the center?

#12

Hi @namna,
This is controlled in the flipspin.css file:

  body {
margin         : 0;
width          : 100vw;
height         : 100vh;
overflow       : hidden;
display        : flex;
flex-direction : column;
justify-content: center; 
align-items    : center;

}

#text_box {
	flex-wrap      : wrap;
	margin         : 0;
	display        : flex;
	flex-direction : row;
	justify-content: center; 
	align-items    : center;
	line-height    : normal;
}

You could experiment with this. @elusien will know exactly which parameters to change …

1 Like
#13

Bonjour @jonray
j’ai essayé de changer “center” à ces 4 endroits, ça fonctionne pour “left” mais pas pour “right”.
Il y a certainement autre chose à modifier.

Hi @jonray
Thank you, I tried to change “center” at these 4 places, it works for “left” but not for “right”.
There is certainly something else to change.

#14

“justify-content” and “align-items” can teach take one of the 3 options “flex-start” (or “start”), “center”, “flex-end” (or “end”), there are others, but these are not useful here. “left” and “right” are not valid options.

See here: for more info:

2 Likes
#15

Very useful info, @elusien, thank you!

#16

Merci beaucoup @Elusien heureusement que vous êtes là, je vais pouvoir finaliser bientôt l’UI pour ce filtre.
Encore une petite question : Si je veux me servir de ce filtre sans animation (juste pour faire un titre fixe) que dois-je écrire pour le cas N° 24 ?

Thank you very much @Elusien fortunately you are here, I will be able to finalize the IU for this filter soon.
One more question: If I want to use this filter without animation (just to make a fixed title) what should I write for case N° 24?

Capture d’écran 2021-02-14 à 15.08.09
Capture d’écran 2021-02-14 à 15.08.091263×537 124 KB

#17

I would make it case number 0 (ZERO) and place the following code in “flipspin.js”

  switch (ntype) {
		
/*===*/                                     <---  new line of code
case 0: /* NO ANIMATION */                  <---- new line of code
/*===*/                                     <---- new line of code

break;                                      <---- new line of code
		
/*===*/
case 1:
/*===*/
2 Likes
#18

Voici une première version.
ATTENTION Elle est basée sur WebVfx qui a été supprimé des versions actuelles. Cela fonctionne jusqu’à la version 20-09.
Décompressez le fichier zip. Un dossier webvfx est à mettre à la place du dossier webvfx dans :
shocut/qml/filters
Sauvegardez avant votre dossier webvfx car il contient peut-être des modules complémentaires que vous aviez ajouté. Dans mon dossier il n’y a que les fichiers livrés à l’origine.
Ouvrez Shotcut 20-09, dans les filtres vous retrouverez “Overlay Html Text Html”
Dans la liste qui apparait, sélectionnez “Texte animé”
Par rapport au travail de @Elusien & @jonray, j’ai ajouté un paramètre “border” qui permet de créer un contour autour des lettres.
C’est par contre une version Française…

Here is a first version.
WARNING It is based on WebVfx which has been removed from the current versions. It works until version 20-09.
Unzip the zip file. A webvfx folder is to be put in place of the webvfx folder in :
shocut/qml/filters
Back up before you save your webvfx folder as it may contain add-ons that you have added. In my folder there are only the files that were originally delivered.
Open Shotcut 20-09, in the filters you will find “Overlay Html Text Html”.
In the list that appears, select “Texte animé”.
Compared to the work of @Elusien & @jonray, I’ve added a “border” parameter that allows you to create an outline around the letters.
It is on the other hand a French version…

Capture d’écran 2021-02-14 à 18.52.08

webvfx.zip (160.4 KB) (French version, an English version is available a few messages below)

1 Like
#19

This doesn’t work in Shotcut.
I used a copy of another case and put all the numbers to “0” and it works.

case 25:
/*===*/
	for (var i = 0; i < nchars; i++) {
		window.elusien_animate[i] = {
			animations: [
				{keyname: "fade-IN" , timings: {duration:  0, delay:    0 + i* 0}}
			]
		};
	}
break;
#20

Merci @namna. Je suis excité à ce sujet! Ça a l’air fantastique. Il est tard maintenant alors je vais l’essayer demain.

Thank you @namna. I’m excited about this! It looks fantastic. It’s late now so I will try it out tomorrow.