Importing and Optimizing Line Art

for Cartoon Animation in Flash

CONTENTS

Introduction

List of Materials

A Note About Wacom Tablets

Step One: Character Design

Step Two: Background Design

Step Three: Generating a Color Proof

Step Four: Penciling

Step Five: Inking

Step Six: Scanning

Step Seven: Batch Cleanup

Step Eight: Converting Raster to Vector Art

Step Nine: Painting

Step Ten: Making Library Symbols

Step Eleven: Testing Your Animation

Step Twelve: Optimizing Your Library Images

Conclusion: Flash to Video Output

# INTRODUCTION

The following is a detailed tutorial for those that want help converting cartoon line art from pen and paper into the look of traditional cel animation with Macromedia Flash. In the steps detailed below, I hope to share with you some of my production shortcuts and help digital animators out there solve some of the headaches I've tackled in the past. Character animation is not easy, and it takes a rare mindset to find satisfaction in breaking down complex figure motion into fractions of a second… it is a labor of love with long, hard hours of drawing and redrawing to get your work looking just right, but the motivation and gratification is in the payoff when you can say to yourself and others, "look what I just brought to life!"

The steps listed here are by no means a definitive method, and acquiring the necessary skill set for producing successful cartoon animation is a lifelong process, as is any art form. This tutorial is not for creating animation art so much as it is to help you get it from paper drawings to moving pixels. If you follow my step-by-step procedures, you'll be able to avoid some of the pitfalls I've encountered. This tutorial is written for the intermediate computer artist in mind, with the assumption that you are pretty familiar with the basics of both Photoshop and Flash. Tips given here have been sourced from numerous manuals, sitting through lectures, and dealing with hours of sheer trial-and-error at the drawing table. If some of this may seem to be old news to you (such as creating an Action in Photoshop, or using Trace Bitmap in Flash), feel free to skim over the steps, but don't avoid the parts I've underlined as Important, as they are critical steps to the conversion process I've outlined for you.

# LIST OF MATERIALS

You'll need the following to use this tutorial:

1) The necessary software: Screenshots and hotkeys described in this tutorial refer to PC versions of Adobe Photoshop and Macromedia Flash. If you have a version of PS 5.5 through 7.0 and either Flash 5 or Flash MX, you should be able to follow along without too much trouble… and I'm assuming that if you own a Mac, you probably know that you most often switch your Command key for my Control key in the shortcuts.

2) A scanner: You know them, you love them, you hate them… whatever you do, make sure the one you use has a spotlessly clean glass platen and the capability of scanning grayscale bitmaps at a minimum of 300 dpi.

3) The basics: pencil, eraser, plain ol' paper, and a pen that draws consistent black lines. Each artist works differently, so I can't recommend one type of tool over the other… you should be the one that dictates what's best suited for you, but as far as my tastes go, I use all of these listed below:

a) Pencils: I like to use a 6B or a 4B, something that really lays the line down thick with soft, expressive strokes, but doesn't smear and get all over my hands like an 8B. In drawing animation, I like to work quickly, and a hard lead pencil like a standard #2 means I have to put down 3 or 4 sketchy strokes to get the same results I can find with a softer lead and a single stroke. I particularly enjoy using those fat graphite sticks (unsharpened!) for laying down large blocks of mass… I've discovered that drawing with something the size of my pinkie finger also prohibits me from getting too caught up in details like individual eyelashes or shoelaces on my sketches. Later, when I tighten up my sketches prior to inking them, I use a Prismacolor non-photo blue pencil or a Sanford blue Col-Erase… that way, I can ink right over my blue pencil sketch afterwards and not have to worry about lots of erasing, because the scanner won't pick up most of my faint layout lines.

b) Erasers: Fixing your mistakes without a hassle is what it's all about, so get an eraser that does the work quickly and efficiently. If an electric eraser is overkill for you (as it is for me), get yourself both a gray kneaded eraser and a few white drafting erasers in different sizes. I like to use the sticks that fit in those "clicker dispensers," because they're easy to deal with, hold a rounded point for detail work, and the results beat what you'll get in working with those temperamental Pink Pearl or brown gum erasers. The white Staedtler-Mars or Sanford Magic Rub may be a bit more costly than you're used to spending for an eraser … but believe me, it pays off in that they last longer, mainly because they take less effort and are simply superior in what they do.

c) Paper: There are literally hundreds of different grades of paper out there, but when it comes to quickie sketch material for cartoon animation, I use standard copy bond in the typical 8 1/2 x 11" size. If I know I'm going to be doing ink work, I'll switch over to laserjet paper stock because of the clean satin finish; it's less porous than the pulpy texture of standard stock and it holds a crisp line much better. Some animators I know swear by vellum stock, as it makes viewing multiple layers easier for tracing and "tweening" your art. For the price, my feeling is that vellum is more expensive and more fragile than the convenience of everyday laserjet stock, but again it's just a matter of preference.

d) Pens: Everyone has their favorites, and I definitely have mine. For scanning line art, you want something that will draw clean, bold blacks without a lot of skipping, and you also don't want a pen that will die on you halfway through an ink job. For field work, I rely on a black gel ballpoint, which I buy by the 12-pack because I go through so many of them. For studio work, I use something with a flexible nylon tip that will give me some line variation, like an Alvin Penstix, a Pentel Sign Pen, or sometimes a Sharpie Ultra Fine Point if I feel courageous (as Sharpies are prone to bleed, even on satin stock). For high-end work where line variety is a must, I use a Tombow Brushpen.

*A PERSONAL NOTE: As much as I like to use technical pens in illustration work, fine-tipped points serve no useful purpose in animation line art, not only because they offer no expressive variety in line weight, but they are a pain to scan without LOTS of touch-up further down the road, which will do nothing but slow down your productivity. I would recommend against using pens like the Micron brands unless you work boldly, with at least a .05 tip or larger. Crosshatching and high detail line work has a problem crossing over in the scan-to-vector-art process, so be forewarned.

4) A means of tracing your work: For this task, a light table is absolutely essential. Sure, you can tape your work up to your bedroom window, but that's going to last about ten minutes or until your hand falls asleep. Most art and craft supply stores sell the small trace boxes for about $30 US, which definitely does the trick. If you're good with power tools, you can even build one for a lot cheaper, complete with your own fluorescent light fixture and a sheet of white or frosted acrylic for a drawing top. Bigger is better, of course, and if you intend on spending lots of time staring into one, you'll be concerned with things like light quality, glass over plastic drawing surfaces, permanent over mobile fixtures, etc. Mine is a self-contained glass-topped 18 x 24" box, which is more than adequate for the work I do.

5) A means of registering your work: As you move from one drawing to the next, you want to make sure each drawing shares the same reference point relative to one another, and that the images don't slop around. The industry standard is an Acme animators peg bar (the black ruler object as shown in the photo above), which holds a stack of punched paper securely with its special slotted notch 3-hole system. If you don't have access to an Acme punch or can't access the specialty punched paper, (or realize that tight registration is really not that necessary), you can build up a thick masking tape trough directly onto your light table to keep your sheets square:

6) Source material: There are all sorts of books on the market that are incredibly thorough when it comes to things like anatomy, art history, illustration techniques, superhero comics, anime styles, etc. I'm assuming that you have some of these if you have any interest at all in animation. When it comes to actual processes, here's my Short List of animation books that I refer to almost daily:

a) "Disney Animation – The Illusion of Life" by Frank Thomas and Ollie Johnston. More than just a coffeetable book, this is an impressive nuts-n-bolts manual written by two of Disney's original "Nine Old Men" that pioneered the animation craft during its Golden Age. Essential reading and reference; this book keeps going out of print for some reason… find yourself a copy and keep it close.

b) "The Animator's Survival Kit" by Richard Williams. Written by the director of "Who Framed Roger Rabbit," Williams takes the basics one step further with specific problems and solutions he's uncovered through his years of teaching the craft. A relatively new publication, this book is definitely well worth the money.

c) "Cartoon Animation" by Preston Blair. Another old-school animator from the days of Tex Avery and "Little Red Riding Hood," Blair's clean style guides you step by step, from start to finish, on basics like characterization, line-of-action, expression, exaggeration and motion mechanics in an extremely entertaining easy-to-read format.

d) "Flash 5 Cartooning" by Mark Clarkson. An intermediate book for those already familiar with Flash, Clarkson does a great job at making it all look so simple, which it really can be if you follow his techniques… you find yourself looking at a chapter and saying, "shucks, even I can do that!"

A NOTE ABOUT WACOM TABLETS

Pressure-sensitive tablets are probably the best thing to come around for the computer graphics specialist since the invention of the CD burner. They’re a bit awkward to get used to at first, but they increase your workflow considerably once you get used to them. In my opinion, nothing will ever replace the tried-n-true pencil and paper approach to drawing, but a tablet is a great tool to have on hand, especially in coloring your work.

You won’t need one for this tutorial, but if you want to get serious about animated cartoon work and don't have a Wacom yet, think about getting one… I’d suggest you “test-drive” one first before you put out the money, as they obviously aren’t for everyone.

STEP ONE: CHARACTER DESIGN

Okay… first things first; you have this funny idea that revolves around a cartoon character doing a physical activity. Where do you start?

Make sure that you feel comfortable drawing the same character over and over again, because that’s exactly what you are going to do… draw the same character over and over again! No mystery there, right? A lot of planning should go into this process, so it’s a good idea to do a bunch of thumbnail sketches of your character before you commit to a finished look. You may think that your initial version of Puddles the Duck looks really great with fifteen feathers poking out of each wing, but consider drawing all fifteen of those feathers for every frame in a lengthy animated piece, and suddenly you'll be wondering if two or three feathers would've served the same purpose (this is precisely why most cartoon characters have only 3 fingers!). The same thing goes for all sorts of ornate details that look great on single illustrations, but will drive you crazy if you have to do it dozens of times: i.e., buttons, eyelashes, fur, fringe, beads, chainmail armor, etc. This is the step where you practice the fine art of line reduction, as it's much more practical to tighten it now in the formative stages than it is later, halfway into the project, where a design change could impact the overall look of your piece.

One way to get yourself out of this trap is to design your character in reusable pieces, like cutout animation. A lot of Flash animation is done this way, especially for the web. Instead of doing full-character animation like the kind Disney and Studio Ghibli are famous for, consider the economical Hanna-Barbera style of limited-cel animation. There was a good reason why Fred Flintstone had that 5-o'clock shadow around his mouth, and why Yogi Bear wore a necktie with a collar… it was to hide the seam between the moving pieces and the stationary pieces of a given shot. At first, you may think this old method may seem pretty dry and uninspired by today's standards, yet we still see it used a lot in popular story-driven, dialogue-heavy animation like Dexter's Laboratory, Power Puff Girls, or the deliberately "cheap" South Park… in each, a simplified design technique has actually been integrated into the overall cartoon style, giving it a unique signature look as every bit as popular as award-winning classics like Rocky & Bullwinkle, The Pink Panther, or Ren & Stimpy.

Successful animation works from both ends of the spectrum. When you watch popular cartoons like The Simpsons, Dragonball Z, Spongebob Squarepants or Pokemon, you'll notice that a character may do a dynamic full-body action, then freeze or cut away to speak a line of dialogue. The camera shots will most often alternate, switching to an extreme close-up, a background pan, or a looping activity as a creative way of minimizing production efforts while still pushing the story forward. By cleverly combining both full-character and limited-cel animation shots in your design process, you can use these animation "cheats" to your advantage, but you have to plan for them in advance, especially if your goal is to tell a story with your cartoon.

STEP TWO: BACKGROUND DESIGN

Obviously, your character needs a stage backdrop or a setting to interact and move around. It can be anything from blank white to a full-blown painted bitmap, simple cartoon line art to a detailed digital photo. Consider your output and what you're going to do with it, then scale your backgrounds accordingly, saving them in the sizes best suited to your needs. Since I output most of my animation to video, I like the NTSC standard of 720 x 480 pixels; you may have entirely different needs, especially if you intend on publishing it to the web, so now is the time to decide your frame sizes. If you can't decide or are just experimenting with this tutorial, go ahead and use the default 550 x 400 pixel stage size that Flash uses.

STEP THREE: GENERATING A COLOR PROOF

After designing your character and your stage backdrops, it's time to figure out your color palettes. Many amateur cartoonists will spend the majority of their design time in character development and think of color work only as an idle afterthought. Don't fall into this trap… dedicate some time and careful consideration towards colors and the moods they convey, especially how they resonate when placed next to one another.

1) Draw and ink a full-body three-quarter view of your character… pick a active pose that reveals the majority of the detail in your figure (in the trade, this is called a model sheet). Create it as black line art on white paper, and scan it into Photoshop:

2) This particular sample image doesn't need to be hi-res, so go to Image>Resize Image and push the numbers down to fit your backdrop size, or about 800 x 600 pixels if they aren't there already, then go to Image>Mode>RGB Color. Unlock the image by double-clicking the layer named "Background" and rename it something easy to remember like "Line Art."

3) Using the Wand tool, select each area within a black outline and fill it in with the Bucket tool, making basic color choices from the Swatches palette. No need to be picky just yet; this is where you simply play around with the color combinations, but it's wise to try to limit your choices to no more than 8 different colors. Remember to simplify if you can, as it reduces the amount of paintwork you'll be dealing with when you import it into Flash a little later.

4) Okay, so Puddles the Duck looks pretty good against a plain white background, but what about against the stage backdrop? With the Wand tool, select the remaining white field surrounding your character and delete all the uncolored parts. Make a new layer, name it something clever like "Backdrop," and drag it beneath your "Line Art" layer. Paste a copy of your finished backdrop onto that layer to see what your colored character looks like against it.

5) Now the color tweaking starts. You may discover that the boots on Puddles the Duck originally looked great in red, but now that he's standing in a pond, his feet are much too bright. You should work for a strong contrast between the foreground and background in all areas, yet integrate color choices that match his environment, so it looks like he belongs there. Lock your backdrop layer down and activate the "Line Art" layer.

6) Go to Select>Color Range, and with the eyedropper tool provided, select a color in your "Line Art" layer that you want to change (for example, the red in his boots), then click OK. Sometimes I prefer to hide the "marching ants" marquee so I can see my changes better, so hit CTRL-H to hide them. Next, go to Image>Adjust>Hue/Saturation. With the series of sliders in this dialog box, you can push them around to your heart's content until you achieve that precise shade of color that you want. Click OK, then CTRL-H to unhide your marquee, then CTRL-D to deselect.

7) Go through this process with each of your colors until you are satisfied with your revised palette. Remember that right now, you are making a production proof for your eyes only, not a finished piece for show, so don't worry if you have some stray white pixels in the fringes of your fills. If you intend on uploading your finished animation to the web, now is the time to double-check that your color choices are web-safe, and correct them if doing so.

8) What I do next is an invaluable step when it comes to coloring your work in Flash. Take the eyedropper and select one of the dominant colors in the "Line Art" layer. I pick a standard brush with a large diameter of 100 pixels or more, and then stamp a large circle of the selected color over in the margin. Do this with each of your fill colors. What this does is generate a model sheet complete with "paint wells" of each color in the margin that you can easily "eyedropper" from when you do your coloring in Flash. Flatten your image and save it as a *.bmp or *.jpeg with the words "color proof" somewhere in the file name, then print out a couple of copies for drawing references:

STEP FOUR: PENCILING

Simply stated, it's now time to animate… time to get crazy and draw your character in all its different permutations. As you may have guessed, this is where the workload gets the most labor-intensive. For this tutorial, I've created a 10-page walk cycle of Puddles the Duck as an example to step you through the process. I work very loosely and very sketchy at first, blocking out basic forms in the defining poses (called key poses, or keys), then figure out the poses in between my keys (aptly named inbetweens, or tweens). As mentioned earlier, don't focus on making each drawing a spectacular finished work of art, or you'll never finish your animation… get down the largest movements first, in broad strokes and solid masses. Once the basic motion is established, then move on to your exaggerations, squash & stretches, anticipations, secondary motions, etc. Refer to your manuals and resource materials constantly… don't ever assume that you know it all, because you don't. Also, adding details should come dead last… and always remember to NUMBER YOUR PAGES!

STEP FIVE: INKING

After testing the motion of your pages by flipping through them, check each one against the others as well against as your model sheet printed in Step Three. When you are satisfied with the results in pencil, it's time to ink them. This is where you get to be expressive in your work… line weights, thick-to-thin edges, textures are all important considerations when you switch from pencil to pen. Sure, some of those great shading qualities you got with graphite will most likely disappear when you ink over them, but with the ink line comes a clarity that a sketchy line could never translate. This is often my favorite step of the process.

As you ink your drawings, remember to fuse all your line art into complete shapes, especially in the corners… that way, when you fill your image with the paint bucket in Flash, you won’t suffer from any unnecessary coloring “leaks.” Remember that it’s during this stage that you want to clean up your line art into its final finished form. Another issue in the process that can slow you down: resist the temptation to want to correct all your mistakes later in Photoshop, or you’ll be spending much too much time fixing your work and not enough time animating:

If tight registration is a concern, it always helps to put a small "plus sign" or crosshairs symbol somewhere near the base of your first drawing… if you’re working on a light table, put down a square of masking tape and ink a mark on it. Then, as you finish inking each pencil drawing, trace the crosshairs as a last step before you number the page, which will help align your work when you import it all into Flash.

# STEP SIX: SCANNING

This is probably the most monotonous step of the process, the input of each page of your work. Find yourself a comfortable chair with music and your favorite beverage nearby, and organize your work accordingly so that all of them are in numerical order and facing the same way. Scan each page sideways with the bottom edge pulled tight to the platen margin, and make sure to scan the entire image:

Important: DO NOT CROP! There’s a reason for this, which will be revealed later. As you bring in each image, make sure your scanner settings remain at grayscale, *.bmp or *.jpg format, 300 dpi resolution, and capture the full scanner bed, even if your pages may be smaller than the bed itself.

Important: NAMING CONVENTIONS! As you save each page, give the filename a simple one-letter index followed by a two-digit number in sequence, such as w01, w02, w03, etc. At this point, don’t give each scan a long name like “duckpuddle_jumper_scan01” (because you'll only be renaming them later). It is ESSENTIAL, however, that you save them all in a common folder that ONLY holds this batch of scans, and label it as such for your convenience (i.e., “duckwalk scans").

# STEP SEVEN: BATCH CLEANUP

If you've never used Actions before in Photoshop, they are a great way to automate a string of commands that you use often, and can serve as a useful timesaver if you know how to create them properly. One such string of commands I use often is in processing my line art, specifically in cleaning up my hazy scanned art to crisp black and white line art. The following steps are my way of doing this:

1) On your computer, find the folder with all the scanned ink drawings (i.e., "duckwalk scans") and in the same directory, create an empty companion folder with a similar name that will hold your clean art (i.e., "duckwalk cleanup").

2) Open the first scan you made from your inked drawings (i.e., w01). If you did Step Six correctly, you should be looking at a sideways image of pose #1 in grayscale. Maximize this image window in Photoshop and zoom the image out to the full 100% view, then with the Hand tool, maneuver the part of your drawing with the most detail (usually the face) into the center of your screen.

3) In the Actions palette of Photoshop, click on the Folder button to create a new set, and name it "My Action Set." Then, click on the New Action button in the Actions palette and in the dialog box, name the action "Black Line Cleanup." If I think I'll use a particular Action a lot, I often assign it a function key and give it a color, but this isn't necessary for this tutorial:

4) Ready? Click the round Record button within the Actions palette to start recording the following string of commands:

a) Even though your scanner was set to Grayscale, for some reason Photoshop thinks it's Indexed Color. This needs to be changed: go to Image>Mode and check "Grayscale."

b) Now, the goal is to eliminate everything but absolute black and absolute white, but do so in small increments. Go to Image>Adjust>Brightness/Contrast and push each slider to a value of 30%. You may need to drag the dialog box away to review your changes prior to hitting OK; the idea here is to slowly reduce the amount of gray without losing your line weight… if you discover some of your fine lines are vanishing, back the values in both Brightness and Contrast to 25% or so to restore your lines, then click OK:

c) Go to Image>Adjust>Brightness/Contrast again, and this time push each slider to equal values of 60%; preview your work again before committing, just in case you may find too much line thickness is lost. The edges will appear pixilated at your 100% view; but this is what you want as long as the line doesn't break apart. Find your happy medium of 50 – 60%, then click OK.

d) Go to Image>Adjust>Brightness/Contrast a third time, pushing each slider to equal values of 85%, then click OK.

e) Go to Image>Adjust>Brightness/Contrast a fourth time, only this time push each slider to full values of 100%. Again, with each increment of cleanup, the line will appear quite jagged… don't worry, click OK.

f) Go to Image>Rotate Canvas and turn the image 90-degrees to its proper upright position.

g) Go to Image>Mode and check "RGB Color."

5) Are you satisfied with what you see? To finish recording, click the square Stop button in the Actions palette. Now, close out of the refined image you've made, but… Important: DO NOT SAVE!

6) Why? Because we're going to do the same thing all over again, but to ALL of your scans this time! Now the fun begins as we put Photoshop on "autopilot"… go to File>Automate>Batch and a dialog box appears. In the Play box, make sure that the Set is "My Action Set" and the Action is your newly recorded "Black Line Cleanup." In the Source box, click the Choose button and locate your folder with the scans in it (i.e., "duckwalk scans"). In the Destination box, click the Choose button and locate the empty companion folder we made at the beginning of this chapter (i.e., "duckwalk cleanup"):

7) Click OK and go make yourself a sandwich as Photoshop batch-routines and cleans up every scan in the "scan" folder, saving them with the same filename and into the companion "cleanup" folder you made. Now, is that cool or what?

# STEP EIGHT: CONVERTING RASTER TO VECTOR ART

Here's a few hotkeys that will make a Flash animator's life easier:

< toggle back one frame in the timeline

> toggle forward one frame in the timeline

F5 insert frame

Shift F5 remove frame

F6 insert keyframe

F8 make library symbol

F11 open library

CTRL - zoom out

CTRL + zoom in

I eyedropper

K paint bucket

Y pencil tool

V arrow tool

CTRL Z undo last function

Arrows nudge an image 1 pixel

Shift-arrow nudge an image 10 pixels

1) Open Flash, and in your Modify>Movie dialog box, change your parameters to suit the dimensions of the backdrops you made in Step Two. If you are outputting to NTSC video, make sure to set your stage size to 720 x 480 pixels, with a frame rate of 30 fps. I also recommend you that set the background color of your stage to something other than white or gray (something easy on the eyes, like a pale blue). This will help set the stage apart from all the other artwork as you import white images onto it.

2) Go to File>Import, locate the first image (i.e., w01) in the "cleanup" folder (i.e., "duckwalk cleanup") and click OK. At this point, a seldom-known, incredibly handy feature of Flash will pop up before you:

If you click Yes, Flash will now import every single image that is consecutively numbered in the folder, and will put image 01 in frame 1, image 02 in frame 2, etc. all onto Layer 1. Amazed? This is why I told you to number the images sequentially in the Step Two Scanning chapter…

3) In the Timeline window, click the Edit Multiple Frames button and drag the handle of the Onion Skin marker from the first to the last keyframe on the layer generated by the batch import. Zoom your view out to about 25% and you'll notice that the imported images are much larger than the workspace provided by Flash… they're mostly hidden, but they are still there. If all the frames are selected, a dashed gray selection border will surround each imported bitmap.

4) With all the frames selected, go to Modify>Transform>Scale, and with the Shift key held down, grab a corner and scale everything down to fit your stage. You may have to scale down, drag everything up, scale down some more, drag up some more, in order to reveal the frames and fit all the B&W images onto your pale blue stage. Notice that when images of the same size are imported directly on top of one another, they are all brought in accurately registered into position and also scale uniformly. Amazed? This is why I told you to not crop the images in the Step Two Scanning chapter, but to keep them all the same size…

5) After the images have been scaled to the fit the stage, enlarge your view back from 25% to Show All and turn off the Edit Multiple Frames button. Select Frame 1 in your timeline, making sure that the imported image also has the dashed gray selection border around it. Go to Modify>Trace Bitmap and the following dialog box appears:

This critical step, converting raster to vector art, requires some experimentation on your part, largely due to the fact that your inked line weight may be remarkably different than mine. A good starting point for standard cartoon artwork is to enter values of "75, 8, Normal, Normal" and see what happens… if you don't like the results, CTRL-Z your way out of this and adjust the settings slightly before trying again. Remember that converting bitmaps is not an exact science, and you will never capture the true essence of your original inked line work, but with enough testing, it can come awfully close. Some people prefer using a raster-to-vector program like Adobe Streamline for this job, but I find Flash's Trace Bitmap more than adequate. Once you find a setting you approve of, retain the same values for all of your vector conversions in your scene to maintain consistency throughout the animation.

6) To test and touchup your vectorizing, choose the Arrow Tool (V) and left-mouseclick once to the gray area off the stage to Deselect All, then select the white space outside your character art and press Delete. With this step, you'll be able to see your black and white character against the pale blue stage, as well as any holes that were deleted by mistake:

This one is definitely in need of repairs, since both his body and forward boot have disappeared; I have line breaks on the top of his foot and under his neck. Hit CTRL-Z to undo the deletion of the white field. Zoom in tight to find the breaks, then use the Pencil Tool (Y) set to Smooth with black color, and draw in the gaps. With the Arrow Tool (V), select the white space outside the character and Delete again.

7) Much better… now all the areas will accept paint fills. With the "<" and ">" keys, toggle through the frames to view each of your scans; select and Trace Bitmap for each frame, then delete the unwanted white fields around the drawings as before. Touch up with the Pencil Tool as needed, and don't forget to save periodically.

Important: BE CAREFUL WHAT YOU DELETE! While you may want to spend this time deleting wandering black pixels or edge fringes that were leftover from the scanning process, I'd suggest you do that later… but whatever you do, don't eliminate the crosshairs or the page numbers just yet!

# STEP NINE: PAINTING

The programmers at Macromedia were kind enough to let us name our layers in Flash, so I do just that, as my memory is not all that good when it comes to what's on Layer 6 and Layer 7… I name the working layer with all the cleaned keys something reasonable like "cleaned keys." Next, create 2 new layers BENEATH the "cleaned keys" layer. On the middle layer, name it "backdrop" and import onto it the backdrop image we referred to in Chapter 2. On the bottom-most layer, name it "proof" and import onto it the color proof we made in Chapter 3. Slide the proof offstage a bit so that the "color wells" you made are exposed:

Here's where hotkey knowledge is important and can make it worthwhile towards your productivity. Go to frame 1; pick a color from your color wells using the Eyedropper tool (I), then with the Bucket tool (K) fill the areas of choice (i.e., "boots"). With the "<" and ">" keys, toggle through the rest of the frames and fill the "boots" for each frame. Once completed, start over again, only this time with the "raincoat" colors for all frames, then again for the "beak" and "leg" colors, etc., until the images on all your frames are completely painted in. Save your work.

# STEP TEN: MAKING LIBRARY SYMBOLS

Once done with the painting phase, it's time to get rid of all the excess clutter and make Flash run more efficiently. For small animations, this isn't really a problem, but if you are exporting to the web or to video, it's always wise to make all your images into library symbols, especially if you plan on using them more than once, as in a looped or a ping-pong sequence. Start by deleting your color proof layer. Lock down any other layers except the one holding your painted "cleaned keys." Select the first frame on your "cleaned keys" layer and lasso the image, or type CRTL-A to Select All, then press F8 to make your selection a library object. Give it a unique name to include the page number (i.e., "duckwalk 01") and click OK. Do this procedure with all your painted keys, making each one a Graphic symbol. Save your work now!

Press F11 to open your library. In addition to all your newly-made painted keys, you'll notice that all your original black and white bitmaps are also stored there. You won't need them any more, so go ahead and delete them as well as your color proof bitmap to further reduce your file size.

# STEP ELEVEN: TESTING YOUR ANIMATION

At this point, it's a good idea to turn Onion Skin on in outline mode to confirm that your registration crosshairs fall in the same place; if they don't, it's just a matter of selecting each instance and nudge them around with the scroll arrow keys your until your marks line up. Save your work.

Ready? Go to Control>Loop Playback, press CTRL-Enter to play and get ready to be blown away as your finished character finally takes his first steps on his own. Chances are, your first run-thru will play much faster than you anticipated. Go back to your timeline and insert a blank frame in between each keyframe by using the ">" toggle and F5. Having the new version play out "on twos" the animation will now run slower and probably more to your liking. As you scrub through the timeline, you'll find places to fine-tune the timing of your animation by adding or deleting frames, until you're finally satisfied with the speed and the position of your images. Save your work again.

WOW!! CONGRATULATIONS on completing the essentials of this tutorial! Now for the "spit-n-polish"…

# STEP TWELVE: OPTIMIZING YOUR LIBRARY IMAGES

Prior to publishing your animation to a final *.swf, you can reduce your file size by as much as half if you elect to do this next step. Hit F11 to open your library and double-click your first symbol to bring it into edit mode. Here's where I delete my registration crosshairs, stray pixels and any page numbers still lingering on the drawings. With the symbol still selected, go to Modify>Optimize and the following dialog box appears:

Push the Smoothing slider down to None and click OK. A callout will appear describing the percentage of curved surfaces that were smoothed out in the optimizing process. Inspect your image to see if this reduction has compromised your line art. Most often, for the first go-around, it will actually improve the quality of your drawing, eliminating the majority of the sawtooth edges created from the Trace Bitmap process. If you don't like what it did, simply CRTL-Z your way back a step. If it looks fine, repeat Modify>Optimize with the None setting at least two or three more times, until the percentage change value drops below 5% or just before your line art starts to take on a chunky or dimpled look.

With the exception of your backdrops, repeat this process for every symbol in your library, and you'll find that your finished *.swf files will drop significantly in size, making them load much faster and perform better on other machines.

# CONCLUSION: FLASH TO VIDEO OUTPUT

So, you have aspirations for the bigger screen instead? If your computer has a video card that will route a signal out to your VCR or DVD burner, you're in luck! It's just a matter of publishing your animations to an *.avi format instead. Go to File>Export Movie, and use the *.avi suffix when you name it. Here are a few more pointers:

1) Sound: Although Flash utilizes *.wav and *.mp3 files as library objects, I prefer to use video editing software like Adobe Premiere or Sonic Foundry Vegas to lay down my soundtracks. If you are fortunate to have access to either Premiere or Vegas, you can string your individual shots together with ease, have more control in laying down and cueing individual sound effects, and can manipulate the volume and stereo channels of each sound independent of one another. Flash has some problems with muddy sound during *.avi compression, so I choose to bypass it entirely and use the appropriate software for the purpose.

2) Color correction: Independent of using web-safe colors, there's also a range of video-safe colors that you have to anticipate. Mostly, this is a trial-and-error process, as some colors that look great on your computer will look like utter crap on your TV. Try not to color your work in raw 100% hues of red, green and blue in your Flash animations and you can avoid most of these problems without having to go back and recolor all your work… (insert BLOODCURDLING SCREAM here).

As you can imagine, if your project is a big one, recoloring everything can be a hassle of astronomical proportions; if you're worried about this, start off by converting your color proof from Step Three into a static *.avi in Flash and output 10-15 seconds of it to video, to function as a kind of "animator's test pattern." That way, if your colors vibrate, flare, or have an annoying hue that makes you nauseous, you can fix your color proof before you get too deep into the ink & paint process.

3) Using Movie Clips in Flash: Many animators are familiar with making Movie Clip library symbols in Flash. Movie Clips are great in that they work like imbedded animations designed to loop independent of the main timeline. This feature works fine in a *.swf format, but these same clips will unfortunately appear frozen when you publish out to an *.avi format. This issue can be sidestepped if you avoid using Movie Clips entirely and make all your imbedded animations as Graphic symbols instead, confirming that each instance plays as a Loop in the Properties Box:

HAPPY ANIMATING!

© Copyright 2003 by Gary Parish

rapidograph.deviantart.com