Basic Masks for HTML5 Banner Ads in Adobe Animate

Hey, we’re back, I've got a coffee and were going to make some masks. So masking is really important in adobe animate, were going to start off with some basic masks and then move into things like info graphics but we need to understand masks before we do that, so lets do a real basic one, were going to start with a new canvas, pick a background stage colour, I always say don’t worry about which colour, I spend ages doing it, save it. Underscores, and I'm going to import, I'm going to import one of our monsters, who? Spend too long picking, I pick you, hat and pipe man. Great, so we've got him, he's come through as a bunch of different layers so were going to group him together, so I use modify, group. And there's two parts, we re going to use just a plan old mask and were going to animate this man and have a static mask and in the next video were going to have a static man, or monster, and animate the mask.

So what were going to first do is do an animation. If I can talk it through it I'm going to have a porthole here and he's going to slide up into it like he's looking out of a space window thing. So what I want to do is convert him to a symbol, first thing I do if I want to animate him. He's called mc pipe man, and were going to start him down here, and after about 20 frames, he's going to have a key frame. I'm going to slide him up, I'm holding shift so he's goes up in a straight line, he's going to appear. So next step, I'm going to add my classic tween, great, preview and he slides up. And I'm going to add a little bit of easing because I always do. Ease out, just a really basic one.

The next thing we've got to do is we've got to do the mask, so lets call this layer monster, and lets lock it so we don’t mess around with it, make a new layer and were going to call this one mask. And essentially were going to go back to frame one, actually I'm going to use this frame 20 and what’s going to happen if I draw on frame 20, because there's no key frame its going to end up back at frame one and that’s kind of what I want. So all you need to do is make sure when you're drawing, I'm going to draw a porthole, you can draw any shape you like, I can be type it could be anything, you’ve just got to make sure that its not grouped because the masks needs this raw shape.

So one thing that can happen, depending on if you’ve messed around with it is the oval tool, some people have this object drawing on, this will make it not work. Just make sure it is unpressed or not down.

Alright, so I've got my oval tool, I'm going to have a fill of white and a stroke of none, it doesn’t matter what fill you have because its going to be turned into a mask and be see through. Remember earlier we hold shift down and it gives us a perfect circle. If you hold down shift and alt on your keyboard and then drag out you get from the center, if you're on a mac it could be called shift and option but on a pc, its probably called shift and alt, hold those both down and it starts from the center. So I want it from the center of his eye and even though my frame is at 20, because my key frame is way back here, it ended up all the way back here and that’s kind of what I want in this case which is great. And what I'm going to do is I'm going to, all I have to do is right click the layer called mask and call it mask.

What happens is this structure changes here, the top one masks the one underneath, so just make sure your mask is on top. And now what you'll see is our little man pop up. Awesome and that’s how to make a mask. I'm going to do totally superfluous extra, I'm going to pick a white border and I'm going to make it 25, start from the center, I'm going to make a new layer and I'm going to say yep. I want it to actually look like a porthole. And there we go, there's our little man.

Aright, that’s how to do a really basic mask and what we've done is we've animated the layer and the mask is just sitting there and what well do in the next one is well animate the mask.