Photo slideshow (artistic) with animated borders and blur/stretch transitions

Tutorial
1

This thread:

sparked a few creative ideas in me, so I made this short demo of a photo slideshow with animated moving borders:

In truth, it was quite hard work.
I made an animated mask border:

12 photos in total, with transitions applied (I used my blur/stretch transition filter sets):

Applied SPR filters, then mixed down 3 tracks with 4 photos on each.
Blend Mode (ADD) applied to mask file.
Timeline now looking like this:

Photo slideshow (moving borders) Shotcut timeline
Photo slideshow (moving borders) Shotcut timeline1018×321 67.1 KB

The splits in the top track were useful as a “timer track” to easily locate the in and out points of each transition.

Then - applied Crop:Rectangle filters to each track and, because the mask file movements had easing (Quartic) applied, I had to keyframe all the crops manually, setting the “jump” to 5 frames. Tedious, but it worked.

Not a quick job admittedly, but it was a worthwhile experiment for me.

5 Likes
2

I bow upon you sensei

images (43)

Your tutorials are always great :clap:

1 Like
3

Thank you, @Ar_D ! Had to Google “Who is Sensei” though! :rofl: :rofl:
Ah! a teacher or instructor usually of Japanese martial arts
That’s kind of you, sir! (although I don’t look quite like this): :grin:
Sensei

1 Like
4

I believe that you don’t color your hair to hide the white ones :skull:
I mean it does fulfill one criteria if you have the white hair :sweat_smile:

1 Like
5

Jon,

I’m well impressed with your slideshow. So much so I wondered if I could do something similar using HTML/CSS/Javascript. I managed to parameterise the borders better and which part of the slide to show, but I couldn’t exactly match your filters, since all I had were CSS filters. Nevertheless it is quite a good approximation.

The Zip file is here (just remove the ‘.txt’ suffix and unzip it.
slideshow.zip.txt (2.4 MB)

The parameters are:

--slide_width : 1024px;
--slide_height:  640px;
--border_size :   10px;
--border_color: white;
--static_time : 5;        /* Seconds displaying slide */
--trans_time  : 1;        /* Seconds transitioning from 1 slide to the next */
--blur_max    : 26px;     /* Maximum amount of bluriness during transition */

The slides are added in the javascript e.g.

var slide_groups = [
     new slide_group(0.25, 0.333, [new image('Slide_C.jpg', 'center center'), new image('Slide_A.jpg', 'top center'), new image('Slide_B.jpg', 'bottom left'  )])
    ,new slide_group(0.50, 0.50 , [new image('color.png'  , 'center center'), new image('Slide_D.jpg', 'top center'), new image('Slide_E.jpg', 'bottom left'  )])
    ,new slide_group(0.75, 0.666, [new image('Slide_F.jpg', 'center center'), new image('Slide_H.jpg', 'top center'), new image('Slide_G.jpg', 'center left'  )])
    ,new slide_group(0.25, 0.75 , [new image('Slide_I.jpg', 'center center'), new image('Slide_J.jpg', 'top center'), new image('Slide_K.jpg', 'center center')])
];
3 Likes
6

Wow, how wonderful to see you back posting here, @elusien! Welcome back!

I just tried your slideshow - awesome! I made this quick demo with it.

Method - double-clicked the HTML file and captured the screen with ShareX, then imported into SC and added an audio track).
Super! Thank you. Sure is easier work than having to keyframe frame-by frame!

1 Like
7

:+1: :grinning:

1 Like
8

That is really slick! SC defaults to a frame rate of 29.97 iirc, and that’s what I have been using. Would that create problems?