The Art of Flash ® Animation: Creative Cartooning Mark Stephen Smith Wordware Publishing, Inc. LibraryofCongressCataloging-in-PublicationData Smith,MarkStephen. Theartofflashanimation:creativecartooning/byMarkStephenSmith. p.cm. Includesindex. ISBN-10:1-59822-026-8(pbk.) ISBN-13:978-1-59822-026-1 1. Computeranimation. 2. Flash(Computerfile). I. Title. TR897.7.S582007 006.6'96--dc22 2006039455 ©2007,WordwarePublishing,Inc. AllRightsReserved 1100SummitAvenue,Suite102 Plano,Texas75074 Nopartofthisbookmaybereproducedinanyformorby anymeanswithoutpermissioninwritingfrom WordwarePublishing,Inc. PrintedintheUnitedStatesofAmerica ISBN-10:1-59822-026-8 ISBN-13:978-1-59822-026-1 10 9 8 7 6 5 4 3 2 1 0701 AdobeandFlashareregisteredtrademarksofAdobeSystemsIncorporatedintheUnitedStatesand/or othercountries. Otherbrandnamesandproductnamesmentionedinthisbookaretrademarksorservicemarksoftheir respectivecompanies.Anyomissionormisuse(ofanykind)ofservicemarksortrademarksshouldnotbe regardedasintenttoinfringeonthepropertyofothers.Thepublisherrecognizesandrespectsallmarks usedbycompanies,manufacturers,anddevelopersasameanstodistinguishtheirproducts. Thisbookissoldasis,withoutwarrantyofanykind,eitherexpressorimplied,respectingthecontents 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. NeitherWordwarePublishing,Inc.noritsdealersordistributorsshallbeliabletothepurchaserorany otherpersonorentitywithrespecttoanyliability,loss,ordamagecausedorallegedtohavebeencaused directlyorindirectlybythisbook. AllinquiriesforvolumepurchasesofthisbookshouldbeaddressedtoWordwarePublishing, Inc.,attheaboveaddress.Telephoneinquiriesmaybemadebycalling: (972)423-0090 Dedication Tothatwonderful,beautifulreasonIwaslookingforajobin Atlanta…mydarlingwife,Albalis. (Ahem…Bytheway,that’showIimmediatelyknowifan unidentifiedcallerismakingasolicitation.Iftheycan’t pronouncemywife’snameproperly,it’satelephonesolicitor.) iii This page intentionally left blank. Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . x Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . xv Section I — Drawing and the Animation Process Chapter1 Introduction to The Art of Flash Animation . . . . . . . . . 3 WhyAnimation?YouMayAsk . . . . . . . . . . . . . . . . . . . . 9 WhyFlash?YouMayAsk. . . . . . . . . . . . . . . . . . . . . . . 11 WhyNotJustLearnFlash?. . . . . . . . . . . . . . . . . . . . . . 13 WhyThisBook?. . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 ParagraphQ. . . . . . . . . . . . . . . . . . . . . . . . . . . 16 WhatItIsandWhatItAin’t… . . . . . . . . . . . . . . . . . . . . 16 Chapter2 Learning to Draw: Tools and Tips . . . . . . . . . . . . . 19 ThreeMethodsofCharacterDesign . . . . . . . . . . . . . . . . 21 TheFrankensteinMethod. . . . . . . . . . . . . . . . . . . . . 21 TheObservationalMethod . . . . . . . . . . . . . . . . . . . . 25 TheRandomDoodleMethod . . . . . . . . . . . . . . . . . . . 30 MyDrawingProcessandTools . . . . . . . . . . . . . . . . . . . 35 AnimationPencils . . . . . . . . . . . . . . . . . . . . . . . . . 38 AnimationPaperandtheAcmePegBar . . . . . . . . . . . . . 40 LearningtoDraw . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 ThreeMethodsofCharacterConstruction . . . . . . . . . . . . . 44 TheGridMethod . . . . . . . . . . . . . . . . . . . . . . . . . 44 TheGingerbreadMethod . . . . . . . . . . . . . . . . . . . . . 45 TheGeometricConstructionMethod . . . . . . . . . . . . . . 46 BasicCharacterTypes . . . . . . . . . . . . . . . . . . . . . . . . 56 BasicHeroConstruction . . . . . . . . . . . . . . . . . . . . . 56 BasicHeroineConstruction. . . . . . . . . . . . . . . . . . . . 59 WackySidekicks. . . . . . . . . . . . . . . . . . . . . . . . . . 63 TheVillain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 CopyrightRegistration:ProtectingYourCreation . . . . . . . . . 68 Chapter3 Thumbnails, Storyboards, and Layout. . . . . . . . . . . 71 Thumbnails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Storyboards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 TheRuleofThirds. . . . . . . . . . . . . . . . . . . . . . . . . 88 MakeItPainfullyObvious. . . . . . . . . . . . . . . . . . . . . 89 v Contents BasicCameraShots . . . . . . . . . . . . . . . . . . . . . . . . 91 TheWideShot . . . . . . . . . . . . . . . . . . . . . . . . . 93 TheFullShot . . . . . . . . . . . . . . . . . . . . . . . . . . 93 TheMediumShot. . . . . . . . . . . . . . . . . . . . . . . . 94 TheClose-Up . . . . . . . . . . . . . . . . . . . . . . . . . . 94 TheExtremeClose-Up. . . . . . . . . . . . . . . . . . . . . 95 OtherUsefulCameraShots. . . . . . . . . . . . . . . . . . . . 97 CutawayShot . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Cut-inShot . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Over-the-ShoulderShot . . . . . . . . . . . . . . . . . . . . 98 Point-of-ViewShot. . . . . . . . . . . . . . . . . . . . . . . 100 NoddyShot. . . . . . . . . . . . . . . . . . . . . . . . . . . 101 CameraPitfallstoAvoid . . . . . . . . . . . . . . . . . . . . . 101 Jump-cut . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 CameraMoves . . . . . . . . . . . . . . . . . . . . . . . . . . 104 ZoomIn/ZoomOut . . . . . . . . . . . . . . . . . . . . . . 104 TruckIn/TruckOut . . . . . . . . . . . . . . . . . . . . . . 104 TiltUp/TiltDown . . . . . . . . . . . . . . . . . . . . . . . 104 PanLeft/PanRight. . . . . . . . . . . . . . . . . . . . . . . 104 CameraTransitions. . . . . . . . . . . . . . . . . . . . . . . . 105 TheCut . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Fade-In/Fade-Out . . . . . . . . . . . . . . . . . . . . . . . 106 Dissolve . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 BlurPanorZipPan . . . . . . . . . . . . . . . . . . . . . . 106 LayoutandBackgrounds . . . . . . . . . . . . . . . . . . . . . . 108 ArtMarkerBackgrounds. . . . . . . . . . . . . . . . . . . . . 110 Chapter4 Soundtracks and… What’s an Animatic? . . . . . . . . 113 TheDialogueTrack . . . . . . . . . . . . . . . . . . . . . . . . . 114 RecordingDialogueataProfessionalStudio . . . . . . . . . . 122 RecordingDialogueatHome . . . . . . . . . . . . . . . . . . 124 TheMusicTrack. . . . . . . . . . . . . . . . . . . . . . . . . . . 125 EditingSoundEffects . . . . . . . . . . . . . . . . . . . . . . . . 130 ImportingSoundtracksinFlash(Formats) . . . . . . . . . . . 136 Animatic,or“PoseTest,”Defined . . . . . . . . . . . . . . . . . 136 Chapter5 An Actor with a Pencil… Um, Pixel . . . . . . . . . . . . 139 AFewWordsonActing . . . . . . . . . . . . . . . . . . . . . . . 139 Comedyvs.Tragedy:ThePowerofSympathy . . . . . . . . . . 140 Animationvs.IllustratedRadio. . . . . . . . . . . . . . . . . . . 145 SuspensionofDisbelief . . . . . . . . . . . . . . . . . . . . . . . 148 LineofActionandSilhouettes . . . . . . . . . . . . . . . . . . . 150 AllintheEyes…Eyelids…orEyebrows? . . . . . . . . . . . . 156 ReadMyLips…TheImportanceofLipSynch . . . . . . . . . . 158 vi Contents ThreeMethodsofAnimation. . . . . . . . . . . . . . . . . . . . 162 Straight-ahead . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Pose-to-Pose . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 TheBestMethod. . . . . . . . . . . . . . . . . . . . . . . . . 169 SecondaryActionandFollow-Through. . . . . . . . . . . . 171 MechanicalInbetweeningvs.“SlowingIn”and “SlowingOut” . . . . . . . . . . . . . . . . . . . . . . . . . 172 TheHardestThingtoAnimate…SoGetIt OverwithFirst! . . . . . . . . . . . . . . . . . . . . . . . . 174 ClosingThoughtsonActingwithPencilsandPixels . . . . . . . 180 Section II — Using Flash to Animate Your Drawings Chapter6 First Peek inside Flash . . . . . . . . . . . . . . . . . . 183 InstallingandCreatingaShortcut . . . . . . . . . . . . . . . . . 184 CreatingaNewFlashDocument. . . . . . . . . . . . . . . . . . 185 OverviewofFlash. . . . . . . . . . . . . . . . . . . . . . . . . . 186 TheTimeline . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 TheToolbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 TheStage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 CreatingYourMovie. . . . . . . . . . . . . . . . . . . . . . . . . 189 ImportingFiles . . . . . . . . . . . . . . . . . . . . . . . . . . 189 WorkingwithLayers. . . . . . . . . . . . . . . . . . . . . . . 191 ImportingtheSoundtrack . . . . . . . . . . . . . . . . . . . . 194 WorkingwithFrames . . . . . . . . . . . . . . . . . . . . . . 195 ExportingYourMovie. . . . . . . . . . . . . . . . . . . . . . . . 206 CritiquingYourMovie. . . . . . . . . . . . . . . . . . . . . . . . 213 Chapter7 Inking, Scanning, and Tablets . . . . . . . . . . . . . . 217 Drawingwiththe…Mouse? . . . . . . . . . . . . . . . . . . . . 217 Oh,forCryingOutLoud…BuyaWacomAlready!. . . . . . . . 221 TheInkingandScanningApproach. . . . . . . . . . . . . . . . . 223 InkingwithaPen. . . . . . . . . . . . . . . . . . . . . . . . . 224 InkingwithaBrush . . . . . . . . . . . . . . . . . . . . . . . 227 ScanningYourInkedDrawings . . . . . . . . . . . . . . . . . 233 ScanningTips . . . . . . . . . . . . . . . . . . . . . . . . . 234 ImportingArtintoFlash . . . . . . . . . . . . . . . . . . . . . . 236 SettingYourStage. . . . . . . . . . . . . . . . . . . . . . . . . . 237 ForVideo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 ForWebandMultimedia. . . . . . . . . . . . . . . . . . . . . 238 DocumentProperties . . . . . . . . . . . . . . . . . . . . . . . . 238 FrameRate . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 CreatefromTemplate . . . . . . . . . . . . . . . . . . . . . . 245 TraceBitmap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 vii Contents ToolboxBasics. . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 ThePaintbucketTool. . . . . . . . . . . . . . . . . . . . . . . 254 ThePaintbrushTool . . . . . . . . . . . . . . . . . . . . . . . 259 ThePencilTool. . . . . . . . . . . . . . . . . . . . . . . . . . 268 TheInkBottleTool. . . . . . . . . . . . . . . . . . . . . . . . 274 GradientswiththePaintbucketTool . . . . . . . . . . . . . . . . 275 CreatingYourOwnCustomGradientFills . . . . . . . . . . . 277 ModifyingGradientDirectionandDistribution . . . . . . . . 279 DrawinginFlashwithOnionSkin . . . . . . . . . . . . . . . . . 280 NecktieFashions,TalkingBears,andCharacterLayers . . . . . 284 Mark’sFavoriteShortcut:Option-Drag . . . . . . . . . . . . . . 288 PlayingYourAnimation . . . . . . . . . . . . . . . . . . . . . . . 291 Chapter8 Managing Symbols and Scenes . . . . . . . . . . . . . 293 WhyShouldICareaboutSymbols? . . . . . . . . . . . . . . . . 293 Okay,SoWhatIsaSymbol,andHowDoICreateOne? . . . . . 296 TransformingaSymbol . . . . . . . . . . . . . . . . . . . . . . . 297 RotatingorResizingaSymbol. . . . . . . . . . . . . . . . . . 312 CreatingaSimpleCartoonbyUsingTweening . . . . . . . . . . 320 AddingaBackgroundtoYourSimpleAnimation . . . . . . . . . 326 What’sanInstance? . . . . . . . . . . . . . . . . . . . . . . . . . 330 ShapeTweening . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 Chapter9 Libraries, Scenes, and Special Effects . . . . . . . . . . 345 NestedSymbolsor“Meta-Libraries” . . . . . . . . . . . . . . . 346 BreakingDownaCharacterintoComponentSymbols . . . . . . 347 Meta-LibraryDefined…Finally! . . . . . . . . . . . . . . . . . . 357 Lip-SynchingwithaMeta-Library . . . . . . . . . . . . . . . . . 358 WorkingwithScenes . . . . . . . . . . . . . . . . . . . . . . . . 368 SpecialEffects:CreatingGlowswithFlash . . . . . . . . . . . . 369 Chapter10 Preparing Your Work for Video or Web Downloads . . . 375 ABriefHistoryofDubbingHomemadeCartoonstoVideo. . . . 375 TitleSafeandActionSafeAreas . . . . . . . . . . . . . . . . . . 378 ScreenSizesandRatios. . . . . . . . . . . . . . . . . . . . . . . 380 ScreenResolution . . . . . . . . . . . . . . . . . . . . . . . . . . 382 MovieFormat:FLA,SWF,orMOV? . . . . . . . . . . . . . . . . 383 ExportingasQuickTimeforVideo . . . . . . . . . . . . . . . . . 387 CreatingaProjector. . . . . . . . . . . . . . . . . . . . . . . . . 392 PossibleCross-PlatformConflicts:Fonts,inParticular. . . . . . 394 Chapter11 Jobs, Colleges, and Film Festivals . . . . . . . . . . . . 397 FindingaJob. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 InterviewwithJoePeery,ASIFA-AtlantaPresident, andAnimationDirector,TurnerStudios . . . . . . . . . . . . 399 viii Contents InterviewwithBriandeTagyos,LeadAnimator,and SteveVitale,LeadAnimator,TurnerStudios. . . . . . . . . . 409 Don’tWaitforYourFairyGodmothertoAppear . . . . . . . . 412 TopFive“RealityTips”forAnimationCareers . . . . . . . . 413 Freelancer’sSecretBestFriend:Artist’s&Graphic Designer’sMarket. . . . . . . . . . . . . . . . . . . . . . . . . 417 CollegesandSchools . . . . . . . . . . . . . . . . . . . . . . . . 420 FilmandVideoFestivals . . . . . . . . . . . . . . . . . . . . . . 423 AnimationandCartooningJobs. . . . . . . . . . . . . . . . . . . 424 LetYourFingersDotheWalking . . . . . . . . . . . . . . . . 425 TopFiveFreelanceBusinessTips. . . . . . . . . . . . . . . . 427 InClosing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 AppendixA Recommended Reading and Viewing . . . . . . . . . . 435 RecommendedReading . . . . . . . . . . . . . . . . . . . . . . . 435 RecommendedViewing(CurrentlyAvailableonDVD). . . . . . 437 TenMost-NeededAnimatedDVDs(CurrentlyUnavailable). . . 442 AppendixB List of Suppliers. . . . . . . . . . . . . . . . . . . . . . 448 ArtSupplies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448 MusicandSoundEffects . . . . . . . . . . . . . . . . . . . . . . 448 EducationalDiscountSoftware. . . . . . . . . . . . . . . . . . . 449 RefurbishedHardware . . . . . . . . . . . . . . . . . . . . . . . 449 AppendixC Flash Professional 8 Tips, Tools, and Terms . . . . . . . 450 EverythingYouEverWantedtoKnowAboutFlash ButWereAfraidtoAskFor. . . . . . . . . . . . . . . . . . . . . 450 ManagingSymbols. . . . . . . . . . . . . . . . . . . . . . . . . . 451 TheToolbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 PersonalFavoriteTool:ThePaintbrushandItsOptions. . . . 454 AppendixD About the Author . . . . . . . . . . . . . . . . . . . . . 455 Index. . . . . . . . . . . . . . . . . . . . . . . . . . 457 ix
Description: