Subtitle animation

Help/How To
1

Hello every one
Is it possible to make a subtitles animation like in this song?


Kind regards
2

There is no standard feature in Shotcut to do this. However, if you look at this post:

you can see similar text manipulation as in the video. So yes it is possible to do this using HTML, CSS, Javascript and Shotcut’s WebVfx javascript framework. However, it would require quite a bit of effort and expertise in this area and WebVfx will be removed from Shotcut by the end of this year, so it may be efort that is wasted for the future.

3

It’s indeed to much work. And I need such effect to use in my music which I make once a week In my channel making music all ready takes a lot of time I thought I could find an effect that I can add.
Is there a free tool can do that (let’s say animate the text on a green back ground with a third party tool) record the screen and remove the green back ground with chroma key?
But what third party tool can make suck cool subtitles Animation?
I tried presentation but it’s not what I expect

4

Hello & welcome,

I read a lot here in the forum about “text animation” and how it could be done the easiest way.
Especially these are created with a flash program that can export swf or movie files like your video above!

Especially in these flash programs are many animation templates that you can use quickly and easily.
Especially for text animations Flash is brilliant!

I have created animations for homepages with Flash several years ago, but this format is frowned upon nowadays!

5

Hi @Kyrillos, I just spent 15 minutes in Notepad++ trying to design something similar and came up with this
 Nowhere near as good or as complex as your example but I just started to see if I could flip the letters like yours does at the beginning. I reckon with more time I could get nearer to yours. And I’d have to get it to go right to left 
 :smile:

I hit a problem though - I tried to apply the HTML file to a transparent clip in Shotcut (Text:HTML filter and this happened -

Anyone know how I can get Arabic letters showing in Shotcut (HTML)?

(Forgive me, I assumed your language was Arabic Egyptian. Sorry if it isn’t).

6

Jon, I’ve used Arabic before without problems. Can you post your HTML and I’ll have a look?

See here:

7

@elusien, Sure. Here are both the keyfames version and also the converted file (using your CSS generator).

Flip-vertical text ARABIC 03 (Egyptian letters) CONVERTED.txt (5.5 KB)

Flip-vertical text ARABIC 03 (Egyptian letters) .txt (2.7 KB)

I got the Arabic characters in Notepad++ by adding Arabic (Egyptian) as another language, in Windows settings.

8

Jon, You need to put the HTML tag:

<meta charset="UTF-8">

inside the <head> </head> element.

9

It looks interesting but how can it help in animating subtitles or how can I do it

10

That’s awesome i need to know more about html stuff, and indeed it’s Egyptian arabic

11

Do u have a video explains how I work with codes like that and put my text
Thanks a lot

12

Ok, he wants the programming stuff.

13

If you’ve seen the video there’s the program how is made with! :wink:

1 Like
14

Arabic is a language that is writtem Right-to-Left (RTL). HTML has a way of specifying that text is to be written that way on the screen by enclosing the Arabic inside the “bdo” tag, e.g.
<bdo dir=‘rtl’>Ű§ÙŽÙ„Ù’ŰčÙŽŰ±ÙŽŰšÙÙŠÙŽÙ‘Ű©Ù<bdo>. See here for an example:

The problem is that to animate each character you have to put it in its own <span> element and unfortunately this causes HTML to ignore the dir=“rtl” attribute.

I think there may possibly be a workaround for this. I’ll give it some thought tomorrow.

1 Like
15

Thanks for these pointers @elusien. Haven’t been able to find any time on the computer today but will experiment when time allows


16

Hi @Kyrillos, I think I’m getting closer. I have limited time though to work on this - this took 30 minutes to code


With more time I could improve it!

1 Like
17

That’s awesome i really appreciate your help.
I still don’t know how did u add it to shot it
How did u connect ur code to sbotcut

18

Hi @Kyrillos, thank you! When I get a spare moment I’ll post the HTML file and give you some basic instructions!! Best wishes!

1 Like
19

@Kyrillos,
Egyptian text effect in Shotcut.zip (57.5 KB)

How to use the “Egyptian” HTML files in Shotcut

  1. Download and unzip the zip file. Open the folder.
  2. Double-click on the HTML file marked (KEYFRAMES). (There are two versions. 01 and 02, each one with different animation timings). Try 01 first.

Your browser will open and the animation will play. It will have a solid purple background with moving white text.
If the text effect looks big and goes off your screen, hit CTRL/- (Ctrl and minus) a few times until the whole purple rectangle just fills your screen. Alternatively, go to the menu (top right of your browser (Chrome)), scroll down to “Zoom” and zoom out a few times.
After the animation has played you can hit “replay” (top left, CHROME) to play it again.

ABOUT THE “KEYFRAMES” HTML FILE: -
In this HTML file, I used the usual (standard) way of creating an HTML animation - by the use of the “@keyframes”.
Browsers understand this method, so the animation will work in all browsers, but however Shotcut does not recognise this way of doing things. That’s why, once I made the animation this way I then used Elusien’s HTML/CSS animation generator to convert the code so the HTML file marked “CONVERTED” will enable the animation to be applied to a clip in Shotcut.

TO APPLY THE TEXT EFFECT IN SHOTCUT:

  1. Open Shotcut. Go to “settings”, then “video mode” and set Shotcut’s reolution to HD 1080p 25fps.
  2. Select “Add video track” twice to add two blank video tracks, V1 and V2
  3. Put your background (music) video on track V1.
  4. Go to “Open Other” then “Colour” then “OK”. Drag the black preview screen to the timeline, track V2. This will give you a transparent clip on V2. Make it about 6 seconds long by dragging the right-hand edge.
  5. Go to “Filters” and apply a “text:HTML” filter to the transparent clip.
  6. Tick the “Use Webvfx javascript extension” box, and hit “Yes” to confirm.
  7. Make sure that you have the HTML file AND the other .js files all in the SAME FOLDER.
  8. In the TEXT:HTML filter pane,select “Open” and point to the “CONVERTED” HTML file. If all is well, when you hit “play” in Shotcut the animation will appear when the playhead reaches the transparent clip.
  9. You can position the text by applying a Size and Position clip to the transparent clip and moving the centre grey button around.
1 Like
20

Thank u so much I really appreciate it