A Christmas card made with Shotcut - and how I made it

Tutorial
1

I made a very short Christmas card video using Shotcut - with a flashing Christmas tree star - and screen-captured me doing it from start to finish, in real-time (ie with no editing). Took less than 5 minutes.

The video below shows the Christmas card, then keep watching to see all the steps I took. Note the flashing star (with gradient) was made with some techniques I used in a recent Shotcut forum challenge (details below).
Here’s the video, which gives me an opportunity to send my Christmas or Holiday Wishes to Dan (@shotcut), @brian, and all the Shotcut community, especially those who contributed to the recent challenge.

Merry Christmas!

PS the star was created using a black and white mask .png file (which itself was made previously using Shotcut). Here it is if anyone wants to use it themselves:

Star mask - black on white
Star mask - black on white1920×1080 55.4 KB

Recent forum challenge. It’s long - so read from post 33 about making a gradient star:

8 Likes
2

Here is my old-school ASCII computing christmas card. Copy to an HTML file (xyz.html) and run it in a browser.

<html>
    <head>
        <style>
* {font: 80px/1 sans-serif; color: red;}
body {display: flex; flex-direction: row; justify-content: space-around; align-items: center;}
html   {background-color: black;}
#tree  {font: 40px courier, monospace; color: green;} 
.star  {color: yellow;}
span   {color: transparent; display: inline-block; border-radius: 50%; height: 0.6em; opacity: 1.0;}
.bulb1 {background-color: red;}
.bulb2 {background-color: cyan;}
.bulb3 {background-color: blue;}
.bulb4 {background-color: yellow;}
.bulb5 {background-color: orange;}
.bulb6 {background-color: magenta;}
span, .star {animation: blink 0.2s alternate infinite;}
@keyframes blink {from {opacity: 1.0;} to {opacity: 0.2;}}
        </style>
    </head>
    <body>
        <div id="tree"></div>
        <div>Merry Christmas</div>
    </body>
    <script>
    let tree = `
    *
   /.\\
  /o..\\
  /..o\\
 /.o..o\\
 /...o.\\
/..o....\\
^^^[_]^^^
`;
    let a = tree.split(/\r\n|\n/);
console.log(a);
    for (let i = 0, n = 1; i < a.length; i++) {
        let c = a[i].split('');
        for (let j = 0; j < c.length; j++) {
            switch(c[j]) {
                case ' ': c[j] = '&nbsp;';
                            break;
                case '*': c[j] = '<i class="star">*</i>';
                            break;
                case 'o': c[j] = `<span class="bulb${n++}">o</span>`;
                            break;
            }
        }
        a[i] = c.join('');
    }
console.log(a);
    tree = a.join('<br>');
    document.getElementById('tree').innerHTML = tree;
    </script>
</html>
4 Likes
3

Thanks, @elusien - cool!
Elusiens Christmas tree flashing

4

Voici la mienne.
Joyeux Noël à tous. :santa:

Here is mine.
Merry Christmas to all. :santa:

5 Likes
5

A bit more PEZAZZ than my last christmas card

4 Likes
6

@namna and @elusien, these are both far better than my effort! Thank you.

@namna et @elusien, ces deux vidéos sont bien meilleures que mes efforts ! Merci.

@namna, this is an incredible animation! Was this 100% Shotcut? Amazing.
If you don’t mind, I have downloaded your video and slowed down the playback, to analyse it frame-by-frame. You put a huge amount of work into this. Bravo! :+1: :+1:

@namna, c’est une animation incroyable ! Était-ce 100 % Shotcut ? Incroyable.
Si cela ne vous dérange pas, j’ai téléchargé votre vidéo et ralenti la lecture pour l’analyser image par image. Vous avez consacré énormément de travail à cela. Bravo ! :+1: :+1: :+1:

@elusien, this is a superb effect! It would also make a great transition. I presume a matte (black and white) mask video could be made from this, and applied to a SC transition using “Mask from file”?

1 Like
7

Merci pour votre commentaire.
Non, il y a aussi du html.
Mais je pense que cela doit être réalisable 100% Shotcut avec Glaxnimate.

Thank you for your comment.
No, there is also html.
But I think it has to be 100% Shotcut achievable with Glaxnimate.

1 Like
8

I agree @namna did a sterling piece of work with this animation - a lot of effort.

Je suis d’accord que @namna a fait un excellent travail avec cette animation - beaucoup d’efforts.

My effort was quite minimal, basically just setting up a grid of DIVs then animating them with GSAP:

Mon effort a été assez minime, il s’agissait simplement de mettre en place une grille de DIV, puis de les animer avec GSAP :

        let grid = [9,16]; //[rows, columns]
        let tl   = gsap.timeline();
        tl.set("div", {scale:0.1, y: 60, opacity: 0.0})
        tl.to("div", {
            duration: 1,
            scale: 1.0,
            opacity: 1.0, 
            y: 0,
            delay: 1.0,
            repeat: 0, 
            ease: "power1.inOut",
            stagger: {
                amount: 1.5, 
                grid: grid, 
                axis: null, 
                ease: "power1.inOut",
                from: "edges"
            }
        });

I have been thinking of creating some masks for use with Shotcut. I may have some time over the Christmas period to try out some. Of course any I think are worth it I would make available to the community.

J’ai pensé à créer des masques à utiliser avec Shotcut. J’aurai peut-être le temps pendant la période de Noël d’en essayer quelques-uns. Bien sûr, tous ceux qui, à mon avis, en valent la peine, je les mettrais à la disposition de la communauté.

1 Like
9

Merry Christmas!

2 Likes
10

Merry Christmas, @bentacular!! Hope you had a good time!

1 Like