How to draw and animate using variable-width strokes
Watch this tutorial to learn how to draw and tween animate strokes with variable width in Adobe Animate.
Published
Adobe Flash Professional is now Animate. All the features and functionality shown can now be found in Animate.
[train simple Authorized Training Center] [This is an excerpt from trainsimple.com's Flash CC HTML5 Workflows] Creating expressive paths inside of Flash was never something that was easy to do.
However, Adobe has just introduced the width tool, and if you're familiar with Adobe Illustrator, it's the exact same width tool.
What the width tool gives you the ability to do is add something called width points to your path, and at those width points, you can control the width of the path.
Let's go ahead and take a look at how it works exactly.
What I'd like you to do is come down towards the bottom of the timeline and insert a new layer.
I'm gonna go ahead and name this layer line.
After doing that, you can come over and choose the line tool.
With the line tool selected in the properties panel, you can go ahead and select a stroke color, you can also set a stroke size.
I'm gonna go ahead and set it to something like 2 so it's a little bit easier to see.
You'll notice you have the same old style menu, but what's new is this width menu, and from this width menu, you can see all the different preloaded width profiles.
In this case, we want the default, which is called uniform which really means nothing is gonna change, it's gonna create a consistent uniform line.
So, move your cursor into the stage and simply click and drag out a new line.
When you create this new line, it is in fact uniform, but if you want to change it in certain areas in terms of its thickness, that's where this width tool comes in.
If you come over and choose the width tool with it selected, if you hover over the path, you'll notice the cursor changes to an arrow with a plus sign, and you have a little white dot underneath the arrow, which is an indicator if you click, you'll be adding a width point.
I'm gonna go ahead and add a width point by clicking, but as I hold down the mouse, I'm gonna drag downwards, and as I do that, you'll notice I'm increasing the width of the path at that point.
Now you can add as many width points as needed for a particular path.
In this case, I'll add another by clicking, but this time I'll drag up to decrease the thickness of the path.
Now, if you ever want to remove a width point, you can do that.
All you have to do is select it, and with it highlighted, press the delete or backspace key on your keyboard.
Now one thing that you may notice, as you drag these handles, you're essentially changing the width in a uniform fashion.
You'll notice the bottom and the top are both expanding, but if you want to control just the top or just the bottom, you can do that.
What you have to do is hold down the option key on the Mac, ALT on Windows, then as you click and drag, you'll notice you're only modifying the bottom portion of the path— well, at least in this case.
You can move a width point, simply click and drag it to a new location.
If you want to move all the width points, hold down the shift key then click and drag, and you'll notice that the width points are moving together.
So here we have a very different line than what we started with.
Now, if you really like this and you want to save this as a width profile, what you have to do is come over and select the line with the selection tool, and you can see here we have a new width profile.
And if we continued to modify this, this preview would update.
If you really like the profile and you want to save it, you can come over here and click the plus sign to add it to your profiles.
In this case, I want to add it, so I'll go ahead and do that, I'll click this plus sign.
I can name this, I'm going to go ahead and call this Matt's profile, then you can come over and click OK, and once you click OK, you'll notice it's now available within this menu.
But what you should do is probably experiment with these different variable width profiles to see exactly what they look like.
There may be something that already exists that you can use, but as you can see, it doesn't take that much to create your own width profile.
But now creating something like this bridge is a lot easier inside of Flash.
Remember, you don't even have to be able to draw a nice curve like this.
If you come over and choose the line tool with the line tool selected, you want to make sure that the uniform profile is selected, just come over and click and drag out a line.
After dragging out this line, you can choose the selection tool, and what I'm gonna do once I select this line is reduce the size a little bit.
I'm gonna go ahead and reduce it to 1.
After reducing it to 1, remember what you can do with this is hover over the line you'll get that little curved icon underneath your arrow cursor, click and drag up to bend the line.
There you go, you have essentially the same path.
Then, you can come over and choose the width tool.
With the width tool, you can add with point, click and drag to expand it.
You'll notice recreating this bridge is not gonna be difficult at all.
Not only can you create more expressive brush strokes using this width tool, but you also have the ability to animate it.
So, what I'd like to do is quickly show you how you can do that.
You'll notice I have a shape here, but the shape has a width profile associated with it.
So, if we come over and choose the width tool, we'll have access to those width points.
I'm gonna come over here to frame 20 and insert a key frame by pressing F6 on the keyboard, then I'm gonna come over and click on that width point and with this width point selected, I'm gonna click and drag these handles in So we're reducing the overall width of this shape.
So this is what we have on frame 20, here's what we have on frame 1, I'm gonna right click or control click on frame 1, and I'm gonna choose Create Shape Tween.
Once you create the shape tween, if you play the playhead by pressing return or enter, you'll see that tween down.
So this has a lot of possibilities from something like character animation to special effects.
You now have the ability to not only create these variable width profiles, but because it's Flash, you can also animate them. [train simple affordable and comprehensive technology training] [Authorized Training Center]
