 We are continuing our journey into the world of screen share green screen overlays in the upcoming e-cam live version 3.9 And this is video 4 of 5 Hello, welcome to take one take my name's Alec a lost count there for a moment and we are continuing with this delve into the world of the new feature of e-cam live that is coming up in version 3.9 currently in beta and it is the feature whereby you can apply green screen to a screen share overlay It's a bit of a tongue twister this one. They need to come up with a catchy name for it So that means that you can basically bring in presentations from things like keynote and powerpoint And so long as you've got a green background It's effectively a transparent canvas for you to work on so you can add in whatever animations You would like to add into your e-cam live productions And so what I thought to do is today Talk through masking and how you can mask off different areas of your presentations to give some Interesting effects or add maybe make it easier to work with certain aspects of using keynote with your Your your presentations or your live streams So let me first of all quickly I'm going to jump to a different scene actually because there's one that we've been working with So I'm going to stick with that one It sort of illustrates the point a bit better than my my boring old scenes So what this is if I just come into demo mode What this one is is a Really simple in fact, let me say first of all how you would do this in the olden days In the olden days when but like sort of over a week ago What you would have had to have done for this is it's got a moving border There's obviously some rounded corners going on on the camera overlay here as well And you've got this this white outline to it as well This would have been a little bit tricky to do because it's an animation It's an animated border So this would effectively been the whole of this sort of moving a bit around the outside And the white part would have been an Basically a webm file an animated overlay or could have been a movie actually because it would have been silent So not necessarily webm But basically you would have had to have created this with a transparency In an in some sort of package You wouldn't have been able to do this directly in keynote straight away without something in between to get it into Into You come live I don't know what's wrong with me today Because the background is moving so with keynote you can make things you can make transparent slides You can almost you can also pop out shapes from like subtract Shapes from shapes behind them to make sort of holes in things and and so on But because this one's actually got a totally moving border You wouldn't have been able to do that in income live without we're in keynote. I beg your pardon without then Exporting it as a movie and then using some other piece of software to actually remove the sort of middle part of it So so that would have been quite complex to do whereas now It's as easy as this I've just got a movie file in the background that is running on a loop that I got from pexels And I did a video all about pexels the website where you can get free stock images and video And I just went on there basically and searched for abstract background loop And there's loads of them So that's how I got that little loop for the background And then this bit and as you can see how I'm moving it around It's just a camera overlay because in the latest beta as well as the green screen feature for screen sharing You can also round the corners of a camera overlay So you see I've gone around the corners You can also round just specific corners. So I could have just the the top and bottom corners The opposite corners not rounded or whatever I wanted But you can also if I just move this one back to I think it's six there we go You can also add a border. So now we can add a border around the the camera overlay as well So that means that all of those things that before used to have to do in an external program You can now just do right in ecam. So I think that that is absolutely amazing that it is so uh accessible and easy for people to do this and it's sort of kind of eliminated traditional graphical overlays to have these holes in it So, uh, let's get on with what we're doing today because What I wanted to demonstrate today if I come out of a demo mode for a moment What I wanted to demonstrate was how you can add in animations a bit like this Now this is obviously a bit silly and we're talking about masking now What is interesting about this one? Oh, well, that's interesting You'd be the judge of that is this animation Came in from seemingly behind this border and then it sort of fell forward over the front of it So let's just look at that again in slow motion because It's worth noting what is actually going on here because bear in mind what we're simulating with having this movie in the background playing This little loop And then having the the camera overlay over the top We're still trying to simulate the fact that this is a border around the outside of it So if I just activate this animation again, you'll see that as it comes in It does appear that it's coming from behind this imaginary border even though there's no border there But then when it goes out, it is seemingly falling out over the front of the border So how have I done that? Well, that is basically the purpose of this video is to show you this and then how you can also Use this technique with other things and to do things far more Interesting and intelligent than that silly little animation So let me come over to my screen sharing for a moment I've got a moment to turn that mask off. There we go So this is the slide and if I do one thing on here, you'll be able to see instantly my not so clever little trick And that is if I just come to this element and change the color of it There you go. It's as simple as that. You can see I've basically got a Red border and I've cut out the bottom part of the red border And so this animation here or this text as it animates in you can see it's coming in from behind the the red part And then it's falling forward over the front of it. In fact, if I just actually replay this again Let me just come back to my other scene. You'll see exactly what's going on if I Play this in the window and turn this one on Then you can see now I've got this red border and now it's not such a trick Is it because basically that's just coming from behind that red border? And then as it falls forward, there's nothing underneath for it to fall in front of so that is basically how that little sneaky little trick works So, how did I do that though in terms of how did I actually make it? Well and and get the border right? Well What I actually did was I created First of all the template in keynote first So I came let's in fact, let's just start this I'll get a new slide We've already created our slide master Which is green if you haven't seen how I did that then go back and watch videos one two or three Where I tell you how to set all of this up in this series and I'll leave a link to those down below, of course So I'm going to create a brand new slide And then I'll just show you in here what I did because I've got it here just so that we can quickly replicate it So basically I created a Shape which was like that and that is the shape of the the camera cut out Now you could either Actually import a snapshot of your camera setup Into keynote to make sure that you get the shape the right size Or you could do it slightly the opposite way, which is what I did So I'll just come into demo mode and show you what I mean by that I come into my demo mode I'll come into this This scene here. That's the wrong one. This is the one I want If I turn on my green screen Yeah, sorry screen sharing green screen overlay Which is this one at the top Then that's basically I need to I need to have this play in window like that. So there we go So now you can see where this particular thing is now in fact, that's not actually centered on that So let me just get it centered on the screen. So now I'm just I've got this shape And I'm just going to line it up until I get those our Horizontal and vertical lines. So I know it's perfectly lined up on the screen Now I'll go to play in window And you can see that this is actually obscuring the camera So I can't really do much with that in any case. Can I So what I actually did was I came over into my overlays because as you remember from my previous video I'd suggested you have this show in all scenes and it's going to be over the top of everything But to set it all up Actually, if you come down to the back Down here Now it's a little bit easier for me. This is because I've obviously got working with a green screen So I can turn the transparency on so let me just turn that one on I make it transparent So basically what I've got now is I've got my camera overlay Over the top of a purple background or whatever the color of these slide happens to be in fact Let me just turn off the the little animation in the background as well. Just so that we don't Uh It doesn't get too distracting. In fact, where's that gone now in a second? Uh, it's because it is the actual background, isn't it? Let me change that to be blank There we go. So now I've basically all I've got in here is I've got my little purple square or pink square That's coming from the uh, I'm not sure. It's my color really but there you go That's coming from the keynote presentation and then I've got my camera overlay Now obviously the camera overlay could have been any size to start with And let's just say for example that we also didn't have any corner radiuses or anything like that or a border width So what I would have done or what I did do is I actually just decided on what the border width I wanted was So I chose eight pixels And then what I did was I lined it up until basically the uh, I thought let me just take the corner radius off again There we go. That's what I want. So I lined it up until it was basically perfectly aligned at the the top And the left hand side like that So that's about right. Uh, I also by the way, I changed the aspect ratio of it to custom So you can have it 16 by 9 but because I'd set the size of the the shape in uh in keynote I changed this to custom which means basically it's not going to keep that specific aspect ratio Not circle Alec Where's it gone custom? That's the one Uh, so that means that you can basically pull it in this direction or this direction or whichever direction you want So now I just grabbed that bottom corner and I moved it out until It's basically you could make it a little bit bigger if you want first And then move it in from the right hand side until the right hand side There's no gap there between the the pink and then move this one up until whoops That's that way. Sorry drag this corner better So I'll drag that bottom corner but upwards until the uh, there's no uh, no gap at the bottom And then I went in and I adjusted the radius of the uh, the the border So now I'm going to adjust the radius until it completely covers or it matches the radius of the back now Let me just check. I think that's slightly off somehow There's something not quite right there. There we go That looks exactly right now So now I'm going to as I was going to say adjust the radius So we're just in the corner radius Basically said it matches the corner radius of that pink box. So now that is exactly matching that So now that I've done that I've now know that I've got a background that is completely Or a camera overlay rather that is completely matching the shape of that mask that we'd set up in the uh in keynote And I can Check that as well by if I now move my green screen overlay All the way back up to the top You can see that it does completely cover my camera, but it's still showing the um The the border around the camera overlay that's underneath it. So you can see like that. That's what I mean So let's get that one back and centered. So that has now basically set up the shape that we want in keynote, hasn't it? So let me just uh turn off green screen screen sharing And then I'll come back to my uh this one here So now we've basically got our shape But that's the sort of the inverse if you like of the shape that we actually want because we want to mask off The edges we don't want to mask off the center. So at the moment this part is masking out Everything that's in the center and that's the opposite of what we want So, uh, what I'll do is I'll just come out of this uh for a moment and we'll just make a few changes Um What we want to do is we want to basically Sort of punch this pink shape through uh the the back But we can't do that because that is the slide master So what we need to do instead you can't adjust you can't do that on the slide master itself And we want this to be the frontmost layer as well So there's no point to to actually make this shape in the slide master because the whole point is This is going to be over the top of anything that comes from behind it that makes sense So what I'm going to do is I'm going to create an entirely new shape And that was by the way just the rectangle tool. So you'll find these all up here in here with shapes And then I'm just going to adjust that so it is the right size You can see it actually tells you the size when you're Moving on it when you're dragging the corners. It will tell you what size it is. So I can see there 1920 By it's actually a bit bigger than 1080 really matter too much as long as I've got it covering the thing So there we go. That is our shape now We want to sort of basically take this pink shape that's behind it So let's drag that one up to the top And now you can sort of see that the border is taking shape a little bit So we want to basically punch that purple pink shape through the blue shape behind it Well, fortunately, there is a way that you can do this in keynote. So if you come up to the The format menu And I beg your pardon. It's the arrange menu rather And then if you come up to the align objects, just hang on a minute. I'm looking in completely wrong place It was format You come to the format menu and then you go into Shapes and lines and what you have to make sure is you've got both shapes selected So I'm going to select these the rectangle and this one And then I'm going to come up to the format menu the right menu again And then here you can see you've got these four things here You've got either unite shapes, which means join them together You've got intersect shapes, which means it will unite the the bits that are intersecting You've got subtract shapes, which means it's going to take one from the other Which is what we want and it always takes the top most shapes from the single Bottom shape I'll show I'll demonstrate all of these in a moment. And then you've got exclude shapes So let's actually just do a quick demonstration of what all of those do because they're all handy when you're creating stuff in keynote Let me just quickly come and create a brand new slide And what I'm going to do is I'm going to take a few shapes. So we'll have a square like that In fact, yes, that's a good shape We'll use a square and then I'll come here and I'll use a yellow square like this And what I'll do is I'll put one inside the other Then I'm going to create a square Like this and I'll have them slightly overlapping like that Then I'll do that again This should basically be able to demonstrate all of these things So the first one that we've got in that menu was Unite shapes. So if I click in this one and I click in this one and I go to unite shapes It will just join them together into one single shape. So there we go. Unite shapes. Now that is just one single shape You can change the color of it. It is just acting basically like it is a a single shape As you would expect. So there you go That is now being completely joined together and you can resize it You can do everything that you would have done with with it is if it had just been created like that So it looks like a tetris block that doesn't it? There you go. That's my mind at work Next one we've got is if I click on this one and this one and then I come to the format Shapes and lines the next one that we've got is intersect shapes So I'm going to click on that one and you can see that it basically just took the area where there was the overlap So another way that you might want to use this Just to show you if you wanted to create like an eye shape or something You could come in here Click on these two and you'll see what's going to happen when I intersect those Intersect shapes. It's basically just taking the area that is overlapped And again, you can obviously change the color of that With to whatever color you want. So that is the intersect The next one that we want, which is actually the one we're going to be using is you overlap these shapes And oh, sorry, you click on the shapes that you want and then we're going to come over to here and say Subtract and it will take the top shapes from the bottom But one thing to note about this is let me just give you another quick example With this one This works for all of these in fact work for multiple shapes If I come over here and I take this And then I grab this one Whoops Like that And I'll put that one over there Just totally random and I'll put that one over there like that It always takes the the top most shapes and subtracts them from the bottom single shape So I'm going to select all four of those and now if I come to the format shapes and line and do subtract shapes Now you can see that we've got one single shape at the back That's got those three holes in it. So That's the way it handles if you've got multiple things. So you can see now Actually how in the past you could create camera overlays where basically you've got little cutouts for lots of different things in it So that is that the next one or the final one If I come over to here and go to format Shapes and lines and exclude shapes And that's basically the opposite of this intersect It basically as you can see it just excludes anything that is overlapping between those two shapes So that is just a little bit about how you do these things and create cutouts and so on in In keynote So let me come back to this other one where we were doing the masking And what we wanted to do was we basically wanted to remove this Shape from the main square background shape that we've got or rectangle So we're just going to select them both come up to the format And then we're going to go to shapes and lines and we're going to go to subtract shapes So now we've got a border which is completely hollow around our Around our background And now all we need to do is we need to just change the color of that to green and then it looks like that's a slightly different green Actually, I had a different one to that didn't I hang on here it is So you can see if you look at it now you basically can't even see that there is a border there But it is crucially in the object list. So that is the shape of the the the mask. So let's just call that the mask border So now if I was to add in a shape That we wanted to sort of move in from the side or something. I'll just make it red just so if it stands out At the moment it's over the top of the border But if I move that down to here then it's going to be behind the border So if I was to have this say fly in from the side, let's try this shall we as an example Let's say I wanted this really bright red panel to sort of fly out from the side And then I wanted some text to appear in there. Then what we could do is we'll add in a text box and I'm going to Just call this our title if I can spell properly and Make that a bit bigger Like that That is by the way command shift plus not the easiest or best way to increase the size of fonts But if you just want to do something quickly it's quite handy to have So let's say this is point one two and three like this I know some people think that it's not good to have too much text on the screen during presentations But I do think that it is good to have some If you're trying to to teach something or you're trying to we try to sell something frankly having a bullet point on the the screen that sort of really stands out Is it's good to sort of burn that information into Into people's minds So there's some real key takeaways that you want people to definitely remember then having some sort of bullet points up definitely Works but don't go overboard don't have reams of text and things like that Like you've got a whole page of a book or something like that And so that is basically what I'm going to do is I'm going to have this fly from in from the side But it will look like it's coming from behind the border And then let's have this text appear. So if you remember how we do our animations I'm going to click on this And in fact, let's have the title come in at the same time So I'll just actually join those together into a group And then we'll have this whole thing So we're going to go to the animate menu Add an effect. So we want this one to move in It's going to move in like that And then these can just appear as we as we click them or do whatever So let's just make it easy shall we just have those coming like that So then we want to have all of this go out again. So let's add a build out effect I'm obviously not putting too much time and attention into this but you can just basically get the Get the impression Let's have those dissolve out And then let's also have this group slide back out again So that is or move out as it is One second. Where's that gone now? There it is. I was right on it And we want to change the direction of that. I've done other videos and in videos one two and three I talked about how to do animations So I won't go too much over how I'm doing all of this But basically changing the direction there the way that it's actually going to move out And then I want to change the actual build order. In fact, if look at this it looks like It looks like I selected these things but I didn't actually commit them if that makes sense And just quickly go and do this again add an effect move in So you have to actually click on it rather than just preview it, which is what I'd done before And then these ones here we want them to dissolve in There we go. And we also want them to dissolve out as well and just for Speed of demonstration, I'm just going to have all these things happen almost at once And then I'm just going to add in some little timings so that you see the whole effect of it Without me actually having to manually go through and click them all but you'll certainly get the the impression So we've got it moving in Then these ones are going to appear. Let's have that happen After that and maybe have a little bit of a delay Then they're going to stay on the screen And then after they've been on the screen for let's say half a second They're going to fade out and then this one is going to move out after that By half a second as well So it's going to move in They're going to stay on the the points are going to come up. In fact, we want those to all happen together One second with previous build There we go, right Okay, let me just demonstrate this in in in real life as it were So I'm going to play this one in window And then what I'm going to do is I'm going to come back to that wasn't the scene. It was actually this scene, wasn't it? And my video has disappeared. So let me just quickly Well, actually it will work just as well with this one, won't it? So let's see It does this look like I've got a black border around the outside if I just play this animation now Uh, you'll see Still got to turn on my screen sharing the monitor It always helps doesn't it? Not a minute Here we go. Let's try again. Shall we I'm not having much luck today. Do I hope you hope it's not too distracting So watch what happens now when I play this animation So that little thing comes in from the side and as you saw and as you'll see when it goes out It looks like it's disappearing behind this imaginary Black border, but as you know, there is no actual border on this thing. It's just purely an illusion So that is how I have created that in using the masking And I hope that that sort of gives you an idea of how you can use masking to sort of mask off different areas of the the screen I've lost my UI now But for now what I'm going to do is leave it for there in terms of this But what I do want to show you is if you think about it This actually opens up an opportunity because it opens up an opportunity and I'm showing the wrong screen It opens up an opportunity to actually create sort of presentations on the fly in ecamm live where or rather overlays on the fly for ecamm live where you're just creating them all in in keynotes So if you have to do something, you know, like a quick presentation or something like that Whereas here, I had actually created this this overlay as a masking overlay I could equally have actually just come in here and Let's just change the format of it a little bit. Let's say I could have made that purple I could have added a stroke a line to it. So let's add a line Like that and Give that a color. Let's say I'll make that white. Now. It's actually it's not going to quite work because I've got it I've got to just move that out slightly in this instance Because it's I would have made it a bit bigger than that if I'd been doing it for specifically this use case But now you see I've actually given this a border, but it's still acting as a mask as well, isn't it? So if I come back in to my main scene again, and I'll just go into that one That's totally black now what I'm going to do with this one is I am going to turn on my background again So I'll just turn on my background and obviously if you weren't using green screen This is what your camera would see anyway, but I'm going to just turn off all of these other effects on the camera So I'm going to turn off the the corner radius. In fact, let's do it even even better Let me just create a completely new scene For this let me come into the scene and I'll just go new empty scene And then the scene source I'll actually just put camera. So it's got my camera I'll turn on my green screen as well And use my usual image like that So now if I play this keynote animation or keynote slide in this window And then I just turn on my my green screen overlay You can see it's actually created the border for us already So it means that if you're as I say just creating some little presentations or something like that on the fly You can just include the border in the presentation itself Without having to set this all up any come live and have Different scene overlays or set your cameras up or anything like that It actually makes it just easy to do it in keynote and then obviously All of the presentation stuff that you've got will just work directly in that Again, I'm not sure this is my my best color to be honest, but there you go So that was just a little bit about about masking and how you can do it with with ecamm live I need to come back to my main scene though. Oh, it looks like I've actually changed this one. Well, there you go Let me get rid of this for a moment There we go. That's better, isn't it? So that is how you can use masking with keynote to work to improve the Results that you're getting when bringing your elements into ecamm live Uh, I don't feel that that was my best video I'm just telling you now feel like I could have done a bit of a better job of that if I'm honest But you let me know what you think and let me know in the comments down below And then once you've done that check out some of these other great videos coming up next. Have a great day