New clean, coloured Diagonal Barn Door transition using HTML overlay

[samth]

No need to apologise! You have no obligation to answer within few hours; one day is enough (two days would be as well but after three I will get angry ).

Yes, definitely a very fine line. That is why I take a bit time to consider which colours or what colour scheme I want to use. I am not trained and it is only my gut feeling deciding but I think it helps to achieve some sort of refinement.

It really is interesting. Replicating the football field but in blue shades and in an angle as well as using transparency. And lastly, the logo on top of it.
Why do I have the feeling you want to try to reproduce it ?

[jonray]

@samth

after three I will get angry ).

LOL!

@samth

And lastly, the logo on top of it.

Yes, a complicated design for something that’s gone in the blinking of an eye .
I also notice the two transparent strips on the edges with gradient transparency. Nice detail…

@samth

Why do I have the feeling you want to try to reproduce it ?

You’ve read my mind!! Yes, this would be an interesting project for me (and maybe someone else on this forum maybe?? (Hi @sauron!!! )…
(Actually here’s the full frame of the logo if anyone else would like to have a go at reproducing it):
BBC World Cup logo - FULL FRAME.zip (1.2 MB)

I’ll have a go when I next get a bit of time.

[Paul2]

Some more ideas for transitions in the video below:

[Keno40]

It was done by the french organisation and used by TV Channels?
Well done France ^^

[jonray]

Well, I managed to do a very quick attempt. This is what I got using key-framed mask:simple shape.

(Here is a short comparison video, also showing my timeline and how I did it):

https://streamable.com/7kwt0

Doesn’t have the bells and whistles of the pro version but it only took a short while to do.

Summary of my method:
FOOTBALL clip on V1,
LOGO clip (15 frames long) on V2,

IN transition:
Apply Mask:simple shape to LOGO clip : -48 degrees rotation, about 60% width, keyframe 0-100% height.

OUT: same as IN but swap over LOGO and FOOTBALL clips. Apply Mask to FOOTBALL clip.

Hope this info is useful to someone!

[jonray]

@Paul2

Some more ideas for transitions in the video below:

Thanks @paul2, certainly ideas for inspiration there…

[samth]

This is so close ! Especially impressive considering that this is your quick attempt.
The differences I have spotted : The transparent gradient is not present which leads to a hard cut.
The video below is actually a still frame.
But these are so miniscule that I would not have noticed them without the frame-by-frame walkthrough.
I would for sure use it as it is.

[jonray]

@samth

I would for sure use it as it is.

Thanks, @samth! (Well done for spotting those differences )… However the gradient edges are bugging me. And I notice the original also has a subtle thin gold edge (also with graded width). I will not stop just yet until I get my version a little closer … watch this space…

Gold edge:

[sauron]

Got the gold edges. Couldn’t get the gradient look on the in transition. Would look OK with 10% softness but masks height maxes out at 100%. Need more height to compensate for the softness. The gradient looks OK on the out transition.

https://streamable.com/fqg5i

Used 3 tracks.

[jonray]

NICE ONE, @sauron. Classy!! Just wondering how you got the two thin gold strips to work. Any chance of the mlt?

[sauron]

@jonray

how you got the two thin gold strips to work.

The mask simple shape filter for that.
mlt and image.
Football 2019.zip (1.2 MB)

[Anil]

This is really interesting has anyone done a tutorial on it…so that others can create more transitions too?

[samth]

That is an interesting approach to the gradient. Instead of gradual increasing the transparency you gradually soften the blue edges.
@Anil Not for these transitions. @jonray is using the HTML overlay about which he has done a tutorial series. If you have seen it, you should be able to understand what he did in the HTML file which he made available. But perhaps he plans to do one after he has sorted out these “problems”:

@jonray

However the gradient edges are bugging me. And I notice the original also has a subtle thin gold edge

[jonray]

@sauron

mlt and image.

Thanks @sauron for the mlt file. I will investigate. Looks great! I have an idea for getting the two wider edge strips with gradient transparency which I will experiment with when I get a moment.

@Anil

This is really interesting has anyone done a tutorial on it…

Thanks @anil, part 1 of my html tutorial is here:
https://www.youtube.com/watch?v=AhX5p_umORM&t=4s

Parts 2-4 can be accessed through links on Part 1.
However it concentrates on text and lines, but users may be able to adapt the principles. .

@samth

But perhaps he plans to do one after he has sorted out these “problems”

I’d love to do a tutorial on this one sometime. It takes quite a bit of time though.

[Anil]

Thank you for the link @jonray

I have knowledge about HTML and CSS,this is really helpful

[Anil]

@samth alright I’ll check it out thanks!!

[samth]

My pleasure. And if you have some knowledge about HTML and CSS, this series will be a piece of cake. I understood it without any prior knowledge.

[jonray]

@jonray

Thanks @sauron for the mlt file. I will investigate. Looks great! I have an idea for getting the two wider edge strips with gradient transparency which I will experiment with when I get a moment.

The story about the “Football wipe transition” continues (see further up in this thread)…

Remember I noticed that there were 1) gold lines and 2) gradient edges to the original broadcast wipe, like this?

@sauron kindly provided a solution to the gold edges using Mask:simple shape.

But the gradient edges still bothered me…
So - I made a HTML file and applied it to a colour clip in SC and got this MATTE mp4:

https://streamable.com/anj4u
https://streamable.com/anj4u

Notice the gradient bars on the edge… which were produced using this code:

#gradient_strip_01 	{background: linear-gradient(to bottom, #303030 0%, #787878 100%);}

and

#gradient_strip_02 	{background: linear-gradient(to bottom, #787878 0%, #303030 100%);}

Here’s a screenshot of one frame of the above mp4 highlighting the gradient bars:

(Aside: there’s a reason why I chose #787878 and #303030 - they are darkish shades of grey which I found produced better results in SC than lighter shades. I could elaborate but it might get too complex…)

Now, using the same HTML file I also made a second mp4 with just the gold bars, with a magenta background:

https://streamable.com/z0ep0

https://streamable.com/z0ep0

Then I set up SC like this:

I applied a Mask:from file filter to the clip on V2 and pointed to the MATTE mp4 file, and increased the softness , which created the gradient transparency effect…
… then I chroma-keyed out the pink background (clip on V3), thus overlaying the gold bars over the blue transition - and this was the result:
https://streamable.com/7bpna

https://streamable.com/7bpna

Here’s a screenshot of my transition, showing the gold lines and gradient.

It was a lot of effort for such fine detail! However a very useful learning exercise for me, because using the MATTE file enables the user to use a transition background design, not just a solid colour. Like in this demo I just made:

https://streamable.com/442j4

https://streamable.com/442j4

And because it was done with a HTML file I can easily adjust rotation angle and/or colours etc.
Thought I’d share my experience here. Apologies if it’s a little long!! Happy to post my HTML file - just ask…

[samth]

How nice that you found a solution that works to quench your desire to perfect it.
I do not want to nitpick but there is a tiny difference between your approach and the one used by the BBC: The gold edges have a gradient as well but in an opposing manner. Is that something you can do as well? (Just out of curiosity - if you are content, I am certainly not pressuring you to try it.)
Additionally, is it possible to create this as an overlay? In the broadcasting version the video continues beneath.
All in all, it is very close. Your effort was worth it !

[jonray]

@samth

I do not want to nitpick but there is a tiny difference between your approach and the one used by the BBC:

No problem at all @samth, I welcome your nitpicking! Glad that someone is interested in what I’m doing!!

@samth

The gold edges have a gradient as well but in an opposing manner

Yes indeed. If you look closely at the screenshot of the BBC transition (my last post above), specifically the left hand gold line, I did put a gradient colour going from gold to light yellow. But yes, the original goes from gold to transparent. I’m pretty sure I can do that. I will experiment.

@samth

Additionally, is it possible to create this as an overlay?

I also think I can do that by making the main body of the diagonal swipe in the matte video a shade of grey, not black. I will look into it.

The icing on the cake would be then to make give a slight keyframed zoom to the background blue logo!! Again, easily done.

So when I get a bit of time I will see what I can do and post any result I get. again, watch this space (although I have some time commitments coming up so it may be difficult over the next few days to find a bit of spare time)…

@samth

All in all, it is very close. Your effort was worth it

Thanks, @samth - I really enjoyed this little project, I learned more HTML techniques doing it.