Here is part one in what hopefully will be a long running series of lessons for cartoon animators working in Flash. Its not so much a series of tutorials as a series of tips on how to add extra punch and refinement to your work. A lot of this stuff will seem like a no brainers to a seasoned pro, but for those starting out I think these lessons will be invaluable. And perhaps there will be something a few pros can use too. I’m going to assume you have the basic equipment: A computer, a scanner, a copy of Flash 6 or higher, and a pressure sensitive graphics tablet (preferably a Wacom).

If you’re a cartoonist you draw a lot of lines. In fact, the majority of the time lines are the most important part of your work because they define, not just the shape and personality of your characters, but the mood of your entire animation. It’s important that your lines look good.

Try Not to Draw in Flash

Flash is good for a lot of things, but drawing is not one of them. The paintbrush tool in Flash is horribly broken, even with the smoothness setting added in version 8. Don’t lay your hopes on CS3′s paintbrush. Despite rumors its been upgraded it’s actually exactly the same one in v8. For those who don’t already realize Flash’s paintbrush can’t draw a smooth line even with the most sensitive Intuos talbet. Lines are often choppy and angular. Adobe Illustrator, on the other hand, makes perfect lines every time because its strokes become paths and not the fills Flash makes. That’s why it’s important that you own both these packages. It sucks, because it’s another expense for the struggling artist (coughbittorrentcough!), but it’s really unavoidable. Your lines make your drawing and even the best draftsman’s work will look like amateur crap if his pen is leaking all over the place. The nice thing about CS3 (which I will be reviewing soon) is that you can really just cut and paste from Illustrator straight into Flash with zero loss of fidelity. Your work will look the same in both.

Line A was created in Illustrator and is exactly the way I drew it: fluid and smooth. Line B, drawn in Flash, has an uncountable amount of errors in it. It looks like someone jizzed on the screen. Its lumpy and at the thinest point the line disappears all together. It should also be known that each line’s demarkation letter was also drawn in that line’s respective program. It’s hard to tell if its actually a B or an inbred 8. I understand that rough and dirty are sometimes virtues, but it should be up to you to determine the roughness of your drawings, not the software. With Illustrator you can go both ways. With Flash you’re just plain screwed. I’ve seen so many Flash cartoons where the drawings were great and the animation was lovingly detailed, but because it was drawn in Flash they still came off as amateurish because the line quality was so baaaaad!

The problem with the whole Illustrator/Flash dynamic is that sometimes you just have to draw in Flash. I mean, that’s what the “onion skin mode” is made for – frame by frame drawing in Flash itself. My advice is to draw your keyframes (the major extremes of action) in Illustrator and your inbetweens (the frames that get your character from one extreme to the next) in Flash. Below you can see that the middle frame was drawn in flash. Quite a difference from the other two.

Inbetweens usually pass so quickly that the viewer never actually processes them fully. They can often be a whole lot less detailed than the keyframes , which linger on screen longer and need to look great. I’ll go into more detail about extremes and inbetweens in a later tutorial. Of course, if you use Flash’s automatic tweening abilities exclusively and don’t do any frame by frame animation Illustrator is fine for all your drawing needs.

Don’t Optimize

The other consideration that can reduce you line quality is optimization. Using Flash’s built in optimization feature or an dedicated optimizer like eRain’s Optimaze is pointless. Such optimizations try to strategically remove certain points on your paths while attempting to retain the fidelity of the original image. Bullshit. Its a computer, it doesn’t know what shape you want to make. It has no references or intelligence to recognize a face or a bird. Most optimized drawings end up looking like mud with curves becoming sharp angles and sharp angles magically becoming curves. Lines become less like lines and more like geometric puzzle pieces. Below you can see how all the subtlety in old GW’s face is lost. His expression is less funny and his ear is a mess.

When I was moving doodles around in Flash 4 many moons ago processors were still measured in megahertz and dail-up was king. In other words – every byte mattered. It’s the 21st Century now and the most popular site on the interwebs has you uploading and downloading video files 10 megs at a time. Every potential viewer that matters to you (stress on the “matters”) has a dedicated graphics card and a broadband connection. Size no longer puts people off. Besides, even unoptimized, Flash is small as hell. I doubt even your biggest blockbuster short (even with bitmaps or video) will top 10 megs (I rarely pass 2).

So the lesson of the day: Avoid drawing in Flash and never optimize. Expect a new lesson each week. If you have any ideas for future tutorials you’d like to see whether general Flash tips or based on specific scenes in my work feel free to comment or email!