Text animation - Learn theory of music - key signature charts

Hi folks, I’m just a little excited about this new text animation I’ve done so I thought I’d post it here - it’s a work in progress and it will become part of a tutorial for musicians and music students, on keys and key signatures.

I also wanted to share a few tecniques I used to make it.

Basically - LOTS of black and white PNGS! - I thnk about 150! - some created in Serif’s PagePlus software, others created by extensive use of Shotcut’s Eport Frame feature - which is now very simple and easy to use - thanks to @shotcut! Yes, it’s great that you now press CTRL/SHIFT/E, then RETURN, then go to “recents”, double-click and drag down to the timeline. No need to faff around typing in incremental file-names. A real godsend!!

The letters of the grid ( A B C D etc) were created in Pageplus - after laying out the whole grid, I then covered up the white letters with black boxes and uncovered the white letters one at a time. I used a really useful Auto HotKey Script I wrote to automate the process of exporting each uncovered PNG and saving each PNG with an incremental file-name.

The animated grid lines - I created just one vertical and one horizontal line (white-on-black) using keyframes in SC then dragged multiple copies of each into the timeline, re-positioning them and applying Blend Mode (ADD) to them to overlay.

Anyway, I just made it and haven’t checked it fully but I’ve posted it here for anyone’s interest. Any thoughts gratefully received!


I don’t understand the content of the video, but your animation serves it well. Very nice.

One observation: Starting at 2:48, you display long texts, but very little time to read them.

1 Like

Nicely done video, @jonray. Is this sort of a mnemonic for Flat and Sharp keys?

Let me give you a little heads up on an error in the video. At 1:02 “after” is misspelled as “afer”. :slightly_smiling_face:

I’m interested in seeing the next video in this series.

1 Like

D’un point de vue musical, moi non plus je n’ai pas compris grand chose.
Par contre, je n’ose pas vous demander une copie d’écran de la chronologie, mais je me doute que cela a du vous demander quelques heures de travail et je veux bien croire au nombre d’images que vous mentionnez au vu du résultat.
Bravo et merci pour le partage.

From a musical point of view, I didn’t understand much either.
On the other hand, I don’t dare to ask you for a screenshot of the timeline, but I suspect that it must have taken you a few hours of work and I’m willing to believe in the number of images that you mention in view of the result.
Congratulations and thank you for sharing.

1 Like

OK - three real-life examples.

  1. You are a musician playing a piece that has 4 flats in the key signature. What key is it in?
    Answer - Looking at the flats chart, go down to the number 4, look across and the answer is either F minor, or A flat major. Incidentally, F minor is known as the relative minor of A flat major, and vice versa.

  2. How many sharps are there in the key of F shap major?
    Answer: look at the sharps chart - right hand “MAJ” column. Go down to F sharp, then across to the left. The answer is 6 sharps. Incidentally, they appear on the music, in order, F sharp, C sharp, G sharp, D sharp, G sharp and E sharp, as you can see from the wordsearch box.

  3. You are a music student taking a music theory exam the question is, “write a treble clef, then a key signature of 5 sharps followed by the major scale of that key”.
    Answer: look at the sharps chart. The wordsearch box tells you that the 5 sharps are F sharp, C sharp, G sharp, D sharp and G sharp. So write these 5 sharps just after the clef. Now look at the row marked “5”. looking across to the right-hand column tells you the key is B major, so write in that scale.

Thanks guys. As is often said on its forum, “This is fixed for the next release” … :joy:



1 Like

Still don’t get it…
What’s a flat?
What’s a key?
What’s a sharp?

:see_no_evil: :hear_no_evil: :speak_no_evil:

1 Like

Reminds me of that old joke “What do you get when you drop a piano down a mine shaft ---- A flat miner”

An instructive little video for the students and very well created. There may be other software that is designed specifically for animation, like Pencil-2D, Krita and such-like (see below), but it goes to show how well Shotcut can be used to do this too.

LOL! Never mind, this will tell you everything … :smiley:

Aww… good one! :smiley:

1 Like

@jonray as a mental exercise I thought I’d try to reproduce the “FLATS” table animation in HTML/CSS.The file is considerably less than 100 lines, about 3/4 of it is CSS and not a single PNG file in sight. It took me about 5 hours to develop and debug the animation. It isn’t EXACTLY the same animation, and I show the numbers first, as I think it is more logical.

Just download the following text file, change its extension from “.txt” to “.html” and run it in a browser - Enjoy.

Music_Keys.txt (3.3 KB)

See post 24 below for an HTML file that animates both the FLATs and the SHARPs table.

1 Like

Well… I’m kind of familiar with Do Re Mi.
In fact, I’m very proud to say that I know the entire do–re–mi–fa–sol–la–ti scale by heart :stuck_out_tongue_closed_eyes:

Nice to see Julie Andrews and The Sound of Music again though. :slight_smile: :+1:

1 Like

That is COOL! Thanks, @elusien - I’m going to enjoy analysing your code to see how you did it. How come you are so clever? :grinning:

That’s a good start… now try singing it in all 12 keys and you’re done … :rofl:

I think I’d need to be a baritone AND a falsetto to be able to do that… right? :smiley:

1 Like

Actually you could then try singing it in a MINOR key. That would be fun …

… which reminds me of this:

1 Like

LOL, you would indeed!

1 Like

Pas forcément, Dicky arrive très bien à le faire.

Not necessarily, Dicky can do it very well. :joy:


  • Set all the table cells Opacity: 0;
  • Set some CSS variables according to which row of the table and column within that row.
  • Use these variables to stagger setting Opacity: 1 for each cell.
  • e.g. table row 5 has the variable “--row” set to 5.
  • e.g. #flats>tbody>tr>td:nth-child(2) refers to the second <td> in a row of the table
  • Then do the same for the “Flat” <span>s.
1 Like

Qui est Dicky ?

Un de mes chanteurs préférés. J’ai son album complet “20 Méga Hits”.
Un extrait ici:

One of my favorite singers. I have his complete album “20 Mega Hits”.
A sample here: