FlashTip #1: Drawing with a Brush

I've been asked by a number of people how I go about drawing in Flash. I prefer it over any program I've use so far, in that it allows me to work in a vector environment with pressure sensitive input from a tablet. Now, it's definitely not the only product on the market to do so; Adobe Illustrator also features a vector brush as do many other animation apps. Illustrator applies a brush style to a vector stroke. Whereas Flash converts your drawing input into a vector shape, which is truer to the drawing in my opinion. It's easy to use, too. You basically just launch the app and draw without having to fiddle around with a ton of settings. I also find Flash's "paint behind" feature to be a very handy way to color (we'll get to that later). Either way, I've mainly grown accustomed to Flash out of habit. I use it day in and day out to animate, create games, and design websites. So, in response to everyone's questions, I thought I would do a quick tutorial for anyone looking to give it a go.

My favorite version of the software is Flash MX, in terms of how it handles drawing. If you've never used it before, you won't know what you're missing, but it is the most true to the input it receives and what it spits out—and above all runs fast without any lag. We're up to Flash CS4 now, a full 4 versions later, so I'm definitely living in the past. But if you can find an old copy of MX (note, not MX2004), you'll see what I mean. We're currently using CS3 at work, but I sneak out my copy of MX whenever I just need to draw.

The Brush Tool

If you're already familiar with vector drawing apps like Illustrator, Flash features the ability to draw with both a uniform stroke (the Pencil tool) or a shape fill (the Brush tool). The Pencil has a uniform line weight which you assign a point-size to. The real magic lies within the pressure sensitive Brush tool. To unleash it, simply plug in a drawing tablet, click on the Brush icon in the tool palette and you'll see a black paint dab icon near the bottom that says "Use Pressure" on rollover (see blue arrow in side graphic).

That's all you need to do to start drawing! You'll also notice 2 drop-downs with circles: the first sets your brush size (default to largest), and the second lets you change your brush shape. Keep it on circle unless you want to experiment with calligraphy styles.

Now, the one hiccup in workflow that you'll experience is that when you zoom in, your brush size won't scale proportionally with the zoom. Meaning, by zooming in, your artwork will appear twice as large, but your brush will not—it stays the same size. This freaks most people out, and can take a little getting used to, as most programs work in the opposite way. Oftentimes you zoom in to add detail, so it's useful in that regard. Whatever the case, Flash has a scale-independent drawing environment. It doesn't feel strange to me anymore, but it does become an issue if you want a consistent line weight across multiple drawings. My advice is try to draw at the same zoom level across drawings. If none of this makes any sense, you'll see what I mean once you dive in.

Smoothing

Another setting related to the Brush tool in the newest versions of Flash is "Smoothing", which you'll find in your the Properties palette (tucked at the bottom of the UI by default) when you have the Brush selected.


I believe they added this in Flash 8, and it's personally where I think they monkeyed with the tool's performance (why I prefer MX). Regardless, this is what controls how much Flash will process or smooth out your line. It's default to 50. Set it to 100 and you won't recognize the line you intended to draw (smoothing takes effect after you lift your pen off the tablet). Set it to 0, and it will lay down every vector point imaginable, giving you a very crunchy almost pixelated line. The downside to using a low number is that all those points will bog Flash down after a couple drawings because of the numerous vector points to keep track of. I recommend something in the ballpark of 30 and 40. When I'm not drawing in MX (where this setting is not even an option), I use 40 because it gives me a decent line without putting down extraneous points.


Depending on how picky you are about your line quality, you may want to edit it after you've laid it down. You can manually do this any number of ways. The most obscure (but most familiar to those who use Illustrator) is the Subselection Tool (white arrow).


Click on your drawing and you'll see the vector points that define it. You can grab and manipulate them with the handles. Or even use the Pen tool to add or subtract them. But you're not in Illustrator anymore, so don't even go there. Flash actually allows you to pull and warp the edge of your line just by grabbing onto it with the Selection Tool (black arrow). Amazing right?

Flash also provides a very convenient way to go a step further with it's "Smooth" and "Straighten" tools which become available if the Selection Tool is selected. This will be a little harder to describe, but I'll try to show by example.


Simply select (or lasso) the line you want to adjust which you can do by clicking on it or dragging across a line segment (it will look fuzzy). Then, tap on either the "Smooth" or "Straighten" icon. The more you tap, the more it will smooth or straighten the shape of that segment of your line. "Smooth" is typically more useful. Some Flash artists live by this tool, especially if you want to the get the smoothest most optimized line possible. I use it to iron out noticeable irregularities, in moderation. Again, it really depends on how smooth you want the curves of your line to be. It's best to only work on segments of your line at a time...instead of the whole drawing. Remember that you need to be using the Selection Tool to activate these options (you may have your Brush active a think, where'd they go?). People often set "Smooth" to a key command for easy access.

Finally, you can also use the Eraser, which will eat into your line. It provides a fast way of beveling off irregularities in it's own right. I use a combination of all of the above, including Undo (I probably abuse that the most, as I like to lay it down right the first time).

Sketching

Depending on how new you are to drawing directly on the computer with a tablet (likely a Wacom Graphire, Intuous or Cintiq--the later, if you're lucky), you may feel unnerved about having to commit to a line on the blank white canvas (called the Stage, in Flash-speak). I find the best way to get over this is to try tracing over a light drawing. For example, try doodling on a piece of paper, scan it, and import it into Flash to use as a guide to trace over. This is how I first started, and I still use the technique to ink over something complicated like a comic. Just convert the imported bitmap into a symbol (Graphic or Movieclip), set the brightness high to 70 or so in the Properties palette, and let it sit on a layer below your inking layer.




A more inclusive approach is to actually sketch in Flash. On the first frame of your Timeline, do a rough sketch of what you want to draw. I typically keep mine loose and gestural. And I'll sketch in a gray or blue line, to remind me to keep it loose.


Then, create a new frame after it (make sure it's blank), and turn on onion-skinning.


If you're completely new to Flash, this is what animators use to see the frames that come before or after the current frame. You can control how many frames you want to see by adjusting the brackets. This is essential for animation but also great to see the ghost image of your sketch to draw from.


So, that's all I have for today. I'm thinking about doing more Flash-related posts, so drop me a comment if you're interested in seeing more. And feel free to ask questions. I'll definitely be doing a follow-up on coloring this bug, and I have some process-related tips on animation that I'd be happy to share as well.


Above: the final inked drawing of the bug (again).

---

Read more in the FlashTips series:

FlashTip #2: Approaches to Coloring
FlashTips: Questions Anyone?
FlashTip #3: Drawing Revisited