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