The Art of Flash
®
Animation: Creative
Cartooning
Mark Stephen Smith
Wordware Publishing, Inc.
Library of Congress Cataloging-in-Publication Data
Smith, Mark Stephen.
The art of flash animation : creative cartooning / by Mark Stephen Smith.
p. cm.
Includes index.
ISBN-10: 1-59822-026-8 (pbk.)
ISBN-13: 978-1-59822-026-1
1. Computer animation. 2. Flash (Computer file). I. Title.
TR897.7.S58 2007
006.6'96 dc22 2006039455
© 2007, Wordware Publishing, Inc.
All Rights Reserved
1100 Summit Avenue, Suite 102
Plano, Texas 75074
No part of this book may be reproduced in any form or by
any means without permission in writing from
Wordware Publishing, Inc.
Printed in the United States of America
ISBN-10: 1-59822-026-8
ISBN-13: 978-1-59822-026-1
10987654321
0701
Adobe and Flash are registered trademarks of Adobe Systems Incorporated in the United States and/or
other countries.
Other brand names and product names mentioned in this book are trademarks or service marks of their
respective companies. Any omission or misuse (of any kind) of service marks or trademarks should not be
regarded as intent to infringe on the property of others. The publisher recognizes and respects all marks
used by companies, manufacturers, and developers as a means to distinguish their products.
This book is sold as is, without warranty of any kind, either express or implied, respecting the contents
of this book and any disks or programs that may accompany it, including but not limited to implied
warranties for the book’s quality, performance, merchantability, or fitness for any particular purpose.
Neither Wordware Publishing, Inc. nor its dealers or distributors shall be liable to the purchaser or any
other person or entity with respect to any liability, loss, or damage caused or alleged to have been caused
directly or indirectly by this book.
All inquiries for volume purchases of this book should be addressed to Wordware Publishing,
Inc., at the above address. Telephone inquiries may be made by calling:
(972) 423-0090
Dedication
To that wonderful, beautiful reason I was looking for a job in
Atlanta… my darling wife, Albalis.
(Ahem… By the way, that’s how I immediately know if an
unidentified caller is making a solicitation. If they can’t
pronounce my wife’s name properly, it’s a telephone solicitor.)
iii
This page intentionally left blank.
Contents
Preface x
Acknowledgments xv
Section I — Drawing and the Animation Process
Chapter 1 Introduction to The Art of Flash Animation 3
Why Animation? You May Ask 9
Why Flash? You May Ask 11
Why Not Just Learn Flash? 13
Why This Book? 14
Paragraph Q 16
What It Is and What It Ain’t… 16
Chapter 2 Learning to Draw: Tools and Tips 19
Three Methods of Character Design 21
The Frankenstein Method 21
The Observational Method 25
The Random Doodle Method 30
My Drawing Process and Tools 35
Animation Pencils 38
Animation Paper and the Acme Peg Bar 40
Learning to Draw 43
Three Methods of Character Construction 44
The Grid Method 44
The Gingerbread Method 45
The Geometric Construction Method 46
Basic Character Types 56
Basic Hero Construction 56
Basic Heroine Construction 59
Wacky Sidekicks 63
The Villain 65
Copyright Registration: Protecting Your Creation 68
Chapter 3 Thumbnails, Storyboards, and Layout 71
Thumbnails 73
Storyboards 86
The Rule of Thirds 88
Make It Painfully Obvious 89
v
Basic Camera Shots 91
The Wide Shot 93
The Full Shot 93
The Medium Shot 94
The Close-Up 94
The Extreme Close-Up 95
Other Useful Camera Shots 97
Cutaway Shot 98
Cut-in Shot 98
Over-the-Shoulder Shot 98
Point-of-View Shot 100
Noddy Shot 101
Camera Pitfalls to Avoid 101
Jump-cut 101
Camera Moves 104
Zoom In/Zoom Out 104
Truck In/Truck Out 104
Tilt Up/Tilt Down 104
Pan Left/Pan Right 104
Camera Transitions 105
TheCut 105
Fade-In/Fade-Out 106
Dissolve 106
Blur Pan or Zip Pan 106
Layout and Backgrounds 108
Art Marker Backgrounds 110
Chapter 4 Soundtracks and… What’s an Animatic? 113
The Dialogue Track 114
Recording Dialogue at a Professional Studio 122
Recording Dialogue at Home 124
The Music Track 125
Editing Sound Effects 130
Importing Soundtracks in Flash (Formats) 136
Animatic, or “Pose Test,” Defined 136
Chapter 5 An Actor with a Pencil… Um, Pixel 139
A Few Words on Acting 139
Comedy vs. Tragedy: The Power of Sympathy 140
Animation vs. Illustrated Radio 145
Suspension of Disbelief 148
Line of Action and Silhouettes 150
All in the Eyes… Eyelids… or Eyebrows? 156
Read My Lips… The Importance of Lip Synch 158
vi
Contents
Three Methods of Animation 162
Straight-ahead 163
Pose-to-Pose 164
The Best Method 169
Secondary Action and Follow-Through 171
Mechanical Inbetweening vs. “Slowing In” and
“Slowing Out” 172
The Hardest Thing to Animate… So Get It
Over with First! 174
Closing Thoughts on Acting with Pencils and Pixels 180
Section II — Using Flash to Animate Your Drawings
Chapter 6 First Peek inside Flash 183
Installing and Creating a Shortcut 184
Creating a New Flash Document 185
Overview of Flash 186
The Timeline 186
The Toolbox 187
The Stage 187
Creating Your Movie 189
Importing Files 189
Working with Layers 191
Importing the Soundtrack 194
Working with Frames 195
Exporting Your Movie 206
Critiquing Your Movie 213
Chapter 7 Inking, Scanning, and Tablets 217
Drawing with the… Mouse? 217
Oh, for Crying Out Loud… Buy a Wacom Already! 221
The Inking and Scanning Approach 223
Inking with a Pen 224
Inking with a Brush 227
Scanning Your Inked Drawings 233
Scanning Tips 234
Importing Art into Flash 236
Setting Your Stage 237
For Video 237
For Web and Multimedia 238
Document Properties 238
Frame Rate 244
Create from Template 245
Trace Bitmap 248
vii
Contents
Toolbox Basics 254
The Paintbucket Tool 254
The Paintbrush Tool 259
The Pencil Tool 268
The Ink Bottle Tool 274
Gradients with the Paintbucket Tool 275
Creating Your Own Custom Gradient Fills 277
Modifying Gradient Direction and Distribution 279
Drawing in Flash with Onion Skin 280
Necktie Fashions, Talking Bears, and Character Layers 284
Mark’s Favorite Shortcut: Option-Drag 288
Playing Your Animation 291
Chapter 8 Managing Symbols and Scenes 293
Why Should I Care about Symbols? 293
Okay, So What Is a Symbol, and How Do I Create One? 296
Transforming a Symbol 297
Rotating or Resizing a Symbol 312
Creating a Simple Cartoon by Using Tweening 320
Adding a Background to Your Simple Animation 326
What’s an Instance? 330
Shape Tweening 334
Chapter 9 Libraries, Scenes, and Special Effects 345
Nested Symbols or “Meta-Libraries” 346
Breaking Down a Character into Component Symbols 347
Meta-Library Defined… Finally! 357
Lip-Synching with a Meta-Library 358
Working with Scenes 368
Special Effects: Creating Glows with Flash 369
Chapter 10 Preparing Your Work for Video or Web Downloads 375
A Brief History of Dubbing Homemade Cartoons to Video 375
Title Safe and Action Safe Areas 378
Screen Sizes and Ratios 380
Screen Resolution 382
Movie Format: FLA, SWF, or MOV? 383
Exporting as QuickTime for Video 387
Creating a Projector 392
Possible Cross-Platform Conflicts: Fonts, in Particular 394
Chapter 11 Jobs, Colleges, and Film Festivals 397
Finding a Job 398
Interview with Joe Peery, ASIFA-Atlanta President,
and Animation Director, Turner Studios 399
viii
Contents
Interview with Brian de Tagyos, Lead Animator, and
Steve Vitale, Lead Animator, Turner Studios 409
Don’t Wait for Your Fairy Godmother to Appear 412
Top Five “Reality Tips” for Animation Careers 413
Freelancer’s Secret Best Friend: Artist’s & Graphic
Designer’s Market 417
Colleges and Schools 420
Film and Video Festivals 423
Animation and Cartooning Jobs 424
Let Your Fingers Do the Walking 425
Top Five Freelance Business Tips 427
In Closing 434
Appendix A Recommended Reading and Viewing 435
Recommended Reading 435
Recommended Viewing (Currently Available on DVD) 437
Ten Most-Needed Animated DVDs (Currently Unavailable) 442
Appendix B List of Suppliers 448
Art Supplies 448
Music and Sound Effects 448
Educational Discount Software 449
Refurbished Hardware 449
Appendix C Flash Professional 8 Tips, Tools, and Terms 450
Everything You Ever Wanted to Know About Flash
But Were Afraid to Ask For 450
Managing Symbols 451
The Toolbox 453
Personal Favorite Tool: The Paintbrush and Its Options 454
Appendix D About the Author 455
Index 457
ix
Contents
It’s funny how things work out.
I never really started out wanting to be an animator, other than
having a lifelong love for drawing, and now I find myself writing a
“how to” book on drawing animation for Macromedia’s Flash.
As far as animation, I’ve made no secret to my students or
readers of my website (www.marktoonery.com) of how I got inter-
ested in animation.
It started out, I guess, when I was a teenager. I had written a
number of short stories in the Twilight Zone and Alfred Hitchcock
Presents vein, and a couple of fantasy novels that explored the
premise of modernized “ringwraiths” invading a 1986 Alabama high
school. Hey, I was a student in a 1986 Alabama high school, and
writing about such things sure beat the heck out of driving back and
forth repeatedly along the same stretch of road between
Winn-Dixie and Dairy Queen (which seemed to be my classmates’
favorite weekend pastime).
Anyway, I took some of my stories to my Methodist Sunday
school teacher. What was I thinking? you may well wonder. Waving
horror stories and dark, magic-wielding, wizardly epics around my
Sunday morning church class? Well, our teacher was an attractive,
friendly woman in her mid-20s, who raised horses on a ranch. Not
your typical Southern Sunday school teacher, if there exists such a
thing.
She was very supportive. After briefly reading such outlandish
tales, a “typical” Sunday school teacher could have made any
number of predictable, uptight replies. But not Anita. She simply
suggested, “You know, your writing would be well adapted for ani
-
mation. Have you ever thought about writing for animation?”
x
How I Met AnimationHow I Met Animation
Preface
“Animation?” My snobby little teenage self reacted with
scarcely restrained indignance. “Animation is for children.”
That was 1986.
Fast forward to two years later, when three high school friends
and I decided to go on one last group outing together before our
May 1988 graduation. The movie we went to see was The Seventh
Sign. But there was a much more stunning surprise in store for the
audience that far outweighed anything Demi Moore could show us.
Totally without warning, this old-fashioned cartoon music starts
playing, and a baby’s face, next to a white rabbit’s head, zooms out
of a splashy title screen reading, “Baby Herman and Roger Rabbit
xi
Preface: How I Met Animation
The author shares some of his early works with Anita, his favorite Sunday
school teacher, ca. 1986.
in a Maroon Cartoon!” It was followed by a drawing of the rabbit
standing in a frying pan held by the mischievous youngster along
with the words, “Somethin’s Cookin’.”
I had no idea who this Maroon guy was, but he had our undi
-
vided attention. That frosty teenage attitude regarding animation
was already quickly melting away as the cartoon began, because my
first thought was, “Y’know, this is kinda cool! I’m glad they’re
showing a cartoon before the main feature. Gives us a little extra
for our money, with ticket prices nearly four bucks.”
And then the rabbit started to move.
I had never seen animation like that. The rabbit was just stand
-
ing there, counting on his fingers, but that deceptively simple
animation was captivating… even downright spellbinding!
xii
Preface: How I Met Animation
Roger (Rabbit) and me. The author experiences a career epiphany, ca. 1988.
Over the next few minutes, that poor rabbit started chasing that
rotten little baby around the checkerboard kitchen floor. The cam
-
era pulled back and suddenly, there was Roger, standing in a
collapsed refrigerator prop, when a live-action director stepped into
the frame and started shouting at the shamed rabbit for forgetting
his lines.
I don’t remember the exact moment it occurred, but at some
point during the cartoon I thought, “Animation! That’s what I want
to do for a living!”
We all soon realized this was a mere preview, and I knew I was
going to go see that forthcoming movie when it was released the
following month.
Up until that point I had wanted to be a writer, though I drew
most of the illustrations for my own stories. I’d been drawing since
age two — well, before two, my mother always corrects me. Hav-
ing written and directed a successful high school play, Kreechur
(about a lunatic escaping in a high school), and since I had already
enrolled as a theatre major in the nearby University of Montevallo,
I began my college career in drama.
Then my parents announced their move to Montgomery, a
90-minute drive south of Montevallo. I would be joining them and
attending Auburn University Montgomery (where I’d already trans-
ferred my major to art) after finishing my next semester. My
brother mentioned one of his coworkers (at the Montgomery movie
theatre where he had just started) had a friend taking an animation
class.
An animation class? Here in Alabama? How was that even
possible?
Remember, this was near the end of 1989, before Pixar became
a household name, before Toy Story, and about three years before
Jurassic Park forced stop-motion animators to transfer their classic
skills to the computer (or face possible career extinction). I was
just about to learn, upon my enrollment, of this wonderful tool that
was about to revolutionize hand-drawn animation production
forever.
xiii
Preface: How I Met Animation
The computer.
Sure, I’d seen Tron a few years before, but that clunky video
game animation (by today’s standards) just never instilled in me the
idea that you could use the computer to speed up, streamline, and
refine the process of hand-drawn animation.
And that’s what this book is all about.
Note
Companion files for some of the examples are available
at www.wordware.com/files/flash and
/>xiv
Preface: How I Met Animation
Acknowledgments
I’ll try to keep this brief, in the interest of getting someone to
actually read the names of those many individuals who were kind
enough to assist me in the preparation of this book.
Thanks first of all to Wes “Kurv” Beckwith. It so happened that
I was looking for a job in Atlanta, and I made an online application to
a 3D studio there as a storyboard artist. Though I didn’t get that
job, they referred me to Wes (then at Wordware), who was looking
for someone to write a book on Flash animation. You now hold that
book in your hands. (And that, my friends, is the very nature of
networking. Remember that when you’re reading Chapter 11.)
Thanks to Beth Kohler and Tim McEvoy at Wordware for keep-
ing me going, proofreading, and not complaining how my jobs (both
freelance and full-time) delayed progress on this book.
Thanks to Kat Hagan at Westwood College (Midtown Atlanta
campus, of course) for getting me involved with ASIFA-Atlanta).
It’s because of her I was able to meet and interview the fine folks at
Turner Studios, and have a few of them to thank in turn…
Thanks to Joe Peery and Vella Torres at Turner Studios for all
their work promoting ASIFA-Atlanta, and to Joe for allowing me to
interview him. Our half-hour interview stretched to nearly an hour,
but I was rather ashamed I had to cut it short, because although we
were talking some seriously fun stuff about animation, my darn tape
was about to run out.
Thanks to Les Harper (a Turner Studios animator) for taking
time out of his busy day to show me some terrific tips in Flash; I
learned more in that one hour about what a useful tool this software
is than any written manual could ever teach me.
Thanks to Brian de Tagyos and Steve Vitale, Lead Animators
at Turner Studios, for providing an informative pair of interviews
during their break at an ASIFA-Atlanta figure drawing session at
Westwood.
xv
Thanks to my students James Roberge, James Bridgens, Josh
Wilson, Melanie Mendoza, and Scott Pruett for allowing me to
reproduce their class projects here.
And a very special thanks to the great Animation Maestro
Richard Williams, animation director of Who Framed Roger Rabbit,
for keeping the knowledge from animation’s great Golden Era alive
and attempting to pass it along to the next generation through his
Animation MasterClass (I was there in San Francisco, ’97) as well
as his indispensable literary contribution to the craft, The Anima
-
tor’s Survival Kit. My greatest regret is that more of his personal
work is not commercially available on DVD.
(Note to Dick: The animator from Alabama did not let his copy
collect dust on a shelf or coffee table; it’s a well-worn, floppy-paged,
book-marked copy and I carry it with me to all my animation
classes for easy reference and sharing.)
xvi
Acknowledgments
Section ISection I
Drawing
and the
and the
Animation
PRocess
1
This page intentionally left blank.
Richard Williams’ Animation
MasterClass
I might as well go ahead and relate this story first of all, because
you’ll hear the name Richard Williams peppered throughout this
book. His is not exactly a household name like Walt Disney, Chuck
Jones, or even the now-familiar Tex Avery, but he’s won three
Academy Awards, the most recent for a Special Achievement in his
creation of the title character from Who Framed Roger Rabbit, a
Disney/Amblin production on which he served as director of
animation.
3
Introduction toIntroduction to
The Art of FlashThe Art of Flash
Animation
Chapter 1
1997. Evidently the year I was working for KinderCare as a multi
-
media specialist was a busy year.
It was a matter of days after handing in my notice at American
Klassic Designs, where I designed tigers (“Aubies”) and elephants
(“Big Als”) beating each other senseless on the football field, that I
was going to leave for a job at KinderCare to work on CD-ROM
presentations using Macromedia Director. In fact, it may have even
been the day after I’d signed my contract with KinderCare that they
announced plans to move their corporate headquarters from Mont
-
gomery (my new “hometown”) to Portland, Oregon, at the request
of their new CEO.
4 Section I / Drawing and the Animation Process
A “typical” design from my T-shirt art department work (ca. mid-1990s).
To find out whether I had drawn a particular design, my friends and family
knew to look for my signature, which I’d usually hide as a scrimshaw in the
elephant’s tusk or within the tiger’s stripes. It was a habit I started when I didn’t
know whether they’d let me take credit for my work. Once I confessed this
practice to my fellow art department workers, it became a game to find my
hidden signatures.
Despite that, I stood by my notice at the former steady job, and
resolutely decided to go on to KinderCare, knowing the new job
was now far from permanent (it would eventually be nine months
until they finally moved).
It turned out to be a good career move, because it would enable
me to take an animation class from the very man who had inspired
me toward an animation career, Richard Williams.
I worked in the training department and, to my delight, they
would send people in our department on trips almost anywhere in
the country to learn better ways to do our job! (They paid airfare,
hotel accommodations, as well as your meals!) It was my first cor
-
porate experience, and I was impressed.
I was already a subscriber to Animation Magazine, and had
noticed the ad for Richard Williams’ Animation MasterClass the
forthcoming June in San Francisco. I had lamented aloud to my
coworkers how much I’d enjoy going to that three-day seminar, and
was advised, “Go ask Bob [one of the VPs] if they’ll send you on
that trip. The worst he can do is say no!”
I prepared my case, memorized my notecards, and asked to see
Bob. I went in, and was mentally preparing myself for rejection.
“There’s this Animation MasterClass from Roger Rabbit’s anima-
tion director. I really think if I could go to this seminar, it would
really help improve the look of this CD-ROM presentation I’m
working on…” I paused for a breath, expecting a speech about cut
-
ting costs and company downsizing due to the impending Portland,
Oregon, move. Bob cut me off, but in a way I’d hardly anticipated.
“Oh, wow, that would be a great experience for you, wouldn’t
it?” he interjected with genuine enthusiasm.
“Yes… yes, it would!” I replied. I hardly remember the rest of
the conversation, and was now convinced that I would be meeting
Richard Williams, come June.
When the magical day finally arrived, and I stepped to the front
of the theatre sidewalk, I think I was one of the first students to
recognize Richard Williams when he arrived. I’d seen his 30-second
appearance in the 1988 TV special Secrets of Toontown: The Making
of Who Framed Roger Rabbit, which I still show my animation stu
-
dents to this day. (I’m still somewhat disappointed they didn’t
include that in the two-disc set release of Roger!)
Chapter 1 / Introduction to The Art of Flash Animation 5
Ironically, he was standing behind those theatre ropes when he
first appeared, and a crowd that would soon top 300 animators,
directors, and instructors gaped in awe. I figured he’d be standing
behind ropes for the entire seminar… unapproachable, untouch
-
able. In the animation industry, he’s known as the Animation
Maestro, and deservedly so. He garners somewhat the level of
respect that Steven Spielberg has in the film industry.
6 Section I / Drawing and the Animation Process
My first view of Richard Williams in San Francisco in June 1997. Though the ropes
were actually there, the pedestal has been obviously added for dramatic effect.
Moments before, we had thankfully been given name tags with
our point of origin, and I saw a group of animators from Heart of
Texas Productions, and figured, as I introduced myself to them, “I
can let the word y’all slip out occasionally with you guys without
getting too self-conscious.”
I found out that they had done some second unit work on Bugs
Bunny’s Space Jam, and were working on another film for Warner
Brothers, the soon-to-be undeservedly underappreciated Quest for
Camelot, which I’ve since found in the “bargain bin” in Wal-Mart.
(I bought two copies: one for myself and one to give away as a
“Best Film” prize in one of my animation classes.) The Heart of
Texas guys turned out to be a friendly bunch, and I greatly enjoyed
sitting with them in class and hanging out with them during breaks.
At the first break, however, I noticed that Mr. Williams was
gathering his notes just to the lower-left side of the stage, and that
no one was yet bold enough to approach him. I shrugged briefly, and
walked over to introduce myself. (This simple, seemingly bold
approach would eventually reward me by extended conversations
with (1) filmmaker Tim Burton on the Montgomery, Alabama, set
of Big Fish, (2) animation director Don Bluth of American Tail and
Dragon’s Lair during the Atlanta Dragon-Con, and better yet,
(3) my future wife, Albalis!)
Mr. Williams was very friendly, and I related the story to him of
how I looked up at the screen the first time I saw Roger Rabbit, and
exclaimed in my heart, “Animation! That’s what I want to do for a
living!”
“Oh, wow!” Mr. Williams seemed to almost blush with his reply.
“Well, thank you! Thank you very much!”
I got him to autograph the cover of Animation Magazine, where
he was depicted standing with a frame around my favorite white
rabbit. His charming wife, Mo Sutton (with a lovely British accent),
commented, “Oh, your brother took that photo of you, didn’t he,
Dick?”
The next three days flew by all too quickly, and I sat taking
notes as quickly as possible. The problem I encountered was, while
listening to those terrific anecdotes he’d tell, I’d find my mind drift
-
ing away: “Wow… I can’t believe I’m actually sitting here, listening
to Richard Williams, the animation director of Roger Rabbit, and
Chapter 1 / Introduction to The Art of Flash Animation 7
The Thief and The Cobbler, and my favorite Pink Panther movie
titles, Return of the Pink Panther and The Pink Panther Strikes
Again. This is so cool!”
The next thing I’d know, he was finished with his entertaining
anecdote and had hopped back into instructional mode. I could only
struggle to get caught back up. Sadly, when I got home and started
looking over my notes, I discovered gaps in their sequence.
Clay Croker (the voice and animator of Zorak, the perennially
evil mantis from Space Ghost: Coast to Coast), whom I’d met at a
previous Atlanta Dragon-Con, was there at the same time. He was
kind enough to share notes with me afterward, and helped fill in
some gaps later over the phone, after I got back to Montgomery.
Thankfully, I found out that Mr. Williams was soon to publish
his full set of notes and illustrations in the book The Animator’s
Survival Kit, which seems never to collect dust on my bookshelf.
Now that you’ve got an idea of who Richard Williams is, and
hopefully have at least the beginning of an appreciation for his
work, you’ll understand why I refer to him throughout this book.
8 Section I / Drawing and the Animation Process