Animating a Mask for HTML5 in Adobe Animate

Hey, welcome back, were going to do our animated mask now. so in the previous one we animated the actual object and the mask was quite static. So this one were going to do the opposite. Were going to make our object static and animate the mask and this is really good for reveals. So lets go to create new canvas, I'm going to import a graphic, I've got this car mask, this is the best car ever made and thank you chevycamarotv and I'm going to click here, its going to be 500 by 333. I just happen to know the size of this, it’s a random number for advertising so, I've got it in and I'm going to call this one Chevy and I'm going to make a new layer, I'm going to call this one mask. You'll notice how down here it’s quite hard, I cant see any of my names. Watch this, I can drag this out by grabbing that little bar there just to see, just to make sure alright, lets get it right Dan.

Alright, so my masking layer, this is where I'm going to do my animation, I'm going to turn this off for the moment, and what I'm going to do is you could use a classic tween so you could play with scale and rotation and moving the mask around. What were going to do in this case, just for something different is were going to do a shape tween so I'm going to save it actually and I'm going to call this one you, and I'm going to grab my rectangle tool, I'm going to give it no stroke, I'm going to give it a fill colour of it doesn’t matter because its going to become invisible to become a mask. So I'm going to turn this on for a second because what id like to do is id like to start somewhere. So maybe across the wheel here is when the first part of the mask is going to be.

And how it works with a shape tween is instead of going to our modify convert to symbol, that works for a classic tween but not for a shape tween. A shape tween can’t be grouped and it cant be turned into a symbol, it just needs to be this raw spotty shape. So I've got my first shape there, actually I might start it quite small, there it goes right in the center there. I'm just moving this around and then after maybe 10 frames, I'm going to put in a key frame and I'm going to make it a bit bigger, and remember the cool thing that we can do with shapes that aren’t grouped and aren’t turned into symbols is I can grab this, I'm going to deselect off, and I'm going to do some stuff before I go. Can you see I can just drag these off, just dragging the lines, how good is this going to look, who knows, I'm just winging it, I'm going to add another key frame here and its going to be the same size except deselect I'm going to make it look like its rebounding a little bit. And then it’s going to get a lot bigger. So maybe after these frames, this one here. Put another key frame in, I'm going to grab my free transform tool, scale it up to fit the sides, and go back to my move tool, deselect it, its going to rebound out.

I'm going to go really fast past it so I can actually catch a glimpse of it. Shrink it down a little bit. Just so it covers the edges here. I add sound effects as I'm talking, you can add your own. So, gets there, there, boom. So the next thing I need to do is add my shape tween. Now watch this I selected across all four of these and I can just add them up in one big go. So it’s going to go, that took forever, so I might grab this and tuck it in there. Trim off these last bits, everything but the key frame. Clear frames, its hard to see in here, I've done it forever and its still hard to find clear frames. I didn’t even want clear frames, I wanted remove frames. It’s hard to know, the language in these ones is quite tough when you get into that right click, they all seem to say the same thing. You'll get used to them.

Now the next thing I need to do is extend the car along, I'm could put a key frame in here or if I'm going to be super sensible I'm going to put in just another frame because it doesn’t need another key frame because I'm not going to do anything with it, its just going to extend all the way along. Now what I'm going to do is the magic, just like we did before, right click the mask and go to mask, and hopefully now if I preview it, and that’s how to do the opposite, animate the mask. There's no reason why I couldn’t animate the layer underneath as well, and that’s when you get some complex trick things where ones moving, the objects moving one way and the mask is moving the other and were going to do some of that stuff when we do things like more animated infographics in the next video tutorials. Alright, that’s how to animate a mask.