Table Of ContentFlash Cartoon Animation
Learn From The Pros
Glenn Kirkpatrick
Kevin Peaty
DESIGNER TO DESIGNER,.
on Apress• company
Flash Cartoon Animation
Learn From The Pros
© 2002 Apress
AU rights reserved. No part of this work may be reproduced or transmitted in any Credits
form or by any means, electronic or mechanical, including photocopying.
Reviewers Commissioning Editor
recording. or by any information storage or retrieval system, without the prior
Toni Laukka: Andy Corsham
written permission of the copyright owner and the publisher.
www.apukeittio.com
Mata Haggis: Editors
ISBN 978-1-59059-207-6 ISBN 978-1-4302-1090-7 (eBook) www.matazone.co.uk jon Bounds
DOI 10.1007/978-1-4302-1090-7 Tim jones: Libby Hayward
www.animaxinteractive.com
Project Manager
Trademarked names may appear in this book. Rather than use a trademark symbol Editorial Board Vicky ldiens
with every occurrence of a trademarked name, we use the names only in an Steve Anglin
Graphic Editor
editorial fashion and to the benefit of the trademark owner, with no intention of Dan Appleman Ty Bhogai
infringement of the trademark. Ewan Buckingham
Gary Cornell Proofreader
Distributed to the book trade in the United States by Springer-Verlag New York, Inc., Tony Davis Cathy Succamore
233 Spring Street, 6th Floor, New York, NY 10013 and outside the United States by jason Gilmore
Springer-Verlag GmbH & Co. KG, Tiergartenstr. 17, 69112 Heidelberg. Germany. jonathan Hassell Indexer
Chris Mills Simon Collins
In the United States: phone 1-800-SPRINGER, e-mail orders®springer-ny.com, or Dominic Shakeshaft
visit http://www.springer-ny.com. Outside the United States: fax +49 6221 345229, jim Sumser Cover Design
e-mail orders®springer.de, or visit http://www.springer.de. Kurt Krames
Managing Editor Katy Freer
Sonia Mullineux
The information in this book is distributed on an "as is" basis, without warranty.
Although every precaution has been taken in the preparation of this work, neither
the author(s) nor Apress shall have any liability to any person or entity with
respect to any loss or damage caused or alleged to be caused directly or indirectly
by the information contained in this work.
Author Biographies
GLENN KIRKPATRICK KEVIN PEATY
Born angry in 1964 it doesn't take Glenn Kirkpatrick long to Kevin has been involved in the animation industry for twenty
realize there are serious problems with the world. Despising five years. working for companies such as Hanna-Barbera and
society for its relentless pursuit of banality and compromise he Walt Disney. In that time he has worked as a character
embarks upon a lifelong campaign of visual terror that animator, animation character lead. animation director and
eventually leads to this book. unit director on projects for television. direct to video and
1982: Cuts his teeth on television animation during the feature films.
Saturday morning animation wars of the late 1900's while
working for companies such as Hanna-Barbera and Walt Disney He's worked on films he's proud to have been involved in and
in Australia and japan. some he'd rather forget... but that which does not kill you
1990: Is recruited by major American production companies makes you stronger and rather than become bitter and twisted,
into a special operations unit of animation directors for or as well as becoming bitter and twisted. he chose to turn his
missions deep into the heart of Asia. While under his command formidable talent and skills to the world of net animation. His
as layout and animation supervisor, over 150 half hours of long time friend and colleague Glenn Kirkpatrick convinced
television animation are produced for children and adults alike him that as well as giving almost total freedom to air his vile
including high profile series such as "Rugrats" and "King of the and misguided views. the Flash program would guarantee Peaty
Hill". unparalleled fame and wealth. Kirkpatrick, using the forum of
1999: Returns to Australia having been groomed for a top slot his subversive and morally suspect web site
in the corporation. He goes for himself instead. www.funnyazhell.com. introduced Peaty to a dark,
2000: Learns Flash and creates the first Spawn of Satan subterranean world populated by disenfranchised 2D
cartoons. Tries to get them played on the Internet, his attempts animators every bit as sick and pathetic as they were.
are restricted. Seems people didn't dig what he had to tell
them. And the rest. as they say, is history.
2001: Stages operation www.funnyazhell.com with combined
local forces Kevin Peaty; it's rated a Peaty continues to work in the animation industry as well as
major success. produce Flash films of dubious intent. He lives with his wife
2002: Forms Australia's premier flash animation studio, Lianne, his son james and two cats in Coogee, Australia where
Funnyazhell Animation, which currently produces the local Montagnard tribepeople worship him, like a God.
high quality Flash animation for the web and
broadcast television.
Someday this war's going to end ...
Flash Cartoon Animation: Learn From The Pros
INTRODUCTION 1
Flash animation and this book .................................................................................... 1
From the editors - using this book ............................................................................ 3
Download files .......................................................................................................... 3
Layout conventions .................................................................................................. 3
friends of ED forums and feedback ................................................................... .4
1: STORYLINE Be SCRIPTING 5
Idea ...................................................................................................................................... 5
Things to think about ....................................................................................................6
Story ....................................................................................................................................7
Tone ....................................................................................................................................8
Are you sitting comfortably? ......................................................................................9
Outline ............................................................................................................................1 0
The pitch ..........................................................................................................................1 0
Script ................................................................................................................................1 0
The Boy Who Cried Wolf ............................................................................................ 11
Refining the script ........................................................................................................ 13
Over to you .................................................................................................................... 14
2: DRAWING WITH FLASH 15
Tablets ..............................................................................................................................1 5
The Tools panel .............................................................................................................. 16
Paint Bucket tool .................................................................................................... 19
Eraser tool ................................................................................................................2 1
line tool ....................................................................................................................2 2
Using the Line Tool ......................................................................................................2 3
Eyedropper tool ......................................................................................................2 9
Arrow tool ................................................................................................................ 30
Selecting objects ............................................................................................................ 30
Symbols ....................................................................................................................3 0
Non symbol images .............................................................................................. 31
Lasso tool .................................................................................................................. 32
Symbols ............................................................................................................................3 4
Graphic symbols .................................................................................................... 34
Movie clip symbols ................................................................................................ 34
Button symbols ...................................................................................................... 34
Converting an image to a symbol .................................................................... 35
The library ...................................................................................................................... 36
Organizing your Library ........................................................................................ 36
Placing symbols on the stage from the Library ............................................ 37
Editing symbols ......................................................................................................3 7
Optimizing drawings ....................................................................................................4 4
Optimizing lines ......................................................................................................4 4
Straightening curves ..............................................................................................4 7
Smoothing lines ......................................................................................................4 7
Develop your own style ..............................................................................................4 8
Over to you ....................................................................................................................4 8
Table of Contents
3: ART DIRECTION 49
line work ........................................................................................................................S O
Black line ....................................... ,. ......................................................................... 51
Self-color line .................................................................... ., ................................... .52
Color ................................................................................................................................S 3
Design ........................................................................................................................S 3
Characters ........................................................................................................................S 4
Keep it simple ...................................................................................................., . . .54
Separate elements .......................... ., ..................................................................... .56
Model sheets ............................................................................................................, . ... .59
The cast ....................................................................................................................6 0
Backgrounds ..................................................................................................................6 3
Establishing shots ....................................................................................................6 3
Color styling ....................................................................................................................6 6
Over to you ....................................................................................................................6 8
4: STORYBOARDING 69
Laying out a storyboard ..............................................................................................6 9
From words to pictures: visualizing your story .............................................. 70
Composition and framing ..........................................................................................7 0
Basic shots ................................................................................................................7 0
Flash and the virtual camera .............................................................................. 72
Screen direction ......................................................................................................7 3
Storytelling through composition ......................................................................7 S
Using the camera ..........................................................................................................7 6
Camera moves ........................................................................................................7 6
Using the camera to aid narrative ....................................................................8 1
Using the camera to provide a sense of depth ............................................ 82
Using the camera to economize on animation ............................................ 87
Dissolves, fades and wipes ..........................................................................................8 9
The Boy Who Cried Wolf ............................................................................................9 2
Scene 1 ......................................................................................................................9 2
Scene 2 ......................................................................................................................9 2
Scene 3 ......................................................................................................................9 3
Scene 4 ....................................................................................................................9 3
SceneS ......................................................................................................................9 3
Scene 6 ......................................................................................................................9 4
Scene 7 ......................................................................................................................9 4
Scene 8 ......................................................................................................................9 4
Scene 9 ......................................................................................................................9 S
Scene 10 ....................................................................................................................9 S
Scene 11 ....................................................................................................................9 S
Scene 12 ....................................................................................................................9 6
The storyboard as a whole ........................................................................................9 6
Drawing quality ......................................................................................................9 8
Level of detail ........................................................................................................9 8
Over to you ....................................................................................................................9 8
Flash Cartoon Animation: Learn From The Pros
5: LAYOUT 1-CREATING AN ANIMATIC 99
How layout worked traditionally ..............................................................................9 9
The Flash advantage ............................................................................................ 10 0
Movie properties ........................................................................................................ 10 0
Frame rate .............................................................................................................. 10 0
Aspect ratio .......................................................................................................... 10 0
TV cut off .............................................................................................................. 103
Creating layers ............................................................................................................ 10 7
Importing the storyboard ........................................................................................ 10 8
Scaling the storyboard panels .......................................................................... 11 0
Adding and deleting frames .................................................................................... 112
Creating scenes ............................................................................................................ 113
Creating a pan ............................................................................................................ 116
Converting images to symbols ........................................................................ 117
Layer control ........................................................................................................ 117
Starting to pan ...................................................................................................... 118
Tweening basics .................................................................................................... 120
Creating a camera truck .......................................................................................... 121
Transitions ....................................................................................................................1 23
Creating a fade .................................................................................................... 123
Creating a cross-dissolve ............................................................. :. ..................... 126
Completing the animatic -fade to black ............................................................ 130
Take a peek .................................................................................................................. 131
Over to you .................................................................................................................. 132
6: LAYOUT 2-SOUND 8c TESTING 133
Recording and importing sound ............................................................................ 133
File types and quality .......................................................................................... 133
Editing ......................................................................................................................1 34
Importing ................................................................................................................ 134
Playing sound in Flash .............................................................................................. 136
Event sounds ........................................................................................................ 136
Streaming sounds ................................................................................................ 136
Setting up sound within the animatic ............................................................ 137
Testing your film ........................................................................................................ 138
Testing scenes for timing .................................................................................. 139
Over to you .................................................................................................................. 148
7: ANIMATION PRINCIPLES 149
limited animation ...................................................................................................... 149
Key posing ....................................................................................................................1 50
X-sheets .......................................................................................................................... 151
ln-betweening .............................................................................................................. 153
Timing ............................................................................................................................1 55
Cushions .................................................................................................................. 156
Staggers .................................................................................................................. 159
Stretch and squash .............................................................................................. 161
Weight ....................................................................................................................1 62
line of action .............................................................................................................. 163
Arcs ................................................................................................................................1 65
Table of Contents
Foreshortening ............................................................................................................ 167
Action and anticipation ............................................................................................ 168
The zip off .............................................................................................................. 169
The cartoon take .................................................................................................. 171
Secondary action or follow through .............................................................. 172
Cycles .............................................................................................................................. 174
Walk cycles ............................................................................................................ 175
Run cycles .............................................................................................................. 181
Separating levels .......................................................................................................... 184
Animating acting and dialogue .............................................................................. 187
Body language and gesture .............................................................................. 187
Facial expression .................................................................................................. 188
Dialogue .................................................................................................................. 190
Top tips when animating acting .............................................................................. 192
Working rough ...................................................................................................... 194
Using the model sheet ...................................................................................... 194
Getting the feel right .......................................................................................... 195
Over to you .................................................................................................................. 196
8: ANIMATING IN FLASH 197
Motion tweening ........................................................................................................ 197
Animating stretch and squash .......................................................................... 200
Converting tweens to keyframes .................................................................... 202
Key posing ....................................................................................................................2 03
Cleaning up in Flash ............................................................................................ 205
Timing ......................................................................................................................2 08
Redefining and improvement .......................................................................... 211
Easing ......................................................................................................................2 12
Pop and cushion .......................................................................................................... 214
Cycles ..............................................................................................................................2 15
Symbols and layers .............................................................................................. 216
Moving through a scene .................................................................................... 219
Walk cycles ....................................................................................................................2 21
Looping ..................................................................................................................2 25
Panning walk cycles ............................................................................................ 225
Animating dialogue in Flash .................................................................................... 226
Special effects in Flash .............................................................................................. 227
Alpha settings ........................................................................................................2 27
Cast shadows ........................................................................................................ 228
Drop shadows ...................................................................................................... 230
Separate element effects .................................................................................. 230
Learn from everywhere ............................................................................................2 30
Over to you ..................................................................................................................2 32
9: ANIMATING 'THE BOY WHO CRIED WOLF' 233
Scene 1 ........................................................................................................................2 33
Camera pans ........................................................................................................ 233
Cycles ......................................................................................................................2 35
Sound effects ......................................................................................................2 36
Scene 2 ..........................................................................................................................2 36
Flash Cartoon Animation: Learn From The Pros
Scene 3 ..........................................................................................................................2 37
Scene 4 ..........................................................................................................................2 38
Scene 5 ..........................................................................................................................2 38
Scene 6 ..........................................................................................................................2 39
Staggers ................................................................................................................2 39
Scene 7 ..........................................................................................................................2 40
Copying frames to reuse a scene .................................................................... 240
Swapping symbols ..............................................................................................2 40
Scenes 8, 9, and 10 ....................................................................................................2 41
Scene 11 ........................................................................................................................2 42
Problems with cross-dissolves .......................................................................... 242
Panning tricks ........................................................................................................2 43
Trucking tips ..........................................................................................................2 43
The first screening ......................................................................................................2 44
Over to you ................................................................................................................2 44
10: OUTPUT 8c PUBLISHING 245
Preparing for the Internet ........................................................................................ 245
Preloaders ..............................................................................................................2 46
Making a preloader ............................................................................................2 47
Stop buttons and looping .................................................................................. 252
Publishing your movie for the Internet ................................................................ 256
Video output ................................................................................................................2 58
Exporting a movie on a PC ................................................................................2 59
Exporting a movie on a Mac ............................................................................ 261
That's all folks ..............................................................................................................2 62
Over to you ..................................................................................................................2 62
OVER TO YOU 263
INDEX 265
INTRODUCTION
It was the best of times, it was the worst of times. New technology had created amazing opportunities for
the animation industry to realize ideas never before thought possible. The impact of this technology has
meant that studios have had to restructure and adapt to a changing marketplace. The demands of an
increasingly sophisticated and discerning audience and the response of studios trying to keep pace with
those demands has meant that the artists involved in the business have had to learn and adapt, or fall by
the wayside. Studios have come and gone. Some markets have dried up while others have appeared.
Computer animation has taken over from traditional 2D animation as the medium of choice.
The more things change, the more they stay the same. Animation is still created by animators, a good
story is still a good story, a great film is a great piece of entertainment and a computer is really just
another pencil, albeit a very sharp one!
From its humble beginnings a century ago, animation has grown into a business generating millions of
dollars a year. Major film studios invest enormous amounts of money and employ the talents of hundreds
of artists and thousands of executives on a single animated film, usually resulting in impressive box office
returns.
From scratchy black and white silent shorts, through to the introduction of color and sound, animation
has embraced the latest technology to produce films of amazing virtuosity and scope. TV, feature films,
3D; animation has expanded into many and varied arenas.
This genre of filmmaking came to be defined by large budgets, crews, and numbers of executives, and the
opportunity for the lone artist to present his singular vision seemed largely lost - if in fact it ever existed.
The constraints of big budgets and bigger investors tends to take the edge off any artistic statement.
Where was the platform for the maverick animator, unencumbered by investors, focus groups, marketing
gurus and money? Ironically the answer came from the aforementioned new technology: The answer was
Flash!
Flash animation and this book
Flash was a program designed for web designers and then co-opted by a few canny traditional 2D
animators who realized its potential immediately. The limitations of this simple program only fuelled
greater ingenuity and creativity. In Flash one artist can do it all....for next to nothing!
Making animated films in Flash can be a liberating experience, whether you're a jaded 2D animator
looking for an opportunity to express your pent up angst, or a complete novice to animation and
filmmaking who is looking for the opportunity to unleash your artistic statement on an unsuspecting
public. Flash allows you opportunity with little or no money or artistic compromise.
Flash also offers the chance to display your film on the Internet,
accessing a huge and varied audience.
