What are you doing with Shotcut (or anything else) to bring your static pictures to life?

Is anyone using any techniques other than the Ken Burns thingy? What are the possibilities in Shotcut without having key frames?

My main technique is using open source 2D animation package “Synfig”. I animate everything over a coloured background then chroma-key it into Shotcut. Not as straightforward as having native key-frames but not particularly labour intensive either. I’ve tried using Davinci and Hitfilm to achieve the same results but I find the Shotcut/Synfig combo works best for me at the moment.

I’ve been experimenting with image manipulation in Overlay HTML/WebVFX (Elusien’s framework, using jon_ray’s examples as a starting point). I haven’t been satisfied with any of my results yet, but, it should technically hold a lot of possibilities.

Windows Movie Maker still works just fine on Windows 10 (you can still find it for download as well, just search for wlsetup-all.exe) It can create all those KB type effects quickly and easily.

You guys are far beyond my skillset. All I’ve tried is using PhotoFilmStrip to create Ken Burns style slideshows. It does that beautifully if you’re not fussed about customising them too much. I don’t touch Windows at home so I’ve never used WMM. I do hear a lot of positive opinions of it though.

Other than that I’ve dabbled with a bit of frame by frame animation in Shotcut. I may do that properly in something that supports keyframes and then import it to Shotcut at some point.

I’ve put a few slide-shows together using HTML, CSS and Javascript. So now I am modifying my WebVfx framework to handle this so others can easily do this without needing to know how to program in Javascript. I have almost finished and will update the framework shortly.

It enables the user to specify the type of transition (sliding in from left/right/top or bottom), expanding/deflating, fading in/out all with the option to have a Ken Burns effect. It handles different sized photos and different orientations (mixed portrait and landscape). It can’t however handle orientation that is produced by modifying the X,Y coordinate system in the EXIF data of JPEGs. “keyframes” allow the user to have fine level control over the effects.

I am working on one last transition, “split”, where the slide is split down the middle (or from side to side) and the transition brings these two sides together. This is proving rather difficult and I may release the new WebVfx framework without this effect then provide an update later.

1 Like

What are “Key Frames”?

Ah… I googled it. I guess “keyframes” is another word for transitions.

Are a start and end point in time for a specific motion.

Would just be a still picture then?

Not necessarily. Like Elusien said, Shotcut supports other ways to achieve the same thing… CSS, HTML overlays, JavaScript and so on. It’s just not as convenient and beyond most non-programmers to create things from scratch. I’d definitely jump on board with that if you managed to create a tweakable interface that would save the end user from having to delve under the hood.

You can also simulate movement by making pictures appear and disappear in different positions and in various sizes, orientations etc., or by modifying them a tiny bit at a time as you would if you were an animator living in the 1940s. Get them to blink in and out quick enough and you’re animating. How convincing it is is another matter entirely - you’d need to create a heck of a lot of separate images for anything complex, which is where something like Tupi comes in. Pencil is a fun way to start, except that doesn’t do key frames either so it would be kind of shooting yourself in the foot to hold off on learning something more daunting.

The HTML interface to the slideshow looks like:

		<div id='slides' data-control='60:30' class='webvfx' data-slideshow='{
			duration: 30% , type: shuffling, from: "right", magnify: 25%
			<img src='../../mhcommittee.elusien.co.uk/images/home.jpg'                                  >
			<img src='../../mhcommittee.elusien.co.uk/images/home_1.jpg'                                >
			<img src='../../mhcommittee.elusien.co.uk/images/Melamine-wood-002.png'                     >
			<img src='../../mhcommittee.elusien.co.uk/images/Melamine-wood-003.png'                     >
			<img src='../../mhcommittee.elusien.co.uk/images/home_2.jpg'                                >
			<img src='../../mhcommittee.elusien.co.uk/images/home.jpg'                                  >
		    <img src='../../trips.elusien.co.uk/2017c-New_Zealand/images/Day10a+Gannet_Colony.JPG'      >                                              
		    <img src='../../trips.elusien.co.uk/2017c-New_Zealand/images/Day10b+Gannets.JPG'            >
		    <img src='../../trips.elusien.co.uk/2017c-New_Zealand/images/Day10d+Bethells_Beach_Cave.JPG'>
		    <img src='../../trips.elusien.co.uk/2017c-New_Zealand/images/Day10e+Karakare_Falls.JPG'     >

which is saying run the slideshow for 60 seconds at 30 fps; since there are 10 slides each one will be shown for 6 seconds; do a “shuffling” transition, where one slide comes in from the right-hand side while the previous slide slides out to the right and this transition takes 30% of the 6 seconds; once in place apply a Ken Burns filter magnifying the slide by 25%.

I’ll be updating my framework so people can use this in the next couple of days or so.

@Elusien , do you know if it’s possible to reference the source clip (let’s say, an image) through the Overlay HTML filter? Something like <img src=%CLIP_ID>?

So far the framework I’ve developed is more or less independent of shotcut. All of the animation is done using HTML, CSS and Javascript. So basically I am creating a webpage with the necessary elements on it (such as the images in this example) and animating these. This does not use any of the underlying structure of Shotcut-MLT.

Once the animation has been produced to my satisfaction in a web browser (I mainly use Google Chrome, sometimes Microsoft Edge), it is then moved across to Shotcut without any changes as an HTML overlay (using WebVfx). Sometimes some of the newer CSS features that are supported by these modern browsers (e.g. filter: blur(20px)) are not supported by Shotcut-MLT and I try to find a workaround.

Since the browsers know nothing of Shotcut-MLT it wouldn’t be possible to use any of its underlying elements and still have the possibility of doing the development work in a browser.

I suspect that integrating my framework as a proper Shotcut filter would be a large project that would impact too much on my current lifestyle - Golf, Gardening, Pool Maintenance, Diving, Website Development, Holidays, Socialising etc. (it’s a hard life but someone has to do it), and I can’t really see me being able to spend the time on doing this.

Hi Neil,
Great news, I would be very interested to experiment with your new framework - can’t wait! I assume I’d be able to produce a mixture of gentle zoom in or zoom out effects on still photos, and also gentle pan left or right effects and mix them together so each still of a slideshow merges gently into the next? If so, just what I was looking for.

Thanks for your hard work, will look out for this! :rofl:

[Edit: oops, just googled “Ken Burns Effect” and found out that this is what I just described above! Hadn’t heard of this terminology before …]

Thanks for the explanation, Elusien. That seems pretty straightforward - I can cope with adjusting a few parameters via HTML to customise the tools.

The only concern would be that it requires an HTML overlay and in my experience that feature really doesn’t play nicely in Shotcut. Just applying basic text has been enough to kill a few of my projects so I’ve steered clear since. Has it been working reliably for you?

It works reasonably well for me so long as I have done all the development first using a browser, then when that works flawlessly I move it over to Shotcut. Shotcut is definitely not the best platform to debug Javascript, though using my framework you don’t have to do that, just modify the CSS and HTML.

There are still a few niggles with making minor changes to the Overlay HTML filters (but mainly when I’m modifying the Javascript) then RELOADING the new version of the filter. It generally works, but I find it best to save the .mlt file then close the file and re-open the .mlt file having changed the HTML/CSS.

Jonray has been making good use of the framework I’ve developed, see:

and other posts he’s made.

and if you go to my website: www.elusien.co.uk/shotcut you’ll see some of the things I’ve done for testing the framework.

Hi Elusien,
Looking forward to making slideshows similar to this one, but using your new webvfx framework to give more control over panning/zooming:

I did this with the automatic slideshow feature in Photo gallery (windows) . The “Bournville” animated title is my own creation utilising the overlay HTML feature in SC. Music is my composition too.

(Note to Neil: I originally designed the BOURNVILLE green letters HTML/CSS by using dislpay:flex and justify-content: center, which worked in Chrome but found it did not seem to work in Shotcut, so changed to display:inline instead (to get the individual letters aligned in a row). Just wondering if there’s a problem with Shotcut HTML editor recognising display:flex? Thanks! Jon)

Yet another impressive video, I especially like the soundtrack. I have put up the new version of the Javascript on the website. There is also a link to a webpage that will simplify the conversion of “framestamp” to “normalised time”.

I haven’t yet got a panning option in the slideshow yet. That will have to wait till I get back from a golfing holiday with my wife and friends.

“flex” is a fairly new CSS feature that has only recently made it into browsers. Unfortunately the webpage rendering engine used by MLT (which is used by Shotcut) doesn’t support it at present. Also, some CSS properties have to have the “-webkit-” prefix, you’ve probably seen some in my examples.

There are some very good 3D features in CSS, but again, they aren’t available (yet) in MLT.

I was wondering about transform:perspective(???px). Does that work in SC? I presume it would have to be webkitTransform? Or is it -webkitTransform? (with the dash). I know transform:scale(?, ?) works OK.