This course has been archived, the content is no longer up-to-date or relevant to most students.

Animate - HTML5 Banner Advertising in Adobe Animate.

Width Tool in Adobe Animate

Daniel Walter Scott || VIDEO: 18 of 53

Download Exercise Files



In this episode we'll look at the Width Tool in Adobe Animate.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Hey this video were going to talk about the width tool. Now the width tool, I love the width tool, it’s a way of changing your boring strokes, kind of like what we did with the brush libraries earlier, remember the fire, but this one here is to play with the width of it obviously.

So were going to create a new layer, just so we don’t mess up any of our earlier stuff we've been working on. I'm going to call this the width tool, there's no naming conventions for the layers. So what I'm going to do is I'm going to be on the first key frame here. I'm going to grab my pencil tool, I'm going to hit the smoothing, I'm going to crank the smoothing up to 70. What I want to do is on this alien here is I'm going to give him a hair do, now I'm going to turn my stroke down to 1 and I'm going to make it black, so my alien has black here. that’s not bad, so I just drew that one, do we get even luckier? What you might do is move smoothing up to 100 and then you're almost guaranteed to get something, I'm clicking undo, or edit using the shortcut here, for command c or control c on a pc, just to get something I like. And then were going to switch to this width tool, not the width tool is brilliant, watch this, click hold and drag so it just adds that, I'm going to zoom in a bit. We haven’t zoomed in much in this program. We haven’t done it at all actually. I don’t zoom in quite a bit because you need to view it actual size, why? Because that’s the size that its going to be on a website in terms of an ad. So there's no point in zooming in too much. But there's zooming in here, or some shortcuts, hold down command plus on your keyboard or minus to zoom out. Or control plus on a pc, and then minus to zoom back out. I'm going to zoom in, can you see it just adds this nice curve to it, so you can add more than one, and it just means if you’ve ever tried to draw anything with the bezier pen tool, you can draw one side easy enough, but try and get a matching side, can be quite tough. Now I still don’t like that shape, its not smooth enough for me. Go away, you, go away.

So one more time with the pencil tool, I tried using the pen tool but I'm trying to keep it all to really simple tools in here because I don’t want to have to go and explain the pen tool because that’s a whole days work. Come on, were getting there. Actually what I'm going to do is, are we using the smooth one, we are. Feels like the best I've got, that looks okay.

Anyway, so back to the width tool, grab you, drag it out. And you can see its just a nice smooth line. There's nothing more than that, it gets cool when you start going into, say I want to unlock the wizard layer and I'm going to zoom in on his arm here and I'm going to double click it. And I'm double clicking it a couple of times, I've gone inside of a group inside of a group because its been grouped all sorts of ways. And I've eventually got my way into the arm here. so I keep double clicking it until I've found all my way in. I'm inside all these different groups, and I'm going to use the ink bottle tool.

So the fill tool, adds a different fill so I can pick a new fill from here, and that’s what he does. The ink bottle, does a similar thing but except with the stroke so I'm going to add a stroke to the outside, can you see it just adds it to it there. And it added my stroke around the outside. And then if I go in with my width tool, I can get a cool kind of illustration style. Watch this, if I drag say this corner out a little bit, can you see what its doing, its kind of moving it around and I can start skinning it in bits and I'm trying to get it looking a little bit more like a pen. And you can get a nice cool stylized stroke around the outside. There we go, that’s fine.

Now I'm going to go all the way back to scene one, I can either double click the background by using my selection tool, or you can just click scene one. Double click my background a couple of times, all the way back to scene one. You can see, I could start working around with adding with the ink bottle, adding strokes around the outside and then playing with the width tool. I'm going to zoom back out, the quick key to full screen is command 1 on your key board or control 1 on your keyboard. It should zoom all the way out again to 100%.

One last thing before I go, width tool was stolen from adobe illustrator and its amazing what you can do with it here, there's some of the drawings I've done, lets look at this one it’s a bit better example so its just a stylized bit of type and what I do is I draw first with the pencil in my notebook and then I go over with the width tool. And the width tool works exactly the same in illustrator as it does in flash (Adobe animate) so you can use this exact same thing in flash (adobe animate). And you can see the kinds of lines you can draw, that are just really impossible to do with the pen tool normally. So yeah, if you are using illustrator or flash (adobe animate) the width tool could be a new best friend for you for especially these curved, varying sizes along here.

Alright, that’s it for the width tool, finally.