Sit on it

Edit: Looking at this again, it kind of looks like I left out a leg. But I'm not sure where I would've put it anyway. Maybe that's what he's contemplating.

Dunce

FlashTip #2: Approaches to Coloring

Before we dive in, I want to take a moment to thank everyone for the feedback I received on my first Flash tutorial. Special thanks go to the folks over at Drawn! for picking up that post, so it could reach so many people. My goal in this lesson is to explain some of the nuances of coloring Flash. If you've started drawing, the odds are you've already jumped ahead and started coloring—not a lot to figure out in that regard. But there are a few tools and methods worth exploring. So here goes!

216 Colors (and then some)

Because Flash was designed for output to the Web, coloring is exclusive to RGB. You won't find CMYK around these parts. In fact, Flash is really tailored to web color. You'll notice this right off the bat when you go to select a color in the Tool palette (note there are options for both shape fill and stroke). There are 216 uniformly distributed hexadecimal colors to choose from. Now, we all know web colors aren't the prettiest palette to work with, which is why I'll point you directly to the color wheel icon in the upper right corner of the palette box. Selecting this will pop up various options for mixing color, which will be different depending on your OS. On a Mac, it will bring up the color wheel by default. I tend to gravitate to slider bars, so I opt for the second option. Here, you can choose between Grayscale, RGB, CMYK, and HSB—much like Photoshop. Remember that you're in an RGB color space no matter how you mix. Flash will always assign a hexadecimal code to your color. You can even enter a code if you have a specific color in mind. Another setting is your Alpha percentage. This lets you change the transparency of your color from 0 to 100%, allowing you to color in thin washes.

You can also adjust color with the Color Mixer window. It gives you a bunch of options to play with, all in one space: RGB sliders, Alpha controls, the full spectrum of possible hues and saturations, a value slider, and a hexadecimal code. There's also a dropdown menu labeled "Type." It will be default to "Solid" for solid color, but it also has options for "Linear" and "Radial" gradients, as well as a "Bitmap" mode for fill patterns. Flash handles gradients well enough, but the controls are a little weird and take some getting used to (I'm not going to spend time on it in this post). You can use the Gradient Transform tool to rotate, stretch, and manipulate the boundaries of your gradient. Adobe added new functionality in CS3 that is similar to how Illustrator handles them, which is built into the Paint Bucket tool (just click and drag in a direction). My pal, Keith Zulawnik, is a master of working with gradients in Flash. You can view samples of his Flash illustrations here and elsewhere on his blog. I'm trying to convince him to do a little tutorial of his own. But I don't work with gradients much, so we're going to move on.

The Two Approaches to Coloring

There are basically two ways of coloring a drawing in Flash. You can either color on multiple layers, or on the same layer as your line art. How you choose to color will depend on where you're coming from (habits from other apps), what you're coloring, and what the end goal is for your finished art. I will guide you through both approaches, weighing the pros and cons of each method.

For those of you coming from Photoshop, you'll likely gravitate to the multi-layered approach. This should be familiar territory, because layers work the same in Flash minus some of the fancier perks of Photoshop. Simply create a new layer underneath your line art layer, select the Brush tool, and start coloring!


You can add as many layers as you want, and people who like painting with transparency will find themselves right at home. In fact, if you want to paint with transparency, this is the way you have to go (I'll explain later). I recommend the multi-layered approach if you want to preserve your line drawing, or if you absolutely must use more than one layer to get the job done. But that's basically where my recommendation ends. You might as well export your line art to Photoshop, because it's better equipped for this kind of coloring (unless you need to work in vector). The approach, while super safe, doesn't take advantage of any of the benefits Flash has to offer.

The second approach is to color on the same layer as your drawing. Why on Earth would you want to do that, you ask? First off, Flash offers something I haven't seen in any other program—a little feature called "Paint Behind." I neglected to mention this in the Brush tutorial, but you can change what's called your "Brush Mode." Click on the drop down, and you'll see the following options:

Flash is set to "Paint Normal" by default. It does what you would expect; whenever you paint a new stroke, it will paint on top. Change your Brush color and you'll see what I mean. The two options I want you to pay attention to are "Paint Behind" and "Paint Selection." I rarely if ever use the others, but they are there if you want to experiment. "Paint Behind" is one of the best things Flash has to offer in the way of coloring fast and coloring loose. By using this setting, each time you paint it will always go to the bottom of the pile. So it's ideal for painting underneath your line. To use other option, "Paint Selection", simply select the area you want to color on (it will highlight fuzzy), and whatever you paint will only appear in that region.


Now, "Paint Behind" probably sounds awfully similar to creating an additional layer and coloring underneath your line art. In many ways, it is! But when used in combination with Flash's other coloring weapon, it's power is truly unleashed. Like every art application, Flash has a Paint Bucket tool, which by convention will completely fill in the shapes of your drawing for you. Select it, and you'll see a dropdown with a circle icon appear under Options. These are your Fill options:


The Paint Bucket will be set to "Close Small Gaps" by default. What this does is try to fill in shapes with a color, even if you have small gaps in your linework. Not all of us draw with lines that are perfectly connected. If you have really large gaps in your linework, you might try "Close Large Gaps." But it can only do so much, and you'll end up with something like this:


Here's where "Paint Behind" comes into play. The fastest way to color in Flash, in my opinion, is to start clicking around with the Paint Bucket to see what you can get done first. If you click on something and it doesn't fill with color, it means the gaps in your line are too big. So, take your Brush, set it to "Paint Behind", and use it to fill in those gaps!


It can be hard to spot them all, but there usually aren't that many. If you seal up the gaps, and use the Paint Bucket again—voila! Colored in one click! Whatever else you can't get done with the Paint Bucket you can do manually with the Brush. The Paint Bucket tends to work better when you are zoomed out.

The final component of this same-layer approach uses the Brush Mode "Paint Selection." Use it when you want to paint over only a shape area that you've preselected. It is particularly useful for coloring over something when you don't want to color over the line.


It's also handy if you want to change your line color in a spot. Just select a line segment and paint over the part you want colored.

Weighing the Approaches

What are the advantages and disadvantages of each approach? I tend to consider speed above all else! If you resort to painting manually on multiple layers, it's going to be more labor intensive. You'll need to make sure you don't miss a spot, and you'll probably color just barely inside or outside the line (which may be undesirable). Also, don't forget we're in an animation program here! Your animation workflow will typically be much smoother if you keep your line and color together. Let Flash fill your linework for you if it can! Animation is time intensive as it is, so you don't want to spend time manually coloring if you don't have to. Some styles warrant it, especially ones that are visually complex, loose, or painterly. But if you're a cartoonist working in a style like myself, you want to lay in crisp solid colors, so the Paint Behind/Paint Bucket combo is generally the way to go.

The big disadvantage is that once your combine your line and your color, it can be tedious to go in and select all of your line art again. You'll have to manually shift select bits and pieces of it. One trick: Select the entire colored drawing, and then shift deselect everything but the line...it should go quicker. You will notice here, if you haven't already, that different colored Flash shapes slice into each other when they overlap or intersect each other. Here's what it looks like if I take apart my line from my color:


This is another oddity which I believe is unique to Flash. Most other vector drawing programs treat each vector stroke and shape as a separate "indestructible" object. Not the case in Flash. You can turn auto-grouping on if you like, or manually group objects (Command G) to protect them from being sliced into. Another consequence of this slicing issue is that using alpha transparency will NOT work if you color over a color on the same layer. For example, if you have a solid green that you want to shade with 40% transparent black, you might expect something like A but you'll end up getting B:


This is because when you paint on top with a new color on the same layer, it overwrites the color underneath (basically, deleting it). In this case the black is not mixing with green, it's mixing with the white of the background. Weird, right? The lesson here is that you should use the multi-layered approach if you desire to paint with transparency. The proper way to color this guy on the same layer is to mix the darker green on your own.

I actually use both approaches. When I'm animating, I almost exclusively color on the same layer. It's about 50/50 when I'm doodling or drawing an illustration. I can be very precious about my linework, so I don't always want to combine it with my color. When I do decide to paint on the same layer, I'll often convert my line art into a Symbol first, to preserve it in the Library...and then break it apart (Command B) before I start coloring. This stores the original, in case I want to go back.

When I'm coloring a comic or a full illustration, it just makes sense to take advantage of multiple layers for background elements and details. Here's an example where I actually used both approaches. The monster is on his own layer (color and line), but the background line is separate with the background color on a layer underneath. The original sketch is still kicking around underneath that, too.


Just remember that painting on the same layer is definitely faster. When I paint on multiple layers, I'm usually regretting it half way through because it's almost always more time consuming.

Color Adjustment

Before I wrap up, I want to mention the color-adjusting tools Flash has to offer. To make use of these options you have to convert what you want to adjust (be it the entire drawing, or just a color layer) into a Symbol. In versions before Flash 8, all you had to work with were Color Properties under the Properties window. Click on your Symbol, and select one of the following options:


Brightness lets you either brighten (add white) or darken (and black) to your colors. Tint does the same thing with a color, on a range from 0 to 100%. Alpha allows you to make the entire symbol transparent (again, on a range from 0 to 100%). The clunkiest is the Advanced option; click on Settings to launch a pop-up:


Look complicated enough? You can get fun results with this method by playing around with the various sliders, but it's very hard to predict until you get a feel for it. I still don't completely understand its logic, even though I use it make slight adjustments to my colors all the time.


In all current versions post Flash 8, you can apply Filters to a MovieClip Symbol. One of which is called "Adjust Color." By selecting this option, you'll be in more familiar territory.


Simply adjust the sliders for Brightness, Contrast, Hue, and Saturation for useful/weird results.


The only problem with using Filters is that they don't export well out of Flash. You'll notice they even look blurry and crunchy in the program. If you export raster, the pixelation looks crude. Filters don't export to vector at all. Having grown accustomed to the Advanced color tool in earlier versions, I use it instead of the Adjust Color filter unless I know the end format will be a .swf (Flash's native export format). Remember you can always do color manipulation outside of the program.

Exporting Final Art

Finally, a couple of you asked about this in my previous post: Flash sounds great, but how do I get my artwork out of it? I'll be as simple as possible with my recommendations. If you want to retain vector, I would export as EPS. If you want to convert to raster, then the PNG format works best. You can alter both (convert to CMYK or resize) in either Photoshop or Illustrator. The odds are you have those if you own Flash.

Phew, that was quite a post! As before, feel free to leave any comments or questions you have, and I'll try to answer them.

---

Read more in the FlashTips series:

FlashTip #1: Drawing with a Brush
FlashTips: Questions Anyone?
FlashTip #3: Drawing Revisited

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

More ArtRage

I've been mainly using ArtRage to create backgrounds for animation. Because Flash is a vector environment, it can be a bit limiting working primarily in flat colors. I've wanted to experiment with textured and painterly backgrounds for awhile. Above is the opening shot of another short animation I'm working on. The background is all ArtRage; the characters and living room props are all Flash (so they can be animated).


Here is a background I painted for a long panning shot of a destroyed city, burnt to a crisp. Flames were added later in Flash.

One of the short-comings of ArtRage, in my opinion, is that it lacks the ability make a mess or add grimy texture...spray paint, spatters, sponges, drips, etc. I gravitated to tools like this in Painter—or, it was really easy to do in Painter. So, to achieve the effect I had in mind, I created a bunch of smudge and spatter paintings with real—that's right, REAL—watercolors. I made this mess of a painting by dabbing my finger tips on watercolor paper. You can probably make out my finger print in places.


I then superimposed it over a digital painting of the insides of intestines. After some layer compositing in Photoshop, I arrived at the dirty-smudgey look I was going for. I think this might have been one of the first backgrounds I made using the program.


Again, highly recommended! Just play around with ArtRage and see where it takes you!

Cartoon Blues

I've been studying Disney animators from the 30s as of late (Ub Iwerks, Fred Moore, Bill Tytla). It's one of those oddities where I'm discovering more of my cartooning roots after the fact, by looking at their drawings and thinking to myself, "Wait a minute, I kind of draw like that." The characters in their drawings are prime examples of construction, expression, and line that really appeal to me. The Fleischer style has been on my radar since college, but not until recently have I been delving into the early Disney artists.

Today I was flipping through Treasures of Disney Animation Art , a huge book my parents got me when I was 12 or so. It was weird—like I discovered Goofy again for the first time. I find his design very appealing...more complex than Mickey and the like which is probably why he appeared later. Goofy is definitely one of the stranger Disney creations, especially in his original form before he got more polished up (I'm a fan of the purple shiny-eyelid Goofy). So, I've been hitting the sketchbook.


Above is a study of a drawing by clean-up artist Dick Huemer from Lonesome Ghosts (1937). The construction of his face appears complex at first glance, but it can be broken down into simple organic shapes that wrap around each other.


And here, a study of a drawing by clean-up artist Art Babbit from Moving Day (1936). I love how low his head droops in this moment of the walk cycle. This is trademark Goofy—there's tons of personality conveyed in just this one drawing.

I recently borrowed a DVD from a from a friend that featured all sorts of Ub Iwerks cartoons. I'm drawn to the simplicity of his characters, because they also have a ton of personality. Below are some drawings I did of freeze frames from Ali Baba (1936).


This character is so rubbery and loose, packed with energy and movement. I especially like how Ub draws hands—big and bendy.

And finally, below are some original characters I drew with the same non-photo blue pencil. This charming specimen of a woman:


And a possible suitor?

Thirsty?

Here's a little guy in desperate need of a drink. These are keyframes from a series of short animations I've been working on for the past month or so. On a tip from Sherm Cohen, I've been playing around with a fabulous digital painting app called Art Rage. It's basically an easy-to-use stripped down version of Painter, offering up only a dozen tools...and it's only $25! I couldn't recommend it more. In approaching the design, I thought it would be fun to step away from the vector traps of Flash for a bit to create something more painterly. To add further texture, I scanned in some watercolor spatter paintings, and composited the final image in Photoshop.


Best of all, I got to do my first painted close-up (often used in animation to show more detail than the typical cel will allow). Added bonus: a gross close-up! I sort of had Clint Eastwood in mind, left stranded in the desert in The Good, the Bad, & the Ugly (chapped lips included!). I'll likely post more from this series when the project wraps up.

Teenage Mutant Ninja Turtles

I can remember the first time I saw a commercial for the Teenage Mutant Ninja Turtles cartoon; I was probably in 2nd or 3rd grade. They kept the turtles in silhouette...laughing and cracking jokes—keeping it very mysterious. Like most 9 year-old boys at the time, I loved the show immediately when it aired. But it never occurred to me to try drawing them until I watched my classmates doodling away. I definitely enjoyed drawing before then, but I don't remember making such an effort until I started drawing Ninja Turtles. I was surprised at how easily it came, and how much fun it was to write and draw my own stories. As I got better, the net effect was even more rewarding. And I haven't stopped drawing since.

So, the Turtles have always carried with them a certain nostalgia for me. And I'd like to spend this post walking you through some more artwork (see earlier post) I found over Christmas.


Here's a group drawing from 1990. I had probably been drawing them for a year or two by this point. This picture was taped above my bed—my bed, by the way, was fitted with Ninja Turtle sheets and I had all four stuffed animals. Not to mention the toys...OH, the toys!


Here's another from a year later...I had moved to drawing with a pen. This replaced the previous drawing above my bed.


By 4th grade, I discovered that there were Ninja Turtle comic books which predated and spawned the TV series. I learned that Kevin Eastman and Peter Laird where the guys who created the Turtles, and that the comics had a slightly different look. I was trying to capture that style in the above drawing of Leonardo.

Below are a bunch more drawings from 1991-93:


I must've been working on shading here (thus the sun as a light source).


Ha! A meaner looking Turtle...there might've been a rogue turtle named Slash from the series (don't ask how I remember this stuff).


I took a crack at a sewer background in this one.
Raphael was always my favorite of the bunch.


This drawing of Leonardo is on yellow scratch paper, so I must've drawn it in study hall (I'm in middle school at this point).

Now, my days drawing the Turtles were twofold. I worked hard at learning how to draw them in various poses, but I also came up with my own spin-offs—pretty much all things ninja and mutant related. I spent the better part of elementary school making my own comic books.


The first spin-off was the Teenage Mutant Ninja Creatures. I figured, why stop with turtles? I created mutant versions of a bull, a dolphin, a shark, a lizard, a rhinoceros, a rooster, a goat...it keeps going.


Instead of Shredder, I created a villain named "Tin-Skin."
Good one, Bobby :)


Here's a spread right out of Bobby's Comics Volume #2 (1989)

And then there were the Ninja Blobs! Just cut the animals right out of the equation and make ninjas out of blobs of mutagen. In one comic, I even had the Ninja Creatures team up with the Ninja Blobs.



The final iteration was a story where Ninja Turtle stuffed animals (like my own) came to life! Looking back, this was a way for me to make comics without having to labor over drawing all the complicated muscles and features.




Below is one of the few editions of Bobby's Comics in COLOR! Note, Volume #17! I think this might have been the last one before I dropped the Bobby's Comics publishing name.


By this point I had moved on to drawing in those blank books you can find in art stores. The book is dated 1991-92, so I was 12 years old (6th grade).


And here's a spread. Shredder is miniaturized too...he jumped out of a poster at some point.

So, that about wraps it up! In middle school I started drawing comic strips with truly original characters and stories. As you can see, I definitely got my start as an artist expressing my obsession with the Ninja Turtles in pictures and comics. I spent so much time drawing as a kid, it's hard to imagine a more productive period of my life! Then again, kids do have a ton of time on their hands. I hope this was a fun read for you. I'll be back to posting current work (from 2009) in my next post.

UPDATE: Peter Laird has a blog! Tons, and I mean TONS of original TMNT art. I may have to sit down and sketch some turtles for old times sake. Also, I just added the Teenage Mutant "Wimpy" Turtle pictured below (ha).