Saturday, January 17, 2009

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

44 comments:

Sherm said...

This is so unbelieveable helpful -- thanks so much for taking the time to show us your process tips! Flash has some great drawing tools, but I always get freaked-out by the complicated interface.

I end up inking with Illustrator's brush tool because it has always worked for me, but I'm glad you pointed this out so I can try an alternative. Maybe I'll like Flash more...I'll let you know.

This is a great way to do digital inking without it looking like it was drawn by a robot. Thanks again!

Chris Houghton said...

Holy digital ink!

Thanks for the advice Bob! I haven't done much digital inking but would love to try it out in flash. Sure sounds like it can save a lot of scanning/prep work. BTW, great gross fly!

Honolulu Dogfight said...

Fantastic. I always put a layer over my sketch, and only use the onion skin for animation. Never thought to use it for drawing.
I learned!
thanks
G

Bob Flynn said...

Hey guys! Thanks! Sherm, I've only dabbled with Illustrator's inking brush...I find it too crisp for my taste. Flash lets you work loose, and fast. You only have to spend minimal time tidying up your line if you're picky about how smooth it needs to look.

I think Flash animators realize the drawing potential of the program, but a lot of illustrators and cartoonists don't. So, I'm trying share what I know.

I ink most of my comics by hand, but its fun to doodle out a quick drawing in Flash and have it look so clean. I use it to do a lot of my freelance illustration work as well.

Louise Smythe said...

THANK YOU!

David DeGrand said...

Great tutorial! I haven't worked with a vector program in ages and your results make me want to give it another go, I think I have copy of Flash MX somewhere. Thanks for taking the time to post this!

Keith Zoo said...

Seriously Bob, you are a maniac!

Yea you really did open my eyes to inking in Flash. Once you get the hang out if it, it's such a time saver and it looks AWESOME.

Great tutorial, thanks dude!

Renee Kurilla said...

This is a great reference for anyone new to Flash! Sherm is right, the interface can be intimidating, but with the proper guidance..not so much.
:)

I must admit, I'm addicted to smoothing. It's tough to break the habit..but you can get a really great drawing if you DON'T smooth as well. Someday I'll break the habit, I'm sure.

*sigh*...If only the brush tool were as good as the MX version...

Michael Kasaboski said...

Wow - that is an incredible tutorial! And I have to say, I am soooo on board for any other teachings you have in the way of Flash.

This has honestly been so very informative and I look very forward to giving it a try.

Thanks so much!

Anonymous said...

I used to love doodling in Flash 4, and when MX came out I had the 2004 one and I didn't like how it rendered at all compared to the much older version.

You give me the inclination to give it a try again. Drawing in Flash used to be one of my greatest pleasures. Thanks!

Bob Flynn said...

Wow, thanks everyone! Definitely check back, I have more stuff to share—others animation related. I tried to do a thorough tutorial, hopefully it will all be clearer once you crack open the program.

And thanks to Drawn! for picking up my post.

Anonymous: MX2004 was by far the worst version of Flash in terms of how the brush rendered your drawing...horribly delayed and glitchy. I avoided it like the plague after we installed it at work. They got their act together with 8, but nothing beats the original MX.

The newest versions (CS3 and CS4) are still great, and the Smoothing option is a nice addition.

If anyone gives it a go and has questions, just leave it here and I'll try to respond.

Steve sculpts critters said...

Thanks, I'm thinking it might be time to learn how to do vector ills (I'm a storyboard artist) for finished illustration.
I'm not sure whether to go with illustrator or Flash now, I'll keep looking around for a while before I decide. Now I just use a pencil and photoshop.

Eric Dyck said...

I'd be interested in hearing about your export experiences...tips you have for going from the flash stage to a printable document.

DH. said...

This is great-- I just got Adobe CS4, and Illustrator has a new "Blob Brush" that works a lot like Flash's brushes, only when you zoom the image, the pen size zoom with it. In fact, it feels like drawing in Photoshop, only without the feathering options.

A lot of these tips translate to a variety of drawing media. Great post!

Max Vento said...

The results are very good, but it looks more complicated and time consuming than just inking it manually. What are the advantages of the digital ink?
Thanks!

Bob Flynn said...

Steve: I would highly recommend Flash for storyboards if you're considering the digital route. Mainly because I do it all the time! Ideal if you're gonna jump right into animating. Flash has the frame setup built right in. Which to me seems ideal for putting your boards in order. Perfect for building an animatic, too.

Eric: Great question! You can export your artwork any number of ways. If you want vector, I would export as EPS. Raster, then PNG works best. You can alter both (convert to CMYK for example, or resize) in either Photoshop or Illustrator. Odds are you'll have those if you own Flash :)

DH: The "blob brush" sounds great. I'll have to try it out.

Max: Oddly enough, I can almost agree that inking by hand is faster. Because you only get one shot, right? I still ink the majority of the comics I do by hand. I mainly like doodling and drawing in Flash, like I would in a sketchbook. With anything big and "important", I'm still more inclined to do it by hand. Because there's something great about having that original copy. And I love working with ink.

JP said...

great post!

I've fallen in love with storyboarding in flash- it's brush tool lets me work fast and loose especially with the uber-groovy fill tool for adding tone. And the fast flipping from shot to shot, the built-in frame- Highly recommended! I'm still a bit nervous about timing in flash though, I keep deleting or moving frames by accident- so I still export them all out to an editing program.

Unknown said...

great, great stuff ! i've been working with flash about 5 years, begin on illustrating/animating last year . this was really helpfull (:

a question, the MX thing, that hes best .. thats for Mac or PC ? or both ?

Toonman said...

greetings. wonderfull post.
i've been working with flash since the 4, and am in the process of migrating to cs4, for everything from illustration to games.
the one i was most fond was the mx2004, because after that down went the export image.
if you need a big flash illo with gradients and transparencies, it's a headache.
i manage arround with exporting as eps and editing in illustrator, but the gradients and transparencies all go away, so they have to be redrawn.

other than that it's a simple, quick, intuitive tool for drawing, so for the time it's my main tool.

great work, btw.

Adam said...

Very useful post, nice to hear your workflow. I recently started doing comics and mainly use Illustrator, even though I hate that program. So bloated and involved. I prefer Flash for inking like you mentioned, but I had a problem when exporting for Photoshop. Basically I'm working at 16cm x 6cm at 300dpi, and when I export it I find it has cut off the right hand side of the image. It seems to have a limit. Is there a method of exporting that you've used that supports higher resolutions like this?

Thanks,

Adam

Anonymous said...

Hey, thanks! This is very useful.
I'm just about to change my work completely to digital (on my new cintiq,yeah!) and your blog is quite the right thing to make it a little more easier for me.

Thanks a lot...

Anonymous said...

Hi Bob, great little tutorial. I've been working in Flash for a little over six years now. I started with MX'04, but now have settled into Flash 8. I haven't tried CS4 yet. The export properties just aren't there for what I normally do, animation.

I thought I'd pass on another great way to get a very smooth line, with all of the control you outlined in your tutorial. That is, draw it with the pencil first, then convert that line to "fill" after. Here are the basic steps.

1) Lay down a pencil line, something curved would work best for the example.

2) Select the line, then under the MODIFY menu, select SHAPE/CONVERT LINE TO FILL.

3) You can now use the selection tool to manipulate the sides of the line to add weight where needed. You'll note that there are very few vector control points so you get very smooth control.

[tip A] In older versions of Flash, chop off the ends of the line (round) to make them square for best results. In Flash 8 you can actually set the lines to be drawn with square ends.

[tip B] Like SMOOTH, this works best on individual lines, not whole drawings. I tend to use this to draw long curves I want to look just right, but don't connect them to the rest of the drawing until I'm done.

Cheers!

eric3dee said...

I am an animator/illustrator who uses Flash on a daily basis as well to ink/sketch out stuff (see my comic at www.boodachitaville.com). I use a very similar process (though for some reason I prefer a smooth value of 72-- I may try the 40 approach after reading this, though). I use a Cintiq at work for animation, and my beautiful Modbook (axiotron.com) :) at home for my comic work.
Anyways, one extra tip that has exceedingly increased my workflow: instead of switching to the selection tool to tweak a drawn line, just hold down the Cmd key! OR, hold down Cmd + Alt to add a point to the line. This is a lot faster than constantly switching tools. Hope that helps!

Trevor Piecham said...

I too have had the same problems as Adam. It seems if you mess around with the export settings you can get around the image getting chopped off, but it still has a limited size output(8000 x 8000 I think). Sometimes the color shifts to darker and more saturated when i export an image. has anyone else had this problem? i am on Flash 8. I am going to try the cs4 suite and see if these problems exist.

Bob I love your work and this post is definitley helpfull to anyone trying to get the hands around flash. I have been using flash forever and I've had a hard time and slower time laying down color in any othere program. The paint behind and paint selection is the best thing ever. Plus the graphic symbols.

Bob Flynn said...

Thanks to everyone with your shortcuts and other recommendations. Joel's tip with the pencil tool is great for folks who want to start with a line of uniform thickness (much like you would use outline stroke in Illustrator).

Per the questions about size limits...yes. Flash tends to freak out if you want to export something huge as raster art. It is first an animation program—not tailored to print. That's why it can be better to keep it as vector when you export (use EPS)...especially if you're just exporting line art.

Dave Schlafman said...

Bob!

Amen! I've been trying to tell people about the benefits of drawing inside flash with the brush tool. I will pass this along to my students. I think it's quite valuable and well said.

It would be great if you did a flash tip about combining flash and photoshop/exporting from flash to photoshop. I know a lot of folks are unsure about combing the two as illustration tools.

T. Andrew Dempsey said...

This is good - especially the onion-skinning tip. Keep up the good work.

Jublin said...

this is what i do too :)

well i haven't been inking as much in flash because i've been exploring a few different programs lately, but this is exactly how i used to do it. great tips!

Adam said...

Just a follow up to the question I (and Trevor) had. I tried your eps file export method and it works fine, even with colour. It's actually better quality than before, when I used the illustrator option.

So thanks for explaining that!

And I'd also be interested in going from Flash to Photoshop vice versa (if people do this much).

Thanks again!

Adam

S.I. said...

AH thanks so much for this! :D
I've always been frustrated with painting in flash, so i've opted for illustrator.
I can't wait to try it out!!

deniseletter said...

Many Thanks!
I notice Alias sketchbook pro has layers for tiff images,photoshop has layers and corel has nodes similar to llustrator,and using them as onion paper,but I ending taking too much time on the cleaning up,and he lines are a bit shaking.S there any program besides Flash that is more easy to understand to do the inking?Need some advice how to improve inking I have a (detail) example of what I did:

http://i364.photobucket.com/albums/oo83/deniseimages/a2009.png

Jurgen Wolff said...

Yes, more on this, please!

Mitch Leeuwe said...

Awesome tutorial, gonna read it further when I am home.

Really sweet work as well!

Anonymous said...

Digital inking is great. It can be a little tricky if you're using a regular tablet. The Cintiq makes it a whole lot easier.

Bob Flynn said...

For anyone following this thread, I'm tossing together a coloring tutorial as we speak. So check back in the next couple of days.

If you send me specific coloring questions now, I may be able to address them in time before the next post.

GOGOPEDRO said...

Its a pretty great program for drawing and illustrating...I've been using it for a while now....

Good demo indeed.

P

Anonymous said...

Looks really cool and easy, so much need to learn until somebody is able to draw anything like that :)

Anonymous said...

Excellent tutorial! I've been using Flash for inking for years now and thought I was the only one doing it. I also use dark and light layers on top of a colour layer to add depth which works really well producing effects that look like they must have been done in a painting program but with the veratility of vector allowing me to output pin sharp at huge sizes.
Have a look at my caricatures all done this way www.bubbledraw.com

Amanda DR said...

Thank you very much for your generosity and time, This tutorial has been very enlightening

JustMe said...

Fabulous. I'm taking a flash class now, so I'll be back for notes...

Leonardo J. Mancini said...

Dude, I saw the link to your post in drawn and though it was really great. I use a lot of flash and it´s my favorite program to draw cuz it resembles more inking with a real brush. I´m an art director from an agency in Manaus, Amazonas - Brazil, and just like to say how nice it is to find someone as professional as you who uses and prefer the same tools as I. Congrats!

Dave Chow Illustrations said...

This is a killer technique and it seems so much more intuitive than Painter or Photoshop at times. I love the looser sketchy quality over the other two programs. Again, many thanks.

Marli said...

Thanks for posting this! I've been working on learning Flash lately. This is really helpful. :)

Evan said...

Vector graphics are very neat when drawn using a good vector software. Edges can be shown with the correct perspectives .

Regards,
shalin@ creately