Draw with vector and pattern brushes in your animations
Create custom brushes with Capture and use them to create expressive animations in Animate.
Published
Save the brush assets to your Creative Cloud Library. You need to be signed into your Creative Cloud account to save the library.
Draw animated laser blasts with vector art brushes
Because brushes in Animate are vector-based art, you can resize, move, color, and animate your brush strokes.
Introduction
>> Among the greatest new features of Adobe Animate CC is the Paint Brush Tool which gives you the ability to use vector art and pattern brushes within your creative projects.
Here we have an animation which is nearly complete.
The only thing missing is the secondary blaster fire which belongs in this span right here.
Before we do that, let's actually go into the ground layer and we'll unlock that.
Exploring the paint brush tool and brush library
What we're going to do is use the Paint Brush Tool and select a Style from our Brush Library.
To access the Brush Library, we just click this icon right here with our Paint Brush Tool selected.
And from there, we're able to choose from a number of different vector art brushes that come packaged with Animate CC.
So maybe I want to use this one right here.
I can just double-click on that, and there we have it loaded into our Style in the Properties panel.
With that done, and the ground layer selected, I can go ahead and create some additional shadows here.
You'll notice that, that is very slight.
So I can push my Stroke up a bit and we can see how that draws out there.
Additionally, we have a number of Smoothing options here.
So the Smoothing goes from 0 to 100.
This is a value of how much Animate is going to try to smooth out our strokes when we use the Paint Brush Tool.
If we don't want to use Smoothing at all, we can choose to have Animate CC Straighten our Strokes.
So there is Straighten, or we can have Animate CC do nothing.
And it will retain whatever sort of deviation we have in the lines there.
The default is Smooth and with that, it applies a basic amount of smoothness.
Let's go ahead and remove those particular vectors and lock down our ground there once again.
Creating tapered strokes and basic paint brush effects
This first blast is created using the Paint Brush Tool without any vector art brushes applied to it, only a tapered variable with Stroke.
So if we select our Paint Brush Tool, we can see that we don't have any vector art applied to it right now and no brushes here in Stroke Style.
And for Width what we would do is just choose Width Profile 1 and you can see that this tapers on either end.
That's how you can get these nice smooth lines with the new Paint Brush Tool.
Using vector art brushes for animated effects
We'll also employ the Paint Brush Tool, this time with enhanced vector art brushes applied to it, for the secondary blast.
So to do that, we'll just go back over to frame 65, and you'll notice we already have some blank keyframes to find here.
So the brush will only exist within this span of frames.
Let's open up our CC Libraries panel.
A number of vector art brushes have actually been created using Adobe Capture CC, a mobile app you can use on both iOS and Android.
Let's go ahead and choose one of these brushes, and we'll make sure to have the Paint Brush Tool selected as we go ahead and choose this particular brush, to see it load into our Style.
Let's go ahead now and draw out an initial blast.
So I'm gonna start from the weapon here and just kind of drag it out to about there.
You'll notice that it doesn't look much like a blast right now.
However, we can use the Selection Tool to modify some of the properties of this brush.
For instance, I can go in and choose a nice bright red color.
I can also make the Stroke size much bigger.
So let's bump this up to something like 90.
And to make it look more like a blast, let's apply a variable width profile to this.
I'm gonna choose Width Profile 5.
And just bump up that Stroke size a little bit more, and there we are.
You'll notice that with the Selection Tool, I'm able to actually go ahead and with nothing selected, I can make the path modify itself, just like I would any other shape, inside of Animate.
To create a subsequent frame of animation,
Animating brush strokes frame by frame
I'm gonna choose frame 66 and I will insert Timeline, Keyframe.
This makes an exact copy of what was on the previous frame.
From here, I can go ahead and make adjustments to that.
So for instance, if I hold down the Alt key on my keyboard, and click the side here, I can pull out that blast.
I can change its color, and even pull down the Stroke size.
I'm going to build out a new variation of this vector on each one of these keyframes to simulate the animated laser blasts.
This is gonna take quite a while.
So I'm going to skip ahead to something that's already built.
All right, so what I've done here is in the beam2 layer, I've completed drawing out all of those different Keyframes, and I've even done some animation in this pulse layer.
If we click on the initial frame here, we can see that the pulse layer is also using that same art brush.
I've made this pulse as a Movie Clip symbol,
Refining, looping, and previewing the final animation
as I want its internal timeline to continue playing and looping, regardless of what is happening on the main timeline.
The blast animation itself, existing only on the main timeline, with frames and animations specific to the overall movie length.
As we step through, you'll notice that the blast actually does sometimes bend.
So we can use the Selection Tool to bend the actual blast wave like that.
And we can modify the colors, the length, and so forth as we step through.
Once we get to the end, it weakens, and dissipates.
I've gone ahead and rendered this animation as a video.
So let's have a look at it.
Awesome!
In the next video, you'll learn how to convert your vector art brushes into pattern brushes within Animate CC.
Smooth brush path (1:12); Create vector brush (2:15); Keyframes (2:30); Capture brushes (2:43); Draw the second blast (3:15); Animate in the keyframes (3:54); Pulse as movie clip symbol (4:54)
Create custom brushes
Edit an Art Brush created in Animate. Then, convert the Art Brush into a Pattern Brush.
Introduction
>> When using vector art and pattern brushes in Adobe Animate CC, you are not restricted to those brushes you find in the built-in Brush Library.
You can also create your own custom brushes with the Adobe Capture CC mobile app, and even edit aspects for your brushes within Animate itself.
So we just saw an animation created with heavy use of vector art brushes created with the Capture CC mobile app and brought into Animate through Creative Cloud Libraries.
Using custom vector art brushes from CC Libraries
Let's open up our CC Libraries panel once again and you'll notice down here, we have a Grass Brush.
We want to use this Grass Brush to create some shrubby grass in our landscape.
So to do that, we'll go ahead and choose our Paint Brush Tool, and with the Properties panel open, we'll go ahead and additionally open up the CC Libraries panel so that we can double-click on that Grass Brush and see it populate our Style window.
Now I'm going to choose a nice dark green color, maybe from his vest.
And additionally, let's pull the Alpha up to something like 82.
In terms of the Variable Width Profile in this case, we just want it to be uniform.
And let's make the Stroke somewhere around 25, 27.
In this case, I am gonna actually want to straighten my brush path.
Adjusting paint brush settings for organic strokes
So I will choose Straighten as my Paint Brush mode here.
So to do this, let's go ahead and unlock our ground layer once again.
Lock both the pulse and beam2 layers because we are not going to mess with them anymore.
So what I can do is just draw out one of our little bushes here and if I use the Selection Tool to select this, we can see the path, and I can also adjust the Stroke size to make the bush actually visible here.
Now that's not the best color.
I'm gonna go ahead and change that to something which shows up a bit better.
Something like this dark green color here.
Now of course, this is a vector path, so we can make adjustments to the bush with the Selection Tool simply by hovering over it and then adjusting just as we did with the blasters.
However, if we wanted to make a pattern right now, we could, of course, go ahead and draw out a number of bushes here.
But we are not going to do that.
Let's select all four of these bushes and delete them.
We are going to go ahead and reselect our Paint Brush Tool.
And instead of actually using the brush as it is, we are going to edit it first.
Editing an art brush inside Animate CC
So to do that, press the little Edit stroke style icon right here, looks like a pencil.
And here you get a preview of your Art Brush and you can rename it if you want.
So I'll call this "Grass Brush Modified."
Now from here, we are able to Scale proportionally, and we get a preview right here on exactly what that's going to look like.
We could also change the direction that our art is mapped on to the stroke.
[Stretch to fit stroke length] We can stretch, [Stretch to fit stroke length] to fit the length of our stroke, [Stretch to fit stroke length] or use the default which is to Stretch between guides.
Now if we wanted to, we could adjust the guides like this so that it would actually stretch between them.
We can choose to not adjust corners and folds for Overlap, or to go ahead and adjust the corners and folds to prevent any Overlap by selecting this option here.
While these options are all good, they apply to Art Brushes.
However, you'll notice that this is a dropdown here,
Converting an art brush into a pattern brush
where we can choose to convert our Art Brush into a Pattern Brush.
And that's exactly what we want to do in this case.
Here, when we switch over to Pattern Brush, we get a nice pattern preview.
Additionally, we are able to go ahead and flip our artwork, both on the horizontal and vertical.
We have the option to Stretch to fit.
We can also Add space to fit.
So here, you'll notice that it's adding spaces between each application of our pattern.
How big those spaces are, and how many applications of the pattern get actually laid down is going to depend on how long the different paths are.
We can also choose to Approximate a path and we get the preview there as well.
We can change the Spacing in percentage, so perhaps 50%.
And we see that enacted here.
I'm gonna take that back down to 0.
And lastly, we can choose how to deal with corners.
[At corners: Flank artwork] So you'll notice [At corners: Flank artwork] we have two corners in the preview here.
[At corners: Flank artwork] And right now we are flanking the artwork.
We can also choose None.
And then it's not going to try to do anything with the corners.
[Center artwork] We can center the artwork.
[Center artwork] So you can see in these cases, [Center artwork] the artwork is centered at the corners.
Here's Flank, which is the default.
[Slice artwork] We could also slice the artwork.
[Slice artwork] And you can see that the corners are managed very nicely there.
And finally, Overlap artwork, in which case the artwork is overlapped and bunched up in the corners, just like that.
I'm gonna go back and choose the default which is Flank artwork.
Because that adjusts it all very nicely, it looks very natural, as it's sort of crammed in to the corners and expanded from them.
So let's go ahead and say Add.
With that done, we can see in our Style preview that indeed we are using a Pattern Brush.
Applying pattern brushes and previewing the result
And if I go ahead and draw out all these little grassy, shrubby bits here, we can see how they actually come into play with our overall scene.
We can even stack them a little bit if we want to until we have something that looks pretty nice.
All right, let's go ahead and render and preview this animation.
The possibilities truly are limitless, when using the enhanced brushes within Adobe Animate CC.
Capture grass brush (0:34); Add brush to style window (0:52); Draw and modify grass (1:40); Edit an Art Brush (2:20); Convert an Art Brush to a Pattern Brush (3:15); Pattern Brush settings (3:33); Draw with Pattern Brushes (5:20)
Share your work
Share your animation on social media by tagging it with #MadeWithAnimate
