Hi folks,
Yesterday I had the idea of creating a HTML file to produce what I’ve called a “Slide and Rotate” transition - a bit like a letterbox transition but with added rotation. As you can see from my short demo, the transition features white angled boxes sliding in from each side, then rotating, before shooting off to reveal the next shot. I’ve created 3 HTML files, each making the white boxes move around at different angles.
The movement of the white boxes makes use of @elusien’s Webvfx framework js file which you can download from his site - Google “Elusien Shotcut”, select “WebVfx” and you’ll see it.
I’ve zipped the files to share or for anyone to have a play with them. (I’ve included Elusien’s WbVfx file in the .zip file; Elusien please let me know if this is OK or if you’d prefer for users to download it from your site instead)…
NB I’ve included two folders. One set of HTML files have PURPLE backgrounds so you can preview them in your browser (just double-click the file and it should open in your browser), the other set have transparent backgrounds for importing into the Overlay HTML filter in Shotcut.
Instructions:
Make sure the HTML file is in the same folder as the WebVfx.js file.
Create a transition in the timeline by dragging one clip over another.
Make it 4 seconds long.
Select the transition, go to Properties and change the transition from “Dissolve” to “Cut”.
Apply an Overlay HTML filter to the transition.
Select “Use WebVfx” and confirm.
Open one of the HTML files by pointing to it (from the TRANSPARENT folder).
That’s it. NB Playback may not give an accurate result.
Repeat for further transitions if desired.
Export to see the rendered effect.
NB you can change the colour of the sliding boxes from white by editing the HTML file.
I could make this into a proper filter if you like, with parameters so there would be no need to alter HTML files etc. and no need for my WebVfx framework It would be a nice exercise for me. I’ll have a look at your HTML for starters.
I thought it would be interesting to show how the HTML file looks when previewed in Chrome, with Chrome set to a zoom of 25%, and “overflow:hidden” removed from the code of the purple box. You can see how it’s done! The purple box is 1920x1080 which are the dimensions of a full screen in HD format.
Nice transition @jonray. I also try to create similar transition with existing filter mask-simple shape filter. But “rotation” parameter needs to be keyframed. So @Elusien you can contribute to add keyframe to rotation parameter instead of making a new filter. Thanks your creative effort and contribution.
Thank you for your comments, @dipensan. Your transition is very cool! I’d be interested in knowing how you did that If you do have a screenshot I’d like to look at it but no worries if not. Thanks again.
I’m thinking of doing a tutorial on how to create filters. WebVfx filters are relatively easy as again you can debug with the browser. WebGL shader proram filters are a different kettle of fish - much more difficult to program (efficiently).
It’s great that you added keyframes to the rotation parameter but I just tested it out and none of the parameters are responding at all. I switched back to the regular Mask Simple Shape filter and its parameters are responding as expected. By the way, can the Softness parameter also be made keyframeable?
I had it working last night, but made a couple of “tweaks” before I put it in the ZIP file. I’ve found 1 problem (upper-case R instead of lower-case), will check the whole filter for (hopefully) the last bug.
Edit - found the problem (again a 1-letter typo) will update the ZIP file shortly - within the hour, and let you know.
Updated: I watched @jonray transition and created similar transition with Mask-Simple shape Neil. Thanks to @Elusien for adding keyframe. Hope it will be added to next version.
So far as I can tell the filter is now working fine and I have replaced the ZIP file on the webpage.
It can indeed. I’ll see if I can get round to doing this this afternoon - cleaning the swimming pool shortly. My wife is off playing golf in Turkey this coming week, but I have to stay at home as no flying for a month, so might as well make sure the pool is OK.
Seems fine although I don’t have any time today for a detailed test. Thank you so much for adding keyframes to the rotation, this opens up a whole lot of creative possibilities.
One thing - my original transition had an element of keyframed opacity. Is this possible to be added to your filter?
That looks REALLY great, @dipensan. Bravo and thanks for showing what can be done. Did you use two filters on the clip, one for the right-hand white shape and another for the left-hand shape?
To do this I’d have to modify the underlying Fri0r filter C++ code, which is a bit beyond me, certainly at present), though when I have some spare time it may be interesting playing around with it. Anything with frei0r that just involves the Qt interface (ui.qml), like key-framing existing paramters, is not a problem (just fiddly).
On track v1 put two different clip for making transition. On the track v2 (top track) add a white solid color clip then add Mask filter. I used Width, height and rotation parameter to create this transition.
I have finally got round to creating a new version of the Mask Simple Shape filter with the “Softness” parameter fully keyframed. While doing so I found a small bug, which I fixed.
It took longer than I’d hoped because when I was developing it I kept getting spurious warning messages in the log saying:
[Warning] <> file:///C:/Program Files/Shotcut/share/shotcut/qml/views/keyframes/Parameter.qml:113:20: Unable to assign [undefined] to double
[Warning] <> file:///C:/Program Files/Shotcut/share/shotcut/qml/views/keyframes/Parameter.qml:111:28: Unable to assign [undefined] to int
I spent ages trying to find what I’d done wrong, only to discover that the warning messages come up with almost all of the filters that are keyframed!
If you do have a screenshot I’d like to look at it but no worries if not. Thanks again.
