Apply a BLEND MODE filter to the overlay video and select MULTIPLY from the drop-dowm menu.
Adjust the speed you want the boxes to reveal by adjusting the speed of the overlay video. (properties > speed).
If you want the middle part of the effect (when all boxes have been revealed) to be longer, cut out (split in two places) the middle section of the overlay video then shove the last section along the timeline and copy/paste the middle section as many times as you require for the duration you want.
Hi @TimLau - short answer - lots of blood, sweat and tears!
Long answer:
Stage 1 : made this 40px border png (black background on V1, white rectangle on V2, export as frame:
Stage 3: 15 SC tracks, stacked pngs on top of each other (Blend mode: multiply) and made them appear one after the other in an artistic way. Exported as an Mp4. For the outro I imported the Mp4 and selected “Reverse”, then exported.
Finally reimported and placed the reverse video after the original.
@jonray I have created a (fairly) simple HTML file to produce an animation of squares (similar to yours, like opening and shutting panes in a window). I call it “Window Panes” or a “Jonray Grid”.
It is parameterized. By default white panes appear with black surrounds. You can change the color(s) e.g. to create a green-screen animation. You can record this animation (e.g. using the HTML as a browser-source in OBS Studio, or by using a screen recording app like Sharex) and then use the resulting video as a black and white overlay in a video editor such as Shotcut, using the “Multiply” blend mode.
The parameters are:
let opening_order = [12, 9, 2, 15, 6, 11, 10, 1, 7, 14, 3, 5, 13, 4, 8]; /* THERE SHOULD BE (cols x rows) VALUES AND NO DUPLICATES */
--width : 1920px;
--height : 1080px;
--scale : 0.5; /* Scale factor that alters the size of the animation to (width x scale) : (height x scale) */
--cols : 5; /* Number of columns across */
--rows : 3; /* Number of rows down */
--total_duration : 3; /* Number of seconds to open the panes, then no. of secs to stay open, then no. of ses to close the panes */
--border_outside : 40px; /* Width of the border outside (the actual width is the sum of this value and "border_inside")*/
--border_inside : 10px; /* Width of the borders inside (the struts are actually 2 times this wide) */
--border_color : #000000; /* Color of the border */
--pane_color_shut : #000000; /* Color of the window pane when shut */
--pane_color_open : #FFFFFF; /* Color of the window pane when open (for a green-screen video use something like #00FF00)*/
The “scale factor” enables you to produce smaller videos, still in the same aspect ratio and when you open them as a clip in a full-size project Shotcut will resize the clip for you.
Just click on the HTML file link below then right-click and choose “View Page Source” and copy-paste it. - Enjoy
Super Merci pour le partage. Que faudrait-il ajouter ou modifier dans ce fichier pour pouvoir l’utiliser directement avec le filtre “Superposition Html” des versions V20 de SC?
Great
Thanks for sharing.
What would need to be added or changed in this file to be able to use it directly with the “Html Overlay” filter in the V20 versions of SC?
That’s just fantastic, @elusien!! Wow. I haven’t had a chance to test it yet, but a question: would it be possible to allow the white panes to fade in from black, and also be able to control the speed of fade? That would be cool! Apologies if you’ve already made that available. I only just read your post and responded without examining your code.
How are you?