Don’t know if it’s been tried before, but had an idea to use the webvfx @Elusien created to animate pictures instead of text.
Tried it out and works pretty well, it’s an easy way to create lower third straps/graphics.
First create the strap/graphic in your favourite package and save it as a png with alpha.
If you haven’t already, grab the webvfx.js file from here:
The latest version is 1.11.
I renamed mine to “WebVfx111.js” so I wouldn’t get confused with other versions.
I’m going to assume that those who want to try this are already familiar with html and webvfx.
For those that aren’t, I highly recommend the tutorials created by @jonray.
Do a search on this forum.
So when you use the attached html files, DON’T tick "Use WebVfx JavaScript Extension"
As long as you put the latest version in the same folder as the html files, it will be found.
You will see there are two versions.
The first one called “Strap1” grows and shrinks.
This is done by specifying a percentage of the png in the width and height of the html code.
The second version, “Strap2”, does a wipe in and out, this is achieved by not specifying anything for width and height.
Feel free to tweak values of the different parameters.
Shotcut does not provide a WebVfx.js. Rather, it provides the real WebVfx technology, which includes a web runtime, integration with Qt and MLT, and a Javascript extension. @Elusien created WebVfx.js, which is a little confusing.
I realised some time ago that this was the case. If I had thought about it more when I created the framework I would have used a different name. At the time it seemed logical to call a framework that used MLT-Shotcut’s WebVfx environment as the underlying technology “WebVfx”, but on reflection it should have been called something else.
Ok Paul, it’s interesting. I wanted to try another .png image by editing the file and saving it but I have no result. Do you have any idea why?
Beautiful day.
I’m not sure why your example works as well as it does since my framework needs to use Shotcut’s underlying WebVfx environment. The webpage states (though not as prominently as it should:
When you use the HTML Overlay Filter in Shotcut itself, do not forget to check the box to say it uses WebVfx, and confirm that you know what you are doing.
I will change the webpage to state this more obviously and try to alleviate the confusion between “elusien’s WebVfx framework” and “MLT-Shotcut’s WebVfx javascript extension”.
I have updated the webpage. It now states at the very top of the page:
THIS FRAMEWRORK IS NOT A REPLACEMENT FOR MLT-SHOTCUT’s WebVfx JAVASCRIPT EXTENSION in fact it uses that extension to synchronise the animation with the frames generated by Shotcut. YOU MUST SELECT THE OPTION use WebVfx javascript extension OR YOUR ANIMATIONS MAY NOT SYNCHRONISE PROPERLY, OR MAY NOT EVEN APPEAR AT ALL.
I have also changed the table to show only the latest version.
BTW, it also works on animated gifs.
Below an example where the background is just a still but I pan using keyframes.
Then use an animated gif in the html file.
The animated gif has the frames to simulate walking and the actual “offset” is done with the moving background still.
I wouldn’t like to do a whole animation sequence this way, it’s certainly doable but will be rather tedious.
There are programs better suited to animation, but for a “quick and dirty” way, SC and WebVfx is certainly an option.
Nice examples.
Thanks for posting this - the html file is interesting - I’ve not explored animated images too much yet, and didn’t know about the “background-position” attribute. A question, though - do you need both “left” and “top” attributes as well as “background-position”? Don’t they do the same thing?
The backgroundPosition seems to over-ride left and top, however I left them in as WebVfx and html/css have some funny quirks.
An example of this is the need for opacity:0 in the img src tag.
This way I could experiment with left, top and backgroundPosition.
In theory, even video could be used instead of just images.
Nice.
You could also use the Text HTML blank HTML template for the animation. Insert the gif. Apply to a transparent clip, then position and animate with the SP filter.
LOL, explains why he keeps trying to end it all by walking in the road @sauron, couldn’t you just import the gif and us the SP filter without the need for HTML at all?
