BU eee rie) POE) CI includes DVD for Mac & PC Sample source files and killer Chris Georgenes extensions for Flash animatorsHOWTO eat Adobe SFlash(s5 The art of design and animation Chris Georgenes # RS) aFocal Press s an imprint of Elsevier The Boulevard, Langford Lane, Kidlington, Oxford, OX5 18, UK 30 Corporate Drive, Suite 400, Burlington, MA 01803, USA. Fist published 2010, Copyright © 2010 Chris Georgenes, Elsevier Ltd. All rights reserved. The right of Chris Georgenes tobe identified asthe author ofthis work has been asserted in accordance with the Copyright, Designs and Patents Act 1988 No part ofthis publication may be reproduced or transmitted in any form or by any means eleetranie oF mechanical, including photocopying, recording, or any information storage and retrieval system, without permission in writing from the publisher Details on how to seek permission, further information about the Publishers permissions polices and our arrangement with organizations such as the Copyright Clearance Center and the Copyright Licensing Agency, can be found at our website: wwwelseviereom/permissions This book and the individual contributions contained in tare protected under copyright by the Publisher (other than as may be noted herein). Notices Knowledge and best practice inthis field are constantly changing. As new research and experience broaden our understanding, changes in esearch methods, professional practices, or medical treatment may become necessary Practitioners and researchers must always ely on thelr own experience and knowledge in evaluating and using ny information, methods, compounds, or experiments described herein. In using such information or methods they ‘shouldbe mindful of ther own safety and the safety of others, including parties for whom they have a professional responsibility. To the fullest extent of the law, neither the Publisher nor the authors, contributors, or editors, assume any lity for any injury andor damage to persons or property as a matter of products lability, negligence or otherwise, or from ny use or operation of any methods, products, instructions, or ideas contained in the material herein British Library Cataloguing in Publication Data A catalogue record for this book is available from the British Library Library of Congress Control Number: 2010830291 ISBN: 978-0-240-52207-4 For information on all Facal Press publications vst our website at www.ocalpress.com Printed and bound in China 1011211 10987654321 Working together to grow libraries in developing countries weewichevietcom | wwwbookaid.erg | wonsibreorg, EES Serr ech aeForeword Over ten years ago in a dimly lit basement, I started using the Rash authoring tool to create unpalatable, short, frame-by-frame animations - and discovered it was much easier than other tools Thad been using to do the same thing, I's hard to believe what Flash has become over the years, and how many more people are out there using it to create content and share their work. One ofthe nice and inspiring things about Flash is tat it attracts so many different users, from creative animators to hard-core programmers, and all sorts of people in-between. || was assigned to work on testing a new type of motion tween for Flash a few years ago. Because the feature was already developed (but atthe time untested}, | needed to learn how everything worked from the ground up. Similar to other migrating Fash users, | have experienced and understand the learning curve between new and classic motion tweens! The new motion tweens are a different way of thinking about animation in lash, however they do offer many advantages such as fewer “broken tweens, attached motion paths, independent tweenable properties, tween presets, and preset eases. Some animations 've created in the past were faster or easier to accomplish after a bit of time spent with the new model. What about using “classic” motion tweens? Yes, there are some workflows where classic tweens are necessary and a couple cases where they're faster to use. However, the goal isto enhance and improve new motion tweens and the Motion Editor so using them is always possible and preferred, You certainly don’t need to lear everything there is to know about Flash and ActionScript to master the tool - you can choose to focus your talents on design or development, or challenge yourself from time to time by crossing over between graphics and code. But now that Flash i full of features and capable of so much, the tools can seem rather daunting to learn. But if you have helpful resources at Your side, like this book, learning Flash doesn't need to be difficult. | believe the Key to learning Flash is to keep it simple when you start out, take it slow, use the available resources (lke books), and try to be patient. Also don't be afraid to go online and ask for help, we've all been there! Learning Flash takes some time, but it isa lot of fun and very rewarding. Flash isan incredible tool for expressing your creativity, style, and unique ideas. Whether you're a new or existing Flash user, now is a great time to learn or use the software and get involved with the Flash community online. | hope that you use Flash with this book to get inspired, learn valuable new tricks and techniques, and create some wonderful animation. And of course, make sure to have fun with the software while you read and learn all about how to animate! Jen deHaan Sr. Software Quality Engineer, Flash Authoring ‘Adobe Systems Inc. viiHow to cheat, and How to cheat, and why The truth about cheating The word “cheat”, in most cases, has a negative connotation. To “cheat” implies deception and trickery associated with a fraudulent act. In some ways this book will show you how you can trick your audience, not unlike a magician’s “sleight of hand" technique where you can control not only what is being seen, but how the viewer sees it, But this book will certainly nat teach you how to be a frau. To “cheat” in Flash is to find shortcuts to help you work more efficiently and economically. Time translates to money and if you can deliver a great looking project on time, that means you stayed within budget and everybody wins. My philosophy At the end of the day, if| didn't have any fun, then it would be time to find another job. But | had to lear this lesson the hard way a few years ago while working with an animation company designing a network television series. | was designing the ‘main characters for a show called Science Court (ABC), and there was a conflict between us and the network as to the choice of skin color for one of the characters. {liked green and the network preferred orange. | felt strongly that my color choice was the best and | admit | may have let myself became emotionally charged about the issue. One day | went to lunch with the animation director and we were casually talking about the color issue. It was something he said that changed my outlook (on work from that day forward: "We must have pretty cool jobs when the most stressful part of our day is whether or not @ character laoks too much like a frog" | stopped dead in my tracks, instantly realizing how right he was and how silly | felt about the matter. After lunch we returned to the studio where | immediately changed the character to orange and never uttered another word about it. | even tended up liking the orange more than the green. Since then, my philosophy has always been to have fun no matter how stressful my workday gets. My jo, in ‘comparison to all other possible occupations, i the best job even on the worst of days. Workthroughs and examples Each workthrough in this book is designed as a double-page spread so you can prop the book up behind your keyboard or next to your monitor as a visual reference while working alongside it. Many of the workthroughs are real-world client projects | have been commissioned to design and animate. Using these projects as examples hhas allowed me to provide you with a CD containing the source files for you to openand explore. Each chapter ends with an Interlude in which | talk about everything from my own experiences as a designer and animator as well as some relevant and Useful information based on the topic at hand. Flash terminology "Not much has changed when it comes to terminology in Fash. Symbols have bbeen around since the beginning and so has the behavior any symbol can have (Graphic, Movie Clip and Button). The Timeline is essentially the same with a few rnew enhancements, namely the new Motion Editor and new Motion tween model Nesting pertains to animations within symbols and remains as one of the strengths of Flash animation. Ifyou already have a basic understanding of Flash then you will ‘most likely be familiar with most of the terminology in this book. If there's anything that you come across that is unfamiliar, try searching the Flash Help docs or the reader's forum at wwrw.keyframer.com/forums What's on the CO? Lots of cool stuff so check it out! In almost all cases | have provided the actual FLA file for every tutorial in this book! But | didn’t stop there. | have also included as ‘many free extensions as | could find. There are a couple of cases where | was unable to provide the source file or some of the content had to be removed for copyright and distribution reasons. For full details as to what is included, refer to the chapter “What's on the CD" at the end of this book. Going further ‘The official public discussion board for this book can be found by pointing your browser to www.keyframer.com/forum. Everyone is encouraged to register (registration is free) and discuss this book or Adobe Flash in general with the active Keyframer community. Keyframer.com is my Adobe Flash blog, resource and community portal winere you will ind many Flash related tutorials and useful learning resources as well as a very dedicated and active community of Flash animators. I welcome you to drop by and post a comment about this book or to simply say hello. It sa great place to exchange ideas and animations with other Flashers IF you have any questions or concerns about this book requiring the attention of Focal Press, please visit the book’ official website at www.howtocheatinflash.com where you can find out how to contact Focal Press and general information about this book Chris GeorgenesAcknowledgments= Now I finally understand why so many authors dedicate their work to their spouses. With the tutmost lave and respect, | dedicate this book to Becky, who has always supported me and my career of *coloring” things. am eternally indebted to: Bobby, Billy and Andrea for being the greatest characters | have ever helped create. ‘Mam and Dad for encouraging me to choose my own path in life. Katy Spencer of Focal Press for her support and leadership. ‘Steve Caplin forall of his knowledge, vision and kindness. Davia Stiller of quip.net for his friendship and tireless contributions throughout this book and to ‘the Flash community. Fred Wessel and Dennis Nolan for giving me my greatest tool of al: the ability to draw. Worm ond fuzzy feelings to: Laith Bahrani, Karen Bresnaban, Joe Corrao, Tony Davis, Jen deHaan, Mike Downey, Scott Fegette, Warren Fuller, Richard Galvan, Gary “Gray” Goldberger, Jarred Hope, Thibault Imbert, Kevin Kolde, Sean Kranzberg, Christine Lawson, Shine Lee, Stephen Levinson, Dave Logan, Kirk Millett, Eric Mueller, Ben Palczynski, Davendra Pateel, Adam Philips, Benedetia Pontiroli, Puck, Waymaure Seuell, Todd Sanders, Tim Saguinson, John Say, Aaron Simpson, Colin Smith, Evan and Gregg Spiridels, Ed Sullivan, Steven J. Tubbrit(*Sunchitp’), Urami, Jackie Watson, Lily Welch, Witl, Lynda Weinman and Vivek. ‘Adobe Systems inc, and the entire Adabe Flash team for making such a cool product. Thanks to the following companies for their approval to use their projects as examples for this book: Adobe Systems, Abs Ale, Audacity, Cone Inc, Eltima, Erain, Euro RSCG Worldwide, Fablevision, Alashjester, Frederator, istockphoto, Jib Jab Media, Leapfrog Innovations, New Balance, Pileated Pictures and Say Design. ‘Some of the photographic images used in this book are from the following rayalty-free image ‘Adobe Stock Images ‘wwewistockphoto.com In memory of Max Coniglio.How to use this book 11am digital animator ~a Digimatorif you wil | learned how to animate using a computer. Any animation program can have a mechanical feel to it since we work by selecting options from menus muh of the time. The trick | have learned is how to make a software program like lash feel more organic, as fit were a ball of cay, starting with a basic shape and pushing and pulling it into something unique. If this book teaches anything, hope it teaches you to think differently as to how you approach Flash, Just because the Help docs, online resources or even other books tll you how something can or should be done, don't take that as carved in stone. Take it as carved in clay, meaning you can continue to expand upon the ways the tools are used, even beyond what you may have read elsewhere. The first few chapters focus on some of the basics of using Fash in real-world situations. do not explain the rudimentary features of Flash, such as how to convert objects to symbols and what the differences are between Move Clips and Graphic symbols. That is what the Help docs are for and are simply a keystroke away (F1). You bought this book to learn what goes beyond the Help docs and what can only be learned through the span of several years of experience using Flash. For you, this isthe true essence of “cheating” because this book condenses those years into 300% pages. Any page that includes a CD icon means that the Flash file (FLA) is included on the CD. You can open it and analyze how it was designed but keep in mind just about all source files are protected by copyright or trasemark, preventing them from being used commercially. However, | do hope they will provide a source of education and inspiration for you. All files can be opened in Flash C54 and CSB. Some tutorials will nelude a “CS5" icon which means that Flash CSS is required due to CS5-specific features. IF you do not have Flash CS5,a free trial version is available from Adobe's website (mwwadabe.com/products/flash), You are not alone either. If you have a question or a technique you would like to share, vst the official book forum accessed through my Keyframer website: wwwkeyframer.com/forum ¥ There's also a Facebook page dedicated to this book where you can become a fan. Just go to wiwefacebook.com and search for How to Cheat in Adobe Flash.fundamentals of ng for animation and introduce a few cool drawing techniques along the way. Later on, we'll go into more detail on how to work with symbols, motion and shape tweening, and the timeline.— Drawing with basic shapes | F YOU PLAYED WITH Lego building blocks when you were a kid, you may find this drawing style familiar (or at least intuitive) You'll use several basic shapes and then connect them together. This technique requires breaking down each body part of the character into basic building blocks using the Rectangle and Oval tools. t's fast and efficent way to simplify the character into ‘manageable sections while achieving a very professional cartoon style. Here, we will use shapes to cut in to other shapes. This isa very useful technique for cutting holes out of objects as well as, altering the edges of shapes. OF course these techniques can be applied to background clements as well The key here is using simple shapes to build complex images suitable for Flash style animation, which we will get to in later chapters. (An ne Heres my oriinal pencil stetch that have scanned and saved a: @ JG fe. prefer to stare with enc on paper because! simply ite the fel of this medium andthe reste ae slays a ite more, shall we say, artiste After importing the scanned image. incerta lank keyframe on frame 2 and turn onthe Onansin tol Tis allows me to trace the image in ‘new fame while sing the orginal Image as 3 reference. Toscheve the black outing sleet —y The orginal shape fe sl present thestapecopyitsng GB) undeineath your new shape Te BO anc paste it in lace using tree's to postion the new shape off- EVADE ADAMO Wie es center rom the orignal to achieve an silsleted, select a diferent color outine with varied weight. from the Mite panel and eae it about 0% smal, Se eem _ Using the Oval ana Rectangle Tum onthe Snap option (map Next, clk and dag the sides @ e005 aos ust auikiy ion, and dag corners to each ofyour shapes to push andpul : ETON eieve the bese forms four ter so they snap tgethec Tis ‘hem inte curves. Theis a um process, character The Selection tol is reat process snot unite those Lego ‘3: your character real startet take AS you complete forpushing and pling these basic building blocks you played with when shape. «ach individual ‘isin castor shapes based on cur you were ak section of your ten character, cut and paste them into new layers and lock them, This wll prevent ‘them fom being inadvertently cited, Better yet comert ‘them to symbols white you are | : | é f The prc es sighty Yow cnet ti shape sig Once your shape isthe way Bair teciqse eta cat titers cle stages sche 1) you wan yuan ete tinge testa thie Gite Poston over te ten Boel 9 gi aan teal forthe parachutes basi shape. you want to cut into, deselect then outine tit Select it and hit the Ose ey CD.rot limited to characters. For most Flash projects, | start with primitive shapes no matter what the ‘object is | am designing including props and backgrounds. At their ‘most basic level, my designs start with simple ovals or rectangles and from there | build upon these shapes to create relatively complex images. This is what | love about working with vectors: the ability to push and pull ‘them into anything | want a ‘were made of clay. they TSS 0 ————— Geometric and organic shapes funy mate ew «plumage of leaves, you don't sctualy hve to draw each individual leaf. Since the desig tle is targeted a young cilren i vali to hep the level of detail toa minimum. Selet the Oval (Boo! an your desires fl Calor and exeate an val shape. Next D3somernassesuos | } J 2 Me rancr ewe sd ina simiar fasion Create abasic 3m sing the Rectangle too land ue the Selection too) to push land pal the sides and corners to give the tuna sight ure and taper. Fach branch sa duplicate ofthe tee With nap 0 Objets 0, dag a corner pint a another camer point until they snap together Tis Iasi easy to merge aiferent, Shapes together accurately To ‘complete the front side af the birdhouse, create another square and ‘otate itor stew to poston ita a angle. Copy and paste it and scale itta ada more “leaves: Rotate and poston the new vals shown above. There's no wrong decision at this stage a tis entirely up to you {5 to how much vaiton you want youre to have ‘rank shape Hold down ED and then click and dag the turk to rate a5 many duplicates oft as you want. Seale, skew rotate and postion each Guplicate shape so that they resemble ‘Wee branches. SB poe rag the tp 2 comer points ta the tom 2 coener points ofthe triangle vith the Selection too nti they Snap tagether. Skew the shape wth ‘the Distr tol (subsection af he Free Transform (@) to) to suggest perspectine.Repeat the previous step by copying and pasting the realy make a mista. In fact, mistakes are encouraged, = Same oval to suggest larger plumage ofleaves Seale, AS oucanse usd total of 4 aa to complete my Skew and rotate the shape ad postion itaf-enter from plumage of leaves. could have used moe ores but felt ‘the orisinal oa. The objective here toto create a nan- thi was just the right amount. Fel fe to experiment symmetisl organic shape to suggest the imperectins that withthe number of shapes and variations for you ee At are found in nature. Remember, nothing in nature is erect this stage couldn't help but adda ite bit of tecure to horizontal verti, ound or square, which why there's suggest ame volume using he Brush (tol and subtle ‘no wrong way to do this I's nearly fllproot since you can't yellow eo " (a i (a 4 i Is 4) Tre trdhouse is also bultusing simple shapes. The corner gints and press the QHD key. The sauare is naw ‘ey here ist tur onthe Sap to Objects Feature triangle Rotate the wianle using the Free Transform @ | represente by the magnet icon inthe tla when you tal. Hald down the QHD key to costa the rotation 45 Select the Rectangle too. Create a perfect square by degre increments Rotate the triangle until the battom side raging wit the Rectangle tool while Rlding down the lat andthe topside fs pointd (HD ey Using the Subseection @ tool, select ane of the : 5 As you can see feach shape has ' bounding box ‘round it This is = because Object Drawing mode ws turned fom atthe tine the objects were drawn, This 5 allows you to overlap objects without merging 5 them together ‘he remaining atonal shapes for the birdhouse ae ao (you quested it} single rectangles and ovale. Keeping the Snap option tune an, a come pits to ‘eachother t jon shapes and as Object Orawings you can also averiap shapes to compete the image. 7I HE BRUSH TOOL is probably the most versa of al he drawing tals especialy hen combined with (go sees bet Orning wth the Brush tos eset rowing BD sitn stapes ts tne tol that fe the ros natural de othe suport of pressure senstvy and it features Wacom makes series of popular tnt that work reat with ash Wacom tlt can workin conjunction wth your eating moe or rpc our mouse completely Many dita designers use 2 tablet with any numberof graphics editors inating Abe Photoshop and Adobe istratr When fs the Brash oo is aly a mater of syle and preference Fr this character, wanted to achieve aloe, hand-drawn feel othe brush was peret choice Te fist adustment you wil want to make when using the Brash too wil be the amount of soothing you want applied Ths option appears a 2 hot text sider inthe Properties panel when the rush tool issleted. The ight {mount of smoothing to use depends on pesanal preference, The higher the ruber, the smoater the ln and vice versa. Fr this character, wel chose 2 low amount of smoothing te maintain an organic qualty tothe line work Ll a © Paine Fils © Paint Behind {© Paint selection “Toremaia consistent with the lose drawing sl, you may want oa 2 fil color that bleeds outside ofthe outines a ite. Tere ae several ways to Achieve ths by punting ona new lye below the outine ator setting the Brash to Pant Sehind” an punting an the same layerAlways design your characters with the intended utpasein mind: animation Farm follows function andthe animation style can often dictate how 2 character ‘designed. I you ar a perfectionist ite me, youll want the hair to lack ¢ much ike individual ut as poe. Todo this, avoid designing the har as one large lat object. Instead raw individual sections of ul to Keep them a2 OwBD |=. separate objets so they canbe move independently of each ‘ther Tun on Object Drawing made (suselection ofthe Bush tol) bject Drawing mode allows you to daw shapes 5 separate objects. These objects can be drawn over each ‘othe without them being merged together You can select, ‘each Object Drawing with the Selection tal and then ‘convert each ane ta 2 symbol. ‘The final result represents the lose hand- convey lose line qualtyreresentative of raun tye we were aftec Te line quality hand-awn artwork This Sle ens ise well feelsratual and reflects the imperfections the toa ci character asthe ite f the ines human hands capable of Weare not tying to Similar tohow a elcid woul daw. achieve slick design style ere, but eather to Experiment with diferent stage ‘magnifications ‘when drawing prefer to draw ‘bout 400%,I he Flash C35 Color panel gets a slight facelift. Instead of choosing between HSB or RGB we now have both displayed simultaneously and all color values are accurately controlled using hot text sliders. Mixing colors in lash particular backgroud image I wanted keep the ‘colors muted to avoid overpowering the characters ‘that were added later an AS you can see her, the My typical workfow when mixing colors isto lick and drag within the gradient window in order to slet the approximate ‘lar after, Once | have this clr sleted | lke te use the hot text sides to fine-tune my ‘ala election. Hue and stration can play an main coor of the house ha ver ow level oF saturation but enough brightness to mai good level of clay Important role nthe design process and for this fhas never been easier or more accurate. The creative folks ver at Big Pink asked me to create an animation for children between 2 and 5 |, Years of age. Because of the 7 IN target audience | wanted the animation to have a soft yet inviting color palette. ‘Once | had the overall pink color selected, xing the darker shade of pink requires 2 simple bightness adjustment. The large color "atch at the bottom af the Calor pane! wl sli to reveal the current clo being mixed ontop of the original colo. This proves a visual ference for how the new color will eatast against te erga cele.Once again the cols ofthis house ae easily muted by lowering the saturation keeping ther brighnes telatvely igh The green forthe wees slighty mare saturates compared tothe other cols but eral il ted Tz) (seidesior — T=] = You ean use the Flash Color panel to pik ‘any color from anywhere on your sereen even Dutside of Fash! dust lick on the ‘il color swatch to activate the color picker land then click fon the area of your screen that ‘contains the ‘olor you dese. "12 Advanced Color Effect Be SS na = Select the symbol containing your green while decreasing red and blue he advanced color effect separately | sewing te ot text siden, wien anol green adjusts the alpha, red, green and blue _ "9 thevae or redo 108 andesite amount of ue wile th geen and blue values tao values of the instance of a symbol. It can ral he of red wll be apples be used in a variety of ways to suggest the | symbol. Increasing the amou tone of your graphic design or the mood ofan entire animated scene. Let's take a look at how to adjust the color values of a symbol using the RGB hot text sliders. In the Color Effect section of the Properties panel, cchange the style mode to Advanced. —s nance of beky ae e709 1070 wees aries ste v None I Brightness posay) Fo =<a) [irsunce mare @ he) Instance of: bey 30 FOSTTON AND VW seve ™ Mobe: 100K xA+ 0 Gem 8x xG+ 0 tue 0% Bs Red teen o be wl na alays sat your reeds. By varying the amoune of ed, green and of colar tones to suit your design needs Here | have an almost equal mix of red and geen but no blue a al ——————— pone = y= ® sie: (Banced_—_Te] home: 100% A+ ue: 100% x8 + 21 Ir there green an ue percentages are’ enough, ce more ales by agusting the values inthe mn These values wil get added ta the percentage values in the left column. For example, i the current red value is 100, seting the et slider to 50% and ht sider to 1008 produces a new ted value of 150 (Coo x5} +100 180. ‘The advanced color values, ‘can also be animated over time using Motion tweens heck out the animated ‘example on page 14 13Animated Color Effectof sunlight and creates a convincing night time moo Peaton the frame indicator back at frame 1 and press the Make sure the ween span. ith the Properties panel Effect section expanded, select the Sy GB hey to playback the animation. The Motion Tween Using the hot tent pan wil interpolate the eference in colar values between hue ofthe symbel instance. Here Rive removed the red the Keyframes, resulting ina dramatic time lapse animation {and gren values by entering numerical value of 0" for similar tothe transition fom day int sgh. You are ath and increased the amaunt of tue to sugest a caler nite ta just day and night as this techniqu canbe used the entre mage. This pies locki i 16 G RADIENTS CAN BE VERY effective when you want to breakaway from the fatness of sold coor ils. They can be wsed to adda sense of depth and dimensionality o your characters, backgrounds and graphics in general Gradients can aso work against you due to their ase of use, resulting in generic an often ackluster images When in the ight hand, bot near and ratialgraiens can contribute toa very effective and sometimes realistic design, ‘simple aa grasient fused tot mos ot ne shapes that make up the money. The ick here is proving he ilusion ofa 3D abjectin 820, ‘ervitonment. our clos ae used fr this graient. The tial alr fr this illusions the fourth color (avg). represents alight source coming from ‘behind the sphere suagesting the spheres truly ound “To make the ea ok concave, mix another radial gradient ging fom ares inthe centr ta lighter value onthe outer ee Fil the shape vith this gradient and poston it off-center so that aly half ofthe gradient is Shown. Since dare colors wll cede and ighter coors wil appear cser to 4, this otheise fat shape now gives us he impression tis cancave 7 frre cateon "pg gng ees mia i gent te ‘same way using white and gray colors. Color theory teaches us that to show light, you must show dark, Apply this technique tothe eyes by pacing ‘them in front ofa dacker shape. This wil help add some contrast, making the ‘eyeballs pop, thereby ading dept,Edit the gradient to conform ta the shape using the Gradient Transform tol Use the handles to oat, scale and sew the gadent 2s slighty larger than the Shape. Slet the center canto pont andra the entre gatient and poston it sighty off-center fom the shape The hairs a shape files wit another adil eadient Mos ofthis shape wl be hidden beind other phi, 2a you any need to concern yours wth how the tute edge looks when the characte i fly acemble. TET acon thers wh na 2nd linear gradients. To create the nostrils, use gatient and eat so that he dake colors above the lighter coor. By themsees, the spheres ae jst shapes, But placed agains he radia phere, they become Roles. Ck and dag the focal pont tool so that the hight is positioned between the center ofthe ‘Shape and its ede. doing this you are suggesting that the light source iat mare ofan angle Notice te fourth calor of aur gradient is showing along te otto and Fight edge. Tis implies light wrapping around the sphere from bind The hands are really not hands tall. few strategically positioned spheres with the same radial grtien 25 the face and bad are used ta suggest hands ‘Good designs ar consistent in technique. When each clement is comprised ofthe same graphical tle, he veal sult wil pally be consistent an fd, Dont deviate rom your plan; choose a technique an stick wit it £ Experiment with different stage ‘magnifications ‘nen drawing. Tpeefer to draw fo a larger scale ‘and with the Stage magnified ‘bout 400%. The result fe typically a smoother line ‘quality. coe 7Te fist taskis to design your textures. Adal camera is 2 very handy device for thie purpose Take a walk round your neightorhoad and youl fuck ind an united supply of interesting textures that canbe use for your design. Use Photoshop te aut the colar, a ites an crop your images Remember to keep the image smal ncugh for web output Bu CAN BE A VERY effective ‘way to add texture to your designs Since any image could be a potential texture, the possibilities are endless. For this frog character, | wanted a slightly more sophisticated look while stil maintaining a cartoon feel. Instead of using solid color fills and some spot color shading, the use of imported bitmap textures added that extra sense of depth and richness You can se the Bucket tlt fl your shapes withthe diferent bitmaps you imported, broke apart and picked withthe eyetropper 18You may aso want to adhust ‘the properties of the imported Sele Mere nap wn re apart 2 sabe Bs wt your ‘bitmap (double- €BO AWB. icv on tusng the Eyesropper ‘Shapes using te bitmap a5 the click the tool will now be adged to the Colar Miner asa swatch, filealon bitmap ion in oa. wll now be ade to the Color Mi hla ema ibrar) and select “Apply Soothing This wil apply sing to Yyour image and wl ook their best but will demand more from your processor during playback. Most ie th bitmap fi i ‘The final step iso canvert all parts to symbols an add light amount reed ta be sealed, rotated or of eark tn fo the instances behing the character, This helps separate re-positioned. Select the Fre ansform —similarbitmap testes rom each ather ard adds 2 touch of depth taal @. 2nd edt your fil using the SHORTEU various handles around the bounding ea tox 19Design styles B ITMAPS DONT ALWAYS ave to look fat. Introducing “Gotto’ a character made almost entirely of bitmap fils and some carefully placed Flash gradients to provide the illusion of form, volume and, mos ofall texture Here wel look a how to giv otherwise fat bitmap textures a bt more depth sing some basic graders and alpha 20 “he fst step sto create your texture in Adobe Photoshop, import itimo Fash, break it apart and ten select it wit he Eyedropper tool B- created the shape fr Grote’ bady withthe pint bush {andthe bitmap swatch as my fil ‘ole Select the body shape and anverit a3 raphe symbol ‘Sometimes the dels ia the dtl, which is evident herewith ‘he aditan of some subtle highlights tothe ip. On anew ayer use the Brash tal to paint some shapes and then fl them wth linear gratient containing 30% white to Oo white Use the Fil Transform tool ta edit the gracient as necessary.| [i You may also want to adjust =) | the properties < (of the imported bitmap (double- J lek the bitmap icon in ‘the document brary and select "Apply ‘Simooth \@S\ 0732 008+ 7B Eat the symbel by acing another ayer above the The mouthlipspmbol was made the same way by shape ayer Copy EB EDO ans poste in place layering 2 ratial gradient over the bitmap fil shape Use 1D DMD the body shape int this new layer. te Fl Teasfor to! to poston the eadent soit forms 2 Ft with a rail gradient with two coor; black with about shadow along the bottom haf ofthe shape. Wke appear 3085 alpha and black with 6 alpha smoother “he nostrils another example of layering various When ll these subtle details recombined, they cn aradients over te original shape containing te bitmap 1 up toa ver sophisticated image The shapes that Fi Here used a liner gradient forthe inner nos shape make up Grotto are simple yt convincing simply by layering | gurermrrerrs a radial gradient provide some shading fr amare some base gradients over our textures. = oD reali eect.22 The Pen tool S FAR THIS CHAPTER we rave looked at several ways of achieving diferent yes of drawing From the bass of snapping simple shapes together forming bigger, mare complex shapes, to using bitmaps as textural fill, Most of the time the design process demands a combinati of tools and techniques to get the job done. For this character d went from a rough pencil sketch to a fully rendered vector drawing using the Pen ‘tool and basic shapes. The Pen tool, in combination with the Selection tool, offers infinite flexibility when it comes ‘to manipulating strokes and shapes. ‘Star with Scanned sketch a raw directly ito Fash. Creat lank eyframe on frame 2 and tum on the Ononskin feature Using the sketch as reference, trace the hair using the Pn tol by liking and drapging each pit = you go. This wil automaticaly rate curves wth Bezier handles, allowing you to Imanpulate the stoke each ime a point made a 2 a n a a 2 ff ‘Alnear raden can be applied toa path without having to convert to 8 ‘Shape lik in elder versions. For this raient I chose o mix 3 ols: light, rid and dark tone. Wit his eadient selected inthe stoke color swatch in the Color ganel click onthe ath using the nk Bote G ool o appr it Eat the ‘gradient using the Gradient Trsform toa(G0 to ait > Preferences > Drawing and ‘make sure the “Show Pen Preview" option Is checked. This wil allow you to Sea preview of wnat you ines wil ook ike as you are drawing uth the Pen too, Hold down ‘the Shift key to snap your ines to 90 and 45, degree angles as you draw To designate a contol point asthe end of your line, hold ‘down the Ce Command key while elicking. Using the Suoseletion toot @D. od an anchor fi othe Oe ove ca a modify the contours of the hal by 3 Pen too over the path ul you it witha calor Here Ihave mixed licking an anchor point and adjusting see the "symbol appear and cick. aad eradient to provide sense of iteBeze handles. Once this shape is Remove an anchor pin by hovering volume ta the shape complete, temporary cut and paste over and cckng it ito anew layer and loki to avoid tating it unitertionally a “he Fen toois leary useful tal fer drawing paths but “7 The fina result is a combination of shapes and paths in some stuaton the Oval and Rectangle tos are 3 treated withthe Pe, Oval and Rectangle too Eating better and faster atenative. Te Selection tool @ can ve of these paths and shapes wae the result of using the sed for basic eting of paths made with he shape tools. Selection, Subselection and Fe tals24 PPorocee IMAGES canbe used to.add a measure of realism to any Flash projec. They eon be inpoted and used in their orginal stat, or they can be simp ora uninue, stylized look. The obvious approach to vctorizing photographs isto import the image into Flash and use the drawing tooo trace itby hand But that can be very time consuming depending onthe complexity ofthe image The trek here sto average down the amount of colors your image contains, and Adobe Photoshop makes this an almost efforts task. Combine that with the Tae Bitmap engine in Flash, and you wont even have to select one single drawing too! Star witha good quality image that has enough clr cantast. Open it in Adobe Photoshop and save i aa PS file Now may be 2 goo time 1 agjust te contrast, saturation colors or whatever eee you prefer to edit. Save {or Web using €9EHDES ED GDSDEDE and select GF asthe fe format. Select Grayecle rm te Calor Reduction drop-down menu and limit he number of oor to two or three depending on the image and amaunt of coors your prefer to keep Clik Sve and name yournew GF image isnt mane ee neice Selec the entire image and go to Madiy > Shape > Optimize o open the Optinize Cures panel With Preview selected use the lider to adjust the amount of smoothing desired and click OK| ca oma Maimomare(——] pants When aul optimizing omer teste Fen Comer ures using the - Flash optimizing care te Sch feature set the stage magnification Tower Total Import the optimizes GF int Flash GD DGD. Once he tae is complete, your image willbe al vector Make sure itis selected ané goto Moat > Bitmap > and fly scalable. The resting image of his dogs “ace Staph ce Sapp par yuan rowany abut we ange eevee ung Fass apimiaon sur inaseings hat wl imate Sia he ulin Opt erine yay level of complexity your image wll have when converted to i ‘vectors. The proper Setting wl vary depending on yourimage magnification and personal reference or the stage Optimization tends to have 3 seater effect with smaller objects and less ofan effect wringer mene ne a tose ender iinet wae or hee Ceeeanaen ia ~~ Socimenatin preferred Fatio between reve optimization Simctnng sent ee ater rote] c= ane Biren Fash C36 offers Advanced Smooth and Straighten End result san image thats very ightweight forthe nels that provide more contol ave how your vector Web ighing in at only six kabytes. Iti azo easy 0 Image is optimized. oth of these panes cane found ty change is color scheme using the Paint Bucket toot and cing tothe Modify > Shape menu ‘the Color Mise.i 26 I HERE ARE ALWAYS SEVERAL WAYS to achieve the same result in Flash, With all the various tools at ‘our disposal, | am constantly finding different ways of using them to achieve various effects. Cell shading is commonly referred to as “toon shading’ This style of shading is popular with comic ‘book style artwork and classic Disney films. | have discovered four different ‘ways to achieve cell style shading for you to choose from. Stare with base shape that Select the Line to! and make contain a fil nd tine his Sure the Snap to Objects tel s technique wil work just aswell with ab seleted inthe toolbox Shapes that have ne autlines. ‘An alternative way to mix cols in Flash’ t click the clor whee batton in ‘the upper sight comer This wll ope the cole plete mixer that native 10 our operating system. Mix your new clara click “OKDraw a dagonal lin isie the il of your shape. Use te Selection ‘oo QB to ag each ed pint ofthe ‘To Tes they snap to the edge ofthe fl call style shading can be dificult to achieve, You have to imagine ‘that your two- ‘dimensional Use the Selection tool to bend ‘he line sa that te ae refets the shape ofthe oval. | and they are Wit he fill color selected, mit affected by slighty darker color wsing te! fight and Color pane mixer. & shadow, Choose © alight source © and keep = throughout your © design when = adding shading, Use the Bucket tol 1 fillhe shape you create with the Line to ‘Select the lin and delete it Easy ight? fist isnt perfect, you can continue tous the Selection tool ait the edge ofthe new Fil you created a728 Using the Rectangle too! fram a box inside your shape tat contains a dater fil ctr (n ote. Use the Seleton to! @ to pull ‘the comes unt they snap tothe Edges ofthe shape make sur the Snap feature is tuned on. H ERE'S ANOTHER VARIATION on cel style shading in Flash. This technique involves the Rectangle further by adding more shading tool and allows for more complex i moe reais effec. Repeat the shading. This may be preferable if} atove procedure using an even darker Color ise the shaded are, Let's tak this technique one step your shapes require more complex shadows. Use the Sleton tal to pull the ene until they snap tthe edges of the shaded shapeFl the gap aea create after Sapping the corners tothe edge of the shape. Fil the gap area crested after snapping the comers to the edge ofthe shape Use the Sleton ta! to bend the edge of he dare il oar that ite arereects te shape ofthe ova, Having used the Rectangle 00, you have an entre corer to pay around with. This canbe useful for eating more complex shading such a wth the ear shape Use the Sleton tol to bend the edge ofthe darker fil calor sa that sae refets the contour of the shape. ‘You can repeat this procedure at many times 2s you ie. The mare calor values you ad the mae realstc the image wilt. I you would ikea cool and easy way to hues based on your original, flor give ‘Adobe's Kuler tool atry (Glee adobe com). You can nic shades of coor very easly land then save and download them as ASE (Adobe Swateh Exchange file). Open the dovealoaded ASE et) in Mlstrator and then sve your new swatch panel as an Al file and import Ie into Flash An easier way ‘would be to ‘manually copy the HEX value from the Kuler site and paste Into the Fash Color Mixer panel a 294a We ALL DIFFERENT and we tend to find liferent way of using the same tools. We get used to certain techniques because they become familiar to our workflow and we become comfortable in our ‘own naval habits. Heres yet, another technique for erating cell styleshang that you may prefer cover the previous versions. tends itself welt the designer who likes 2 tore hand-drawn fe! to their work. Start witha shape. "Next, snl fil he space created bythe new Fl you jst painted pigolee—s, = GS PaintNormal © Paine its Prine tahind 1G raresencton 5 Q Paint inside Select the Bush tool @ and then ‘om the brush mode subsection renu, select Paint Sleton This wil restric any paint to selected ils only ola! Now youve got convincing cl ste shading for the ea,= 2 Consistency is Important when it comes to your light source. helps to timit yourself to one Tight source if possible and Usethe Selection ol iosekct_/7 Dont wry abut ing sloppy. Someinesthe sea maybe too = STEN the filloor youl beading the (nce you lease the brush the large ta get entirely byhand.In | Gn the angle Shade colar ta, Now use the Brush tol painted fil wl exist onl ise the this situation, just draw the contour of > Ye ght source and adjust the amount of smoothing selected area you intended ‘the edge forthe shaced aes, |s coming rom, desited forthe shape you'l pant. Next, pint inside the slected fil The face shading canbe dawn fatbespace ceed byte ew 9 (Cessna ere the ame way Remember the Filla you ae done O inersan to your desans ection you ight saure i coming jving them depth an reais. ftom and pain crescent fil= Dy Paine bocker Tool 6 © i bone Tool) or) sos (rms Sees ste cnr ert it anycher in your design. et he stake height to around 3a 4 point Click I HIS VARIATION ON CELL STYLE srpinere within the fl to outin i with a stroke the color you chose. Dont shading works well for simple wary abou bow it loks because you wl eventual delete thi ine entirely shapes and very complex shapes. If | *t*ryousredane. Fer this character outfit, ‘he stroke i selected and pple stroke cutie tothe repositioned based onthe same cveraiea wel light source asin the previous example 32Set your stroke height large enough to ‘make teaser to work wth. large value wil allow you Select the ine by double-clicking ont with the 2 ett esc esig he D ey feyCosaing Selection ol Net os the aw testa radgeit_ Dour stot hasbeen dle, elect ty aoube- | s baht color way fom te original shape inthe dection of ought licking anit wit he Selection tool Double-ieking the? that is high in Source. filthisare created between the stroke and the rok wll lect the entire stroke while sngle-clcking ont = contrast from original edge of ou shape with you shade coor wil select segment oft it contains multiple point. your orginal design wil make iteaser for you visually, -Adarter shade of colori mixes With the stroke stil selete, Use the Seleton 9 to0!t0 and filed create the iusion of gett n some cases, the further eine your shaing based form and el resulting shape reatee may need some on your needs and design sense tweaking 33“o LASH IS MUCH MORE than a too! for designing cartoon characters. ts full array of vector drawing tools is suitable for many styles of illustration. Here we will go step by step creating a realistic flower illustration. Flowers are always appealing to draw and at the same time challenging due to the subtle variations of color they often contain. The main tools to be used for this example are the Pen tool and Gradients. The Pen tool hhas been greatly improved in Flash CSB and if You are familiar with Ilustrator's Pen tool, you will notice some similarities. Fash has adopted the core functionality of Illustrator’ Pen tool including identical shorteut keys and hot key modifiers ~ not to mention identical pen cursors as well Integration is bliss. One particularly cool Pen tool tricks to hold down the spacebar to redirect the current point while drawing. Another nice feature in C35 is that the auto-fill when completing an 4 enclosed shape with the Pen tol has been £ removed for consistency reasons. £ The more you experiment with the new Pen tool the more | think youl like it. In fact, | think its better than Illustrators Pen tool 34 i | [2M [test arciene [~) row (CG) Dunear rcs Ow za PHOS: vox On ex Once ro Oca BBoe is bass) A 100% ee Tre ntl gradient wil provide the overall hue and tonal range of ‘he ower petal Flash ets you apply upto 15 coor ranstions tos gradient The Pen tol (Bis perfect fr this tase simply because itis quick and 350 manualy ace the contour ofthe petal by liking and dragging long the contour ofthe image Fil you shape with your radia ayadient and then use the Fl ‘ransfor tool Qt ei tsi, position and tation You can delete the stoke a this stage ais no longer needed“To dos the path, postion the Pen tool over the fist anchor pont. ‘small ile appears next to the en taal pointer when positioned covet (ek or dag ta clase he path Copy €9@ EDO and Pst in Pace EDO GDEDD this shape to anew layer ae you wil ‘be Layering several gasients ontop of cach other to create areal effect. Te flowing gradients contain varied amounts of alpha to creat subtle transitions in coon. Use the Subsleton tol @}t0 refine you path if you desir. Toads the shape of he curve tometer side af an anchr point fag the anchor point, oF dag the tangent handle You cn also mave an ancha pein by dragang it with he ‘Subsection too / / Fl the duplicated shape with Yur new gadent and use the Fil “Transform tal to erate the suggestion of subtle undulation within the shape. Repeat the process of copying and pasting in place this shape to new Tayer foreach new grant. Mateo mismeraa aradints. la’s alr picker an gr colar rm anywhere on your sereen i you click an ay of he (lar swatches found inthe Color Miser, Propetes pare rte taobox and ag tothe area containing your To constrain the eure to multiples of 45, old down the Shift key while dragging, To drag tangent handles individual, itr (Windows) or Option-drag (Macintosh, desired color x a TO wear cn new gradient using the Free Transform tol to create sof shadows and highlight almost al cases, you ll nly se partial gradients to erate Subtle tansitions of ight and shadow 35Soe & & 1 ssnnscoining postion at inane Tiss heen result of wing several the edge ofthe shape contains an imperfection The aan of layered ail gradients, ambinaton of gredient clas and nega contours mates for 12: beatiful and convincing variations of 2 very convincing imperfection. calor. 15 Ramiseiectic teem inte cenerathe 4 & Hee wate loner nage else ne ae stigma, dag te lite white ara in the dal petals and stigma have ben illustrate. But you ‘gratients center to mave the focal pont towards the edge. dont have to stp here. Les hae some fun with Fass ‘iter Convert the entre flower to @ Move Ci smb. & 8‘Te technique of mixing ‘radients with ‘transparency and layering them so they overlap cach 13 erst ese procure fr eehpelat be Te ete e fone cay rane te flower image To keep your main timeline ayers stigma, was created with a danut-shped fi toa minimum, convert each layer to group or an abject continingaratial gradient Arawing and convert each petal toa symbol =o beyond what the default = gradients were designed to look ket takes 2 measure of trial and error to ‘achieve the lok you want, but inthe end the final results may bbe worth the extra effort 177 ene tena Dp Shason Sette 4 Duathlon moe, ‘ur alpha and stance to your desired amount. You Scale and rotate them to creat an appealing ‘may want to also aida Blur filter a soften the veal image flr rangement Is almost hard to imagine thistle of = ofthe lower iustration eon be made ete in Fash, ight? 37= (3 provides us with design tool ale the Spray Brush, The name describes » its function accurately as this tol wil create customizable spray pattern in seconds. Upon initial use, the Spray Brush may seem simple and unimpressive, But you can customize the Spray Brus to suit your needs and extend its use across various types of application. The Spray Brush provides unlimited customization by assigning any Movie lip symbol from the Ubrary to use 2 your spray objet. Add some animation to your Movie Cip and yu now have the ability to spray animations aero the stage! Fees - seein ted * Vee il ete inlets Use the Spay Bho 1 Spaceseneanpopase th crete testa Cave seard Sun ymin aground propria by selecting hte athe topes oftestage ing» lr andslecting fandom lng. ‘ipl nar ge witha cs Taam mcr ron 38 2 erento ‘The Spray Brash tal is assigned circle shape by default, but you can swap this foray Movie Clip or Graphic smo you have inthe documents Leary. Here ve created a pointed star usin the PolyStr tol and converted i toa Movie Chi.@ & Wit andom scaling Selected, the pater (or lack ‘thereof produces 2 convincing galaxytke effect. Throw ina planet or two and a dag ina space sult and your scene is complete 23 Cette bust "ry sg he ett ject (which jst a simple vector ere You can lick and drag across he stage to produce a continuaus spray patter. Por You can ake ths etec om fen frther iTyou cate woe, Sl fh animation ine the Movie erie ipo Graph em samt! you e 7 select with the Sry rh SS pen the ie A Saye 2 ft tom the Sour dk snd tothe move tfc in acto, See the Sy Bush 0 and then click tn Clk or ago et adam ate sing the Sa the Proper ane The Sp yb! pare opens Simtel forth ample spe sts und te {oeispy at Mot ly smbosin yur Lira HereTve_Garaeshead to suggest may aves ed Seected my sar Mave ip. Siu or as eame dy The ponte Spy Bash to can make short work of repetitive ass such a his40 T Deco tool is actualy several tools int could even be referred to asthe Swiss Army Knife of Flas’ design toolset. The Deco tol basicaly 3 toon 1; Vine Fil Grd Fill and Symmetry Brush all providing ways to quickly! | crcate simple or complex patterns that would otherwise be to time consuming to design manual ‘The Dec Tool comes with aditional drawing effect such the Grd Fl Click nyahere on the stage to cate perfectly drawn gid of black squares (default. You ‘can eit your grid further by using the option from the ‘Advanced Options dropdown menu, Change the amount of Space between the objets herzontaly andlor verily 3s their scale. 1 —r Using the Deco too! Dis very easy. Selec it and then simply clckanyuere onthe tage to create a pattern a using the default options AS Seen here the default tions wil ‘reat vine pattem based onthe default shapes You can cally customize this pater by creating yout oun graphics and converting them to smo ust ike the Vine Fil option, you can eit the dy Swapping the default shape for any symbol in the ibang. Here have aso applied grid pattern to fill clr simply by cekng nse a it‘pen the fe “éeco_toa a" located on the source sk ‘om the back ofthis beak Inthe irr you wil nd 3 fea custom symbols to play with Deselect “Default” in the Properties panel ant select my custom drawn star and lower symbols, ale clicked on the color swatches te change their color Use the Symmetry Brush to symeteicaly around acetal pont represented by set of handles that appear when you cick onthe sage Use the handles to conta the symmete by ineeasng or decreasing the numberof symbols ange symbols ange 8 Wes easy to get carried Away creating complex gas ast hae we patterns using F o Teal 87 TTT vector abject. Test your movie often to avoid, creating ‘What could be better than 2 custom ied background? ‘An animate tiled background of couse! Select the "Animate Patera” option inthe Advanced Options menu and then lik onthe stage Sit ack and watch Flash css = animation toa te an animated background pater for you complicated creat background attesn for yo fordowes processes Rotate Around Point Rotates the shapes inthe symmetry around a xed point that you designate To rotate the object around ts centerpoint, rag Ina cicular motion. Reflect Across Line isthe shapes a equal stance part across an invisible line that you spect. Reflect Around Point places to shapes an equal dstance apart around a fixed point tha you speci. Grd Translation generates aid pater using the sapesin the Symmetry eect. ‘just the height and with ofthe shapes using the xand y coordinates defined bythe Spnmety Brush handles. Test Collision prevents of alls shapesin the Srmmetry effect to averap with each other a1EW IN FLASH C35 are N several new Deco tool a effets! Adobe recognizes [ ffects! Adobe recog ef) OWeca: coombeh ema] that not all of us ae skilled Cocaine - designers or animators and @ onereoma CE] ‘even the best of us can use a ‘Default shape = little help sometimes. Many oan eee ree aca amet Secon ts cr of the new Deco tools offer sere ere Eee = effects found in the natural ee I oes reerehes | lensinaal ffeets found in the natural ah se awe - ‘world, a huge benefit because ssi eels animating these elements the Seaton | Me eae ye ‘ld school way is arguably the a a a most challenging of animation cigar wi tasks Let's go right down the 1 gyich Oo rain tol the lst and take a look at the dropdown mena inthe Dang et randoms ae = secon see have chosen te 30 Bash sarcomere is power of the Deco tool Building Brush | Te Building Brush Ives upto its name pure and simple bulls bling quickly aed easy. There are 4 ierent bling styles ‘that canbe selected inaviualy or randomly. To poet 2 bling you simply Slee the Buding Bash and paint vertical from tottom te op. Once the cursors released, the top ofthe ling 42 fad the default selection for shape an oor ac Vine Fi ora Fit Fre animaton Foner Brush ging Bash Pare Syste ‘Smoke Animation Tree bah aie ae automatically ded fo tha ishing touch. nthe Advanced Options drop-down men, you can se the brush to daw randomly slectes building styles and thei overall sizes based on 2 numerical value between ‘and 10(10 beng the biggest)use The sky isthe limit with ‘the aD Brush ‘because you can Using the defauits, you can ee You can assign siferent colors Here have replaced the 20 substitute the thatthe 3D Bash implies gepth far each object by clicking its Brushsdefault objects with 2 default objects by senting the default abject with colarswatch Variations in color and ferent Movie ips that created. with anything random transformations (sale and _varsformations can add even more All objects are the same withthe: You esate that ieconverted to | Movie Cip| symbol rotation depth to the image Atference being their cole schemes. [Asa resul of using the 3D Bush | was able to paint a landscape of presents in mere seconds ‘The above landscape was created in ust afew minutes. the foreground elements to suggest depth. Each ow of The tulings furthest away were converted to Symbols buldings was placed on efferent layers So that adding So that a clr eect (rightness could be aed to eiuse other elements (such a5 the dinosaur i easier. thei clos This provides contrast between them and 43D Decorated Brush 5 ta z9 7 Gres 5 ants 1 bea, 26 Tek teres 11 Rederiet Thee bush aroun te seo ls te sh eration arin ae 20 diferent decorative brushes to choose fom andeach ones cantinuous pattern. The appeal af histo its ate of use and the brings litle touch of whimsy to Flash After selecting the Decorated hand dawn look and eet actualy looks ike doeles you may have Brush rom the Drawing Elect drop-down men, select the bush style seibbled on notebook paper during a boring meting. The onl thing using the Advanced Options drop-down menu. There's ayn tick to you cannot da with his too fst the bush to aimate automatically sing this tal ust pick ste option and start drawing, AS you dag Flame Brush i “he Fame Brush san interesting effect tol As you can see itereates a myriad of geometric shapes and patterns to create rather abstract form that represents flames. The customization options are limited ta Fame sz and Fame ‘color but the resuts ar alnaye sting, 44Fire Animation ir~ os 1 Tis a sania re nse ben For added realism, lace the fre animation na Movie casi. The Fite Animation brush allows you to “aw” Cop ad ten su aa Gow te Tce TOTTI ‘fie animation ight on the stage Just select the Sze, __endlese oap of re uncheck the End Animation box to avis Speed, duration colors and spark count and start dawing. the fe gong out You don't You ca even check the End Animation box to have the fre aways have automaticly extinguish tel to be content with the default results Flower Brush oe ee ween as fe ee ‘creations and - nest them inside commie (of Movie Cis (erases ie] Then experiment =e further by 5 ing Filters o and Blend modes for sophisticated result, Pehaps you have a passion forthe botanical. There's For each flower type, you have the option of Selecting row a bush for that a well. The Foner Brush custom colar fo the wer ype a Size, laf color just hat, a brush that draws les n fac ican draw and size a wel athe ft oor applicable). Yo ca also \ariatons of 4 different lower types: Garden Flower, Rase, check the Branch checkbox t include branches with your Poinsettia and erry. oa designs. 457 Beant toi ens atu Uphing 9 ante tac ge ae te wh of ts beam anon encetion.Itcan last jut fractions ofa secondo studying ts complex you want i to be. Te ets jut simple bush stroke aay motion can be imprtical and dificult at best. Given lightning’ random 2 Fash wl randomly generate a lightning beam based on your custom ature, it can be even more dificult to simulate this efect by hand. settings But don't stop there. Copy an paste the lightning into 3 The Lighting Brush makes animating lightning quick and easy ust Movi Clip symbol and sda Blur ander Glow iter fr even more Select the lighting colar, sae, whether you wantit tobe sutomaticaly reais, Smoke Animation Fo O wwr! tear see ote - ‘ste ning fighting a terns ond in the nt threesome ths ay reer et the esol the wo fr Slt Your sna s,s raton ad cols and wih he stake of your mighty wayne cedsnte Rae yurcetinnatciecinad sear 2dr on efor oe ean 46Particle System Sa use trixie antng mre fn olay with tan aac etn cones menu of al a rat a particle system? The geek in me saysnot. Creating obtain the optimum rests depending on your application. objects that eat to variable forces of raity avery For me, whether my ris result in eror or succes, it satisfying exercise to partake in The Particle Sytem bush always equally sting to wateh the outcome ‘il ep you entertained for hours With is myriad of Tree Brush xs oot Chriss Tree Conctatre enrvie ed Sims Tee ae a oy jHoTTP | wT Be are ek anni - - onto ‘out the Deco Some Rado inehoyer 2 S| the evertrncow MM Winter San of this book. oe Detdout The crane Wane bere Some vines Sata he ° wow Bent Crashes tat Thee Bs pros ou wih he abit pit tee bse on your selesonsand yur must movements. nope intern flag whee st set thee sh, wanes ne shske wl dom grr 2 ‘choose the te type fom the Advanced Options drop-down new tee configuration Justa in nature no two tees wll menu and customize the eoor scheme (or use the defaults) ever be alike ‘and start painting, The Tee Brush wil auto-genetate aTa 48 The new Flash CS5 interface FLASH IS GROWING UP. It started out a long time ago as a simple Web animation tool and, for all intents and purposes, has grown to become its own development platform, Most notably, the Flash interface has progressed dramatically from its catliest incarnation. Upon initial inspection you'll notice the look and feel has been streamlined in keeping ‘programs and integration has been implemented. the Adobe suite of tools. Icons are now shared across One of the most obvious new features of the UI is how panels can be docked, grouped and minimized. If you choose to dock them to the sidebar, you can then further minimize them until they become icons. Clicking on an icon will open the respective panel or group of panels. There's also a preference to toggle onjoff the uto-collapse of the icons when you focus elsewhere in the workspace.‘As always, you can customize the workspace and save your layouts, Below is my typical setup, which optimizes the interface for animation. 49SQUASH, STRETCH, BULGE, warp, distort, rotate, skew, deform - what do all these transformations have in 's not how you felt after that second baked bean burrito you know you didn’t need to eat. Answer: it's the Free Transform tool, the single most efficient and versatile tool Flash offers, and it will prove to be one of the most used tools in your daily animation workflow. common? Hint: Adobe Flash CS5 offers two powerful tools: 3D Rotation and 3D Translation that allow us to transform objects in 3D space inside of Flash and animate them! 5152 A SA DESIGNER AND ANIMATOR, one of the most frequently used tools in Flash ste Free Transform tol Its the mast multifaceted tol inthe toolbox and will rove to be tical tothe transformation and distortion of objects and then Free Transform i the tool to use when you want to sal, rotate, shear and distort your images. Free Transform is also used to edit the center point of instances of symbols. You can use Free Transform to transform imported bitmaps or grapes created with the Flash drawing tools There area variety of modifier keys to be used with the Fre Transform tol that allow you to transform objects indifferent ways 25 we wil iscuss here a x 5 e A, Enter Fee Transform made by Selecting the Fee Tartar toa in the tooo or by pressing the keyboard shrtut @) Let's sta by trasfoming 2 imported biomap image ron he cur ous te G sng ox etcen he sands nd rag sere eject tol down 3 GB tes bseon theca ees Break apart your imported image €9E) EDO beiore ‘wansorming it you wart you can conver it toa Drawing Object (Mody > Combine Objects > Union. Hold down QED DODD and crag s corner handle to distort the object's perspective equally on bath ides. Untorunately Fash doesnot distor ‘the image but, ater, rps iWhen you drag any ofthe four Ifyou grab any ofthe four center corer handles, yu wil Sale the Side handles, yu wl sale he object. The comer you ara will move object horizontally or vertically Tiss ile the opposite comer wll remain great for squashing and stretching the tatiana. Hold down the Shift ey to. bject. Seal based on the object’ center aL Bul Hold down 9 ID to stort Select the Envelope tol (sub- the objet ina feeform manner “election ofthe re Transform Butunforunatey again, Flash doesn't too) The Envelope madi lets you ‘uly astra bitmap image but, athe, warp and dtr objects crops a Ema Some of the Free Transform ‘tool features ‘cannot modify instances of symbols, sounds ideo objects {eb one of he corer handles = Wee Mle rotate the object Hold down GH = ot I to constrain the oration to 45 degree | aitort text, increments. Hold down @9 GD" | make sure to hinge the object atthe opposite comer. freak apart the text field into raw shapes Fist. 10 Desi isan ace andes to macy the cervelope Changes made tothe velop i afc the tape but ot ETE the itmap image isl woman 83Wis USING THE FREE TRANSFORM TOOL with rw vector abject, the Distort and Envelope subselection tools become available. This is where you can really have some fun warping and deforming shapes as if they were clay. Think of how your reflection looks ina fun house mirror and youl start to get an idea as to what these tools are useful for IF you need tobe precise with how your images are scaled, rotated or skewed, use the Transform panel to type in your values forthe respective transformation TRANSFOR 109.0% $ 100.0% © korate 4 99° O stew 99° Goes 30 Rotation Rog nor z 99° 30 Centar point X M94 Vi 1964 2 00 mee 54 Enter Fee Transform made by selecting the Free Transform tol nthe talbox or by pressing the keyboard shortcut (Select the Disto subsection toa at the bottom ofthe toolbox. Clik nd dag any ofthe comer handles to distort your shape A Re cep mater ae wring sors hen au select te Envelope subeletion tol, you wil atice multiple handles edt the bounding bos Manipulating these handles wl affect the shape contained within Click and drag a comer hale to start warping you shapeHolding down 3 GED handles to their current positon. Hold donn the GHD key while deagsing a corer handle : Holding dawn to-constrain the ajining comer an equal distance; the same keys {nd inthe opposite sreetion ram each ater Thnk of tas. ile dogging fone ofthe side tapering your shape ne oft constrain that entre side and ais points ‘he Dito tool useful for manipulating he perspective of a shape by elting and dragging the corner hanes. You can move any ofthe points to anew location to futher warp yur shape. But be arf once you dick 1 tana aheiangen esa your pe, the vansfomation will en Shape in almost any diectian.These tangent handles ae located at e20h comer a slang both horizontal and verieal__ ouside ofthese You can selec it sides a5 wel contact var and dori ETE tut the previous point and tangent positions wile ost. ae a 5556 HE EWELOPETOOL can ep | mec eimesetane Teena eutsreemns productin shed case, the Ele el aed def he Feo he Mine charter to epee tft of ting hi seine npc Su the ee ed cl ve been dr burt often do we have teary of denne ileoming as och carota withthe ed ahead dn nd wag sit cured verte han dawn in ash G vate net Yo ny theresa se ston nd eed mae cy. Using the Envelope tool, you can rove the handles odefrm the relative ses of the hea Using the Envelope tol allows you to quickly distor the erawing into erent shapeContinue o push and pul the Envelope’ anchor pins and ante handles ta deform te shape to your tig, Apts sateen oes cover by dezeleting the arwark and selecting the Envelope tool agai. “Theil rece the archors and handles hich wil allow you to further dstart, vyourimage Here's the foot nits eau state. Depending on your animation, you may need several feet in diferent shapes. satin pt sg the job done, quieky and cient, 5 nti aio may go cinta the arwark and aust Your lnework using the Selection ta Don't rely purely onthe tos often it's Yur owen eye tats the best to 10 raisers on te tools. Inert eases, they can only go sofa You may want to further refine the details of your mage manual. Don't rely on the Envelope tol for crertig: ike this where a complex Shape is being warp ‘will probably find that upon «ending your ‘wansformation, you wil need to refine you shapes manually by using the Stlection toot ‘or any ofthe drawing tools 87‘Star witha simple rectangle with) Hold down the QM key an pull ro stoke around it Addl a second 2. a tp comer point aay from the leyrame on frame 10 Select the Fee shape. With the QI key tl pressed, Transform tol @) and then the Dstort_ pull bottom comer in the opposte subelction tol tdrcton. 8 third dimension simply is nat possible {ete | Unless the object is redrawn manually one frame at a time. But with Flash, it’ all in| = In lash C36 you hve the ability Now that you have the fst half of POPULAR ANIMATION REQUEST requested on the Flash public forums is how to animate a flat card rotating or flipping 360 degrees. What makes this animation difficult for many ‘to understand is the approach to actually ‘making it. Its easy to assume, since Flash isa two-dimensional program, adding ‘approach, and it doesn't have to appa Shae ween rom the © ene arimation, you need to cea ‘the approach, and it doesn’t have to be reexemena inthe tine Sogo the second al Selec ame 1a ‘taken literally. Two dimensions are plenty | stead and aply one inset keane. ‘to work within for this animated effect. 1O itisssomestpe nis 94 tan tert nt ‘comet the problem Select ‘the comers of your shape until, ‘the Fst frame inthe faulty ween it snaps. and then go to Medity > Shape > Add 5 Shape Hint €GRD@) GDSIDD. 58‘lk outside the shape to end the vansfrmation. Select it gan old down the bottom mile handle upward, The QHD key wil constrain the shape vertical Modify the shape in frame 1 by Aipping it vertical. 1D Soe test yan yr ‘ween and drag the aren 3° hint to the same respective comer Repeat this procedue again fr the opposite corner White writ= ing this topic, Turn the Onionshn tol so you can se the previous | 8 common ey and dag the frame Postion the ney transfarmed shape so that = weakness with it s entered over the origina shape seen trough the ‘Shape tweens oninstn Sistitetoviameintame nd copy the fae EEO EDO. Ne, seer Fame 20 and paste the fame EDEID ooo 1.3 Mees iatte to mi 2 Slightly darker version af he ‘color ofthe card and then use till ‘the shapes in frames 10 and 1 in Flash, Due to ‘the nature of vectors and how Flash tries to ‘caeutate what ie thinks you ‘want t achieve, sometimes the ‘cen implodes cor tists fn ‘ways we never antipated. Shape hints cx- St it fr this very reason and they are easy to learn orm ! about inthe Flash Help docs Analterative ‘salution for this ‘eample would be to convert frames 1-10 to keyframes, copy and past them in frames 11-20 i then reverse ‘them, ‘Apply 2 Shape tween othe latter half f your frames. You may experince a misbehaving tucen like ib when wing his tpi e's Fic vee 1 A Meat oton wens shape, but ls its clr fom light ta dark This coor change mates fara convincing twee-dimenionl EE effect, me 5960 AB s#BoQ\ Po. OS CAN 0740 50> IR T® PREVIOUS CARD FLIP example demonstrates how to transform 2 vector shape wit the Free Transform tol and “Classic Tweens Adobe Fash CSS provides tools to simplify the same process. | debated whether or not to leave the previous “Card flip" example in this book as it could be regarded as a deprecated technique with its use of the Distort too Inthe end, | decided to include it for a couple of reasons: not everyone will be upgrading to Flash CS4/CS5, the Free Transform tool and its subsection tools are stil Flash CS4/CSS features and remain relevant and Classic Tween is stil an option in Flash C54/CS8. Moving forward, let's take a look at an exciting new feature that finally introduces 3D space in Flash at authortime! Global Made ¥ Tre 30 Rotation tol rotates Movie Clip instances Jn space. A30 rotation contro appears on op of selected objects onthe Stage. The X contol dhe Y ‘contol green, and the Z contol blue Use the orange fee rotate contralto rotate around the XandY axes a he ‘The default mode ofthe 20 Rotation tool is lob. Rtating an object in global 30 space isthe same as moving it relative tw the Stage Rotating an object in oa 3D space isthe same a5 mong i relative tits parent Movie lip if thas ‘one To togle the 20 Rotation tool between global an local ‘odes, clk the Glbal toggle button inthe Option section ‘ofthe Taos pane while he 3D Rotation tol is select ‘You can temporary toggle the mode fam albal to lea! by pressing te @D key while dragging withthe 20 Rotation ‘eoHarmer ese (ivaeme 2 aie oe “he fest thing to dis to vight- Position the frame matter on lik ver the Movie Clip and frame 12. Select the 30 Rotation {elect Create Motion Tween. Fash tool. Clk on the instanceof (55 will automaticaly inset ames the eared and notice the 30 rotation based onthe document frame ate to cantrler that appears an top ofthe stheve 2 full second the Timeline. symbol Click sie the 30 control ard This document is se to 24s, therefore crag along the "yx to rotate the the duration af my mation tween 24 cad in 2D spac. Notice that Flash frames hasinseted a keyframe automatically foryeu. aos owe o we sew ae BT Poston the frame marker the last frame and continu to rotate the Movie Clip along its" axe in 0 space ntl ie 180 degrees from ite riginal orientation. Repeat these steps a offen a needed depending on ‘the number of retations you want to IF you want to extend the Motion tween inthe yer frame further dwn the Timeline and pes the FS key without affecting the exiting keyvames simply hold inser frames up tthe selected frame. down the QD key while dogging the right edge ofthe tween. Anther way todo the same thing isto cick ana Press the @ ey to toggle between global and local mode. 61Jun fiRst EDITION the buttery’ wings were animated using the Distort tool (ubselection ofthe Free Transform tool. With the new 30 tools in Fash CS4/CSS it is much more efficient to use the 3D Rotation too! forthe flapping wing animation Here | have converted the orginal wing graphic toa Movie lip symbol and applied 2 motion tween using the new Motion Model The advantages of using the 3 Rotation tool for this animation are faster results and a smaller fle size. The smaller file size is on account of using motion tweens and several instances of the same symbol. Previous methods required each fame tobe re-drawn, resulting in a frame-by-frame animation using raw vector art for each keyframe. This created larger file sizes since each frame contained all new data © that needed to be loaded sequentially when viewing it online 62 Qo AB|ee«—oN\\e¢ ‘Conver the wing into a Movi Clip symbol tice sa you rd up wth a avi ip inside a movi cli. Yu wll want to animate the wig sie a symbol oa 2d instance ante used forthe other wing later, Select the 30 Rotation tool. Click onthe instanceof the wing and natice the 20 rotation conta that appears on top ofthe symbol. Reposition the contr by sagging it to 2 new location. The contol’ postion determines i enter point Fight clk over the symbel aed slet Crete Maton Tween Flash CSA/CSS wil automaticaly inser frames, based an the document framerate to achieve a ful secnd inthe Timeline. Tis document fst to play back ot 20 therfore the duration of my mation tween i 30 Frames. “hiscan be easly changed by dragging the right edge ofthe motion tween left or ig To separate the wings and ad some depth athe bute, move the Back wing to the right few pixels and skew i sight You can ao move the fron wing tothe left and skew that litle ae,(aos | oe os CS Psion the frame marker about mi-way between frame 1 and 30 (rame 18 wil war) Click inside the 30 control and drag alorg the x" axis unt the wings 180 degrees fom ts eriinal position. Notice that Rash as incerted keyframe automaticaly for you emne awe Copy and pose ERED GORD tne movie clip containing the wing aimation to use 35 the 2nd wing Select t and using the Tit eolor effec in the Properties pane, datken it sight to provide a sense of depth ae oe Poston te Fame marron te las frame inthe tween. ag along the axis inside the 3 contol ut the wings bck nits rina poston. Py Back your tiene by pressing the QHD ky to see the wing faping slong the" ai [Allthat’ lef sto create a toa shape, aan ‘he wings toit and publish your movie to See the buttery take fight. Double-click the centerpoint of ‘the 2D control to move i back tothe center ofthe selected Movie Clip == cmap 63sa and stretch QUASH AND STRETCH is a traditional ‘animation technique that is widely used to give animations more realism and weight. When a moving abject comes in contact with a stationary abject, it wll deform on impact, unless itis completely rigid. One thing that is important to remember is that no matter how much an object squashes or stretches, it always maintains the same amaunt of volume. ‘The amount of squash and stretch depends ‘on how much flexibility your object should have. Traditional animation usually contains ‘exaggerated amounts of squash and stretch. A good example ofthis is a bouncing ball. When it hts the ground it actually deforms and gets ‘quashed. it will then become stretched as it propels itself upwards. With a litle Mation tweening and frame-by-frame animation in Flash, we can achieve convincing realism with relatively little effort. 64 7 Satine cin shes position, Conver itta a symbol and then eit its center point usng the Free Trantrom too. Move the center pint tothe center ofthe bottom edge. Soe Ho oe one Too Gane Boor wast 2a Gemeente inserting yt anoter keyframe 1 removing al rarsarmations “he Transom pane has 2 Remave “ansform button to make this ane F alc soluton Inset a secon keyframe further own yout timeline and poston the al vertically just above the horizontal que. Apply a Motion tween vith Eig set "100° (as i). 77 serif tae ange itasyourlast frame. This wil postion te ball tthe endo our Timeline i the exact ame potion a: itstaned. Apply 2 Motion tween and Set the Easing 0 "10" (ease out,Inthe next fame, insert 2 eyfame and turn onthe Orionsin too: Use the Fee Transform ‘aol to scale the ball of becomes wider and shorter Its imprint to Inset another keyframe about four ove frames further down the Timeline. Squash and stretch the ball even more. Apply a Motion tween and St the Easing 0 "100" ease out Insert another keyrame afew ‘tames down your Timeline ané ep the volume f the ball consistent Se. "| |< er Lect Slits at Flash C55 offers way to reuse animations. Copy Motion allows a Casi ween, frames and yma information tobe pasted to another abject. Selet al the frames in your squash a stretch animation. Select Eat > Timeline > Copy Mation teansorm your tll inthe opposite = Ag you ereate ireton Make suet stillhas some various efomationaplie tit ‘imation ‘examples from your day-to- {ay warkflow, is 3 good idea to keep them allina single FLA document This serves as 1 great way to ‘quickly reuse ‘using the Copy Motion feature In Flash C34 and snow CSS. 3 ener and cen eg ome ra) new sylt he stage Select hs new symbol 4nd gota Eat > Timeline > Paste Mato. Your ational symbol wil now have the same exact span of frames, Motion ‘eens, easing and wnsformation. Tanks to oe Cao for onributing te character above (core. com 6566 Being subtle ANYONE WHO HAS EVER heard me speak publicly about Flash and what led me to this industry may recognize the term "moment of clarity’. As an artist, there have been several of these moments ~ the most memorable transpired long before Flash was around, It was spring of 1989 and after four fulfilling years at the Hartford Art School, I was finally about to receive my BEA degree. My drawing style during this time could best be described as hyper-realistic. I was illustrating images that looked like actual photographs. Sometimes the illustrations would fool ‘even a well-trained eye into thinking they were real, at least at frst glance. ‘Objects caught in motion as if snapped by some high speed camera shutter, foreshortened as if they were literally flying out from the page and about to hhit you sqaure between the eyes. I can only imagine this style represented my excitement as a young artist having this ability to push the limits of light and dark onto a two-dimensional surface, with only the best professors looking over my shoulder. I spent so many hours trying to master this drawing style that | ‘would often have to use my left hand to pry the fingers of my right hand off of the pencil. Most of my work was large in scale, 18” x 24” and even as large as 30" x 40°. A large majority of it was lithographs and etchings that took weeks and ‘often months to create, One afternoon I had a leftover piece of copper plate that was about to discard, It was small, about 3" x 7°, and tiny compared to what was used to, For no particular reason I drew a rough study of a figure of a ‘woman, I spent no more than ten minutes on the drawing before throwing it in the acid bath so it could be etched. I rolled some ink into it and printed about six copies of it. It was a simple drawing, loose in line style, and very much the ‘opposite of the hyper-realistic style I was known for, and for this reason I didn’t ‘think it was a very impressive piece. I contemplated tossing the print and the ‘copper plate in the trash and going back to my much larger and more realistic pieces. But something told me to hang on to it, a least fora little while. So 1 slid it between the pages of a book in my backpack. Like all graduating seniors, we were celebrated with our own showing in the school’s gallery. While setting up my show, I carefully chose my biggest andnext to the ‘was going to point to the langest and most realistic piece, I was shocked when he ‘turned and pointed to the small etching next to the light switch, My heart sunk and for a moment I felt as though I might be insane. He explained to me that its simpl and essential quality provoked an emotion ‘within him and compared it to Rembrandt or Da Vinci. He told me it was a milestone not only in my career, but in any artist's career to draw like that. It was subtle, and ‘that subtlety made more of an impact ‘than any of the other pieces I had done in my four years as a student. The world of art changed for me that day and, in some ‘ways, the way I looked at life changed as well. It took four years and that very ‘moment for my eyes to be opened as an artist. was changed forever. It taught me more than I ever thought I would be able ‘to know and it’s a lesson I carry with me to this very day. Being subtle is powerful. 67Having the ability to control the way two or more layers interact with each other through the use of masks is vital to your abilities as a designer and animator. The coolest thing about using masks in Flash is that not only do they help you to create stunning images, they can also be animated, a very powerful concept that can be mastered easily. 6970 Fist step ito create the continents. quick ain image search wil yield plenty of examples. Import the imap into Flash ang eave it 35.2 itmap a use the Trace Bitmap feature or manually trace i using Fass drawing tools, Convert toa sym HENEVER | WORK WITH MASKS, | fee! like a magician. Masks provide the ability for you to create illusions, much like a magician’s “sleight of hand” technique. It's all ‘about what the viewer doesn't see and you, as the designer, have the ability to control that One of the more popular animation requests from Flash users is haw to make a rotating globe. The first thought is that a globe is a sphere and to animate anything rotating around ‘a sphere requires either a 3D program or pains~ taking frame-by-frame animation. Not so if you ‘can use a mask. Remember, its not what you see, but rather, what you don't see. The neat step isto create a masklayer sing yet another op ofthe cre inthe bottom layer. ieate 2 ne layer above your continents paste in place the ce and ‘then convert this ayrta a mak yer. Thi wl prevent the ‘continents fom beng visible ouside this ile Al you need 9 donow ismation tween the continent eymbelacroe thisCreate anew layer and move it below your continents Draw a perfect ce using the Qual tol @ while helding own te QU hy. Selec his cca cop ‘then paste in lace on 3 new layer above your continents To acid too much of 2 delay inthe animation between the fist and ast frames, you can add anew masked layer with anew instanceof your continent symbl. The test way to make tis looping animation ae seamless as possible to copy the fist frame of the continents and fasten lace into the las fame of you Timeline. Then wrk backnardsin the Timeline and position the continens utsde ofthe crcl tothe righ. Mixa radial gradient similar to the oe shown and fill the ile inthe layer above your continents: Make sure {9 mic enough apa into each colors the continents wil Show trough Using the Gradient Transtar toot @, ei Your gradient so thatthe highlight edge is off-center to ane sie. ‘Since the Fist frame is exactly the same athe ast frame, an each rame ia between represents 2 slighty iferent potion forthe continents, selec the symbol in the at fame and ute the aro key o nudge it over 8 few piel Tis wll avid the two-frame “nestation”in the movement ofthe continents everytime the playead retuns ftom the at fame to frame You ean ahways move your entire 2 Movie Chip Symbol so that itcan be easier to poston, 2d multiple ‘lobes and/or target wit ActionScript To do this drag across all frames and ayers to hightignt them in black. Right-click oF Command-cick ‘over them and select “Copy Frames” from the context menu. Open your Library and erate 4 new Movie ip symbot. Right-click oF Command-cick ‘over frame 1 of this new symbol and sleet, Paste Frames cmap n2 I HE WAVING FLAG is a popular how do I..2" request in the Flash community. To be honest, it plagued me for quite some time as to how best to achieve this animation. My initial reaction was to use shape tweens ‘and frame-by-frame animation but that proved time-consuming and had unconvincing results. Then one day, ‘out ofthe blue, it hit me: if | slide the right shape across a masked area, | could create the illusion ofa flag ‘waving without having to kill myself animating it in a traditional way. It suddenly became so easy anyone can doit ‘You will begin by making 2 nice Long repeating ribbon shape. Start with simple rectangle wth any color fil and no ovis. Mate iva ite wider than tis tale, Repeate step three by pasting your new shape and fipping it vertical Then attach tothe sie ofthe shape again. Se the ribbon pater taking shape? But your ribbon is said color and lacking some depth, let's continue by acing some shading. ‘reat mack ayer above the ribbon ler Using the Rectangle teal, make a shape big enaugh to caver a section ofthe bbon 5 shonn. It els to use high contrat ele. (Tease ns 8 BD RD oh et te fas waving si pesses tough the mas Bot et srt top A Let’ animate the mask using shape tween to further emphasize the eft and right edges ofthe flag waving Use the Selection tol to bend the left andright edges. Create 2 Keyframe further down the mask layer.Use the Selection tol to bend the top an bottom Paste your shape and then fp it vertically. Use he edge sighty 2 they have ance ae to ther. Yu wl Selection tol to dag itso that it connects tothe ‘want to repeat tis shape ta create a pater, so select erignal shape. Once these shapes are joined togethe elect and coy. cums td cory ig = ae Mix twa clara ad them ta the Swatehparel Mix Once you hve the ison the way you want elect, Sines qracent wih several color pointers atenating © it usin @ED DED. conyitusina CIO DO Between these two clo values Fill your ibton shape with and then pst it sing HUD GUD. Align it eége to this acer and eit itso that the darker tones are inthe edge with the original shape to essentially doublet nat concave sections ofthe bon shape. Conver ita symbol. Next, create a leframe somewhere down the To coeate a stamles op ofthe ban, copy and timeline and reposition the ton tothe left ofthe paste in place a new instance to asecand masked: make sure the ‘mask shape. Aply a mation tween. layer (sng the same mast) Motion ween itso that it: fst and lst {allows the original ion shape without creating am " . 2rY dential To do = ‘this use copy ames, paste frames or copy the object in| ‘the ftst frame and paste it in place inthe Last frame. 1 nits came enh etd hse 2 Dee ta a ipl nd sy aid ofthe mask shape inthe apposite direction. Apply foran even more convincing illusion. Ty placing ‘Shape tween Repeat hs procedure uti the last fame this animation ina Move Clip symbol and dag few ‘eached. The animated mask adds an extra animated touch instances af itt the stage Seale them and arange them in to the veal ag waving effect. Presto! You ae done. perspective forte ultimate lag waving eect. 734 T ARE USUALLY SEVERAL WAYS to go about creating the same animations and effects in Fash. Whether itbe animated on the Timeline or dynamically generated using actionscript, it allows us as users to work within cur own comfort zones, A simple irs transiton is an example ofan effect that could be done several different ways. | personally wouldn't know where to begin coding this kind of animation, but give me a Timeline and some keyframes and | am in my element. Using a mask for this example provides us with even more options; we can easily contol the direction and focus of the iri itself, where it tats and where it ends. This can be a nice touch to ‘your storytling if you want to focus the viewer's attention toa very specific area ofthe screen, Fist step isto create a simple cle using the Ova too! @ Tre fl color'sasgncane Hold down GH white raging to constrain its proportion. Do not conver this shape to a smbol but, rather, convert the layer to Mask layer ‘Add anew ayer and rag it over the mask layer soit becomes inked tit as amasked yer This the layer here your content wl resid. I your content requires multiple ayer, then make sue they are all mack or nave llconten into a new bo and dag an instance ofthe Ssymbo to the masked aye.Seale and Rotate sail? |x [ox] Rotate:[0 degrees [Cancel ——— Bee Feb zee wwe gok = In fame 1 sel this cre as smal as possible. Create a keyame a few ames down yourTineinein.: [ETOTRTTSN Open the Seale and Rotate pare! using SHED the same mas ayer Scale he ccs that it ever, DED. type in a percentage and cick OK-Use the Align the stage completely. Convert the shape to outlines so you | Feel ree to ane sing @1GB GIDE to center the crcl othe stage. can see the tage undereath it Apply a Shape tween zo the experiment with ‘Sele grons from small to ageing the stage completely. = colors other grows rom sal oa lng the stage competey. Slr th Sometimes radial gradients can add some fun depth to this transition effect. Iie easy to substitute diferent colors or textures by changing the background layer at to whatever you Create anew layer (nat masked) teow all the other ‘Since you ate eating the effet with an animated layers and eeat a black etange the size and shape ‘mac, you can easly contol what area ofthe stage the of the stage The color ean be anything you chose, but Black irs focuses enn the last keyframe, positon the eile in ‘typically wars well fortis type feet At tis stage you the ast ame over the character’ eye. When the animation can reverse the animated mask by copying keyframes np, the is will animate and clsein on the eye, atypical reverse erder an appving anther Shape tween techrique used in several cartoons.Ts ONE OF My FAVORITE ANIMATED EFFECTS because | am asked frequently how itcan be achieved, yet itis quite simple in techrique, Ever ime demonstrate how to make text “ie” itself the eatin is almost always the same:"Oh vow! That’ al there is toi Te example here ses an arimated mask which yields a very smal filesize, deal for large blocks of text 76 Hand writing 2 ME Sat se we ome est onthe tage x mera sucha fot and star typing. By default, tex elds in Fash are set ta Dynamic In some situations th may be fine but when an effects zed to the txt Fd the text may nt render eorecty inthe Flash playee Such effects include masking, sph, ration and scaling, Ifyou ned to use Dynamic text, embed the font outines [Hand writing “adda nem ye above your et ye and comer it to mask ye The text ye will 3 sttomatesiy bene ota ase aye are one, dow aretangle st the eof Your text, making ute it i a5 all asthe teat itsel 105, [leo mw ae ‘Hand writing Now just apply a Shape tween inbetween these wo keyframes Lack al ayers and play your movie lor test your move toste the effect oF your ext writing selop meres, Alma sve memmis © 401) Sot Hl baton — 3] woo! aon Daten 8 tt 2D Ve hone charge he behav f youre elo ia he ft wil be nbn te “compiled SWF and the Fash layer wil ener it correct even with an effect added oft Another (option isto break apart the text unlit becomes raw shapes. This wl insure he text renders corey but also creates larger lesze anit wll be had to et the text if ned be inthe future. In this same lye, create a heyframe further down the Timeline and scale the shape horizatally 50 that it spans the ene with of your text : IF you want a ‘mare realist ‘the frame-by- frame method in Chapter 7. aa Ir you need to use Dynamic tet, you mustinclude the font becouse embedding al characters can icreaze fle ‘ules so that the test renders corety nthe Fash player. Tose signifcay. Tere’ secton inthe Options “otis, selec he Dynamic tex Feld andthe click the "Embed. panel that allows yu to type in us the characters button in the Properties pane The Fort Embedding panel wll {hat you are using onthe tage. These ae the ony appear sllawing you to choose the range of characters used in charters that wile embeded and as result, Your animation, Ty to lect the minimum number ofcharactrs keep the filesize a small posible 7778 The fist thing shine spotioht ro, Comer it to. smbo. The bedatk if not mpletl ls Jer to show light we ist need 0 ate darkness. This technique would have the same ee ifthe Your image layer ad layer The image layer wil automatically 2 masked" layer Draw a shape oe own the SD ey to constrain i proportions Cave animation. It really does create various visual effects using an animated mask, such as this spotlight effect fora client's logo. Sta gD SEAdd a keyframe further down the imelie and poston he mask shape to he opposite Side of the image. Apply Motion tween hat he mack shape passes acres the making this in pace the image he arial aye Make sueitisa masked). Select he This ayer wil not bearfected by the mask Test your mask pass over the while te darker unmasked and visible Don't be afraid to add more keyframes in your mas layer and position the mask symbol in various positions relative to. the image it is revealing You can ako animate the mask getting larger and smaller by Scaling it Be ‘creative and change the Shape ofthe mack to 53y two erles side-by-side to suggest we are looking trough binoculars. 79O« OF THE MOST EXCITING Ox: FEATURES in Flash Fist you ned to start with an image, of couse. This might tea good time to browse your hard dive or grab your digital camer. It aes’ have tobe 3 is the PSD and Al importer. Since azer-pasea image r even a photograph canbe vector art awn in Fash or (C53, we finally have wonderful imported from adiferent program. Whatever mage you chase, ou wil ned integration between Photoshop | "™® vor. the argnal anda lured version of he original and Illustrator alike. For this, example we will edit an image in Photoshop, save it as @ PSD file and import it into Flash via the PSD Importer wizard, We wil also add a slight touch of ActionScript for some added interactivity. If you suffer from ‘ActionScript-phobia, don't panic; this will be painless with only a couple of lines of simple code. If lean do it, you can as well. The code simply will hide the cur- sor in the Flash player and allow us to drag a Movie Clip around the stage. The trick here is the ‘mask itself, allowing us to see the Sharer image tough tema hd toa Move Clip symbol Lock these two layers to see the mask workorn] The shape of | your mask ‘doesn't have to bea ocle. It ‘can be as simple ‘or as complex 35 you wish to make it Experiment in Photoshop with image effects beyond blaring ‘here's enough fads (B® | pts — 2 rene imagen tty nd cpa te yer nash ng he FD he yout crt, PD itis onso you nave two copes af the same image. impor wizard will appear and prompt you with varity ‘ply 2 Gaussian Blur toon of your image. Save the fle as of option. The lft panel nl ipay al he layers of the FSD 2 PSD fie file. Click on them tespay options for each You wil aso want to convert layers to Fash ayers, place layers 3 final postin and set you Fash stage to the same ize 25 your! ty'choose from Protshop stage 10 keep you busy for 3 while. Upartcuaely lke the Glass ‘ter (Filter > Distort> tas}. EPSRC femme > > couonorecr pena 2 as Yow aan done! Lc al Lethe estan ot osc AconScpt1020: Inertenetectec- Rots 7 theMove Gps ening Mowe batting engsrte mast hemaacsape nee Popes Straws stats tere Tinetoadsome par pena isan ae finaly howe Youu? fr the sample ah Far Att 3 theMonecip si sccctd open the Mawel <== cone part and ype elongate ooaD eens xe 81S INCE FLASH 8 andthe introduction ofa feature called “antimebitmap caching, we have had the ability to create masks with that desired feathered edge | know that oftentimes when the designer world overlaps the developer word things can gta litle bly To be honest, even the most code-phobic designe cn use ActionScript integrate dynamic mask into ther designs. All thats required is felines of very simple code. The fist step sto crate a aca gradient with 2 colors. The mile ‘lor should be slid andthe ater colar shoud be mised with OF alpha. Tis wil ceate the featered edge tat wil later be used forthe mast Using this gradent 2 your il oor, select the Oval @) tool and drama cele on the stage To constrain the circle sa that iis perfecty ound, ld down the sit ey while dragging, Convert this Shape containing your rial gacent to a Movie Cp symbol. With this Movie lp symbol selected ve ithe instance name "maskbC™ in the Properties pare! You will ned two diferent images to transtvon between. Here ave chosen mage from a recent ipo Amsterdam | ook to speak at FITC (Flash inthe Ca]. Place both images on diferent layers one directly over the ether For lary, wl refer to these a mage Mand "image 8 Image A will Simpy ree on the bottom- ‘most ayer Image 8 wl be the one we revel with the fathered © mask using ActionScript. 82 Since the mask ser wile controll with ActionScript, we will eed to use actionSrpt to campost it the image hat wil revealed during the transtion. Carvert Image 8 1 @ Movie Cp symbo and give ithe instance name "mask. image’: The nly thing eft todo is app the coe tat tel the aca grdient to ct 5 mask and sppy self to mageDowble-ick the Move ip to enter Eat made Selec the radial gaient again and convert it to Snather symbol Now we can erate ance wantin effect by animating it Using a tween scale the yo fom very sna to very age large enough sa that covers the stage completely Pace a stop) Action atthe end of his tineine. fe ORCL 1 Geevemieze DB | POW E @ seenvorn Qo DOVE OME Seodesnooes \ 7 (By cist unevons By Acronscioe 20 cases By outa reeins DB Operators statement BD compuer Drectives. constants B Toes [By Deprecated (Bh) osta Componente omerens scrcens B isex stops Une of 6, co Inthe Action pane! (F) type in the following code: ‘mask image cochasBitmap = tue; This coe caches the image so thatit canbe masked at runtime in the Fash Payer ImosthtCcachAssitmop = rue “he cade of Lin 2 wl sign the Movie Clip “masihtC"to ct as 3 mask a untine ‘mask_inage. cacheAsBitmap = true; rmaskiiC.cacheAsBitnap = true; mack image. ctHaci«(maci0C); ‘most image Most (most) Ths wil sign the mask an the image to be composted together That's theres tot Make sue you open the source file "Yeathered_mas_etonSeript fa" onthe CD in the back of this bok ose this effect inaction ‘caching Movie ip symbols has huge advantages in Fas, You wi ‘ain significant Perfomance because there less demand on ‘the processor ‘calculate ‘the math necessary to render certain property effects. ‘Caching a allows for more advanced levels ‘of compositing ‘that can not ‘otherwise be ‘done in prior versions of Flash,84 A moment of clarity I REMEMBER THE MOMENT WELL, AS I SHOULD since it was the moment ‘when I realized what I needed to do as an artist to make my mark on the ‘world, What I wasn't sure of was how big a mark I could make. What made the moment even more significant was that it took me over 6 years to figure it out. It began in 1989 when I graduated from the Hartford Art School (Connecticut) with a major in printmaking with a minor in Art History. | took enough Ilustration classes to constitute a double major. The result: a portfolio filled ‘with static lithographs, etchings and a multitude of illustra mediums. Animation didn't exist in the curriculum and therefore was never an ns of varied ‘option. I never considered animation as a skill | would even be good at. ‘After graduating, I pounded the pavement with portfolio in hand, knocking on ‘as many doors as I could. With the exception of a handful of interviews, having no experience did not get me very far. The Internet didn't really exist back then, at least not as we know it today. The term “home PC” wasn't invented yet, and I was stuck with a book filled with analog images that represented four hhard years as an artist and hardly anyone to show it to. ‘After six years of countless random jobs (Jeep mechanic, restaurant manager, Boston Water &t Sewer Collections Dept, ete..}, I became aware of a local ‘education software company that was producing a new animated series on Comedy Central. On a Monday moming I walked in the front door of this, software company, gave my portfolio to the receptionist and told her I'd be bback on Friday to pick it up. I turned around and walked out the door. ‘A month later, they hired me to work on an animated. ‘At that time, the company used an old DOS-based animation program called Animator Pro (Autodesk) that soon became obselete. We turned to Flash and little did I realize the impact it would have on my career. Initially we were using Flash to animate for broadcast shows. We didn’t have a clue how to use it for the Web until we got a deal to produce an animated series for shockwave. ‘com (now atomfilms.com). | was put in charge of this project and had to ramp up my knowledge of Flash very quickly. During this time, my contact at Shockwave asked if I could speak at the Flash Forward conference in New York lot for Dreamworks.City. | agreed without knowing exactly what that meant. | drove the 3 hours from Boston to NYC the day of my session. I shared the stage with two brothers, Gregg and Evan Spiridellis, who had just started a small company in NYC called Jib Jab (ever heard of it?). We became fast friends ‘and remain so even to this day. ‘That evening was the Flash Forward Film Festival, held in a huge theater with a very large screen that displayed the best use of Flash in several categories ‘Awards were being given and the excitement in the air ‘was palpable, I never anticipated that a soRware program could generate such a buzz, I was witness to a culture being born, an entire society of Flash users who shared a common bond asif it were some secret handshake or cryptic language. And there I was, standing in the middle of their nest, surrounded by the frenetic buzzing and energy derived from this. program. It was my first experience seeing the best of the web being ce'e rate’ on a huge stage and it suddenly all made sense to me why was there, what I was involved with, and what I had to do. It was my first ‘moment of clarity To describe the image of me standing in the back of the theater, watching this phenomenon transpire, recall the scene from The Blues Brothers film where John Belushi is in the church chanting “The band!" as he is struck by a holy beam of light through the church window. That was me. I knew from ‘that moment on what I needed to do. I drove home as my head was spinning with ideas about how I was going to display my art with Flash for the world to finally see. It was a 3-hour drive and I never even turned on the radio the whole way. 85ie cee nee critical to their success visually. In this chapter we will examine the differences between the new Motion tween and the Classic tween methods as well as look at a few of what | consider to be the most valuable motion effects that you can use in your everday life as a Flash designer and animator.COTION PRESETS ARE PRE-BUILT MOTION TWEENS that can be applied to ‘an object on the stage. With the ‘object already selected, choose the desired preset from the default list in the Motion Presets panel and click the Apply button The preset animation has been applied to your new object. The default presets provide a great starting point but youl likely want to make your own, Flash CS4, and now CSS, provide the ability to save your custom ‘animations as presets that can bbe reused over and over. You can ‘build up libraries of animations that not only can be easily applied to any object on the stage, but ccan also be shared across the centre Flash design community 88 Motion techniques. — 6 to Window > Maton Presets to ‘pen the Motion Presets pane This pane! ook lt ike the Library pane! vith its preview window on tp and Ist of folders and preset objects below. Just select a preset to preview it The Motion pth canbe cate using the Selection @D sn Subeeecson G too! Here the Selection tool is eed to edit the curve of the path by raging between its ed pints Make sure you cick onthe stage ‘way fom the path to make sure ‘the gah is deselected Fist. Use the Subsection 9 tool 0 et the ‘contol points using the Bezier handles Make sure you hae an object, selected onthe stage before Selecting Motion Pest animation (Once you have a preset selected, ust click the “Appi” button Your abject on Stage snow animates ‘that appear when sletng an end point ora property keyframe slong ‘the path You can use these handles to reshape the pth around the property keyframe points,Once the preset i appli Fash aplies a Motion tween to the object containing the propery animation dat, You can leve the animation ais rue it 3 starting point ‘by edtng the arimation a suit your nee. = Eom £ Toapply the E preset so that E its mation ends Eat the current position ofthe ‘object onthe stage, Shirt ‘lik the Apply ‘button oF sleet End at Current Location from ‘the panel menu You ean aso apply a ‘motion preset to multiple selected frames layers 35 long E aneach selected frame contains E only a single ‘weenable objet. asa eae aa aA ‘You can eae previews fr your aston mation presets by String Sn SWF fil ofthe animation inthe ame tdrctory with the maton preset XML fle Cate the tweened animation and ave t 35a custom preset. Create an FLA ile that contains only 2 demonstration ofthe ween Sovethe FA withthe exact same rame a6 ‘the custom preset. Create an SWF file fom the FLA le with te Puls command. Place the SW file in Conigratin|Motion Preset ‘he sme decor asthe saved custom mation preset XML” Macintosh: chard disko/Userl|Cofiguration)Mation Windows: C\Documents and Setings\Loeal Presets) Setingslppliation DatalAdbelFlas CS languagesSs: MUCHAS CHANGED sine Fash 4. ut so muchas emined the ame What oes this mean forthe veteran Rash aimator hn aed has ed and tested woos that cnt be broken? What features are you moe ikly to adopt and which ons wl ep you creat et animation techniques that right increase your rouetin? yu emer oe thing about he wo tween methods in ash S4 and now (55, emember thatthe Classe tenis fame-bsed wie he new Maton tween isebjet based Tere are abantapes And dnvatips tong elherand the dfeence depends on what kind of bjt you ae animating a what that dbjet nes od oyu. There ates inany ferent objec type that can be ween in Fash: Movie ips, raphe and Button tye smo, imported bitmaps and et lds. The wo eret ween methods can complicate matters when yng to understand wat tween o use with wht kind of bet ets sat y comparing bath weeng metas sid by ie ad nd cut hy Fash C54 and S5 ofr bth, 90 OE ed Motion and Classic tweens If hie dt ishollow (white, t means the bjt hasbeen removes anda new object canbe assigned gos Black iamonds indicate the las fame soon seers pve 3 and any the property keyframes. ‘ween path tha can be ete ‘black dt at the begining keyframe with aback arom and blue background indicates a Classe tween Use Classe tween to animate between twa diferent alr properties, sich stint and alpha transpareney- Motion fweens ae limited ta cla eect per tween,Motion ens ar indicated bya sli ight blue Cassic teens ean not be saved 3s ation calared layer san. Unite the Cassie tween pan Presets You can only save Maton tweens 35 ‘here are no horzontal dashed or slid nes or Preset animatians in Fash CSA rows indicating a broken or completed tween A tweened frame's any frame between Motion tween spans canbe stretched eyfames within a tween span and sized in the Timeline an are ‘weated as single objec. You can animate 20 object using 1 Motion tween but 2D frat i Supported with Classic tweens IF you remember one thing sbout the two tie, “ ‘ween metods, remember tat| the Casi teen is frame-based vile the new Motion tween is Cassic teen use keyframes Keyframes are frames in objectbase which new instance ofan abject appears With mation seers, you cannot swap Symbols or set the Frame number ofa graphic symbol te display ina property seyfame Animations that include these techniques require Cassie Csic tweens can nat be stretched and resized in the Timeline ike Maton ‘ween pans can. Classic tweens are comprised of frames that have tobe selected Iniviualy and inserted or removed in order to stretch or shorten the animation. a1Creating Motion ‘tweens Te yd HINK OF THE MOTION. TWEEN as a Classic tween on steroids, allowing you to animate each property individually across an entire motion span. This was difficult, if not impossible with previous versions of Flash and Classic ‘tweens. The combination of Motion tweens and the new Motion Editor allow for a myriad ways to create motion in Flash. The flexibility cof having each property independent of each other is ‘enough to make your head spin. If that wasn't enough, fone of the most popular timeline-related enhancement requests is now a reality: the ability to lengthen and shorten the Motion tween and have all keyframes interpolated ‘automatically. With Classic tweens this can only be done manually and the more layers, frames and keyframes, the more of a nightmare this, process can be. Let's take a look at more differences between these two tween methods. 92 Create Classic Tween Insert Frame Remove Frames Insert Keyframe Insert Blank Keyframe ‘Clear keyframe Convert to Keyframes Convert to Blank Keyframes (Cut Frames Copy Frames Paste Frames ‘Clear Frames Select Al Frames aos feoer Motion tweens can be applied to symbols and tet fields A tween span ina aye can ‘contain ony 1 objeto 1 ex fell, However you can have multiple objects nested iste a single ‘object being Maton tweened To app Mation ‘ee, ight clk over the object onthe tage and select Create Matin Ten fam the context aad I aoe ee 2s ee ‘The quickest way ta create an animation sa motion path that can be edited using the tosimply mve the object to anew postion Selection and Subselection G00. onthe stage Fash will automatically createOy = The terms B40 45 A Sytmen SS and property keyfeame” are z diferent in aug 4 @ Ge ee oe os TT tases at oO FO Sete 2 fash astontiay tense wen pn frames per second then your span becomes 24 frames long. keyframe refers sccommodat full econd's wort of ames based on The payhead markers automaticaly positioned atthe end toa the document's frame ate IFyour fame ates set to24 ofthe tween pan. the Ti which a symbol instance appears fon the Stage for ‘the frst time. The sy term property keyframe, whieh iemew to Flash (4 refers to ‘value defined Tora property at specific time or frame ina Motion tween. [Einstence Neme> Mave Clio iy Instance of 1 object Use the Pston and Size featuresin the Properties par! t contol the exact poston and Sie ofthe objet. These ar ht text sles that allow you to crag acros them to change heir ales a= well 2 select and type in the value manually SEsMotion techniques ——_— Working with Motion spans — (0 HOW DOES THIS NEW MOTION TWEEN model work anyway? | nae ERR Not only has Adobe changed how It oni that Fash CSS’ Motion en span loos so plain and simple yet ‘tweens are created and applied, but ‘offers sa much power and flexitilty just under its serene facade. You will not how we work with frames, keyframes find horizontal ines wth arow heads in betocen keyframes. You wll nat see lashed lines signifying broken wens vical nes representing non-synced and the tween span itself. The new jeyrames This brave new word for Flash tweeer anf ta ine Fam Motion tween is very different from its : Fish animation legend lath Baran: “Al af your tweens hve finaly come tv.” predecessor visually, sans any dashed or solid horizontal arrows, or vertical pT lines indicating the “sync” feature boeing turned off. The Motion tween span is simple and straightforward, uncluttered and unadulterated, yet provides the ability to create sophisticated animations that go See eee ee beyond the capabilities ofthe Clssle | <= Caen a Tomove aston inthe Tine, setting on tan then cick and rag it to anew action inthe lye. (ese ae ss To split a tween span into two separate spas, Ci-cick Windows) or (Command-lick (Macintosh a single ame in the Span ard then choose Split Motion fom the span context menuteas ‘olengthen the duration of your animation, dag ether You can select range of ames ina Motion span the left or ight edge ofthe span to the desires Frame. by holding down ID while dragging across the Fash will automaticaly interpolate all the keyramesin the desired frames, Span aecotting tot new length. To add frames toa span ‘thou interpolating the existing keyframes held own (GD GD shite while raggng the eége of the span aE Toselecta single fame ar keyframe in a Motion span Toselecta range of fames ina Maton spa, hol down hold down Gand clk the frame or keyrame ‘he 9 GD key while draguing across the range of| nce selected you can drag the keyframe toa new frame, or frames and layers you want to sect. alt clk to duplicate while dragging oa new frame. You can duplicate a Motion span by sletngit anda Mationspan ad overlap with an existing span the ‘hen Ralding down the @B GIB At key while dagsing ames shared by bath spans wil be “consumed” bythe span into a new location. Tiss super easy way to duplicate an being moved into this pston animation seos ayers ad ther Mation spans. you drag ‘When working with Mation spans, keep in mind that ‘contrlling rested inside a G symbol (ee "Lip Syncing, nesting method” Play Once and single frame) ae applied once to the entre span. They ean not be applied ‘indivi property keyframes inthe span. Therefore your ability to ‘Contra nested loc, whichis ‘the man reason why Adobe retained the Cassie tween method"Loot. ————$—$$—$=—— diting Motion paths | F YOU ARE ALREADY FAMILIAR with Flash and the Classic tween method, then you may have, at onetime or another, experienced some frustrations toying to work with frame-based ‘ ‘tween model. Throw in the need to Right click over the abject and animate your abject along a path and yur workflow just increased even more Previously, if we needed to animate ‘an object along a path, a guide layer needed to first be created, then linked to the abject layer, and then the object needed to be manually snapped to tooth ends of the path with the aid of Use the Selection Q@ tol and selet Create Maton Tween. Flash automaticaly creates a Mation span ia the Tnetne ith te playhead aver ‘the last frame of he span, dag the object toa ne lacation to expose the Motion path on te stage : Use the Fee Tantarm @ to! to scale rotate and skew the Motion path 2 you would an abject the Snap tool. The new Motion tween method eliminates the need for al of these extra steps In some cass it maybe easier to create a complex pth by dawing it ona new ayer with he Pencil @ or click anywhere onthe stage ‘oy fom the Motion path to isure its desletes.Reshape the ath by “Simply dragging itanyuher along the Segment Selec the stroke apd hen copy it BODO sect entation gan in the Timeline othe object on the stage and paste your swoke OD Feo too. 96Wit ne Subseletion too you can expose the conta points nd Bezier handles onthe ath that avtespand to each position property keyframe. Youcan use these hales to restape the path around the propery keyframe points. . eet Pasion the pay head ona frame where the object sides midpoint ong the path Drag the object to feshape the path automaticaly. d You can reposition the entire Motion path andthe animation by Selecting i with the Selection Q tal and then draging it oa new location. . pveewne Ir yu dig a ite deeper into Fash CSB content menu, you may iscover yet anther nee feature called "switch eyframes ta roving” The tionary defines roving a: "at «signed or restrited to any portal location, area, op ‘te In keeping with that definition, Fash describes roving leyfrome as :"-heyrame that sot ike t a specie frame nthe Timeline" What thi means in Fash terms i say oa You create an animation ike the ane pictured above, where an objects follwing a path with several unequal segment. Exch segment pans adferent number of fames causing ‘the object to rave at diferent speed long each segment Ifyou want the object's movement toe fed, then right click over the span and goto Motion Fath andselect Switch leyfomestoroving. With the Subselection| ‘too selected, ‘ld down the QD, to temporarily perform free transforms to ‘the Mation path 97Os eC om os Selecta Motion san inthe time ard hen ope the ean, oso the plated onthe ested ame Moon itr ita atedy open gto Window. ante he “Ad arene heyome baton ea > Nation Ets This parle you vw ale diferent Akeames aed tte rae i tested property | ponucsond pope eyomese oe seected tween a Yucan use Stein ol oct at og Each propery is deployed san nul orzrtalvon raging veal nceaes of decreases the amour and / fatwncn ced ends eral Ome yauhoe” ect fhe stew You on aio cape eyome fea Created teen inte Tne te Motion or alows diferent fame E you to control the tween in several ferent ways Toad Se ae os Ezy Right liking over a teyrame along the property curve isthe opposite fa camer pant with cues on both sides. FD will prove several curve options: corner point, moath_ Smooth left an right will apply a cue to either side af he F point smaoth et, smooth right A comer poitsa point pnt respectively ‘that has no cue applied 0 ether side of it A smooth pont 98‘You can edi the cave by halaing down the Alt key while clicking the keyframe. Tis wll expose the Bezier ‘curves and handles allowing you to fine-tune the shape ofthe curve Using these conta isbasialy he same as how you edit strokes with the Selection & tol or he Fen = A, eo eos ers he Neon tae ability to copy and paste cues fom ane popety to nother To copy a cure simply ight click ayer inthe 7p aes (way fom the curve ise) and select Copy (@ 200. Moving a curve segment or contol pont upward ‘il increave the property value. Moving downward will Alecreate the value You can continue to 268 ational keyframes to ceeate complex curves for complex tweened effects. Curve. Expand diferent property and ight cick inthe ‘raph aes and select Paste Cure. You ca alee copy curves between custom eases and properties. The base 5 properties X. 5 YeandZ are ditferent from = other properties. | These three © properties are = Mnked together. frame ina = tween span that ‘sa propery keyframe for ‘one ofthese Droperties must"A ing casing to yout aimation using the Motion Estar ie very 35 ad flexible because you can select indviual properties apply the easing to. The Motion | Editor also provides several preset easing curves to get you stare. nthe careample 2 very basic ease hasbeen applies to the maton of the cars thet it eaees in from sill postion. This proves | realtie motion tothecan The types of easing that can be crested inthe Motion Ector are imted only by our imagination. Digby fecammend experimenting vith various easing curves and the effect they have on your snimatons. hs the best way 0 get feel forhow curve affects ‘aris types of mation in 3 Motion span. 100 Wyden cree tC Custom easingOne of the mast frequently see cases my ‘wokfow to casein and ease fut within the ik symbol in the Eases ro and elect Cust” Ane ro il be added to the aces category allowing you to eit he ‘uve Drag the vertex handles to restape the ease tunvesimior to aha is pietured inthe example "usually ty to shape the cue lke the letter“ Aor! animated the «arin random postions on the stage whieh created several heyframes ana several spans of| varied nats "witehed the frames to rving snd applied heyframes ana easing using the Maton Eater. Tne eating effect ian ifthe object's completely out of canta 101(| - Motion techniqu ee Motion tweens and 3D = \ S < hate Re USHLHAS ALWAYS BEEN a 2-dimensional BIBI sms design and animation program. Making ae ‘a 2-dimensional object appear to spin in a :. »4xo 3-dimensional space has been a popular effect Let start withthe image we want to spin It an be anything you want but | utvery difficult due to the lack of that 3rt have ehasen a coin because i seems this isthe exact abject many pple want but very difficutt due to the fack of that ard ‘to use to animate spinning anyway. | am using a bitmap of a 1 cent US penny but dimension. lash CS4 and CSS now offer 3D. you can use acon of any eureny either as an imported bitmap or dawn with Flasis drawing tools Ether way, make sue to convert the artwork to @ Mave Cip “capabilities in the form of 3D Rotation and symbel ard then rightclick aver it and select Create Mation Tween Transformation tools. YL. 2005 \\ me oe maa was ae Next, postion the play head marker onthe lst frame But wait! Something’ not ight, Flash spine the coin and rotate the object the rest of the way otis facing =D to the right during the ist half ofthe animation but usa it was in fame 1, Payback your animation tose the’ then reverses direction during the second af This is xy cain spin in 3D space. Corrected by placing te play head onthe frame just after the second keyframe and rotting the objec ighty mare 102Select the 3D Rotation tool wand with the played on 23 fame other than frame 1, ag the object along its 2s hariontaly With the 30 rotation complete, ry experimenting by tating the objet’ postion elaive tits center pint at te instance ofthe objet by double eickng on it Move the objec away fom the center point (represented by the "ros hats): The further you move the abject fam its Do not try torotate the csn 260 degrees and expect > (ETO TT Flash to tnow what you want it d.You wil eed to vie the aimation in haf by topping the cin otation = Experiment ust sor ofthe half way point. ‘the Properties panel. You ean ‘get some very interesting 30 perspectives by applying more ep to your object. center pin, he more dramatic the effect ofthe 30 rotation Here turned on the Oionskin feature so you can see each frame af he effect when the symbol has been moved horizontally fom its own centerpoint.104 3D Position and View O« OF THE MST REQUESTED features from animators over the years hasbeen the addition of camera in Fash Having the ability to build scenes involving a background, tidground and foreground has always been a part ofthe production proces. With a camera comes the ability to zoom and pan easily through a scene, requiring the movernent of only 1 single object (the camera) instead of simulating a camera by moving ll the contents around te tage. Cameras only workin 30 environments and Flash, up until now has never supported 30 except for ActionScrpt-generated 20 engines But you are ike me, that level of ActionScript prowess is beyond reach Fash C55 still dest support an actual camera but we do have the rex best thing: 30 Position and View, specifically "2" ais that we can now utilize to simulate a virtual 20 stage more effectively than with previous vesons of Fas, Setting up your stage” ithe most time consuming part ofthe proces. The ror elements in your scene, the mare convincing the 30 effec wl be. Here [have bua landscape consisting of background and miggreud elements all ‘converte to Movie Cp sybals an each residing on its owa aye, ~ ze = nl Ap ttt ne stan bean sn ad he Popes pane! open select each Movie Clip indvdually and use the °" axis ht text, Slr to scale and position each abec outside the stage You wl hel need to ‘fit tne X and ¥ ans to postion te abject precisely where you want itSs _ coy seed * |, a » rege » =. Ta suggest an even more convincing sense of depth Determine what frame you want the "eames" 200m have incuded several foreground abject by ating te begin and insetkeyfames for all of he ayers several instances of Movie Clip containing the fower ontaining the objets that wll eventually be moved along ‘raphe ram Chapter. the Z ais. Aply Motion tweens te each ofthe Move Cli For this shot we ae simulating 2 camera aom meaning move in lation to eachother Foreground abecs move the shot wil move usinte the scene Since Flash doesn't fastr and eal age than the objets furthest away fam haves tue Camera, we simulate a 200m by scaling each usin the background. The sty and largest mountain ange object rom its igina size toa lrger size. The direction of do not move at all wie the Rowers closes ous move and the zoom s itated bythe ial postion ofeach Move Cp. scale the most. This what gives the viewer a sense of tue The key othe succes ofthis effets how much the objects depth inthe sen. @ e@ i 4 y tact taone fon mesmne oct ne teak cated “spa matniooca inte fc mad apc ‘Eiewae tetecw turned on and off to sce just how cach object is animated relative to other objects on other layers tis 2 sophisticated effect when completed and ‘wil make much more sense by playing withthe ‘original source file 105T* BONE TOOL is arguably the simples of tools to use for creating complex animations. But in the real worl, many of us donot have the need ar desire to crente complex designs or animations on 2 day today basis. Not all ash users are designers and in many cases their ability to create complex animations sine. But that doesnot mean profesional level animation is unachievable using Flash, Fr this example | chose 2 ‘very simple vector image fom iheartvectorcom 106 ‘heft step ito determin and iglte what areas ofthe image you want to imate individually Select these areas and convert them to symbols 1 eis tue that you dot even need the Bone tool or hie particular ‘ramp. The same ging could be done by editing the center point of Symbo to achieve he same tation. A Teens tenes aot rotate The Jeps ae suspended by ‘cables at fited lations, Seleteath bone and then disable thei rotation property inthe Properties panelSelect he Bone 9 tool and create your armature by raging fom the parent symbol othe symbol you Wil be animating, Hee the parent symbol the helicopter itself while the suspended Jeeps ae the chien 6 halen ees err aination a hat ie odo isight cick ovr the symbols containing tne Jeeps and apply Motion tweens. The distance each ep says fa matter of personal preference. The more they say the winder the condtions they aren Try nesting the ina symbol This amature requires onl 2 bones both oigiating en apply Motion tween from the same pot. Thisis mac lik setting up ‘hinging mechaisim than an iver Knematicbore tema the structure entre hecopter hover up and down oF move Pmorenries ‘across the scene horizontally OO Grretsre fet Sil Se») TWBe:) Sole ee) f Stole Fas Sole Fastest) a Stepan Stat Qesin) Stopand stat Fas) Stop end Str ott 7 ssid al see aig ‘sing ou by selecting he Mation teen san an then the Stop and Sta (Siow) eas. Set the stength 100.108 /\ Motion techniques — HEN IT COMES TO CHARACTER animation, the Bone tool can be quite useful. Applying bones toa Chace ands iva character is often referred to | parts. Notice se arms and egs have ‘elbows and knee caps to hep eliminate 3s “rgging’ The fist step is gaps between objects when rotate. esgic that cach bodypatinsagunte Stes that con batts vith abr anetre The et step is adjusting the rotation and translation of each bone to limit how much it rotates and moves along its X and Y axis. Tis is the most critical detail of the Bone tool because you don't want the characters limbs and joints to ‘bend past their anatomical limits ‘When ading bans to symbol, the stacking order ean often change based onthe original design Tecrrect this, rightclick over the necessary symbol, go to Arrange and then select the poropriat action Te fist bone the oat (sometimes refered 0 353 “parent” bone inthe chain. seems lopcl to assign the main tors or chest object to this act bane, Here have linked the torso and the pelvis objects together. i) Next, contain the rotation ang translation foreach bone. Select 2 lone and inthe Properties panel check ‘the Constrin bose foreach ofthese properties and use the hot tex sliders to set each vale.Wiring downwards, | branch off ‘tom the pei symbol to bath Upper eg symbols. The pes sya isimportant beause it increases svulation whe hiding any potential ‘saps between the legs ad tors when rotated By default, one wanslation forthe X and Yass dabed. ‘When each translations enables, 3 bone ean move along the X or axis to an united degree. Select Enable in the Jit: Translation of int: TTenlation section inthe Properties The lower porn of the character aging is compet. Bores were ded from the upper leg symbols to ach knee cap, then 10 each lower leg "bal and then utimatey each fot sybel panel. twocheaded arrow appear Devpendiulart the bone onthe jain ta indicate that X axis motion is enabled Adjusting the minimum and ‘maximum values helps you conta the postion ofthe be, especially when Fotation is abled as wel Continuing from the rot bane, onnect oth upper ams, elbows forearms and hands The inal tp in the amature isang the last bone from the oct othe head symbol ¢ ‘Another techigue | hae been playing with shaving te raat bone start an 2 "ghost" symbol A ghost symbols nt part ofthe character desig. sole purpose sto Separate the root bone fom the actual ‘character fr even more articulation, In the “Chapter 12" folder on the source CD 1 Included "mime bones You are welcome to ‘open it and pl ‘round with the Mime character and its bone armatures Included the 2 different techniques Aisplayed here (with and without the “ghost” roat symbo0-To prevent the ‘host symbol from being visible on ‘export simply eat the symbot by deleting the object inside it {Go not delete ‘the instance of ‘the symbol. 109no Tiss GREAT FOR creating cool armatures that can be easily animated by articulating them, To create more realtc motion, you can control the mavernent of your armature by constraining its rotation and translation, For example two bones that are part of an arm could be constrained so thatthe elbow cannot bend inthe wrong direction. Yu can enable, asabe, and constrain the rotation oF a bone and its motion along the X or Vas When X or axs motion is enable, a bone can move along the X or Y axis to an unlimited degre, andthe length ofthe parent bone changes to accommodate the mation Insects make perfect Bone tool examples because oftheir Segmented dy styles Here have {pplie an armature using the Bone tool to ane ofthe eg. , Gerstein pce forte opposite direction Inits current state the bone chain vl allow each segment orotate 4360 degrees without any constants ‘oc linitatans.Fom an anatomical perspective, thismay not be the eset behavior Ties eae tet constant for each bone within the same amature. Fr aceuracys sake, it might be 2 good idea todo 2 litle esearch and find ou just how an inset ike this ane actualy moves in ‘the rea woCconsvan hs Man Sekt ert one an in Rotational cosa i You wi ey ei hough a tie Propeies panel cost tbe Abeer gap an re) ander how mich ora “inate an Cana oponsin the attheeada te bore Any ate tap. Change the vl tte te Joint: Rotation category Use the hat tothe value ofthe constraint will bane a1 ection and check to see text lider to change the value based affect the are and how how much the ithe ght amour of constraint ha fon the amount of constraint you want bone con move in either ection. ben apple far the act bone ~~ aame ine siteen seamens per, Gn ation twrctation consis itcan gt complicated quickly you can alsa set constraints to Setting ftaional constants should theXandY translation ofeach bone This wil st lintations on the amount of hep keep eath movement under ‘movement the bane has along the Xan Y axes. In some itustions you may want cent 1a set the values) 00" to eliminate any movement along these 3s. To timit the speed of motion of a selected boone enter value inthe Joint Speed eld in the Property inspector. Joint speed gives ‘the bone the fect of weight, The maximum value of 100% isequivatent to unlimited speed mOs eC Sa Bone tool easing basics Es IS ALWAYS THE ICING on the cake for me when lam producing animations. Its usually the final step im my process, Once all j key poses are created and Motion tweens applied, the final step is applying casing for that extra touch of realism. Easing is usually applied in 2 ways easing in and easing out Easing in calculates the rate of each frame o that the animation stats slow and gradually increases speed. Easing out is the ‘opposite where the rate of speed is educed asthe | 7] Using an nage of eran is about 5 ass itgete The amature con of ony 2 bones animation plays A perfect. since al we nest tomovets the cable th the ball attached The animation requis thatthe ball aves example of easing is when: ct an toh much ite a enduum To phy aballis thrown towards gravity we neo api an eas in ar an ase out , {oresen direction the bal moves Poston the alto ‘the Sy. Gravity constant ay faright or fret inthe fst eae Mote the force gradually lows the plyhend ta the mde fhe gen ad positon the fallin the oppose econ QD else he ist ball down until it changes. Seyrame ant cck an sete opy Pose DGD irection, returning to! sek st ame and ight chick ana see Fase “th nth-s adh Fos. You now have ving ballon are tat = Earth with a gradual logs bck ana forth eames increase in speed. With Todd the eas let any ame between the est L heya nthe Poprespaeluse e Ease Sop ‘easing, you can adjust down menu to select Slow and Stop (Siow), Aust the rate of change to the thecasng strenght -100 using the ot et side Yo canal cick on this valet sl it and type in 10 Repeat ths sae procedure forte 2nd. © more complex animation. { nafortne satu spon values for more natural or n2Fer (aoe es Hee te 2p ees sth mae comps Bre aie hig 2 carton igure with ahead and limbs | sedan extra Symbel that wasnt a part ofthe characte’ design for he root bone tobe attached to. You can te tis oot bone stat between ‘the character’ feet. The concept here wast asign the oat bone oan object nt integrated int the characters design. THs allows for alo the characte’ symbals tobe assigned non-ot bones, llawing mar atculton. (Once al the key poses have been create, al thatis left do is toad ome easing from pose to pose. This helps create a more natural movement fac the character Just ike with the crane example, select any frame between the keyframes and inthe Properties patel use ‘the Ease drop dawn menu to sleet preset cease. Adjust the easing tenth to 100 ‘or 100 depending on your needs f you want the preset 0 eas ia, then use a negative value. positive value wll apply easing out tothe animation. The value refers tote svength of the eae ‘The Mation Editor does ‘ot support IK spans. Therefore, you cannot apply custom easing The only easing for armatures Is the presets availabe in the Properties pane. Having the abit to create and possibly eat the property| curves of an armature span smay bea valid Teature request fora future vetsion of Flash4 edad me creat [Cs Bones and s| Bs: ARE NOT LIMITED TO SYMBOIS. You can apaly 2 bone armature to a single shape The difference between symbols and shapes when working withthe Bone too! is, you can add multiple bones to the interior ofa single shape. Tiss different from symbols because you can have only one bone per instance Once bones ae added tothe selection, Flash converts the shape and bones into an IK shape object and moves the object to anew pose layer. Once a shape i converted to an IK shape, it can no longer merge with other shapes outside the I shape. Manipulating a shape with an armature can produce more organic looking animation. Case in point, here | need to animate the tail ofa cat waving back and forth With the Bone tool | am able to quickly and easily produce a very natural and realistic apes Before spaying Wie want the ip ‘bone stuctute of te tail tohave to the al itisbest ‘the mst fexbty ane to star with the tal the bottom of he tai drawn without any tobe the mostra ‘umes The reason The root bone ithe is itwe start with 2 very Fist bone created ‘ued tal and apply inthe chan and all the bone armature, subsequent bones are then it becomes much ‘tscniren, Select the more diffu to curve Bone €9 tol a dag the alin the opposte inside the tat shape lection witnau he ‘tom the very botom integiy ofthe shape in an upward drecton, ‘becoming compromise, (nce the ret bone has [straight postion i been app, Fash wil neutral and can be sutomatially place the easly maipuatd in Shape ina container ‘ther rection Fortis called an sbope fnimation we will make object. This ew object ‘theta move fom left, ‘automatically moves toright na whiptke toa new pose ver fashion ae Insert several frames inthe amature pose layer and then move the play head someuhere in the mide ofthe pan. Articulate theta n the opposite veton simulating anS" curve again. Use yur best judgement ast how much ‘curve you want you alto have. Tei ae na rules here when itcomes a atsite licenseContinue ang bones ta the shape, working your way upwards unt the enve mature spars the entire ta. What may be the mastimportant etal of tis eemnique ismaking each bane Slightly shorter than the previous bone maving up {he ta The reaton for this ita allow theta to become more atiulted tomar he tip. you were to create longer bones towards thet sveulation would suffer 2nd you would end up with severe 0 degree bends netead of several softer bends epreseting | more cu tal overl. ‘Once the armature is comple poston the tilin the desired storing shape | AT in rame 1. Here have grabbed the tip ofthe tail and atculated it irto an “Seune. You can aso ‘add bones to Shapes ereated in Object Drawing mode. Ceo wee see ee OS peewee ee ‘he ey to creating a realtic wavy tallisto adda litle “7 To make this tall lop seemess, VGD click frame 1 secondary animation. Pace the ply ead a fe frames id then sight ick aver it Set Copy Pose. after the initia staring pose and cur the ip ofthe til in ‘he opposite cect it's wavelng i This provides mae of 2 "whip effec asthe tal begins to change dection ns116 BAD eam ue we news, we cn use tis natural shortcom- ing of the human eye to our wn advan- tage when creating ‘advanced’ motion ye MOROUUT SIN Cd VN effets. In my experience Ihave discovered that the most visually appealing anima- tions are a combination of multiple tech- © second ieter, select the range of frames in the Motion tween, then drag them niques happening at the same time. down the Timeline 2 few frmes, Yau can also select frame before the tween and sues rapper ress 5 Insert Frames) o push each Motion tween down the Timeline. Nextt create the effec ofeach etter fading in one after theater, you wll stagger each Motion tween to averap the oe below it Starting with yourBECOME A KEYFRAMER With the tex ld tilslete, beak t apa using €I@ GD orce ‘Ths split the text eld int indviua tet fel per eter. This retains ‘the properties ofthe font and you have the aly to eit each ete as such. If {you Wish, you ean break it apart one more time to conver the fot into raw vector Shapes Ot ea sions ‘down the Timeline. Now go back to the first keyframe. — ‘your own ‘containing your letter, select the letter symbol an the stage and a a 2 ‘commands for SAREE ORY 7 ‘Apply classic Motion tween for every etrso that they a fae in when you payback your Timeline. You can choose 10 use ‘the new Motion tween otis effec if you prefer Learn more shout the new Motion teen in Chapter 12 ‘Motion tween, Once something isan actual ‘command, you can then create ‘custom key shorteut fori This will save you about two ik every time you need t0 apply a tween That can add up ‘icky over a peviod of days, weeks, and ‘months. Every minute saved is ‘minute earned inthis industry. a TN y aoe ane ce BECOME AK ‘The fnal step isto select the ist frame ofeach animation and use Shift while prestng the left arow key. This will sin ech ter with alpha tothe lft and on payback wl ceate the mation of each ete yng int pasion while fading in at the same time. Once again, there is noting particulary felt about this effect. All you have dane i use Motion tweens with some alpha fades. This stil avery basic Fash animation technique. Te only itferece i the timing of ach eter relative teach othe Throw in a sight amount of movement and uddnty you have what loks ke an advanced Seine txt tet <= 131edad me creat [Cs is usualy a good idea when crating animated effects to work backwards, Start wth the inal ram, ince frames ta extend your enti Timeline and ‘then ad keyframes to the ls frame. Somme vou may NEED a bur effect hat is ime realistic than the near aradient method, The Bur iter is perfect for re blurs, even animated ones. Filters vere introduced in Flash and to create the same blr effect in colder versions, we had to export the object fom Fash as a PNG file open it in Photoshop (or Infrae select Movi Cp syle sos andl «Ba le fee eit i from he Fiters pel. Clck an the smal ack magneton unlock he lr any graphics editor of choice) onsrait Use he sero asthe amount of Bs ote Xo and apply the Motion blur Then ‘we would have to export from Photoshop as a PNG file and import back into Flash. Thankfully, those days are long gone with the to nat only apply filters, but to animate them as well. realistic at tag For objects that fy in vertical iit the amount of bur othe Yas Remember to se your Shift and arom kes to maintain alignment between eyfames, ures ofcourse you want a have your abject travel at an angle 132@ a Be careful about ‘the number Go back to fame 1 and begin the animation process arow key ta maintain algnment and move the object, of fers you by sotoning the object that wllanimate into view incrementally ten frames ply to objects Gio sage el dont GD oy we resin the The playback “ ae mens performance orth adobe Fish ayer nay be fected ‘Teo many ‘oles’ Sremeeded 0 render each othe tere ‘frets Each Titer as 0 ow, Medium and High ‘the processor speed of your target audience, Drag the keyframe in your last frame closer to the fist keyframe and apply a Mation tween. The symbol will animate: use the Law {rom autsde the stage into its orginal postion. The Blur fier wil also be motion tweened from the amount of burn: setting to insure ‘the fist frame to no blr in the last frame. ‘maximum playback ve performance. =a 1® =ece 2 Eee @ a toresranao van cuore » oon ter ase tev ome a my (tel wr me my ie ——— amy [Low (Objects that appear as if beng focused from thin ai use an equal amount Leama of luring for bath the X and ¥ ai. i you brow you an set a blur amount beyond wnat the side allows? The lier tps outa vale of 100, co but you can type in your own value up to 255.The Fist steps toads litleatcpation refer to the "Aniipation topic to learn more. Retat the arm into a aston that suggests he is abut to grab something (refer tothe "Hinging” tpi to lam mare about rotating body parts based ana cust centerpoint also added same “itehy-finger” animation to. bull up the antcipatn ad focus the attention on hs and Yet te effectisillvisny effective ait realy \ Te nex frame's similar to the previous fame. sed the Brush tol again ta daw nen shape using the same clas. Tun onthe ian oo to see the previous fame as. reference 134Replace the am with some very Simple shapes drawn freenad style wit he Brus ao. The flor he arm isa misture of black and about 20% traneparery. The fl that represents the hands the lesh tne med wth some transparency a wel After two ames of luring, its ime to bing the original arm back tthe animation and ina new pestion. You wll notice I asp added some brush stokes Behind the arm to suggest the arm istill moving but decelerating Help Close Ono | Close Group Os: ox On ox Qno Oco Oro A498 You can mixin atl alpha by ying ina percentage manually or using the handy sider bar Ad ths new calor to your Swatch pane using the upper ight comer rop- down menu When 2 guns ited, the resulting action i fered to a5 that evry ation has an equal and apposite reaction. This aw of physics is rial for us to understand and, when necessary, incorporate into our work, reco, We have Si lsa8e Newton ta thank for showing us The selective blaring technique works best when i barely seen. Fit stays onstage Tong enough forthe viewer an object it has performed 1 dscrviee to your animation effec. In essence, this technique should enhance ‘the mation asa whole, not introduce ‘an additional ‘component to it itshould be subtle and sed sparingly fora ‘greater overall ffect 135136 | F YOU WATCH animated shows on television then fm sure youve seen the Motion blur technique, where the characters remain celatvl sill while the backround i being blurred. This provides the ilusion thatthe characters fying though the ar at an increible sped, Visually its avery dramatic effect and can be used in myriad ways dng an action sequent. Theilluson here i thatthe background is actualy moving through the shot but in Fact it doesn't have to be and in most cases never realy moves tal Inthis example the shapes that represent the mation simply wigle slighty in a very short lop. What makes this effect convincing is a combination of coer, ine work and of course the characteris ig Ste now 22 Cunarace Start with radial gradient a the undertone of your shot. Use the Gradient Transform tool G9 postion the aradent nthe ower let cone. tis where ‘the character wil fy nflom and helps provide some needed depth to the seve. LSS Wel ANE ONND ‘Selecta lins and convert them 1 a Graphi symbol. Eat this symbol by ig several keyframes on he same ayer This wil duplicate the lines for ch added keyframe Selec al ines in each Keyframe and elk the “Saath” tool [Crush ubsleon tal afew times. Mae sre the amount of smacthig is Siferent for each keyframe. The idea isto create an asclation between ames.Create anew layer and use the Line tool GB with 2 stroke colar high ncotrast to your gradient colors. Brush tool anda large bush sie, hand daw some Draw some lines touse a directional ques. thio ines that tape sight towards the lower let core (nthe main Timeline ade some random shapes The final touch sto ad your characte. This effect ‘yng through the shat in the same direction a he ors best when your characteris dawn in away hat backround lines. This helps emphasize the speed and reflet the sped and wind resistance they would encouter. rection the characters vig You can emphasize the dramatie eet by motion ‘weenig the charter fom off the tage into it ra prsitin. Combine tis eect With some ofthe Mion Blur effects previous learned in this chapter ana youl havea bier action sequence. ith the background as 3 ‘that need to imply very fast ‘motion. Asa symbol you can transform it by scaling, skewing138 Learning to be simple ONE OF THE MOST DIFFICULT challenges for me as an artist was to learn how to simplify my drawing style. Early in my career my work consisted of large scale lithographs depicting weeks of painstakingly complicated imagery. Spending days and often weeks on each print wasn't uncommon for me. But if you asked me to whip up a simple cartoon character, | wouldn't even know where to start Fact i, simplifying my drawing style didn't come easily. I was literally ‘thrown into the world of cartoon animation when asked to join an animation team ata local production company. They already hhad an established series on a popular cable network channel (Dr. Katz, Comedy Central), and my job was to design and animate a pilot for Dreamworks. It was a nice way to get thrown into the world of animation, resulting in a very diverse artistic direction for me. I ‘embraced the challenge. ‘The next several years provided me the experience of designing and animating several successful television series and animated content for the Internet. We used Flash for everything, including storyboards, animaties, character and background design and, of course, animation. ‘We were a paperless studio and Flash was our Swiss army knife of software tools ‘was maturing also, level usi ‘As Flash matured with each version, my Strict deadlines and cut-throat delivery dates meant worl ng fast. Working, fast meant keeping the drawing style simple, which I becam’ very good at ‘through practice, Not unlike a classical musician ending up. erforming children’s pop music, it was my fine art training that helped pave the road to cartoon animation. Ironically today, | am considered a cartoonist andcharacter animator as opposed to a fine artist. The ability to draw with simple shapes and lines did not come easy to me. Admittedly, I continue to find it a challenge creating graphics that are iconic in style, To break down an image into a few simple shapes and have it still be appealing and even the least bit amusing is a daunting task, ‘Sometimes I can nail it in a few minutes of sketching, other times it can take a few hours of pushing and pulling shapes until | think they work together. All too often my efforts get tossed aside and spend the rest of their lives stored onto a cold and dark back-up hard drive. Being asked to author this book has granted me the opportunity to choose some of the more successful designs as feature topics for the sole reason that they help make the book more visually appealing What you don't see are the hundreds of failed attempts and design blunders I have created to reach this level in my career. ‘There does exist an island of misfit characters where the majority of habitants are the result of my own handiwork. Michelangelo was once quoted as saying “I saw the angel in the marble and carved until I set him free.” As ‘modest as he may have been, his perspective on design is timeless. Apply this thinking to your own approach when designing anything from a character, logo, background or even a website. All the best details are there in front of you; it's everything, else that needs to be removed. 139IT IS TIME to get down and dirty. In previous chapters we looked at how to achieve a wide variety of design styles, transformations and motion effects. But the concept of how to bring all these techniques together to create a successfully animated character can remain a mystery. When is it advantageous to nest certain animations and why? How can swapping symbols be effective? What exactly does the Syne feature do? What is the most effective way to synchronize a character's mouth and lips to a voice-over soundtrack? These questions and more are explained in the following pages. So roll up your sleeves and get ready for a fun ride into the world of Flash character animation. 1412.5D basics Toes IS AGREAT WAY toad quick and simple animation to your Fash movie, But what if you could push the teenng method tts iit and give more realism to your character? What fou could hares its simplicity and make it work in ways not too many othe lash users have thought of? What f you have learned everyting there is to know about tweering, go back othe fst 10% ofthat knowledge, and take a left tur? Where would that take you? Inthis example, 'm going to reveal a trl kil Fash animation technique that wl actualy create a 2D optical iuson that has fooled even the most discerning ye The col things You never lave the Fash environment and remain inthe 2D real, You are now ina dimensional limbo. it’s stil 2D but looks like 3, then what exactly iit? Welcome to what i commonly refered to as"25D animation” Move theater eye over aswell but scale slighty wide asit gets close othe mide of the head. Ts is where, ft mere tay mapped to the surface ofa thee- Simersorl sphere, t would beat is widest atthe point wwhereit is lovet tous. 142 Lets stare witha few basi shapes that resemble ees ‘and mouth ana face. You canal some havzontal and verteal guides to help keep these objects aligned with ‘eachother Before yu star eating these shapes, insert keyframes 2 few frames down the imine across al ayers ‘You wl see why this useful late, was Pieome | am ce wee Next, move the mouth over inthe same direction ané seale is with sightly small ke you dd forthe ist ye. You might want to push the mouth closer tothe et eget provide more space between the mouth and the right eye. Tis wll help make it fel as ifthe mouths aly ‘wrapping around the head like the let ee i stating todo,aos lyon a | ame an Insert keyframes across ll layers between the Fist and last frames of your Timeline, Start wit the head sya by skenig i ith the Fre Transform tol Since you wl be Creating the ilusion ofthe head turning to the le, skew hi shag by clicking and dragging just outside the bounding box inthis direction, Hy @mets | aur ne toe Nw al you have to do is apply Motion tweens tall the layers rag aero al ayers select them and ppv Motion twen fom the context menu or Properties ate Remember when you aed keyrames tothe ira frame instep 17 Now all you need todos apply Matin ‘eens to the later half of your Timeline to etun the head 19s viinal positon Next, select the left eye symbol and poston it close to the left edge ofthe head shape. Use the Free Tansfrm tool to reduce ite width sight, rating the illusion ofthe ‘eye moving anay fom us around the surface of the head waa Weasm aww ac Repeat the same procedure but in the opposite ireetion to make the Head appear totum tothe ght Exgeriment by making the head move fom left tight by removing the keyframes in the mile ofthe Timeline a __——e Don't be afraid 19 push the limits of this technique see ny students attempt this Style of ani tion and 100 often they Iharaly move the features across the face enough to make the ing Play back your animation Trequenty to test the overall effect. You cn always add or temove frames it the anim tion sto slow ‘or too fast. Add ‘itl easing to make it Took even more 143,144 Ls: APPOY THE SAME echnique, a explained in the previous example, toa more sophisticated character This characteris comprised of several individual objects, all of which were designed and composed with this animation technique in mind. The spacial relationship of ach object to each other is important a they will all ned t0 move, sew and sale together, but at varied amounts. The effect i based onthe whole being eater han the sum ofits parts There's nothing overy sophisticated about creating this technique but the result ca look very complex on the surface a3 2m ane The fist step st make sue allobjects have been converted to spmbols and you have etd ther center point to your desired location check au the "Edit Center topic on page 158) For ths technique tobe sucessful i's aften useful to sesign your characters in thvee-quarter view s opposed toa profile view racing ve diect, Tunaienneacs. + Moatercnose + Moalermow + Siler vols Sater Mralerchesd > Uinserchairback > ‘Urmsercnae sce 2 aici Next, skew the hae tothe ight from bottom edge Since you want to carve this abject coming around the fant of the characters fae, maveit ‘vert the right and sealetRoizontally to make ight wider than iis inthe first frame. This creates the illusion that ts maving net ely ates the fac, but also slighty towards us 35 well,If you want to create a seamless lop by making the head “This mide ame i where you wll eit your character. Sta by eventual return tots same exact pasion, select a frame ‘sing the Free Transform tool to stew the symbol instances (cers al layers) somewhere down the Tneline ara a keyframe Here have stewed the hat, whichis comprsed of two Separate (Fe). pays to thnk ahead because you have avoided having to copy sym, a ron and a bak. Selecting and skewing them together and paste the hermes fom frame tater Select another Frame Insues that they remain aligned which each athe It’ epflt lok (ers al layers) an equal stance beeen your fst and lst al other layers tempacariy while you de this keyframes, (Character design is rita for this effect to be succesful. Keep it simple and stylized because ‘the more ‘anatomically corret your characteris, the harder wl be ‘this syle Repeat this proces fo each object, combining various amounts af stewing, The final touch ita add eating sealing and positioning, The smal symbol presenting the har onthe ight © using the Custom Ease panel. The S's then sya in is ample tat ges pests hele. Moving it sight pt epesen nosing Te | TET tend the head emphasizes the iuson that the head isa sphere that objects an “S-shaped pth represents easingin? [QING seminly “wrap aroun. and out within 2 ial twee. 145ctr at thee sen (quarter angle ia fame tLe call I HE KEY TO REALISM lies within the shading, this "pint at The same 2.50 animation technique is ‘being used here, but this time the graphics are drawn using gradients to promote an even mare ‘convincing faux three-dimensional effect. The eas pay apvctal ein this“ Once the head symbals ae effect At tmisnew ange, we ean wansformed and postoned where See more ofthe left ear and less ofthe you want them, lock hee ayers Slet ight eac all the body parts and rotate them. In your last fame, cate what well all point 8 Te challenge ‘getting from pont Ato point B ‘through the use of teens. Next, aust the legs nd ta individually by selecting and rotating them,“Using Gradi- immer Taso wo, Nextar ne nsec The bead anh sins rotate skew and move each pupils and eyebrows Pay cose are rotated an postioned symbol nt its "point B” postion Here attention tothe spacial relationship __accaraigly At this angle, we ste more ‘the mouth symbols are vansformed between each ofthese jects and our ofthe hai fam the et sie ana less, fist perspective a this new ale fan the int. Sek eingcacept the Fo te so tey 1 foment tech farms and hands and move the align with the monkeys layer an play back your ‘monkey ove using the ight arow key. new position Ther center points animation. Fina adustments ae Held down Shift to movein ten-ptelpsitined where the hands grab the usualy necessary at this stage increments. ‘ine to make tis even easier, 147148, L: SYNCING IS AN ART form ints on ight isthe art of making a character speak to a pre-recorded vocal soundtrack This technique invoives the creation of various mouth shapes and matching them to the appropriate dialog This technique ca aso be ery time-consuming, especially if your dialog is very long You canbe 25 simple or as complex as you want. There's 3 big eterence between South Park and Disney style animation when it comes to matching mouths to sounds, There are two basic methods of ip syncing in Fash which we wil look at here ua M,0,P nv Here ae the standard mouth shapes to use as 2 que. ach shape coresponds 1 a specie sound or ange of sounds. Each sound is noted below each shape For most animation styles, you donot need to create a iferent mouth foreach letter a he aphatet In mas tuations, certain mouths canbe reused fora vaiety of sounds ‘he nest te sto mpor your sound nt Flash Sound formate supported are WAV, MP3, Aff rd AU. Go to Fle > Import Stage and locate the sound fle on yur hard dive. Once imparted create anew layer in your Timeline ana Selecta frame. Using the Sound drop-down menu inthe Properties panel select. the sound you justmporte Net, set the ound rom the default “Event” to *SereamWhen you name 5 each mouth Simpiis the process of 5 choosing the appropriate 5 symbol by ! Z allowing your Using the standard mouth shapes as your guide, Based onthe design of your character, you will ely eyes to scan draw you characters mouth shapes, taking ito want have your mouth symbol on its own layer This? down te ist osieration the design and anle of your character. makes easier teat for animation of names in ‘After drawing each mouth, convert each one ito 3 fhe brary Graphic sya wean nectog £ symbol to see ‘the thumbnail, one Tce ee G Seton ech Ua, 7k Ko rate yb ‘your character resides you en item ad lick OK to replace the instance on the stage with this Srimate the mouth talking by creating instance on the stage with this symbol. new sybal fom the ier eyframes and using the "Snap Ithelps to name your mouth symbols Symbols’ method va the Properties starting withthe same thee letes Inspector Te Swap Symbol pael will a they willbe sorted by name in he open allowing yout Seal hough Swap Symbol panel, making tease to your Livan find the mouth you wat. 149Te YEARS OF ANIMATING in Flash, [have developed what | thinks an even better and faster way to lp syne 2 character. A few years ago I was working in 2 full production environment with teams of animators producing several series for television and the Web. Most ofthese episodes were 22 minutes in length with several characters and plenty of dialog ip syncing quickly became the tos dreaded of tasks Using the Swap Symbols method is certainly a useful approach, but when you have 22 minutes of ip syncing to do and oly two days to finish it ining a faster method becomes a production neces. The Swap Symbols method requires 2 minimum of four mouse click foreach swap Select the symbol instance. Click the "Swap" button. Select the new symbol Click "OK" Over the course of thousands of frames and symbol swaps, those clicks ean add up to an cenormous amount. Shaving off just one click peer mouth shape can, over time, save valuable production costs (not to mention an animator's sanity. This is where “nesting” really shows its strength and versatility. By nesting all our individual mouths into a single symbol, you can control the instance of this symbol with the Properties panel. This method eliminates the need to swap symbols and also saves time. 150 The fist steps to place all yur mouth shapes into 2 Graphic symbl. recommend editing an exiting symbol onthe stage to help you align your ditional mouths tothe character onthe main Tneline. Double-click the Iouth symbol onthe stage enter Eat Made Crete a bank keyframe foreach ditional mouth. If your mauts already exist as symbal, open your Libary (BE DO or rag exer mau os om keyframe. Use the Ononsin tal to help align each one ‘he convenience of resting ie Often you may ned 2 cstom obvious when you transform mouth snimation fr example, (rotate, sal pharizotally or ‘mouth that nls Right-click vertically ete) yourcharactr;all over your mouth and slet Duplicate rested aes are vansformed aswell, Symbol Give ita deserve nameWhen designing your character, {ts important ‘conceptualize how the character features may SsckonthemsnTincin fen Abs toon she mau Sen she Tiie a e work Some the Properties panel and select ye Select the mouth instance Ployhess beck and fore) to hear mouths are Your ‘mouth symbol containing all andi the Properties panel select the next sound, Repeat the same designed so OF your mouth shapes ASa Graphic Single Frame Inthe Frame input races by ang teytames, ana that they are symbol the Properties pane! wl box, type inthe fame number that typing inthe coresponding Fame ‘independent You options to control the instance. corresponds ta the mouth shape umber forthe mauth shape nedea, =f te jaw and rede ose, ile ‘other mouths fre an integral part of these features. So be drastically different a terms of design, yet follow these basi standards, Remove the unneeded symbols Animate the whisting mouth (nthe main Tnetng, 264 by selecting them and choosing 2352 shot loop. Here | used the keyframe and select the "whistle" "Remove Frames fom the right-cick Envelope tol to dstort my ori ‘symbo containing your new animation. context menu Keep the symbal that mauth shape sfter breaking it apar. In the Properties pane! Slet "Loop" oe Closely epesents 2 "whistle" shape. ‘om the drop-down menu.T SYNCHRONIZE A NESTED ANIMATION inside a Graphic symbol with te main Timeline, select the Syne option inthe Property Inspector. Sy is a feature that is available when a Mation tween is aplied Selecta keyframe with 2 Motion tween t find te Syne option in the Properties pan! What this means for nested animations is that the nested frames will be synchronized with the main Timeline. In Flash CS3, Syne was inconsistently on or off depending on how you applied 2 Motion tween: if you appyed a tween fom the drop- down menu in the Properties pane, then Syne vas UNCHECKED. IF you applied 3 Motion tween via the ight-clck context menu, hen Syne was CHECKED. The Syne feature was indicated on the Timeline when a keyframe is followed bya vertical line Flash CSS consistently tums on the Syne = feature by default no matter how the Motion tween is applied. So when would you use Syne? When would you want to avoid it? Let's first take a look at a situation where Syne would not be useful 152 cane ae aD DDDHODODOBOY? anime heel roe ee SNS 7 iri: uase efter of he Sete you ed ese animation to work with. A mouth symbol wit several mouths on cfeent eyfames wl oust ine. Thunbnall views of each frame was selected sing the Frame View top-down menu inthe upper-right come ofthe Tneline pane! to the ight ofthe fame numbers This is @ handy way 0 Se the cantents of ach frame Then you spay = Motion tween and want the ability ta conto the frames rested inside graph symbols, select 2 keyframe in the tween and tur off the Syne Feature via the Properties panel. Note that this ony appis to Classic tweens in €S4/CS5 and rat the new Motion Mode,“he Frame View drop-down menu You can take lip syncing abit Using the Fee Transform 0, offers several choice for you to further by tweening the mouth on 4F seal andr stew the mouth ‘ustomize the way yur Timeline looks, the main Timeline. This adda second depending an the vocal und and [My personal verte isthe "Shor" layer af animation since this mouth _applya Motion tween The Syne option Setting, whieh lowers the overl height symbol contains nested mouths aswell becomes afator when Mation tweens ofeach ayer se appli ‘TitnteTineine,etapinage “J Having the ability to asign a specifi frame number ie cia for lip ying indieates a keyrame with Syne If Sj is selected, you wl ot be abet eat the current frame number turned on The bottom age indicates Once Syne i tumed of then you are fe to change the fame number pertaining a keyframe with Syne tuned of to the nested animation. Pema Check out the “extending Faller and the FrameSyne ‘extension by ‘sin Ptocy. They are very useful extensions for ‘controlling ested Gr symbol Animations and, personally, my favorite tole for Fath. hie Fash C85 has ‘now changed the Syne ‘option so that by default, ‘Bunchecked when creating 9 Chasi tween 153,0 NE DAY THE CLENT ASKS for you to animate their company's character logo across their website splash page. You use several keyframes and Motion tweens to animate their character (nested inside a symbol) along a mation guide and deliver the final version to your client and await ther feedback Unfortunately the client changes their rind and ass if you could change the bee character to a dog with a jet pack instead. Do you have to do the entre animation over again? No, because you can always swap out the bee symbol for another symbol. But you have to swap cout each instance ofthe bee for every keyframe you made in the animation. What a drag! The more keyframes on the Timeline, the more monatonous and frustrating ths task can be Syne tothe rescue! 154 ie 7 sur th sing sinationiming sed hare rinaton in 8 Graphic symbal motion tweened alan 2 guided path Apply a Classic tween sing the Teen drop-down men in the Properties pare The Sy option wl be ‘ume on by default. Noting to complex ging on her. The be symbol contains same nested animations [ings lapping, eye movements ané the be sneezing). Sit sn nanan ee poe ngs anor cen infoems you that they want to change the bee toa totaly diferent character. ‘Thanks to Syne, your time and hard work will ot be wasted. Got le > Impare > Open External Libary ard navigate oan FLA containing the replacement symbol and click Open. You can also lik the New Liary panel button button to open the Library of an FLA already open in Flash. Anew Library panel wll pen dplaying the smo and aeet contsined in the selected FLA. Click and dag the preferred ‘symbofom the external Libary to the Libary f your curent documentInsert a keyfame somenere in the Maton tween. Use 9 Continue ta insert keyframes every few frames and the Fre Transform too! @) to rotate the symbol. Fee wansform your symbol by rotating and scaling. The idea free to scale or skew the symbol ae well Because the fist heres to mae this imple Motion tween relatively complex keyframe is"Syned” al subsequent keyvames will have forthe example purposes. ‘Se tuned on by default as wel, |e patios = ass eoeGe om os EL Select the bee character inthe firs frame of your ‘Since every keyframe inthe Motion tween has the Syne Motion tween. nthe Properties panel click the Swap ‘option selected, your entire animation willbe updated button ad locate the new symbol you just added to your across al keames. Criss averted, go and make youself [rar and click OK another cup of eff, catch upon your emai overflow and get back a your cient in atl while. Make sure to sound ‘utaf breath when yu call them a tel them the changes have Been made (ust kisi), Use the Syne ‘option to control diferent symbols within | the same Motion tween. Turn off syne for certain keyframes if you want to Swap to another symbol for that keyframe Turn ‘on Syne to ee} ‘the same symbot insyne withthe ‘main Tineline. This method wl not work with Movie Clip symbols: Use ‘only Graphic symbols Because ‘only Graphic symbols ean be synced to ‘other Timelines ‘sing the Syne feature. Movie lps have Timelines that are independent ofall other Timelines and need ‘actionscript to be synced to other Timelines,156 Syne (Motion tweens) HE NEW MOTION TWEEN changes everything when it comes to tweens and what we can do with them. IF you remember 1 thing about them, remember this: the new Motion tween is object-based while the Clasic ‘ween is fame-bosed This means much of what wwe used to doin previous versions was inthe Timeline when it involved animation: creating and removing keyframes, applying tweens, creating and applying motion guides, copying and pasting frames, et. With Motion tweens most tasks are applied to the object on the stage while Fash does most ofthe work for us. For this particular animation, the joke is always onthe dog. Each of his meals are dropped into his ish and each time the meal is different fas well s revolting and inedible). Knowing tis scene will be reused countless times, it was critical to build iin a viay that made it easy to swap out the object, ‘hat falls into the bowl. If you thought using the Syne feature to swap symbols across animations couldnt be easier, think again. The Fst sep 1 araw the object that so and in the bow! and convert tt symbol. Poston the eymbl hove the bowl and aor of the top edge ofthe stage. Since the ation tweens object-based ght-cick over the smo and selec “Create Maton Tween’ Fash wil sutomatcally create a mation span in ths layer anisert 2 duration of frames equal ofl Second based on the acumen’ frame rat. This wil key be plenty af time as this animation won’ ast beyond? secon ‘Once you have the animation compete, swapping fut the curent symbol for an alternative symbols surprisingly easier than using the Syne method Fam previous ‘xamples. Tanks to the new Maton tween, al you need to 8015 open the Library panel find the symbol you wish to use in place ofthe eurent symbol and dag tothe stage (make sure the layer with the motion spa is selected). Fash wil prompt you to conim that you want 0 replace the exiting tween tage abject Ck OKTrsere some ime before the animation actualy tas, which was aways tit cumbersome when using “Cras” meen, With the new Motion tween all you need to dois lik and dag te lt edge ofthe mation span 2nd drag it 0 anew tame. Postion the fame inceator Somevhere around frame 15, hold down the QI) key and frag the cymbal verily ot ends up inside he dog bow ‘Your new abject as now been applied othe entire motion span, replacing the original abject across all keyframes and properties. Using this technique has obvious avontages ove the Syne metod: instead of selecting the fist teyrame ina Casi tween and snapping au he sybcl om the Library, he Mation tween method is 2 singe asf ain ew aj ge aig aos a provide the uson of weight to the dg 008, ational keyframes and posions were added 35 well {some squashing and stething [ee page 6 To mate the effect even more convincing, the dog bow! self can be animated a its eating tothe impact af he fod You can even select the span and pes he BD sey to remove the object emi from the animation All of the Motion teen data is eae allowing you ta dap new object othe stage or eopy and paste anew object into the existing Span To remove frames or cut frames fom within a span, Ctr-drag (Windows) oe Command (Macintosh) toslect the frames and choose Remove ames or Cut ames from the span context To extend the presence of Ioeened abject ‘on stage beyond cither end of its ‘ween, Shift= frag either fend frame of its tween span, Flash adds frames to the end ofthe Span without ‘eecening those frames.W« FREE TRANSFORM, we can edit the center point of a symbol instance, thus editing the point on which the symbol rotates or hinges" itself. Any simulation to inverse kinematics is purely coincidental. This technique does not allow you to link objects together ina chain like the Bones tool does (see page 160), but can be useful for manipulating objects individually 158 1 Seite Tanto al ante cick on on of our oon our stage. The centerpoint of the symbols now represented by solid white cle Simply ik and rag this eee to 3 new location. In my example. moved ‘the centerpoint ofthe arm to where the shoulders approximate). A Rosenstiel acess mtg aes fine hem as "Fey wereone single object itn the Fre Transfoem tal il selected, hold down the QI) key and cick on mulipe symbols onthe stage. The center int wll now be relative to he center pint of al the symbals setei Wi the same too rotate the arm symbl. wll Repeat this proces for each body part you want Cae tinge base on is new centr pit, mating teaser hinged As you can see leven hinged the ear symbol 35 = select multi- to postin each arm movement in elton tothe body well Now you cn str animating by rating ational Se bjt it ie ‘mba Keytames and apply Motion tees thoughout your tien cater to Tinetn. slick and drag with the Sele tion tol across the objects on stage. Make sure you set the centerpoint Tor each symbol ‘on frame 1 of your Timeline, Ir the center point is difer= tent between keyframes where a Motion tween i applic your symbol wit Marte unex pected, 1 Titan be eet gig he had oa “he centerpoint foreach individual symbol wl be character which may contin multiple symbats (ees, © retained but the centerpoint representing multiple Imprt and navigate to your SO il The S0 Importer wizard wil launch automaticaly. Besides having 2 convenient thmbaal preview of each layer, you can a selector leselct which anes get imported. Other options include maintaining tditable layer tle conversion to Move Cis, compression and bow layers are distributed in the Timeline (ayers or frames) ‘The shoulder should otate where The image of Presiden Bush is Reuce the arm ates forthe egs it meets the tro, and the forearm casi found by ding an image by copying an pasting them to should rotate at the elbow, Search on the web. Asses ite the new layers Then scale and stretch he nds canbe shot with yourown copie version and align itt your camera and edited in Photoshop. ‘character asthe thigh and aee aoua| Fe = Fash ata fs FSDInporer pence Yeumay peter tcomert then it of 3 sane tat stows you ost our own A Jourimagestosyntcts DD eachsytal wing the ‘defaults for each option. Just go to Edit > after importing. Keep your Library Free Transform tool @. Prenton ih onhe PS Flelngorer oma by ig sora chee ecumn anesthe hoes yur image ie Besides File > Import, you can also drag and deop 2 PSD file ont the Flash stage to invoke the PSD Importer wizard Always maintain RGB color values in Photoshop to preserve thee consistency ‘when importing into Flas, The peisaen seat with 9 name pose your charac boson rin seth You an chose to hve shape and 2 bitmap fil ram one your stetch tothe side or dec undemeath your symbols Whichever way you ofthe imported biomap images. Use the prefer, the man objective i to postin yur character inthis same gesture. In your second Gragent Transform too to show only he bue fab your symbols horizontally or you wil ruin te Mation tween, ta scaleit keyframes, pore your character in its ral state using your sttch at 2 que, You cant fip 169Symbat Symba2 a Sinbas aaa M (TION Guin LaveRs letyou create paths along which you can tween instances of symbols grouped objects of text blocks. You cam ink as many ayers as you want to a Motion Guide layer and have multiple objects follow the same path, A normal layer that is inked 0 Mation Guide layer becomes 2 guided layer: Motion guides ae useful because, without hem, a normal Maton ‘ween linear, rearing it moves in a straight line ony your object needs to mave along a cure, 3 Motion Guide i necessary. 170 Create a Maton Guide layer for the left had by selecting the hand layer and eickng the Maton Guide layer buton inthe Timeline panel The hand layer will automatically be inked asa guides layer. Oraw Your desiced path using the Pesci or Pen to ‘Adda Motion guide for each tional object you ned to animate long an ar and daw the appropriate path needs. 77 tits comiratn fon guides, pats, wansfarmation and ‘eens, you ean animate ay abject long in any rection you preferPo \, Make sure Snap is selected ‘Add acitioal keyframes as Inyour last frame, nap your ra (raget icon a ag your necessary and snap yout object to = symbol to the end of your Symbol unlit nape to your Motion the path. Use the Free Transform tool Mation guide and ad your inal Test your shige tovtateyoursymbel a wel transformation work often by sing Cte + Enter. Fash and play it for you within the Flash authoring This SWF can ‘be Found in the same directory where you saved your FLA fe Thelen fet ot eet Te eases peor charter isin entoen by aig to be guided along Mation background, The American ag shown here was edited in Phatosop and path since they ony movein linear imported into a ayer below all the ater ayes. tdrectons. inDesign your character in tree- Lets concentrate on just ane leg ‘uarte view. At this ange the for ow Infact, tral ater characteris simply easier to animate, layers off 0 anly one lego your specally when comes to walk characters visible Tne character’ eg evel animations Next, convert your made up of thee eitferent symbols tne character an all ts parts into an upper thigh slower leg and 3 2 Graphiesymbel You willbe working sneaker This isa straightforward setup tml nse this symbol a creste wth enough lei for a simple your wal ote walk eel Ls FACE I, 28 an animator you are wentually going tobe faced with the task of making somebody or something walk For whatever reason, newcomers to animation regard walk eels as being extremely dificult Why | won't eto you, they ar. Wel in an anatomically accurate way, they canbe very challenging As an animator you wil id it nearly impossible to avoid the walk cycle, so son ti Notice that li’ use te sme sneaker forever frame. Depending on the itmay be best to face your fear head-on right sition ofthe leg, | dupieated the original symbal, gave it new name and row. You just might learn that walk cycles edited shape to reflect it new postion. This the type of deal ove to ad 1 4 Iny animations and real fel, a subtle at may be, it ada lott the overall aren't all that difficult to accomplish. There are; ™Y.nimatonsan| real fel as ste as several ways to make the task of animating a walk cycle very difficult or relatively easy. Let's ‘examine the easy way. Feel fe to experiment with the amount of frames between each of your leg positions You can have mare frames fr when the foot siding ack along the gourd (5 waels slower) and fewer rames while the eg is off he ground (Gait aves quieter, returning it quickly tw tsintal psion. his can create the luson thatthe character is heavy, oF perhaps aryng something heavy you othe opposite and have the fat se ‘uely aos the ground ‘and slower mben off the ‘ground, may suggest your character isan a Slippery surface, uch The best way to create a walk cycle in lash is to animate the character walking in place, asif ona conveyor belt. The main idea here is to drag an instance of this looping walk cycle animation to the stage and use a Motion ‘tween to animate the character walking across ‘the scene. We'll get more into that after we tackle the actual walk cycle. 172AEC PSS 5 fore you E stat itmay be Postion te ein severl major walk potions sng __aein the ese poston Notice her ae sever gy tre Htmay teyrames Star ith the lg planed my onthe ferent shapes toh sneaker aed an the mau of Ground The nes potion the fot stil on the round but weigh (or ack fl eng paced upon When is ful; But. down your tent s0the help of the ground Then rest nather compressed ante ground fs bottom edge eat. us before | SYS and gp for keyframe and poston he est before tied off thei ied off te ground tibet jut afte the toe Went: walk Ym round Nest, positon he eg completely ofthe ground sentir off he ground, atom edge fsghty rounded, | PEAERN rd in its most rearwas postion. The fia kyfame shows These may sem ike vey insignfian eas stn he | ae tenon theleg isin mont ormard positon ofthe rund. Use. grand scheme of things, they can make athe derence. | gent the Fee Transform tool orotate 3c yb unl hey study how your body moves during the act of walking. As ‘in animator you ¢ wil find that ‘ Studying from real ie wil be your greatest resource Notice your ight leg nd eft am — tov nthe Y ‘me direction with eachother “umn the Oinsin tal and Use the Fe Fars tool @to 7 Experiment with hermes; Same thing aust he plyhend brackets rotate and move eas eg symbol beeen each pestion.Adsiog = Rappens nth {5 you can se your eablanes int an intermediate postion relative mare frames when the foot sling your eft eg leg postions a references Create tothe eyfamesyouaeady crested, Dackalong the gtaund wll creat the! bn ight arm. Keyfames srs al layers tht contain The ume of famesbetacen the efectof te character ging he: We deals ke yourleg seals. Iajrleg poston wl determine the sure Add ewer ames he tele = hese that your characteristics ofthe walk eee returning ttn poston, snimation will benefit from. Pay sk aur imation oan yo an get eine via shack Q wtojourpracse is peo ainston wo il and err a eens nyu pond animations ge he wale tlt al good {2 yu Sort get raat, aig kes pace Societe nt ‘no Karan cial ey to nagin ts a algal same nd of Tecan tem theses peo eer yer stot ps “Grae anaes ung an x ren Ofer heen: am he ncudd tite Cohen contns ramp ofa wa Sek capetnert nade tstow ona wage Cane gh fi mecha tee wa fi expemet ese removes he teaton fecerthatisascited wit animating 2 mace | EES Continued. 173174 Oo NCE YOU ARE FINISHED creating enough keyframes and leg postions, and you are satisfied with the movement of your leg, we can now move on tothe other leg. Since you already animated one leg, there is no reason to start from scratch with the second leg (unless the other legis designed differently) Therefore, delete the other leg entirely from the stage Seriously, | (7 Hol dov te QD tro select multiple ayers and dag them tothe trashcan ian or cck an the rathean conto delete them fom go ahead and delete it. We don't need it any more. Trust me. the Timeline. 7 Seems frames an layers ofthe eg you previous animated Right-click (Control + ick ave the highlighted sea and select Copy Frames from the 5 Sein age of aes nd yes by hig and gragging across lof them cts arms and then copy and past is leyfamesinta anew ayers) to achieve the second am. Select the staf ef your armfhand animation and place it afer the later bao he animation, 1G Seksn gine are frames and es to the left unl they start on fame 1- Remove the residual ames by selecting them and "Removing them ftom the ight- Merge Layers This wil run the SFL command ‘hat wil compress al keyframes and layers one single aye for you The time you just saved will alow you to aya another cup of eae. 2D Wot at evans (ina new frame (tame 30 wil da), and raw he new angle of your character eject. The ck here is tous the same numberof trokes as you di in the ist craving. You could also choose to isert a keframe(F) and ct the same strokes ta elect your ew ange You cn delete al the la ayers as they willbe empty after the merge Go to File > Save As and sve this fle wth anew name. ni 'Simportant beause you may decide to make some changes to your image at some paitin the futur. Afterall layers ae mered his becomes very ‘ict.23 eosin se a of your sakes, rightick over them Spd select Distribute to Layers rm the ‘ante menu Since this wil create anole new se af layers or each Arawig, you wl eed to select al he keyframes fr one drawing and rag them ta the other drawing’ layer Next, you need to break apart strokes rom the Object Drawing mode. Why? Because ifyou have ‘overlapping suokes and want oad ‘ala fils to your image, it needs ta be flattened one step further for etna Tum on the it Mutipe Frames feature and ajst the frame indicator backers to span all keyframes. Break apart (Ci +8) t merge al stokes resets imei and select Create Shape Tween from the context menu, Previous versione of lsh dint offer tis ‘tion inthe context men, I you ae ‘sing an older version of Fash, apply the Shape tween using the Properties ae! o¢dop-down menus. Now she time oad easing if preferes Use the Seletion tol while holting dwn the Shit ey to select ll unwanted stokes an delete them inthis situation ti simply 2 fact fife that, as an animator, tventualy you wil have to perform the eiouschare of cleaning up after ‘youself or even worse, smeore ees wor. 5 pas dest fave a bulla Merge Lays? feature Not sure wy this featre was ever consered Soemrleestenenenemt | nis coe Hest you ned to prepare your layers for merging Drag srs all ENaSeint layers andres slesing them al PSSM WE inblack Hite Fo key tconver al S&P MAKE our the Shape tens tokeyfames Whe | ON” features sseted, remove the Shape een ‘ShatheTnccndpedown'mensin_ MES@ested 2 ‘the Properties panel. Goto File> Save; Merge Layers’ ‘and save your work at this point. ‘extension for Fash tate salable on the source CD inthis book Techniques ke the "radial" ‘topic would take atest five times longer to create without the use ofa Merge Layers ‘extension. So make sure you check out how ‘to use this handy {Chapter 12 and inca it before attempting the technique on| these pages. 1 testis sen was, heres you reward, avery sik looking animation that ks ie twas made using thee dimensions. But it gets even beter when you ad calor nd shading Continued. 185Tradigital animation (cont.) ‘Once al our stokes are (cessanally you may find an Lees take his effect tthe ‘connected an cleaned up, ea of your image wll not eat evel by ading shading ‘mix your clare and start filing, You 12 the fil calor Usually the cause I "wo new Laer above your will eed to apply al clr fils cross for this is gap between stokes thats srimation and draw two shapes ia all keyframes by hand. Flash has 00 ‘hard tose. Make ure Snap iturned each new Layer Use the clr black futomatic way of doing this or you. on and use te Selection tol to drag mixed with about 20% alpha. Make thei endpoints unt they "snap™ Sure the brash bas Smoothing se to 100, The fewer vector pons the better together c ( Pai i 7 tumonsvezac nate Ser afanesefyou ating U9 Gem Earp Fame 7 Frames feature and mate sure 1 & fem te previus Stepan and unlock the twa layers 1 Frame Indicator brackets =pan all a them into anew ayer above your containing the shang animations keyframes Select all (Cul +A) nd shading ayers. Make sure allather Select al Frames acess al the of leak apart (Ct +8 ll rowing layers ae locke, turn an Eat Multiple these layer and got Commands > Model objects to merge al the stokes Frames, select alstokes and change Merge Layers to compress them down together thei color to right red or something to one lye. Delete the remaining imcontastte the character tei emptylayers:4A ise tame a layer in your st ame of Your animation. Move te lf shape bout 20 pies tothe left andthe right shape the same distance to the ight-Use the Selection tal 12 bend ther utes toreflec the new contour of your character and apply Shape tweens 0) eSetston lk O syncs ousie te stapes te 20 them. Select the sade ea outside of your character’ outline and delete it Repeat this procedure fr very keyframe. 5 Bement he pious sed version of this animation? Open it and find the ayer eontaning the outine strokes of your character Selec them and Copylaste Frames, into anew document. Yu will use these stokes to “cu” away the shading you wll nt need The fia step sto double-click the ed stroke (duble- Meige Layers DD Messy neve est back to enjoy the fits of your |abor Ths technique Is reat when you want toad some realism and drama to yur shat. ut remember t lan hea carefully to avoid having to spend more time making revisions 187188 How did 1 get here? SPEAK AT MANY CONFERENCES, schools and user groups throughout the county. I's a very fun thing to be able to do as it allows me to not only share tips and tricks; it also connects me with other designers and animators on a personal level. Don't get me wrong; email, chat and phone are great ways to ‘communicate, but they are no substitute for sharing the same physical space ‘with other developers, designers and animators who all share the same interest. Being able to travel to conferences in various cities and connect from all over the world has given me the ability to tap into the pulse of the culture that surrounds Flash. I hear first hand the thoughts, opinions, gripes ‘and questions users have about this industry. There is always one particular ‘question I am asked by students, teachers and fellow users: “How did you get ‘to where you are now?" Now, | am very well known for dragging out even the shortest of stories and the answer to this question is lengthy to begin with. With limited space on these pages I will give it my best shot to provide you the abridged version. ‘The road that led me to where I am now was, to say the least, full of twists, ‘tums, roundabouts an hardly eight lanes of traffic-free straightaways with clear signs with arrows pointing me away from hazards and obstacles. But somehow, throughout the Journey, I still managed to make all the correct turns, even when I didn’t know ‘where each one would eventually take me. I was somehow able to remain on ‘course, toward the direction that led to me to where I am now. Ten years ago if you told me I was going to be a successful freelance animator, I would have laughed. Even the realization of it now makes me chuckle to myself. | first started using Flash in 1999 and had never seen anything like it. At that time I was a Creative Director for a small animation studio in the Boston some areas, U-turns that led to dead ends. It was area and we tumed to Flash as our main animation program. Most of the content we created was for broadcast television and my understanding of how to deliver engaging content for the Web was minimal at best. That was all about to change. Shockwave contracted us to create an animated series for their site www.shockwave.com. I was already a fan of Shockwave, whik this project particularly exciting. It became a crash course on how to use Flash madeto create animation optimized for the Web that also had a fully functional ‘game incorporated into a preloader for dial-up users. As a company we had snce developing for the Web. As an individual, this was a brave ‘To make it even more interesting, | had strict deadlines to meet, which all but eliminated the research and development portion of the process. Iwas smack in the mide of all this unfamiliar technology, directly between the Shockwave producers and my own bosses. All eyes were on me to figure out the artistic and technical issues involved with delivering engaging and Interactive content. Funny thing was, I was very new to vector-based animation and my shill level with actionScript was not too much beyond a gotoAndPlay command, Despite my technical shortcomings embraced the challenge. Ask ie iff was under-qualified and I would answer “yes”, but not without the confidence to deliver the profect complete and on time. It just meant I needed to roll up my sleeves alte further. The series was a success, I managed to fulfil every technical and artistic requirement and delivered it on time. None of which would have been possible for me without the help ofthe Flash community. I frequented the Macromedia Flash forums and various online resources such as www.moock org, wwr.were-here. com and worwaltrashock.com, where I found an endless community of users willing to provide a helping hand. The most important aspect ofthis experience wast’t about the amount of learning I achieved, but rather the community and is selflessness to help others. My community involvement became a dally ritual, and overtime, I found myself 2 providing more answers than questions. Not cs only did I advance quickly, I made many fiends and networked myself into afew high-profile freelance gigs. I started to specialize in animation and motion graphics forthe Web I was hooked Ik was an exciting time to bea Flash user asthe Internet was literally bursting with dynamic and engaging content. It was the beginning of the “dot- com" boom and little did I know just how much of an effect it would have on my career. 189190 (cont) ‘A couple of years later, Macromedia announced the creation of the “Team Macromedia” program and soon after a Macromedia employee suggested that I personally submit my application. | wasn't sure exactly why but decided to fill out the application anyway. To my surprise, I was accepted into the TMM program. I was now officially recognized as a member of the Flash community by the company that makes Flash. This was so cool! [ was now one of “those” uys. Since the Adobe/Macromedia aquisition, this program continues under ‘the name Adobe Certified Experts, which I guess makes me not only a “team” member but also an “expert”. But as far as I'm concerned, I am just a user of Adobe's products, still working in the trenches just like everybody else, exactly ‘where I want to be. My community affiliation has provided many opportunities to be a featured speaker at various conferences and user groups. These experiences have given me an up-close and personal way to network with peers from around the world, not to mention how much fun it is to be among hundreds and sometimes ‘thousands of users who share the same excitement and pa: Aside from populating the online Flash forum with technical answers, 1 found myself delivering live Flash technical presentations via Adobe Connect, and what is commonly referred to as “Tech ‘Wednesdays’. One such presentation has been ‘overwhelmingly popular, (http://my.adobe. acrobat.com/p46515568)) This was my very first recorded Breeze presentation and it has bbeen one of the most popular resources for Flash character design and animation ‘on the Web. The surprising aspect of this, presentation was that I was merely filling for the original presenter who had to cancel last minute. With jon as | do. no time to prepare anything, Isimply demonstrated what I do on a daily basis for clients and sometimes for self-amusement. It was just another day at work for me, but this time I had the world looking over my shoulder. Luckily it was a topic that many users ‘were very interested in. Due to its popularity I was asked to host more online presentations, all of which were recorded and featured on Adobe's website. This is one of my most rewarding community experiences due to the number of users who continue to benefit from these recordings. Ask me how I ended up here and I will tell you it was the result of hard ‘work, a little luck and the generosity of the Flash community. Ask me why I volunteer so much of my time helping others, and I will tell you, because I ‘remember how precious the help was from others when I needed it most. [am proud of my accomplishments as a Flash user and when there's an opportunity to pass along this knowledge to others, then we can all benefit. I's what makes the community vibrant and alive for the benefit of all who wish to get involved. Flash is just a tool, but itis the community that surrounds this tool that transforms it into a culture, http://my.adobe.acrobat.com/p46515568/ http:|}www.adobe.com/devnet/flash/articles/design_character_pt1 html :|Iwww.adobe.com/devnetflashlarticles/design_character_pt2.html /wwwcadobe.com/devnet/flash/articles/adv_char_anima.html /wwwadobe.com/devnet/flash/articles/tween_macrochat.html :|Iwww.adobe.comjdevnetflashlarticles/character_animation_ik.html /www.adobe.com/devnet/flash/articles/lipsync_macrochat.htm! http:|/www.adobe.com/devnet/flash/articles/spring_ tool html 191Flash to video AVI) to be eae and edited in an Avid workstation was my only authoring requirement of Flash. | had no knowledge of Flash for the Web, including ActionScript, optimizing, preloaders and even buttons of any kind. It was analog Flash at its purest and that was the Flash world | lived in.-® Soncernenos POPULAR Fash to ideo questions | am asked are What Fash content canbe and cannot be exported to vdeo? Why do some animations ply in vide format whl others do not? What What is the resolution for a 16:9 screen? What is the correct stage size? Should | be concerned Lets stare with he basis and open anew Fash document. Open the Document Properties panel using €) GID Bor ck the “Size” button inthe Properties panel Here you can determine the with and height ofthe movie and is fame rate. ut before we change anything we need to decide what aspect rata frame rate do | use? What is NTSC? What is PAL? | we are authoring to. about color correction? What video format should | export to? Do you export the audio from Flash? Are you getting enough sleep? (0K, that last one was from my mother, but you get the idea} This entire chapter is devoted to the topic of geting your Flash projec ovieo format. Sounds simple enough but here’ 2 lt to kno, lets boosie. 3 [NSC does’ use square peels: they are rectangular problem ass when ou develop content for vdeo on your computer because you are creating Squae pesto be displayed as rectangular els That means you viéeo wil look Slight stretched To compensate fr this, ust he width ofthe moves that the aspect ati is 720x540 7+ 720x576 1A Pa Anan il hpi vi and nse 6 Fm ss 24s wi a pom fae ate the Ameria, also uses the 43 aspect ratio but uses 3 720. 576 pire aspect ati, The frame rate S25 fps. PAL has greater eesaluton ‘han NTSC and therefore has bette picture quality higher color samt level produces higher conas eves aswel But the lower fame rate, compared to NISC’ fame ate, wll nat be as smooth, 194 among animators. Although you can use 24 fs in your Fash project, when you expr’ if video, you wl eed to convert the fame rate a: wel Thisis easily done ding the export process by specifying the appropriate framerate.Sant Teee “a 2 MSE Matera ssn Sn Commision, he video standard used in North America and mos of South America, uses a 4:3 aspect ati, which essentially ‘means the with and height ofa standard television set Ta bakit down in even simpler tems, 43 means that for very four units wide, he picture is thre units high Aly this formula to 2 169 screen ad youl get 16 units of width forever ine units of height Simple arithmetic so far butits abou age tik. NISC ues fame rate of 29.97 fp. You can export Flas mavis that have different frame ates suchas 12,18, 0024 fps and convert them to 30 with video editing Softwar, although 2 move converted from 121 30 ps will not look 2s smooth 353 movie arigialy authored st 30 fs Clee Tspoting your mave ara PNG image sequences often the best and mast popular method. Go to Fle > Bport Movie an select PNG Sequence as your format. highly recommend cresting 2 new folder to save your image sequence to since the numb af mages Fash creates is ‘ety related tothe numberof fares in your animation Using 2 video based aspeet ratio forthe Web is always 2 good idea. You never know wen the client might ask you ‘You cn save your NTSC lsh document as a Template if you to convert the plant reat multiple fies (le> Save as Template.) You Web-based ‘an also create your own template categories by creating = Flash movie into new folder inthe “Template” folder on your local had arive | wdeo format ‘ner Plash CSS instal, tobe burned ‘onto DVD to be shown at thee next big company summit meeting. (bin can easy be hundreds or even thowands. APNG Sequence insures your animations Frame accurate with lesless compression Ifyou ae using After Efecto further refine or detects to you animator, importing @ PNG Sequence isnt only supparte, buts so weated asa single object, making it easy to manageTitle and action safety ELEVISIONS DO NOT generally display the entire width and height of your movie. In almost all cases, televisons will show a smaller portion of the true display size. Using a visual guide that represents the potential stage area in danger of being cropped will help guarantee that what you create in Flash shows up in its entirety on a variety of television sets There's nothing worse than fining out 00 late that the tle Sequence you labored over for en hous appears on most with several enaacters 0, ori pletely invisible. To prevent this you ned to define which re is ‘considered the sae zone within the dimensions of your move. There are safe zone andthe tite-saf one. The tite-safe zane is aller than the action-sfe zone because its much more portant ta insure tat al ites ate clearly lege without any chance of Single eter beng cropped. Fr this reason, the tite-safe zone le the absolut edge ofthe video. When you titles to your mavie, make sure they postoneenily within this sterile sf avid being cropped 196‘he astion-safe zone lies 105% in fom the abolite edge ofthe ‘ideo You can assume tat everthing fang within thi zone wl appear on television seeen. Anything outsise this zone can be potently cropped and not visible Compose your scenes based onthe area within te ction safety one suming this il be he ent aa ot roped byte mary Pace the titl-sfe zone in your Fash project on its own ayer above al otter content. When you ae ready ‘export to video, delete his ayer to prevent it rom bing incudedin the vide fie Ifyou dont want ta delete from your document, just convert the layer tos guide layer Guide layers wll nat be incleed in your ral export. Convert the ayer containing the tile-sate phic to outline mode to reduce its sual impact and make i ess nticeable ‘ou can easly change the calor of autline mode by eiking on the colar swatch in the ayer an selecting a iterent clo in ‘the swatch panel View > Pasteboard wil allow you to see the work area beyond the stage dimensions This is Useful for working with graphs that extené beyond the width and height of he stage Having the title safety visible wlindicate ‘aber the stage fin ‘elation to your artwork This is partieulaty useful for simulating camera ‘moves such a panning snd 00mg. Fash 55 ‘supports the "Export Hidden Layers” option. Goto File > Publish Settings > Flash tab ‘locate this feature. When ‘hi feature is tured off, all ayers with visibility tuned ‘off wil nat be ‘oported. The advantage here isnot hav- ing to delete ‘the layer from your timeline You just need ‘to remember ‘to turn off ts visibility before ‘porting 197O« OF THE Nicest new features oF CSSis actualy more of convenience. Adobe has provided us with an easy way to create Fash document for video output inthe frm of templates. These template files provide everything you ned to get started if you are producing content for video output. In some cases tis actualy a 00d idea to use these formats for Web content as clients often wil ned to output their content to both the Web and video formats 198 Tapas Meda Rack eaten WY 720 ‘Brews wcns or 8 ‘Brnceve wes oto Go to Fle> New. andi the New Document panel ick onthe Templates button nese the top. Inthe Category section select Med Payback The Templates section wil update ith al ofthe various template files neded to produce conten for video output. Select he SAUSAGE KONG Ba he tie safety provides a lear dfring boundary for text-based content a well {a5 action-baced content everything ater ‘than text The ie safety region singieated ly guides tat repesent 320% margin of the lewabe area, The actionsafe guides represent sero Te See os ge or Badan sSoact ator template that best applies ta your needs. The NTSC templates ae fr vdeo output in America while PAL is used throughout Europe Seepage 194 for more fetaled information regarding document setup. 12108 margin ofthe viewable ra, Te help discern between thes 2 regions, the borders contain fil Calor mite with alpha transparency to alla for the content undemesth to sil be sen. Keping within these guides insures your content wl nt be (ropped on alder screens.i = Uhighly ach template fii ready ie = recommend ‘created with the coret aspect eT = working with ato and framerate. There's thing erm Several small ‘se you need to do to tis le ‘ files rather than except ald your content. = having a very tang Timeline ina single document. ‘The longer ‘the Timeline ‘and the more ‘sete withing Single Fa, the (greater the risk of instability SEE I content wy fssimply more ‘manageable and more stable a3 WY @ ewe aa7— eos Meine como 2 nye he acon sae layer seu Thr ny rfc bt eendig and an empty layer for content. The actionsaf ayer__on your needs you may need more Fel fee toads many ‘already converted oa ui ayers that it will aot be ayers as yout. Included uring export to SWE to video or 35a image 199( ; OLOR IS CRITICAL to the success of your final file format. Since Flash is technically ‘2 Web-based authoring tool, values (0-258). Teleision of calor values. “There’.a good chance you may be using col in your Flash mave tat fall ‘the range of colors far excecds ‘outside the television value range, resulting in very noticeable color bleeding the color range a television can display. This example will show you how to mix colors while keeping them television-safe and also provides instructions as to Eo Help palette with a color-safe one aoe {included on the CD in the back of e Close Group this book how to replace the default color “oa yournew color a swatch, use the drop-down menu inthe upper Fight corer af the Colr Miner pal An alternative metho for ding Colors to your Swatch pane! is to hover oer the empty aea below the exiting swatches. You cusr wil autmatialy become a paint bucket and when you lick anyuere inthis ara, the carte oar wl be ade,Zz om san = | [6 Aes 100% | #101010 ‘You will eed tol his range to between 16 and 2736-The RGB color valu of the dares colar bac) is (0-0-0 Frtelevision this must be inited to 16-16-16. Tis shouldbe your new blac colr fr any project exprted to eo. The RGB value of the ightest color (white) 255- 255-255, This must be limited 0 235-235-225 fr expr Delete Swateh Add Colors. Clear Colors Web 216 Sort by Color Help Close Close Group Sometimes the default clo palette i ot needed and Simply gets in the way of your workflow This 3 good time 1 remove o replace the current swatehes. You can stetall over by mixing and adding new coarse a atime ar by importing an existing color set, clo table or even 8 Duplicate Swatch video format. Since this wl be the brightest colon your Palette, it wil appear tobe stark white in comparison to fll other colors The clo red ha @ tendency to bleed more than anyother colar soit may bea good ies to compensate more than you ned toby lowering the vale to sfound 200- 1616 GIF fie. From the drop-down menu choose Replace Colts and navigate to the “el actor fle containing te ‘coors you want to use. Here Ihave imparted an NISC safety coor alette povided by Waren Faller (wwanimonge. ‘com. This plete include onthe source CD NTSC.) Remember, Flash isresolution- free; as long asyou are ‘working inthe correct aspect ratio, you can always resize when exporting without a toss in quality. Ifyou have imported ‘bitmaps in your Fash movie, you wil want owse a width and height that is 1006 of your Final output to avoid having ‘them scaled in Fath, =, iF) wiser 201Safe colors (Kuler) HE ADOBE KULER PANEL is supported to Flash ‘website that you can browse and download to use in SB. Access it by going to Windows > Extensions Your own projects. Kuler is now integrated into Adobe > Kuler. Kuler (pronounced cooler began as a Web- Illustrator® CS4, Photoshop® C54, InDesign® C4, based application (http:/kuleradobe.comi) forcreating _Fireworks® CS4, and Flash® CS4 Professional software. color themes that can be saved and shared with other ‘Asa stand-alone color mixer, it provides several Kuler users all over the world, The success of Kuler has ‘options the standard Flash color mixer lacks. Here | will spawned a vast community of designers from around show you how to use Kuler to mix NISC safe colors to ‘the world as well as thousands of themes on the Kuler add to the Flash Swatch panel (Open the Kuler pane and then Select a ferent rule using The fist step to imiting the cle on the Crest button to the ule arop-doun mena lightness oF eoaris to simply begin mixing your alors The default Choice of rulesinsude Avalogous, aust the vera brightness conta theme shows ase of clos that flow Manechamatic, Tia, Complementary, Side the handle down uti he the Analogous colar rue. The Base Compound, Shades and Custom. For rightest value i235 or est insure Colors the color that determines the tis example “Custom” willdo.The the cols rat 00 bight for NTSC other colar you theme using your Custom ule wil unlink your colors so standards. selected color ue. you can move he eolormarters around the wheel ingviual. 202Fora vdeo onthe Kuler pant, sce wwwadabe.com/go/vid408_xp. For an artile on Kuler and color inspiration, sce Vere Peters blog at ‘ttpiveele duoh.comyblog/comments/adobe Kuler update and color tips. Browse, search, and save themes dieetly From your desktop with the Adobe [AIR* application. Drag individual themes to your desktp, where they can be Scaled to any size (equees Adobe AIR). tpf/wws.adobe-com/ojkuler ai. ky Select the Shades rule to ceate [Add the theme ta Flas’s You can also shar your themes dlfeent shades ofthe bose Swatches pore! by ecking the ntine by eickng the Save Theme colar fmisng NTSCsafe colors ust Add To Swatches Pane! button atthe button. Provide a descriptive nant and ay attention tothe RGB values and bottom ofthe panel cick"save” Then lik on te Upload ‘hange them f necessary. | ike to 1 Kuler button to share your theme vith the Kuler community. pnd ae | Double-click any of the swateher inthe color ‘group to set ‘the color ofthe stroke oF fillin Flash depending ‘on which one is curently active. 203or Escape PE ESCAPE IS BEST KNOWN AS a platform game for ‘Sony/s Playstation gaming console. But itis also an animated series for television. Recently | was asked ‘to help animate a few scenes and ‘thought it would make for a great ‘example of how a professional production creates animation ‘with Flash as its primary tool for television broadcast. Many of ‘the animators worked virtually, including myself We shared files via FIP (File Transfer Protocol) and ‘we were initially given storyboards in Quicktime format to work from. The main characters were already set-up for usin Flash-ready and ‘each episode was broken down into several small chunks of time, specifically from 5 to 10 seconds in length. This created more files, but they were very small in size ‘and easily shared via the Web. All we had to do was upload the Flash source file so that the post- production crew could then export ‘a PNG image sequence or Quicktime movie and edit all the scenes ‘together using a video editing tool. 204 [As you can se here the duration of his Scene isa 2:3 see- fonds The entire duration of tir shot only about 5 seconds long ach episode fa total 2 minutes in duration, made up of several § to 10 second shots Each 2-minuteepeode coud take nyahere rom 10t0 20 iterent scenes Te we ot tty Tet come Cond tt nt‘Al animation is either an the main Smee or nested in grape symbols, keeping tem in syne withthe man timeline. The rule ig if pay inside ofthe Fash authoring fol when you scrub ‘he playhesd play your animation i wil export vide fr rat succesfully This tue fr all versions of Fash Te safety con tains guides for setion and text sevell ae 43 aspect ta, ra: Ope Ova ego IL “he Faph stage ist to 1920 x 1080 HDTV wides SAUD > Sprelaser & SrecasScenes area great way ta manage lang Timelines. For example, you could have your ile sequence in Scene 1, our story in Scene 2 and ‘nding eredtsin Scene 3, Using senes is sil to multiple files chained together since each scene has its own Timsine. The Timeline ofeach ene combines into a single Timeline in the ‘exgorte ile. The advantage here having the ene project in one FLA SU bayer 2 @ Layer 3 SI Laver 4 Jag TY "eee C2 nee ao.00tes 33.3 “he Fash Timeline has its wn limitations. 1600s your system’ resources and make it harder to work with the numer tha epesents the maximum number multiple ash documents open atthe same time. It will aso oflayersina single Flash movie as wel ae the maximum take avery long time to expr to video and wil create an mount of symbol instances and number frames. Ite enarmous file If you export AU, you wil ery Hey exced fare tose this number reached in any stuation, but the 2 GB limit tat placed on AV ies on most operating is good to understand the intationsn order to avid stems. est practice isto breakup your project ito several ‘them. A Flash document thats 16000 frameslong at _smaler FLA ies, typical between 30 and 60 seconds each, 0 fp is nary rine mites lang file that large wil‘ ten war with FL les les than 20 seconds in lerath. ‘auce problems even in the bet situations. The file will mas the entire process more manageable when animating, take anger ta open a wel a to sve wll exhaust xpoting and eating, i ee — cat a c= 77 ese or sins os soa fie impor your sound file and pace on te pee Timeline in son ayer You ean cag rom — oe ‘the iar tothe stage or se the Sound rop- en ae down mena in the Properties panel to sl he ase file By default, the Sy seting wl be Event nd must be changed to Steam. The Stream behavior embeds the Sou nto ‘Yu canqisiy exper al ayer the Tneine ad il bein aye with any Tintin ariation. You con at he folders by ght-ccking over height ofa ayer by ight-ccking over the ayer name and electing Properties. In anyone of your folders ard selecting the ayer Poprties panel you can set the layer eight to 3s much 35 300%. This Expand Al Foes" from the context can be useful if you want see the waveform tas much deal as possible ‘menu. Collapsing al folders is done the same vy To keep the file sae of your FLAG) as small as possible it ‘god practice to ‘avoid inpoting high quality stereo sound ‘les. Ifyou are planning on editing several ‘exported video ‘les together| in your video ceding program, ‘then import a compressed MP2 audi file Into Flash to use asa "scratch ‘rack’: Place the sound file(s) on its own layer so that it can be easly deleted before export Since Flash C53, (C34 and now in Flash 85, you can simpy turn off the wisi ofthis layer to ‘exclude i from export Use the high quality stereo sound fle in your video citing program Instead. 207QuickTime Exporter Eeonns FLASH MOVIES to video format sed o require tha all animation be on the main Timeline. Dynamic content such as ActionScript, button symbols and Movie Cips could not be exported to a ixed-fame video format. This included Movie Cp animations, filters ActionScript and just about anything namical loaded into your SW file. Welcome the Fash CSB QuickTime Exporter, You now have the alt o export dynamically created Flash content including effects generated with ActionScript as well as effects created with movie clips and ites. Proceed with caution when using the Flash (55 QuickTime exporter. the dimensions ‘You nave mare than lone option when you export your video, and ‘there ae sight diferences depending on whether you are authoring in Mac Ser Windows Baialy it comes downto tree Aiterent options: AM (Auco Video ntereavel, Rope ‘icine, or an image sequence. Foes yout choice of platform cictated your format. Macintosh users exported to Quem and Windows users exported to [AV Now both format ate compatible aera platforms. 208 of your document are particularly large (for example, 720 x 540 pixels, it may be necessary to change the frame rate of the Flash movie to avoid dropping frames during the export process. Why does this happen? The QuickTime Exporter, during the export proces, is actually capturing the playback of your movie as an SWE movie inthe background. Various aspects of your animation can cause frames to be dropped and the exported QuickTime file to not be frame-specific as intended inthe Flash Timeline. A large stage size, a high frame rate, multiple filters and animated effects can al contribute to frames being dropped during the export process.Wen you export from Flash to QuickTime, you mill have several options t choose om, Typieal its good practic to keep your movie 35 uncompressed 2 possible and at the highest Cala bit avaiable You can change the width and height of your movie based on a maintained aspect aia or you can chose to change the sepect rata by deselecting this option. Select Ignore stage olor” to adda wansparent alpha ‘wack to your video. You must select video Compression Type that supports 32-it encoding with an alpha channel uch as Animation, PNG, Planar RGB, JPEG 2000, TF, or TSA. You ‘mus also clet Millon of Color from the CompresorDepth sting 23 i ove Sig praise agjst the video and sound settings. you ae exporting saund, you can set the amount of compression, sample rte, sample size and umber of chanel ‘You ean also prepare your movie forthe Interne ft is intended fr onine viewing Select "Fast Start to allow the move to Start paying fom a Web server before he ‘movie has completely downlosded iF you plan on importing your Fash nimaton to After Etects or Premiere, apart 35.2 PNG Sequence. After Efects (55 also supports SWF format as wel.So you can simpy publish your Fas movi to SIV ard import that into After ects. Ir you choose ta clk “Setting the Standard Video Compression Setings wil open allowing you to refine how your move wl be exported, Tis is ahere you cn selec the compression type and framerate and cick the (uictime Serings button a Slect the ype of campesson deste, Typically no compreson ‘best but have had great rests using the ‘Animation code In this pane you can also aust the colar depth and change the fame rate (useful fyour Fash movie fant using a standard frame rat or video), as wel 5st the amount of keyfaming and, once agai, te sz. eres te rower oe a Clin angen sehacherad Sono © venit ta rete Omran tmnsen) Stontm tt Onna emma a) Cera ean ror) ee aes Sah nea co = > ==re re ao 5 Ges) When you ‘export from Fath to AVI of ‘ick, you i nave a few ‘options fom hich to choose Typealy tis {god practice to Keep your movie as uncompressed 2s possible and atthe highest ‘color bit avall= able. Best prac tice has always ‘ocen to export your Fash movie 4 PNG Image sequence. This maintains ‘contra of each frame when ed iting in Premiere or After Erfects With after Effects C55, you ean import SWFe as wel 209210 SWF2Video T* FLASH QUICKTIME EXPORTER allows you to export dynamic content to the QuickTime video format ut dynamic content that pushes the limits ofthe Fash player may have undesirable results upon export The process ofthe QuickTime Exporters to capture each fame of your movie 2st plas inthe Flash player Tis all happens bind the scenes during the export process I the frame rat is reatively high and your move contains animated Movie ips with fiers applied to ther, the results maybe rapped frames or 2 slow fame rate after exporting The width and height of your movie may bea factor in how wll the exporter performs. larger stage translates to more data that have to be captured on the fy, with results dependent onthe amount of RAM and Your processor speed, A lage stage high frame rate ong Timeline and multiple animations with some fier effects wll most Iikely choke the Flash ‘he SWF2Video IDE ts amazingly simple Upon aurch there’ ile moe than a window with ‘the familiar Fle, Cont, Options and Hep menus Select File > Open and navigate to your SWE (pe the File menu again and eect Ceate AM or (Create Image Sequence. SWVF2Video even supports ten processing offs. Using SWFRdeD super simple Go Fle > Open and octe the published SW fie on Your haa arive The fest ‘tame of your SW movie vl be payed nthe ‘SWvFavdeo interface, QuickTime Exporter. You do have an alternative solution, however. Welcome SWF2Video, @ powerful utility that uniquely RSS supports the conversion of Flash SWF format to AVI. This conversion supports Movie Clips, ActionScript, user interactions and ui. SWF2Video can output an alpha channel to be used for composting effects in video post- production. Tere is also an SWF2Video Plug-in for ‘Adobe Premiere Pro to enable the import of SWF files directly into Premiere projects for editing, SSWF2Video can be found at wwwuflashants com and isa valuable tool to have if your project contains dynamic content and requires output to video.When you select Create AV, the AV Export, ‘Seting alg box opens, allowing you to Fefine your mosie consigeably further “he Sequence settings ae 35 follows: Skip "goto backward frame" in main timeline: If the Flash move contains lop inthe main Timeline by using the gotandPiay0); command, select this option to beak tela by gnering the -AatianScript code. Frame by frame in man timeline: Convert the main Timeline animation into = keyframe sequence. Normal: Conver withthe mavie'snocmal playback sequence, ining Move Clip and ‘ation events For the Duration setting, spect the start and en pins during expat by entering the exact frame numbers Color depth: Select 24 bits AGE or 37 its RGB with Alpha format The 240i color setting Feoresens eight its fr every RG color ale. “he 32-bit clo stings the same a5 24 bits with the ation of eight mare bits representing the wansparerey ofthe color value. Record from eutent SWF file: Record aio fom the curent SWF fle and then merge t with the video. Recording volume: Aust the volume level ofthe wovefor recording device From WAVE fi = Es Sc annonee MT Peter ———— al ews a — oo a ————— eee = ae a “seznete —————————" tm fo 5 Usean external WAVE ile to creat your suo by cickng Browse to choose ‘he WAVE fle. The autodata f this WAVE le are merged with the vdeo dat; the audi in ‘he orginal SW Fes ignored ‘ekg Select inthe Video section opens the Video Compresion ile tox. Here you can choose the appropriate compressor to ‘pply to your vide. Leave this set to Ful Frames (Uncompressed) because tis i always best when ‘woking with high-quality vide, The Seek Controller helps o browse into Flash movie's frames easily by dragging the ‘Sider bar ar entering he fame number nthe Curent Frame fl tts avery handy tal to help ‘you quickly and easy locate the frame nuniber ‘ange inthe Flash move to convert oa | Properties > Fier}. | Bavortance frames down the Timeline and sale the higher. ee vigil Movie Clip symbol 2s shown ele stove ‘Apply Mtion tweens toll keyframes, Pla ack your shapes; convert them to @ Move Ci symbol and repeat ‘rimaton and make adjustments 25 necessary. You may steps 1trcugh7-Then elect and drag the ene ange af want to adjust the amount of luring, alpha or transforming keyframes and frames down te Tneln so they stat after to yur animation You ean also creat a second steam ‘the original animation. This wil el eliminate the reptiton animation by eating anew layer and rawing more of one single looping steam eect. 227Handwriting effect (frame-by-frame) |" (CHAPTER THREE | showed you how to [0 the effect of text writing itself using ‘a mask, While the mask technique yields a smaller file size, it doesn't look as realistic. [At the expense of a few extra bytes, you can create a more realistic version of this effect The Fist step sto star with some text. You can either hand write this ‘with alittle manual labor and patience. yourself using the Brush too or type some text using the Text 0 Ths technique requires tat the text be actual vector art. you used the Text tol to ge tent into a text fel, you wl nee to break it apart utilis actual vector ft Ted this select the ext eld and use €IE) DOD 3 Wit he fame indicator stil on frame 2, ark Before moving on make sur you have inserted 2 new bacoards by easing a small portion of he las eter in © keyframe by pressing Fe. typlealy keep anger at est ‘the word you crested inl | refer tous the eraser end over the Fey while Im executing the technique. Make it 2 ‘of my Wacom syus but you might prefer to use the eraser habit to erase press the Fey, erase mre press the F key taal isl Once you irish easing make sure you pees the anda on. key to insert anew keyframe 228aoag aoe ‘As you cn ee here, make sure your test field isbroken