Job 6 2D Animator. Welcome to the Job

Transcription

1 Welcome to the Job Hi, I'm Mary Lou, the 2D Animator. Glad to have you helping out on the Lemon Pops Web commercial. I'm going to show you a few different techniques for producing digital animation so that you have a good understanding of the different methods you can use to produce the two scenes that you will be animating. Digital animation is a very exciting development in animation. It has taken some of the more laborious tasks such as cel painting, camera operating, editing, compositing and colour correction and made them easier and quicker. Before you jump straight into the Lemon Pops job, I think it will be beneficial if I explain different techniques to you, as well as providing some activities using Macromedia Flash to develop your skills in 2D digital software. Remember to take a look through the Studio Tour. In the Studio Tour I provide background information for 2D digital animation. I explain vectors and bitmaps, resolution and lots of other important topics. I suggest that you also listen to the personnel who produce the traditional animation. All of the principles you will learn there will apply to this job. Tablet and Stylus One of the advantages in digital animation is the ability to draw directly onto the computer screen using a tablet and a stylus pen. While the technology that enables us to do this has been around for a many years, it is really only now that the 2D community is starting to take full advantage of this facility. The Internet and a program called Macromedia Flash have really provided the impetus to produce animation in this way because of a few factors. 1. The program Flash allows for direct tablet input frame by frame with an Onion skinning function. Onion skinning is a term used to describe the effect of seeing through multiple frames of drawings at once, just like a Lightbox. 2. Animation on the Web in the early days was generally rough. Audiences were very forgiving of low frame rates and low quality line work, so the input of drawings using a tablet was generally acceptable. 1 of 1

2 3. Using vectors rather than bitmap images is easier because any mistakes can be easily corrected by scaling the stage area and the file sizes are low compared to bitmaps. Direct input with a tablet suits certain styles of animation more than others. The nature of the stylus produces a loose style of line. Many traditional animators shun the uneven, loose style lines produced by a tablet when compared with the exacting control they have over pencil and paper input. But the advantages of time and immediacy can far outweigh the disadvantages if a production can cope with the loose drawing style. You can save roughly 60% of production time by directly drawing into a program like Flash. You can get a fine pencil type look if you are prepared to zoom in when you work. Drawing at 300% can make for a neater outline. My advice to traditional animators is to use it for projects that can accommodate the style and persist when using a tablet as you will gain more control the more you use it. Most stylus pens have a variety of sensitivities. By applying less or more pressure to the pen nib against the tablet surface, you can affect the width or opacity of the colour that you are applying, depending on the software you are using and the settings you have chosen. If you want to take advantage of the pressure sensitivity in Flash you have to turn on the use pressure button when you have the brush tool selected. When using pressure sensitivity, you should choose a larger brush to start with so that you can see a greater variation in line width. When you have the feel for how it works, you can choose a smaller brush to narrow the variation in line width to suit your animation style. I find that for most animation it is best not to use pressure sensitivity, as the inconsistency in line width can be a problem between drawings. 2 of 2

3 Activity: Tracing with a Stylus Using the Brush tool with Use Pressure button turned on If you want to produce animation using a tablet, you will need to be able to control the pen with accuracy. This activity will help you to learn to trace an image onto another frame. This is useful because it helps develop accuracy when using the stylus. It is also the basis of animation because when animating you need to be able to draw the same object slightly changed in position and pose. The circle is one of the hardest things to draw with accuracy because it needs to be evenly proportioned and the start and finish points need to meet each other. Now follow the steps below. 1. Open Flash and set your stage to 640 by 480 pixels and the frame rate to 12 frames per second (FPS). You can do this by selecting Modify>Document in the main menu. A document properties box will appear into which you can type the stage dimensions and the frame rate. 2. Click OK to return. 3. Change the default name "layer 1" to circle by double clicking on the layer and typing in the new name. 3 of 3

4 4. Place your tablet in front of you so that you are drawing directly in front of the screen. 5. Select: The brush tool from the tools window; The colour red from the Fill Colour palette on the tools window; and The smallest brush size from the Brush Size drop - down menu under the Options. Do not choose the Use Pressure button. Brush settings on Tools window 6. Try drawing a circle in the centre of your stage. It may take you a couple of tries. If you make a mistake on a particular section of the circle but the rest is okay, you can use the eraser tool to remove the mistake. 4 of 4

5 Some styluses have an eraser on the back of the stylus pen. To use it simply reverse the pen and rub with the opposite end. The program should automatically choose the eraser tool for you when you reverse the pen. Draw a circle in the centre of the stage When you create the circle, the first frame in the layer has a dot placed on it to indicate that there is some information in that particular frame. 7. With the layer selected, press the keyboard short cut F7 to create a new blank keyframe. A blank keyframe will be placed in Frame 2 of the layer Circle. Create a new blank frame by hitting F7 8. Now turn on the Onion Skin button, which can be found at the bottom of the Timeline window. 5 of 5

6 This function called Onion Skinning replicates what a traditional animator sees when animating on a lightbox with multiple sheets of paper. Any drawings on frames next to the frame you are about to draw on are shown at a lesser opacity. When you turn on the Onion Skin button you will see a light version of the circle you drew in Frame 1. Select the Onion Skin button to see the layer before 9. One of the hardest skills to master, but essential to your successful use of a tablet and stylus, is to trace over another drawing. On Frame 2, trace an exact replica of the circle from Frame 1. Trace an exact copy on Frame 2 6 of 6

7 10. Now press F7 again to create a new blank keyframe on Frame 3. With the Onion tool selected, you should be able to see both Frame 1 and 2. Frame 2 will be covering most of Frame 1. Hitting F7 creates a new blank frame on Frame In the Timeline grab the Onion skin marker handles that can be found on either side of the Playback head (the red square on the Timeline that indicates which frame you are looking at). By clicking on the tiny circular marker handles, you can lengthen or shorten the duration to allow you to see through more or less frames. 12. Drag the marker handle back one frame so that you can only see Frame 2. Grab the handle and pull it back to reveal only the last frame drawn 7 of 7

8 13. Now trace the circle from Frame 2 with great accuracy. 14. Continue to do this for 10 frames. Continue to trace 10 frames 14. Turn off the Onion skinning function. 15. Select Control>Play to watch the animation. I suggest you place a face on each frame. Use Onion skinning to draw the face on each circle and make a slight change over the ten frames to create an animation. Try drawing a face that changes a little on each frame 8 of 8

9 Straight Ahead and Pose to Pose Straight ahead and pops to pose are two methods of animating from traditional 2D paper based animation. Straight ahead animation is simply drawing each frame one after the other based on what you drew in the previous frame. Pose to pose animation uses key pose drawings every 5 to 10 frames to prescribe an action. These key drawings are done first, and then the inbetweens (drawings in between) are produced to complete the action. In Flash, you can create keyframes and the program will complete the inbetweens for you. It will not redraw a character in a different pose, but it will take care of movement, size, and other changes. Both methods have their advantages. Straight Ahead is good for producing complex flowing movements such as a character tumbling in all directions or a high jumper leaping over a bar. Straight ahead is also very good for producing special effects animation such as water sprays and lava spewing out of a volcano. Pose to pose is good for general character animation especially when the characters are stationary. Pose to pose accounts for the majority of 2D animation that is produced. Let's do two short activities using both of these animation methods with the direct input from a tablet and stylus pen. Activity: Straight Ahead Animation I want you to try drawing directly into Flash using the Straight Ahead method. We are going to produce an animation of some goop hitting an imaginary wall and then sliding down the wall, frame by frame. Follow the steps below. 9 of 9

10 1. Open Flash and create a new file. Your movie dimensions should be 640 by 480 pixels and 12 FPS. 2. Rename the default layer to Goop. This is where we will create our animation drawings of the goop. 3. Notice that the first frame is a blank keyframe. So that there are some blank frames at the start of our animation, for lead time, click on the first frame and then press the keyboard short cut F5 (add frames) to extend the blank keyframes to Frame 4. Hit F5 to add frames 4. Place your cursor over Frame 5 and click in it to select the frame. Then press F7 to add a new blank keyframe. This is the frame in which we will start to draw our straight ahead animation. Hit F7 to add a blank key frame at Frame 5 5. Select the Brush tool from the Tools palette window. 6. Select the red colour from the fill colour palette. 10 of 10

11 7. Select the smallest brush size. Choose the red colour from the fill colour palette Select the smallest brush size 11 of 11

12 8. On the left hand side of the stage draw your first frame of goop. Free drawing with brush tool 9. If you need to redraw or fix a mistake you can: delete the whole drawing by selecting it with the Arrow Tool from the Tools window and then press the Delete key; or you can select the Eraser and rub out the offending part of the drawing and then redraw. To gain more accuracy you can zoom in closer to the stage using the zoom tool. 10. Choose the zoom tool from the Tools window and click once on the stage. You will notice that the scale drop down box, which is under the Timeline, right of screen, says 200%. This means that we are now working with a zoomed stage area at 200%. 12 of 12

13 Stage area is zoomed to 200% for more accuracy Because we are zoomed to 200% we will need to choose a brush that is twice the size of the brush we were previously using. Doing this will mean that our new outlines match the width of the original outlines. 11. Choose the second smallest brush size on the Brush Size drop down menu. 12. Redraw the missing area so that you are happy with the drawing. 13 of 13

14 Erased area is redrawn at 200% stage view 13. To return to 100% stage area, choose 100% from the scale drop down menu. You will be able to see the changes you made at 200%. Select 100% from the Scale drop down menu 14. When you are happy with your first drawing, press the F7 keyboard short cut to create a new blank key frame in the next frame, Frame Remember to choose the smallest brush size again because we are working at a 100% stage view again. 14 of 14

15 16. Turn on the Onion Skinning feature using the Onion Skin button. This will allow you to see Frame 5 at a lesser opacity while you draw on Frame 6. Turning on Onion Skin button to see the previous frame 17. Now draw your next Goop drawing further across the stage. You can zoom in to fix your drawing if you wish. 15 of 15

16 Drawing the next frame 18. Press F7 again to create a new blank keyframe in the next frame, Frame 7. With Onion skinning turned on, you should be able to now see both Frame 5 and Frame 6. Frame 5 will be lighter than Frame Draw the next drawing of goop about half way across the stage. 20. Repeat this process again for another frame. Drawing Frame 7 with Onion skinning on 16 of 16

17 21. Press F7 to create a blank keyframe on Frame 9. In this frame we will start to deform the goop into a splat. The goop should start to splay out into the new splat shape. 22. Draw the next frame. Drawing each new frame based on the last one 23. Press F7 again, creating a new blank keyframe. 24. Now draw the splat getting larger. After you have done two frames of splat, start to have the drawings get gradually closer together for the next three frames of splat. In drawing them closer on each frame, you will be observing the animation principle of slow in. 17 of 17

18 The drawings should get closer together towards the Frame To view the animation so far, turn off the function of Onion skinning. 26. Select Control>Play from the main menu or press the keyboard shortcut Enter. 27. On the last frame of the splat, select the frame and then press keyboard shortcut F5 to add frames. This will extend the duration of Frame 13 and create a pause in the animation, which gives the audience time to register what has just occurred. Pausing animation when objects stop moving is essential to good timing. 28. Add four frames. Select Frame 13 and press F5 four times to add frames 18 of 18

19 29. Select the next frame by clicking in it and then press F7 to add a new blank frame. Now we will add some more straight ahead animation to make the goop slide off the wall. Select Frame 18 and hit F7 to create a new blank frame 30. Turn on the Onion Skin button so that you can see the frame before. Then carefully draw the next drawing, which should be the goop sliding down the wall. The new drawing should be very close to the previous drawing but about three pixels lower. 31. When you have finished drawing this frame, press F7 to create the next new blank frame. 32. Again, draw the next drawing based on the previous two. This time the goop should be slightly further apart from the previous two drawings, about 5-6 pixels. This will help create the illusion that the goop is sliding faster the further it moves down the wall. The effect is called Slow out, another aspect of the animation principle Slow in Slow out. 19 of 19

20 The drawings gradually get further apart 33. Continue to create frames that get gradually further apart and run down the screen until the entire image has left the stage area. You may also want to have some parts of the goop break away from the main goop. These smaller parts should move slightly slower than the main goop. To achieve this you can draw them with less distance from the previous drawing compared to the main goop. 20 of 20

21 Smaller parts can break away from the main goop mass 34. You can look at more than two frames when onion skinning by grabbing the Onion Skin marker handles and extending them on the timeline to see more frames. This is helpful when you need to see the gradual change over many frames. Extending the Onion Skinning Handle to see more frames 21 of 21

22 35. When you have drawn the last goop frame, press F7 to create a blank keyframe and then extend the blank frame by pressing F5 a few times. This will provide some blank frames at the end so that our goop appears to fall completely off the stage area during playback. 36. Test the movie by selecting Control>Play from the main menu. 37. When you are happy with the movie and all of the drawings are correct, save your FLA file as goop1.fla. Now we are going to change the colour of the outlines to a colour that best represents goop, dark green. 38. Move the Playback head to the first frame of your movie, Frame Select the Paint Bucket Tool from the Tool bar and select a dark green colour. The Paint Bucket Tool is used for painting solid fill areas. Selecting a dark green from the Fill Colour Palette 40. Position the Paint Bucket Tool over the drawing outline and click. The new dark green colour should be deposited into the red outline. If your colour fills the inside area of the goop, select Edit>Undo and try again. 22 of 22

23 Painting the outline with the Paint Bucket Tool It could take some time to colour all of the outlines. So to speed up the process let's use the Edit multiple frames button to change the colour of all the outlines in one go. 41. Select the Edit Multiple Frames button from the Timeline window. Selecting the Edit Multiple Frames Button 42. We need to see all of the frames we want to edit, so click on the Modify Onion Markers button under the Timeline and select Onion All. 23 of 23

24 Selecting Onion All from the Modify Onion Markers drop down menu You should now be able to see all of the drawings on the stage. You can now see and edit all frames at once 43. Now grab the Arrow Tool, click and drag from the top left hand corner of the stage area to the bottom right, covering all of the drawings. Then release so that you have selected all of the drawings at once. The frames in the timeline should go black for all frames that contain drawings selected. This is the best way to ensure you have selected all of the drawings from each frame. 24 of 24

25 All drawings selected at once 44. Now choose the Paint Bucket Tool and select the same dark green colour from the colour palette window. All of the outlines should take on this new colour. 45. To deselect the drawings select Edit>Deselect All from the main menu. Or your can select the Arrow Tool from the Tools window and click elsewhere on the stage (not on the drawings). 25 of 25

26 All of the selected drawings turned to the fill colour 46. Turn off Edit Multiple Frames and view the result by selecting Control>Play from the main menu. Now lets fill the inside of the shapes with a lighter green colour. 47. Select the Paint bucket Tool again. This time choose a light green colour from the Fill Colour palette. Flash gives you the ability to close gaps in the outline when filling colours, which is useful when there are gaps in your animation outlines, however it is generally best to use Don't Close Gaps. Use Close Small Gaps only when you find that the object will not fill because of a small break in the outline. Using Don't Close Gaps helps you to ensure that all areas of the image are filled including small gaps in very narrow areas and tight corners. 48. Choose the option for Gap Size: Don't Close Gaps. 26 of 26

27 Selecting Gap Size: Don't Close Gaps 49. Place Paint Bucket Tool over the centre of the goop shape on Frame 1 and click to fill. Filling the area with the new colour 50. Use the Step Forward keyboard shortcuts to move forward frame by frame and fill all of your drawings. The keyboard shortcut for Step Forward is (,). Should you need go backwards, you could use Step backward (.). Using shortcut keys will help you develop speed in colouring. Alternatively go to Control>Step Forward. In the final frames you may encounter a common problem where the outlines have not been joined where part of the object is off stage. In this case you will need to create a self-line across the opening. A self-line is an outline that has the same colour as the fill colour. 27 of 27

28 51. Choose the Brush Tool and select the same colour that you used to fill the other drawings. Outline that is not joined needs to be joined to fill the area 52. With the Brush tool selected you will be able to select the Brush Mode under the Options area on the Tool bar. Select the option Paint Behind. This will enable you to paint behind drawn images on the stage in a layer. 28 of 28

29 Choosing the Paint Behind option for the Brush tool 53. Draw a new line to join the outlines. You will notice that because we chose Paint Behind, the new outline is drawn behind the original outline. This will become an important function later on in your digital animation work for fixing outline mistakes. 29 of 29

30 The brush paints an outline behind the original in the same colour that will fill the area 54. Now you can select the Paint Bucket Tool and fill the remaining area. 30 of 30

31 The enclosed area is filled 55. When you have finished colouring all of the frames, save the FLA file as goop2.fla. 56. Now test the animation by selecting Control>Test Movie. Testing the movie creates a Flash Shockwave (swf ) movie file on your hard drive in the same location that your FLA file is saved and displays it in a player within Flash for you to view. 57. To close the Movie, select File>Close from the main menu. Having all graphics (drawings) grouped makes playback of the final swf file smoother. Clicking on a Frame in the Timeline also selects all of the graphics in that frame. 58. Select each frame in the Timeline and group the drawings by selecting Modify>Group from the main menu. 59. Save your FLA and create the final Movie version by selecting File>Publish. The published Flash Shockwave movie will be stored on your hard drive in the same location as your FLA file. 31 of 31

32 'Pose to Pose' Animation In traditional animation at Lightbox, key poses are drawn by Ian, the Layout Artist, and form the basis of the key drawings produced by Stephan, our Key Animator. 'Pose to pose' is a term describing the use of key drawings in animation. key drawings are drawings that map out the important positions (or poses) in an action. They are generally extreme positions in an action or positions that help define the speed and movement of a character or object. I hope you've learned what Stephan, our Key Animator, has to tell you about key drawings in the Studio Tour. In film there are 24 FPS (frames per second) and in video 25 FPS for PAL video. Generally animators don't draw a drawing for every frame unless a faster movement requires it. Traditional 2D animation can be produced with just 12 drawings per second, which means each drawing is exposed for two frames (on twos). The key animator doesn't draw all of these 12 drawings. They only draw the key drawings - the essential drawings that define how the character will move. The other drawings between these key drawings are called the inbetweens. The In-betweener, a person responsible for producing the inbetweens, uses a breakdown chart provided by the key animator on every key drawing, to know how close or far apart each in-between should be from the key drawings. You will see this in action in the following activity. It will greatly help your understanding of this important topic if you listen carefully to everything Sally, the In-betweener, has to say, in the Studio Tour. Next I have have an activity for you to carry out on 'pose to pose' animation. 32 of 32

33 Activity: Pose to Pose Animation In this activity, I want you to try drawing directly into Flash using the Pose to Pose animation method. We are going to animate a ball moving from one side of the screen to the other. Follow the steps below. 1. Open Flash and set the stage area to 640 by 480 pixels and 12 FPS then save your file as pose1.fla. 2. Choose the Brush tool, the red colour and the smallest brush size. 3. Rename the default layer 1 to Ball. Layer renamed to Ball and Brush tool selected 4. Place your tablet in front of your monitor and grab your stylus. 33 of 33

34 You need to produce your first key drawing, which is the ball in the left side of the stage. 5. Go ahead and draw a ball on the left side of the stage using the tablet and stylus. Drawing a ball on the first frame using the tablet and stylus 6. Now move your cursor down to Frame 5. Click in the frame and hit the keyboard short cut F7 to add a blank keyframe. Frame 1 will be extended to meet Frame 5. Clicking in Frame 5 and hitting F7 produces a new blank frame In Frame 5 we will create a second key drawing on the right side of the stage. 34 of 34

35 7. Turn on the Onion Skin button so that you can see the first key drawing as a reference to produce the next key drawing. Selecting the Onion Skin button to see the previous drawing 8. Rather than drawing on the right hand side of the stage trace over the drawing from Frame 1. Tracing directly over the previous drawing on the new blank frame 35 of 35

36 9. Now select the Arrow Tool from the Tool bar. Click on the stage and drag over the ball shape to select the whole image. The ball image will have a dot pattern applied to it when the shape is selected and the frame will turn black to indicate that the image has been selected. The image, when selected, has dots applied to it and the key frame turns black 10. Move the new ball drawing over to the right side of the stage area. With the ball selected it can be moved to the other side of the stage 36 of 36

37 Now we need to create some blank frames in between these two key drawings. 11. Turn off Onion skinning then click on Frame 2 and hit the F7 button to create a new blank frame. Hitting F7 on Frame 2 to create a new blank frame 12. Press the F7 button two more times to create more blank frames. Hitting F7 twice more creates two more new blank frames 13. Select Frame 1. We will now create a breakdown chart for this first drawing. A breakdown chart is a spatial chart that tells the in-betweener where to draw the in-between drawings in relation to the key drawings. In traditional animation, the in-betweens are produced by a specialist. Here at Lightbox, it's Sally the In-betweener who does this. In 2D digital animation, you need to create your own in-betweens. 37 of 37

38 14. Select the Brush Tool from the Tools window. In the lower right hand corner of the stage area draw the base of the breakdown chart. It looks like a giant I. Drawing a large I shape as the basis of the breakdown chart There are three blank frames between the two key drawings and so you need to put three marks on the breakdown chart to show the distance between them in relation to the key drawings. If our key frames were part of a larger animation where the ball was travelling at a constant velocity (speed) our breakdown chart would look like this. A breakdown chart that has the in-betweens evenly spaced But because these two key drawings are the start and finish of the movement, we need to add some Slow in and Slow out to the in-betweens. 38 of 38

39 Slow in and Slow out is a principle of traditional 2D animation. If you want to find out more about this principle you can see a demonstration in the Studio Tour. To observe Slow in Slow out we must place the in-betweens nearest the key drawings closer to the key drawings. The breakdown chart will look like this. 15. Go ahead and complete the breakdown chart to look like the following illustration. Breakdown chart indicating some Slow in and Slow out 16. Create a new layer above the ball layer and rename it to path of action. A path of action establishes the path along which the ball will move. 17. Turn on Onion Skinning and move to Frame 3 so that you can see both key drawings. Remember to save your file regularly. 39 of 39

40 Renamed layer and Onion Skinning turned on 18. In this layer draw a path from the centre of one ball to the centre of the other. Then replicate the marks from the Breakdown chart onto the path of action. This will give you the positions for the centres of your three in-between drawings. 19. Lock off the layer when you have drawn the path to prevent changes being made accidentally. You do this by clicking on the dot in the layer underneath the lock. This is important as you may select parts of the path as you produce the in-betweens or draw on the wrong layer. 40 of 40

41 The marks from the breakdown chart replicated on the path of action 20. Click in Frame 3 on the ball layer and trace the ball from Frame Select the ball you have just drawn and move it to the centre position, so the centre of the ball is lined up with the centre mark on the path of action. You may find it easier to zoom up to 200% stage view to produce this inbetween. The centre of the ball is lined up using the centre of the path of action 41 of 41

42 22. Click in Frame 2. Select the Brush Tool and the smallest brush size. Now we need to produce the in-between drawing for Frame 2. This time rather than tracing frame one, try simply drawing the in-between freehand. Use the mark on the path of action to guide you as to the centre position of the ball. This is hard to do but worth mastering. Keep your fingers on the Undo keyboard short cut and undo any bad drawings until you get a good one. Drawing the in-between number 2 in the correct position 23. Now repeat this procedure for Frame 4, the final in-between. 42 of 42

43 Drawing the in-between number 4 in the correct position 24. Turn off Onion Skinning. Also turn off the visibility on the path of action layer by clicking the Hide Layer icon (the dot under the eye icon) on the layer. 25. Play the animation by pressing the Enter button, which is the keyboard shortcut for Control>Play. Turning off the visibility on path of action layer 23. Now lets paint the circles with a colour. Grab the Paint Bucket Tool from the tools window. Select an appropriate colour with the Fill Colour menu. 24. Place your cursor over the centre of the ball and click to fill it with colour. If your ball won't fill with colour ensure that you have the layer selected. 43 of 43

44 Filling the ball with the Paint Bucket tool 25. Use the Step Forward keyboard shortcut (.) to move forward one frame at a time and click to fill each ball shape. Use the Step Backwards keyboard shortcut (,) if necessary. 26. Now lets get rid of the path of action layer. Select the layer and then click on the Trash icon at the bottom on the Timeline window. Selecting the Layer and then clicking on the Trash to delete the layer 27. Lets remove the breakdown chart from Frame 1. Go to Frame 1 and use the Arrow Tool to click and drag over the breakdown chart to select it. Then press the Delete key to delete it. 28. Now go through each frame and group the images. To do this click in a frame, which will select all the graphics in that frame, and Select 44 of 44

45 Modify>Group from the drop down menu. 29. To complete our animation, extend Frame 5 to be held for the duration of four frames. To do this click on Frame 5 and press F5 three times. Clicking on Frame 5 and Hitting F5 to add frames 30. Now we want to repeat some of these frames later in the sequence so that when the movie is played it returns to the first frame. So click on Frame 1, then hold down the Shift key and click on Frame 4 to select multiple frames. Selecting the first four frames 31. We are going to copy these frames and paste them further down on the timeline. To copy them go to Edit>Copy Frames under the main menu. 45 of 45

46 Selecting Copy Frames 32. Place your cursor in Frame 9, click and the frame should turn blue. Go to Edit > Paste Frames and the four copied frames will be pasted onto the Timeline. Pasting Frames 33. Select all of the frames we just pasted by clicking on the first of them, holding down the Shift key and clicking on the last frame. 46 of 46

47 Selecting the frames to reverse the order 34. When you have them all the pasted frames selected, go to and select Modify>Frames>Reverse in the main menu to reverse the order of the frames. 35. Now click on the last frame and add two more frames by hitting the F5 key twice. Then Save the FLA file. 36. Now test the movie by selecting Control>Test Movie. This will create a SWF version of the movie on your hard drive in the same location that you have saved your FLA file. You should see the ball moving from side to side with slow in and slow out. To exit the Test, select File>Close from the main menu. 37. If you see any problems that need fixing, or parts you could improve, go ahead and make the changes. To publish the final movie, select File>Publish. The SWF movie file will be created on your hard drive in the same location as your FLA file. Using the Pen Tool You can use Pen Tool with a tablet and stylus to draw directly on the stage. The pen tool produces thin, even outlines as opposed to the uneven-shaped outlines that the brush tool makes. The pen Tool draw one vector line that has an outline thickness applied to it. The thickness of the line can be 0.10 points up to 10. They can be coloured using the Ink Bottle Tool. The lines that the brush tool produces are actually very thin shapes made from filling the space between two vectors, which is why you need to colour them using the Paint Bucket Tool rather than the Ink Bottle Tool. 47 of 47

48 When using the line tool for producing animation, I find that it is best to have the options set to Ink. Ink produces a line that is more or less exactly the movements that you have made with your stylus. The other options straighten or smooth your drawn line. Take some time to experiment with using the line tool. Try drawing a character. Importing Hand Drawn Frames Selecting the Ink option when using the Pen Tool While direct input using a tablet and stylus is increasing in popularity, many people still prefer to produce their animation by drawing it on a Lightbox and use the digital animation techniques to finish the animation. The process for getting the drawings into the computer starts with the scanner. Most hand drawn animation is captured in this way. There is a lot of great information on scanning in the studio tour. To learn more about the processes go and see the Technical Director. If you are scanning hand drawn images for vector conversion you will need to scan at a fairly high resolution such as 600Dpi. For importing them into Flash 48 of 48

49 you need to ensure that each image has a mark on it, such as a black bar at the top that can be used to register each drawing to the others. When the drawing is vectorised, this mark will be converted and then you can use it to align all of the drawings before you start colouring them. You must ensure that your vector file is compatible with Flash. Adobe Illustrator, eps or ai files work well, as do Freehand files. Activity: Importing Vector Drawings into Flash To import a series of vector art drawings: 1. Create a new Flash file with the correct pixel dimensions to suit your project. 768 by 576, 25 FPS for PAL Video. For the Internet any pixel size that fits into the browser is acceptable, but it is advisable to choose a pixel size that suits the ratio of your original artwork e.g. 4:3 or 16:9. 2. Select File>Import from the main menu and choose the first file in your sequence. If you can ensure that all of the files are numbered sequentially, Flash will tell you this file appears to be part of a sequence of Images, and then asks: do you want to import all of the images in this sequence? Select Yes. 3. You can then specify that the files be placed on separates frames, by choosing the Key Frames radio button under the Convert heading of the Illustrator Import window. Before you manipulate the imported vector drawings, ensure that they are grouped. If you have imported them as a series of images, then they should all be grouped on import. You can tell if an image is grouped by clicking on the frame that contains the drawing. If the image has a bounding box around it then it is grouped. If all of the elements in a drawing have their own small bounding box, then you will need to group them together before you align the sequence. 5. When you have all of the images on all frames grouped, then you can align them and position them on the stage. To do this you should turn on Edit Multiple Frames and set the Modify Onion Markers button to Onion All so that you can see all of the frames at once. 6. Zoom out to 50% stage view so that you can see all of the drawings at once. 49 of 49

50 Zoomed out to see all of the drawings 7. Select Edit>Select All Frames to ensure that you have all frames selected. All frames selected 8. Using the Align window palette align your images to each other by selecting Align Left Edge, Align Top Edge. Selecting the appropriate settings to align the drawings to each other 9. Move all of the images to a position on the stage where you desire them to be by selecting the Arrow Tool and clicking and dragging the selected drawings. 50 of 50

51 10. If you need to scale all of the images so that the stage area matches the Field guide, you can do it now using Modify>Transform>Scale. Drag one of the corner handles on the bounding box to scale the images. 11. Now you need to break the images apart. Select the drawings and choose Modify>Break Apart from the main menu. Now repeat this action. Break the images a second time so that they are ready to be coloured. You can select all of your Registration marks and delete them. Also delete any other artifacts from the scanning process that you may find. Images broken apart first time Images broken apart second time. A dot pattern is placed on all broken graphics (not grouped) Your sequence should now be ready to colour. Activity: Importing Bitmap Drawings into Flash Another option for importing hand drawn paper based animation into Flash is to import low resolution bitmap files and trace each drawing using the Brush Tool with a tablet and stylus pen. This doesn't save time, and often tracing 51 of 51

52 each drawing into Flash can mean losing outline quality, but it does help to keep the final movie file size small for output to the web. To import a series of bitmap art drawings: 1. Create a new Flash file with the correct pixel dimensions to suit your project. 768 by 576, 25 FPS for PAL Video. For the Internet any size that fits into the browser is acceptable, but it is advisable to choose a pixel size that suits the ratio of your original artwork e.g. 4:3 or 16:9. 2. Select File>Import. Your image should be placed in the first frame of the default layer. Rename the layer to Bitmap. 3. Create a new layer above the layer that contains the bitmap image you have imported by selecting Insert>Layer. In this layer you will trace the original drawn image. Lock off the layer that contains the original bitmap drawing by clicking on the dot under the Padlock icon. The layer should receive a locked padlock icon to indicate that it has been locked. The Bitmap layer is locked 4. Select the Brush Tool and a bright red using the Fill Colour tool and the smallest brush size. 5. Using your tablet and stylus, trace the original drawing. The red colour should provide an adequate contrast from the black/gray outlines on the original drawing. You may find it advantageous to zoom in to 400% stage view. 52 of 52

53 Zoomed in to 400% stage to trace outlines 6. Ensure that the next image you import has its position registered to the same position as the previous image. You can do this by clicking on the image and checking the X: and Y: coordinates in the info window. Select Window>Info from the main menu and the Info window should appear top of the right hand side of the screen. If you set the X and Y coordinates of each image to the same values each drawing should be registered to the other. Check that each image is located at the same X,Y coordinates 7. When you have traced the bitmaps dispose of the layer containing the original drawings. 53 of 53

54 Lemon Pops Web Commercial Final traced image The scenes we require you to do are Scenes 1.4 and 2.2. Now that you've acquired some essential skills in 2D digital animation, I'll guide you step by step through the process of animating Scene 1.4 of the Lemon Pops Web commercial. My preferred application is Macromedia Flash because the Flash Shockwave format suits the intended delivery specification, which is delivery via the Internet. For Scene 1.4 you should make sure you have downloaded and printed out the following: script model sheet for Lemon Pops colour model for Lemon Pops storyboard X-sheet Scene 1.4 Requirements Once you have a good understanding of the structure of the TVC, by reading the scrip and referring to the storyboard, look at the first X-sheet you are required to animate. If you're not sure how to read an x-sheet, you should see Lisa, the head of timing in the Studio Tour. 54 of 54

55 X-Sheet 1.4 In Scene 1.4 Lemon Pops looks sad, he 'sighs', he slumps down and then looks up slowly, looking hurt. You can see the scene directions in the actions column on the X-sheet. The actions have been written in the action column by Lisa, Head of Timing. The actions are a guide for us to follow when we animate this scene. Take some time to check out the instructions in the action column. They tell us what the character should be doing and on which frames. Next to the actions column is the dialogue track. In this track resides a breakdown of the phonetic sounds that Lemon Pops makes as he sighs and also of the other characters laughing at him as he walks off. The laughs are not important to us, as we will not see the other characters. We start our animation on Frame 213 and finish the segment on Frame 255. That's 43 frames - less than 2 seconds of animation! Look at Mack's storyboard panel of Lemon Pops looking sad, below. 55 of 55

56 You will use this drawing as a basis for creating the animation on your computer. Your job is to breathe life into this character and tell the audience in less than two seconds, the following pieces of information: Lemon Pops sighs and looks down, eyes slumping a bit. Lemon Pops looks up sadly. Although you are producing digital animation, you can learn a lot from the traditional animators here at Lightbox. Key Poses in Traditional Animation In traditional animation the layout artist produces key poses. They are poses for a character that give the animator an idea where the character should be positioned at key points throughout an action. Even though we are going to produce this using a computer, it's a good idea for us to produce the layouts on paper first, so that we can plan our scene accurately. For this scene the layouts include: a field guide a background layout key poses. A field guide is a rectangle drawing that represents that screen ratio 4:3 at various sizes. Most TV shows are filmed at the ratio of 4:3 (width: height). In traditional animation when using a camera, these sizes would mean that the 56 of 56

57 camera had to be a certain distance from the artwork to fill the cameras viewfinder. Field guides come at set sizes, the smallest being a 4 field and the largest being a 24 field. 6 Field - Field guide Activity: Reference Drawings for Key Poses To help you to draw key poses, I want you to produce some reference drawings. To do the this activity you will need: some paper a Lightbox a graphite pencil rubber an ink pen for tracing a mirror a scanner You will also need the storyboard panel for scene 1.4 in view. We are going to produce three key frames, or more correctly three reference drawings to trace in Flash. According to the X-sheet, Lemon Pops must slump and sigh, pause for a few frames and then look back up sadly. The looking back up is a subtle action that helps convey his feelings. Think of the storyboard panel as your second keyframe reference. I want you to quickly sketch out in thumbnails a three drawing sequence, showing the three key poses. Thumbnails are tiny sketches that are just as big as your 57 of 57

58 thumbprint. They are a good way of visually thinking about positions and movements of characters as you can quickly jot them down beside each other. Thumbnail sketches of the key poses The first thumbnail pose will be Lemon Pops not completely slumped but just in his normal hunch. The second will be Lemon Pops slumped and breathing the last of the sigh. It should look like the storyboard panel but even more extreme. The third will be of Lemon Pops slightly raised again and looking sadly up at the other characters. Try quickly sketching the three key poses as thumbnails, side by side so that you can get a feel for the sequence. If your first attempt doesn't work, keep trying. That's why we start with thumbnails. You can produce them quickly and try lots of different ideas without wasting heaps of time. When you are happy with your three thumbnails grab a mirror and place it on a desk or wall at head height. Using a clean sheet of paper draw your face making the three different expressions used in each key pose. These drawings will not be used in the actual animation but they will help you to capture the correct subtle facial expressions that make for good animation. Sad and hurt expressions sketches for reference Phonemes are sounds that we produce when we talk. In animation we simulate talking by producing the correct mouth shapes to match the phonemes being heard in the audio track. To perform this Scene 1.4 you 58 of 58

59 don't really need to know how to animate phonemes in great depth but you should check out what Lisa, the Head of Timing, has to say on the matter. She has a chart that shows you all of the relevant mouth shapes that you will need to represent phonemes in animation. Drawing Three Key Poses You need to combine these two sources of reference - the thumbnail sketches and the expression drawings - into three final key pose drawings that we will scan into the computer. Because we will be producing this commercial at 640 by 480 pixels using digital software and vector drawings, the size of the field guide is not completely important because we can scale our artwork to meet the stage dimensions. But, using a border when you plan animation is important, because it helps you to get position and balance of all the elements. So let's start with a 6 field guide. You can download this. To draw your three key poses you will need to use a Lightbox. A Lightbox is a drawing table that has a persplex disc in it that allows the light to shine through your animation paper so that you can see the drawings you have previously produced. To ensure that each drawing is registered to the others the Lightbox has a peg bar, also known as 'pegs'. Each piece of animation paper needs to be punched using an animation punch so that it has the registration holes in it that will fit over the pegs. You will also need the model sheet for Lemon Pops near you to produce the key poses for this scene. Pin it to the wall above your Lightbox so that you can quickly look at it for reference to ensure that you are drawing him correctly. Here it is. 59 of 59

60 Lemon Pops model sheet Now look at the storyboard panel and try to draw the character for Pose 1 within the field guide. Use your thumbnails as a guide for the body attitude, the storyboard for positioning the character and the expression sketches to capture the correct expression. According to the X-sheet the character is about to sigh so draw his mouth open performing the shape for 'Ah'. When you have done your first drawing, place another sheet of paper over the drawing you have just produced. Now try to clean up the first drawing by looking at the model sheet of Lemon Pops and seeing where you could improve the character to make it look more like the model sheets. This is called 'putting the drawing on model'. To evaluate a cleaned-up drawing to see if it is on model, just click the activity button. Try also at this time to strengthen the pose. When you have done a drawing that you are happy with label it Pose 1 in the top right hand corner. Between the first set of pegs, label the drawing ANIM and between the second set of pegs write the scene number, SCN of 60

61 Pose 1 layout Now you can throw away the very first drawing of Lemon Pops that you did and keep the cleaned up drawing. Over Pose 1 place a new sheet of paper. Now using your thumbnails as a reference, sketch in the second key frame position of Lemon Pops slumped over. When you have the basic shapes in place use your expression sketches to help you design the eyes, eyebrows and mouth. The phoneme at this pose will be a W sound. Bring the lips of the character together and purse them. I've gone for the eyes closed and squashed to obey the principle of stretch and squash. If you want to learn about stretch and squash or some of the other principles you can go and check them out in the studio tour. When you have the second key pose looking right, place a new sheet of paper on top and clean up this pose making sure that it is on model according to the model sheet. 61 of 61

62 Pose 2 layout Now we need to produce the final pose. In this pose Lemon Pops has raised his body slightly, is checking to see if the others are laughing at him, and looking sad and hurt. You can get an appropriate position by placing pose 1 and pose 2 on the lightbox and then tracing out an in-between position that is halfway between each pose. Then using your expression sketches draw in the appropriate eyebrows eyes and mouth shape. The mouth should be closed by this time and obviously a sad down turned mouth is appropriate. When you have finished the rough version place a new sheet of paper on top and trace out a cleaned up version that is On Model. Pose 3 layout The last drawing we need before scanning the images into the computer is the background layout. Again using the storyboard panel as a reference, sketch up a background within the field guide. The background has to roughly reflect the storyboard panel; the actual details in the layout are up to 62 of 62

63 you. However, keeping it simple would be advisable for this particular shot, as it lasts less than 2 seconds. Scanning in the layouts Background Layout You should only need to scan your key poses, background and field guide at 72 ppi (screen resolution) as we are going to trace them in the software. For more information on scanning see the Technical Director in the studio Tour. Activity: Animating Scene 1.4 This activity covers the basic steps required to create the necessary animation using Macromedia's Flash animation software with a tablet and stylus pen. Timeline Properties 1. Start up Flash and click File>New to start a new movie. You need to set the screen dimensions and frame rate. 2. Click Modify>Movie, then change your dimensions to 640 pixels by 480 pixels and adjust your frame rate to 25 fps. 63 of 63

64 Document properties dialogue box The commercial has 750 frames (30 seconds by 25FPS) and our scene starts on Frame 213 and finishes on Frame Set the duration of the layer in the Timeline to the end the scene 1.4. You can do this by scrolling down the Timeline until you reach Frame 213. Click in the frame then press F6 to create a blank keyframe. Then scroll again until you reach 255 and press F5. This will lengthen the duration of the layer to include the frames that our scene requires (213 to 255). Creating the duration of the animation on the timeline Now let's import the audio track and set it up so that we can hear the sound as we produce the animation. 4. Choose Insert>Layer from the main menu to create a new layer in which we shall place the audio. 5. Double click on the layer name and rename it to Audio. Rename the layer to Audio 64 of 64

65 6. Choose File>Import, navigate to and select the sound file tvc_aud.wav. 7. Choose Window>Library from the main menu to see the audio file that has been stored in the Library. You can listen to it by clicking on the tiny play button at the top of the Library window. Click on the play button to hear the audio track in the Library Window To have the audio play in the layer that we set up for it, click on the first frame of the layer. 9. Go to the Properties window, which is usually found at the bottom of the stage area. If you cannot locate the properties window then choose Window>Properties. 10. Click on the Sound drop down menu on the Properties window and select tvc_aud.wav. Then select the Sync setting Stream. Selecting the audio file from the Properties window 65 of 65

66 Selecting the option Stream from the Sync drop down menu You should now be able to see the waveform of the audio file in the layer. If you play the movie you will be able to hear the soundtrack. 11. To play the movie, choose Control>Play from the main menu (Ctrl+Enter = keyboard shortcut). At Frame 255 it will stop playing, as we have not added any frames past this point. Timeline with audio in layer You can also scrub the Timeline, which is a technique that will come in handy as you produce more animation. 12. Grab the Playback Head, which is the red square at the top of the Timeline. Click and drag the Playback Head. You will hear the sound track for frames as you scrub over them. This is great for checking if lip sync is working. Playback Head 13. Import the layout drawings that you have just produced. Create a new layer in which you want the drawings to be placed. Now choose File>Import and then navigate to where you have placed your layout scans. Select all of the images to import, the field guide, the background, and the three poses. 66 of 66

67 Flash will automatically store them in the Library and also place them on the stage in a single layer. The imported bitmaps are placed on the stage and in the Library 14. Because they are all in one layer we need to place them on separate layers so that we can view them when we need to. Choose Edit>Select All. This will select all of the images that we have imported. Then choose Modify>Distribute to Layers. This will place each drawing on to its own layer. All of the drawings have been distributed to layers 15. We will use the field guide to rescale and position all of our images. Rearrange the layers so that the field guide layer is above the other layers. You can do this by selecting the layer and dragging the layer in to the desired position then release. 67 of 67

68 You need to resize and reposition the layouts. To do this we will first trace the border of the field guide onto another layer. 16. Create a new layer by choosing Insert>Layer from the main menu. 17. Select the Rectangle Tool from the Tools window. 18. On the colours menu select a bright red for the outline Stroke Colour, and select no colour at all for the Fill Colour. Selecting no colour for the fill Colour 19. Now trace the border of the field guide by clicking on the top left corner and dragging to the bottom right corner with the Rectangle Tool, then release. 20. Select the rectangle that you have just created by clicking on the first frame in its layer. 21. Choose Modify>Group to group the new rectangle. 68 of 68

69 Tracing the field guide with the rectangle tool You want to copy and paste this rectangle onto the field guide layer so that when we scale the field guide it will provide us with an outline that we can match to the stage area. 22. Select the rectangle by clicking on it. 23. Choose Edit>Cut from the main menu. 24. Select the layer that contains your field guide and choose Edit>Paste in Place. The rectangle should be deposited on the field guide in the correct position. 25. Now click on the first frame of the field guide layer to select both the image and the rectangle. 26. Choose Modify>Group from the main menu. Now we have made one image from both of these items. Before we scale the layouts we need to see them as outlines. 27. To see the outlines click on the Show all layers as outlines button, which is located above the layers. 69 of 69

70 Selecting the Show all Layers as outlines button Now you need to resize the field guide to match the stage dimensions 640, 480. When you do this you will also want to resize the other layouts at the same time. 29. To select all of the layouts choose Edit>Select All. All of the layers containing layout drawings should turn black indicating that they have been selected. 30. Click on the Free Transform Tool on the Tools window and then click on the Scale button under the Options heading on the Tools window. Choosing the scale button will retain the proportions of the layouts as they are scaled. 70 of 70

71 Free Transform Tool with the Scale option selected. 31. Select the field guide on one of the corner handles and drag the handle to resize it. You should try to get the rectangle outline on the field guide layer to match the Stage area. The rectangle may not be an exact fit so try to get it as near as possible. 71 of 71

72 Selecting the corner handles to resize the image. Resizing the image until the border outline matches the Stage area. When you have resized the layouts you may need to reposition them. 32. To do this move your cursor over the layouts, away from the corner handles and the centre point, and you will notice that the cursor turns into an arrow with a cross beside it. This indicates that you can click and drag the artwork to move it. 33. Click and drag the layouts to reposition them. 72 of 72

73 34. Choose Edit>Deselect to deselect the artworks. 35. Hit the Show All Layers as Outlines button again to see the result. By turning off visibility of some layers you will be able to see that all of your layouts are now resized and repositioned to the same area. 36. To turn off the visibility of a layer click on the dot next to the layer name under the Eye icon. Another method for resizing artwork is to use the Transform Window Panel. 37. Select an image on the stage. In the Transform window have a look at the width text box. You should see a scale percentage for the image. If you were to type in 100% it would resize your artwork to its original size. Likewise if you were to type in a higher percentage value - it would resize the image larger. You can use this window to resize images to the same size for any future images you may want to add. Width text input box on the Transform Tool. We shouldn't need the field guide layout from now on. 38. So select the layer by clicking on it, then hit the Delete Layer button (trashcan icon) at the bottom of the Timeline window. Now we will start tracing the layout poses for Lemon Pops. 39. Scroll down the Timeline until you reach Frame 213. There should be a blank key frame in the original layer. I've renamed my layer to LP - Lemon Pops. This is the layer that will house all of my Lemon Pops drawings. 40. Click in the blank layer at Frame Make sure that you can only see the first layout pose - Pose1. You can do this by turning off visibility for all other layers. 42. Lock all other layers except for the one you are about to draw on. You can do this in several ways. The quickest is to right mouse click on the LP 73 of 73

74 layer and select the option Lock Others. Locking all other layers will ensure that the layouts don't move and that you are drawing on the correct layer. Turn off and lock other drawing layers so that only pose one is visible 43. Now select the Brush Tool, the colour bright red for the Fill Colour and the smallest brush size. 74 of 74

75 Selecting the Brush Tool, the colour red for the Fill Colour and the smallest brush size 44. Select the Stage view drop down menu and select 200% stage view. This will zoom to 200% stage area. It is far easier to trace at a zoomed ratio, but remember that if you zoom to 400% you will need to choose the second smallest brush to compensate for the zoom. Brush size works independently from the stage view. It would pay to experiment with brush sizes and zooming to different stage areas in a new flash movie to understand how they relate to each other. 75 of 75

76 Tracing LP at 200% stage view When you trace the first pose you may find it necessary to move the stage area up and down to trace the entire image. You can do this by selecting the Hand Tool. 45. Place the Hand Tool on the stage then click and drag to move the stage view around. The keyboard shortcut is the Space Bar. Holding down the Space Bar gives you the Hand Tool automatically. When you release the Space Bar the cursor reverts to the tool you previously selected. Selecting the Hand Tool Now you need to trace Pose 2. Pose 2 will occur at Frame 237. We know this because the X-sheet shows us in the action column that the slump and sigh should end at this frame. 76 of 76

77 47. On the layer LP click on Frame 327 and hit F7 to create a new blank key frame. Now make sure that you can see the layer that contains the artwork for the layout Pose Select the Brush Tool and trace out Pose 2 in Frame 237. Tracing Pose 2 at frame Now delete the layer containing the Pose 2 layout and make visible Pose 3. Pose 3 will occur on Frame 253 according to the X-sheets. So on Frame 253 create a blank keyframe by hitting F Trace out the final key pose on Frame 253. Delete the layer containing the Pose 3 Layout when you have traced it. Now you should have three key drawings. Save your file as keypose.fla 77 of 77

78 Creating a blank key frame at frame 253 to trace out pose 3 Activity: Filling in the X-Sheet Now that you have the three key poses drawn let's fill in the X-sheet. 1. On the first cel level column place the number 1 in a circle on row 213. The first key drawings will be exposed on frame 213. The circle around the number helps us to know that it is a key frame. 2. On Frame 237 we placed the key drawing pose 2. If we are exposing our drawings for 2 frames each then we can write a number in every second row until we get to frame 237. Have a look at the example below. 78 of 78

79 Filling in the drawing numbers for Scene 1.4 on the xsheet 3. At Frame 237 drawing Pose 2 will be number Place a circle around it so that you know it's a key drawing. Drawing 13 is to be held for several frames according to the actions column, which says pause. So we can draw an arrow from the number 13 down to Frame of 79

80 Filling in the drawing numbers for Scene 1.4 on the x-sheet. 5. On Frame 245 the character starts to move again so you can start writing in drawing numbers every 2 frames. 6. When you get to Frame 253 you will need to circle the drawing number for pose 3. It should be numbered 18. Drawing 18 will be exposed for 3 frames. 80 of 80

81 Filling in the drawing numbers for Scene 1.4 on the x-sheet. Activity: Making Breakdown Charts Now you need to make some breakdown charts for the key drawings so that we know how far apart to space the in-betweens from the key frames and each other. At this point, I advise that you see Sally, the in-betweener, in the Studio Tour, for some background knowledge on in-betweening and breakdown charts. 81 of 81

82 1. Go to Frame 213, our first key drawing. On the lower right hand corner draw a vertical line. On this line we will draw our breakdown chart. Draw two small horizontal strokes at each end. The horizontal lines at each end will represent the key drawings. Blank Breakdown chart in the lower right hand corner. 2. There are 11 in-betweens to be produced between the key frame 1 and the key frame 13. This is an unusually large number of in-betweens to have between 2 key frames, but not unheard of. Because the movement is slow it will be acceptable to produce this many in-betweens. 3. Place a stroke on the chart in the centre. This line will be the breakdown drawing (the one we produce first). Draw some brackets around the number (7) on the X-sheet to indicate that this is the breakdown drawing. 82 of 82

83 Drawing 7 will be exactly halfway between the two key frames. 4. Now divide the remaining space between the first stroke and the breakdown drawing stroke into even quarters with three strokes. Divide the remaining space into even ¼'s. 5. Then stroke halfway between the first quarter for drawing of 83

84 Divide the first ¼ to get drawing 3 6. Then repeat this again to produce the halfway point between the first two strokes. Now we have 5 in-betweens marked on the first half of the breakdown chart. Divide the first ¼ again to get drawing 2 7. Now repeat this whole process for the remaining half of the breakdown chart but this time the drawings should get closer together towards the second key frame. Now you have a breakdown chart that tells you the spatial relationship of each drawing to the others. The drawings get closer together nearing the key frames, which means that our animation will have a Slow in, Slow out effect. 84 of 84

85 Repeat the whole process in reverse to get the in-betweens between 7 and Now lets produce a breakdown chart for the second key frame that tells us about the in-betweens between drawings 13 and 18. Go to frame 237 a draw another blank chart on the lower right hand side of the screen. 9. Looking at the xsheet there are four in-between drawings to be produced between drawings 13 and 18. Because we want both slow in and slow out on these in-betweens we will need to firstly divide the chart into 3rds and then half both the first and last third. This should evenly place the in-betweens so that some slow in slow out occurs. The breakdown chart for drawings 13 is based on even 1/3's 85 of 85

86 Activity: Producing In-betweens Now that we have the breakdown charts it's time to start producing the inbetweens. The first in-between to produce is the breakdown drawing, number (7). 1. According to our X-sheet the drawing 7 will occur on Frame 225, so click on that frame and hit F7 to create a new blank key frame. 2. Turn on Onion Skinning and extend the Onionskin Marker Handles to include the key drawing 13. Extending the Onion Skin handles to view both key drawings 3. In the blank key frame we will start to produce our in-between. It should be a drawing that is half way between the 1st and 2nd key frames and it should take into account the principle of arcing. Arcing says that few animals' limbs move directly from point A to point B in a straight line. Most animals' movements have a slight arc. There will be a small forward arcing motion on the slump action for Lemon Pops. 4. Create another layer called Paths in which you can place a path of action that describes the arc. 5. Draw paths of action from the corners of the significant shapes. 86 of 86

87 Arcing paths of action are drawn in another layer above the animation layer 6. On the paths of action mark the halfway points. This will give you enough corners to produce the box shape for the body, but make sure that you are drawing on the correct layer when you draw the body and not the Paths layer. The box shape is drawn in halfway between the 2 key drawings taking into account the arc 7. Make the mouth shape more open rather than an in-between from 1 to 13. This is because the character is making an, 'Oh' phoneme sound near this key frame according to the x-sheet. I think it will be more expressive to have him form an, 'Oh' shape on the way to the W shape of key drawing of 87

88 The mouth shape is not an in-between shape but a phoneme shape based on the sound that the x-sheet says should be heard around this drawing 8. Now produce the eyes by blocking in the most obvious shapes first, the thick, dark eyelids. Then put in the oval eye shapes and the pupils. In the key drawing 13 the eyes are closed so we need to start bringing the bottom eyelids up to close them. The eyes are drawn in place 9. Now in-between the rest of the features. 10. When you have completed the in-between place a number (7) down the bottom right of the drawing. 11. Trace the number on the x sheet in ink so that you know it has been completed. 88 of 88

89 The next in-between to produce is number 5. Number 5 is halfway between the 1st key drawing and the breakdown drawing we just produced. You can tell this by looking at the breakdown chart we produced. The mark for drawing 5 is halfway between 1 and So go to frame 221 and hit F7. A blank key frame is made at frame 221 for drawing Turn on Onion Skinning and make sure that you can see the 1st key drawing and drawing number 7. Now you have to produce the in-between number 5. It should simply be half way between these 2 drawings and should follow the same slight arc that we used before to produce drawing 7. Go ahead and produce drawing 5. Drawing 5 is halfway between drawings 1 and The in-betweens 4 and 6 are simply halfway drawings between 1 and 5, and 5 and 7. Go ahead and produce these drawings now. 89 of 89

90 Blank key frames for drawings 4 and 6 Drawing 6 is halfway between drawing 5 and Scrub over the drawings you have just produced to see how they are looking. 16. To produce in-betweens 2 and 3 do drawing 3 first because it is halfway between drawing 1 and 4. Then produce drawing 2, which is halfway between drawing 1 and 3. Go ahead and do them now. If you find that lines are getting so close that you cannot draw halfway between them simply trace the line from drawing 1 accurately. Producing the in-betweens for the second half of the action is actually the same as the first half only this time the drawings become closer at the end of the movement. So we can produce drawing 9 first, which is halfway between 7 and 13. Drawing 8 is halfway between 7 and will be halfway between 9 and will be halfway between 10 and 13 and 12 will be halfway between 11 and Go head and produce these in-betweens using the same methods we have previously been using. If you have two lines that are too close to draw one between them trace them accurately from the key frame of 90

91 All of the in-betweens up to drawing 13 have been completed Now we have the whole first action animated. Lets have a look again at the xsheet. It tells us that there are four in-betweens between this key drawing 13 and the final key drawing of 91

92 There are 4 in-betweens to be produced between 13 and 18 and drawing 14 starts on frame Now lets take a look at the Breakdown chart on drawing 13 to see how far apart we should space these in-between drawings. The drawings 15 and 16 have been placed at even thirds. This means that when we produce them we cannot simply find the halfway point between two lines. We must now draw our in-betweens at 1/3 of the distance between the key frames to get drawing 15. Once we have drawn drawing 15 we can then draw the halfway point between 15 and 18 to get 16. When we have 15 and 16 then the other in-betweens are simply halfway drawings between 14 and 15, and 16 and of 92

93 The breakdown chart for drawings 13 is based on even 1/3's 19. So the hard task is to draw the in-between drawing 15 at 1/3 of the distance between 13 and 18. The first step is to create a blank key frame to draw the drawing in. According to the xsheet drawing 15 occurs on frame 247 so select the frame and hit F7. Turn on Onion Skinning and make sure you can see drawings 13 and Just as we drew paths of action for the first set of in-betweens so too we should draw them for frames 13 to 18. Do this in another layer that can later be discarded. On these paths we can plot the 1/3 points, which will give us the correct spatial distance between the drawings. Remember that the paths of action need to be slightly arced. 93 of 93

94 Arcs are drawn to show the paths of action from one key drawing to the next Plotted points show the distance at thirds 21. Once you have the basic box body points plotted you can start to draw in the body shape for drawing 15. Then with the body shape in place you can start to add the other features. Make sure that you start to open the eyelids. When you have finished all of the features scrub the Timeline to check that the in-between looks like it has good volumes. 94 of 94

95 Drawing 15 is one of the distance from 15 to When you are happy drawing 15 go ahead and produce drawing 16. Because we have done the hard work of producing drawing 15 at 1/3 of the distance, drawing 16 should be half the distance between 15 and 18. Drawing 16 is drawn halfway between 15 and Now you can produce frames 14 and 17. They will be halfway between 13 and 15, and 16 and Make sure you save your FLA file. Scrub through the frames to ensure that the action looks OK. Fix any mistakes that you find. It will be easier to fix them now before they are colo ured. Activity: Colouring Each Frame 95 of 95

96 Now that the animation has been completed it is time to colour each frame using the colours prescribed by Trina, the Art Director, on the Colour Model. 1. Import the colour model sheet for Lemon Pops. Choose File>Import, select the colour model for Lemon Pops. Place it on a layer of its own and off the stage area so that you can see it but it does not cover the animation. Colour Model imported to new layer 2. You will need to change the outline colours to Black in order to match the Colour Model. You can use the Modify All tool to select them all and change the colour for all of them in one go as we did in one of the earlier exercises. Or you can use the Paint Bucket Tool with the option set to Don't Close Gaps. 3. Click on the outline with the Paint Bucket tool and all of the outline connected will be painted black. Go to each drawing and paint the outlines Black. 96 of 96

97 Outlines painted black to match colour model 4. You can pick the colours required using the Eyedropper Tool. Place the Eyedropper over the Colour Model and click to pick up a particular RGB colour. Or you can choose the RGB value of a particular colour on the colour model using the Colour Mixer window. Simply type in the RGB values specified on the colour model. Using the Eyedropper Tool to pick up colours from the Colour Model 4. To fill an area using the Paint Bucket Tool place the Paint bucket over the area to be filled and click. If your colour fills more than one area then change the option of the Paint Bucket to Close Small Gaps. This should 97 of 97

98 enable you to paint areas that have small gaps in the outline. If problems still persist, try zooming in and fixing the outline with the Brush Tool. 5. Using Fill Large Gaps is not the best option in these circumstances. If you have a problem such as areas not filling no matter which setting you use for the Paint Bucket Tool, check that you have the correct layer selected and try locking all other layers. A small gap allows one colour to bleed into another area Selecting Close Small Gaps option to fill areas with small gaps in the outlines 6. A good method for quick painting is to have the Paint Bucket tool selected and then hit the Control Key when you want to pick up a colour. 98 of 98

99 The cursor will change to become the Eyedropper tool so that you can pick up a new colour. When you have the colour the cursor changes back to the Paint bucket tool automatically. 7. You may find it easier to fill one colour at a time, frame by frame. Simply use the Step forward (.) and Step Backward (,) keyboard shortcuts to jump from frame to frame. 8. Remove the breakdown charts by selecting them and deleting. Delete the colour model from the stage by discarding the layer. 9. Save your file. Activity: Produce a Background The final requirement is to produce a background for the scene. You can do this by tracing the outlines of the background layout onto a separate layer using the brush tool and then filling it with colours. Make sure you place the background layer under the animation layer. If you want to know more about producing backgrounds you should go and see Joy, the Background Artist. Background layout on stage area 99 of 99

100 Background traced and coloured with flat colours Activity: Creating a Flash Shockwave File Because we are only producing part of this web commercial we need only provide the FLA file. However so that we can view the file we should create a test swf file. You can do this by selecting Control>Test Movie. This will save an swf file to the same location that you have your FLA saved. The swf will be automatically displayed in the flash player. To exit the flash player choose File>Close. The final animation coloured Congratulations! You've just completed a 2D digital animation for a web commercial. An alternate method for producing this scene is to produce all of the drawings on paper, trace in ink, scan and convert to vectors. Then import the vectors break and colour them. The principles of key framing and animation will be the same, as will their positions on the Timeline. 100 of 100

101 Activity: Animating Scene 2.2 Now that you're more familiar with the basics of Pose-to-Pose 2D computer animation, we'll explore creating animation on a number of different layers as well as incorporating lip-sync into the animation. We'll be animating Scene 2.2 where Jenkins has the dialogue "Sugar sir?" (See the storyboard panel for this scene below). Take a look at the X-sheet for this scene. You'll notice that this animation is just over a second long at 29 frames. Jenkins image from storyboard Now, follow the steps below. 1. Start a new file and import the drawing, jenkins.jpg into your stage. 2. Resize the image to fill the entire frame. Make sure your frame rate is set to 25 FPS and your stage window is approximately 640 by 480 pixels. 3. Name the first layer bitmap and set the duration of the timeline to match the frame numbers on the X-sheet, starting at Frame 332 and ending at Frame Create a new layer called audio. Import the audio file tvc_aud.wav and set to Stream in the layer, as you did for Scene 1.4. For this scene we will try limited animation. This is where the body parts of the character are separated onto different layers and only those parts that need to be animated will move. 101 of 101

102 5. When it comes to producing the keyframes for Jenkins, study the X-sheet for Scene 2.2 first, and determine which body parts need to be animated separately. Look at the timeline below and notice the number of different layers. Unlike traditional animation, there is virtually no limit to the number of layers we can assign to various animated elements in digital animation. We can also harness the computer to do some of the in-between work as well. Jenkins' clipboard is only one drawing, which will be animated to move to another position by a process called tweening. I will explain this shortly. Timeline showing the various separate layers of the animation A visual representation of the separate layers Our goal should be to break the parts that need to be animated into various different layers. In this way we distribute various body parts onto different 102 of 102

103 layers so that we can control and animate different shapes independently. Pay attention to details such as Jenkins's back shirt and collar. You will need to draw these details even though they don't exist in the original sketch so that when his head moves, there is no big gap behind it. 6. To distribute Jenkins into separate layers, first choose a red colour from the palette and select the brush tool. Line thickness is up to you, but a fine consistent line is preferable. 7. Trace Jenkins's head onto one layer but leave his eyes, eyebrows and mouth to be drawn on separate individual layers. 8. Draw his torso on a separate layer as well as both arms. Notice that the clipboard and hand are drawn as one object. We can animate the clipboard creating the illusion that an arm is connected to the clipboard, when in fact no such detail exists. When complete you should have the following details assigned to different layers from the top layer down: Clipboard and hand Mouth Eyebrows Eyes Head shape Right Arm with pencil Body shape Background Wall Ordering your layers is important as the top layers in Flash obscure the lower layers. Images that are to appear further away from the viewer need to be placed into the lower layers. 9. You can organise layers by selecting the layers (click on the layer name) and dragging them to the desired level. Keyframes and in-betweening Jenkins needs to speak as he turns his head to face the camera. Look at X- sheet for this scene and notice that his head turn continues for half the animation time in the Action bar, with his face stopping to look directly at 103 of 103

104 camera at Frame 342. This is our clue as to where we need to create our first keyframe. 10. You have already drawn this head shape so make sure that this head is positioned at Frame We have a problem now - there are no frames before Frame 342 so we need to draw Jenkins head in a profile position at Frame 332 and then we need to in-between all the successive frames. I've drawn Jenkins head in all the different turn positions in the drawing below. Jenkins's head turn is a series of individual drawings The two extreme drawings are keyframes with three in-between drawings shown in the middle. Notice there are no eyes drawn on the final drawing. The eyes will be animated on another layer. 12. Refer to the above series of heads if you have problems drawing the head turn. If you're unsure how to do this, draw his head as a simplified squashed oval with another oval for the nose. Try and imagine the head shape as a turning volume. Some drawing skill will be needed to get the proportions correct. 104 of 104

105 Jenkins's head turn in-betweened and onion skinned. Other details can be turned off (symbolised by the red crosses) 13. Go to Frame 332 and turn onion skinning on so that you will be able to see any in-between frames visible between Frame 332 and Frame Now draw the head in profile in this frame. Don't draw the mouth just yet as this will be drawn in another layer. We will hold this pose for about 4 frames. Then we will complete the other three in-between drawings. Because we are animating with two frames per image, (on twos) we need only produce three in-betweens. 15. Press F7 in Frame 336, 338 and 340 to tell Flash to make you a series of blank frames. You need to draw Jenkins's head in all the different head positions required to complete his head turn. 16. Go to Frame 332 and hit the Enter key on your keyboard. The animation will play and give you a sense of the motion. Any errors will be apparent if your drawings are incorrectly drawn. 105 of 105

106 17. To help you in focussing only on the face, turn off the other layers in the timeline so you can concentrate. Notice that there are no eyeballs drawn for Jenkins in Frame 342. This is because his eyes will switch to another layer and because his head is static, the eyes can be made to move and blink as he delivers his lines. Now I will explain how to motion tween Jenkin's eyebrows. Look at the X- sheet and notice the instructions to raise Jenkins's eyebrows, starting at Frame 342. We will do this with one drawing of the eyebrows motion tweened over a successive series of frames. In other words, we will make Flash do all the work of in-betweening Jenkins's eyebrows. 18. Go to your eyebrows layer and make sure the eyebrows are positioned at Frame 342. Motion tweening the eyebrows are shown here by the blue area in the timeline We are going to instruct flash to raise the eyebrows up as Jenkins completes his lines. In order to do this we need to turn the eyebrows into a symbol. Turning the eyebrows into symbols 19. Make the eyebrows into a symbol by selecting them so that they are highlighted and then press F8. The Convert to Symbol window dialogue box opens and you need to give your symbol a name. 20. Give this symbol the name "Eyebrows". 21. Then select Motion from the Tween menu on the Properties Window. The layer should turn blue. Now we need to tell Flash how high to lift the eyebrows. 22. Go to Frame 347 and press F6. You have created a keyframe at Frame 347, represented by the black dot in the Eyebrows layer. 106 of 106

107 23. Move the eyebrows up to the top of the head in Frame 347 and press return on the keyboard. Watch your animation play back. Experiment with the eyebrows. Maybe they could arch or rotate as they move upwards. 24. You can do this by going to Frame 347 and right clicking with your mouse pointer on the actual eyebrows in the stage window. You'll notice that when you right click with your mouse, a menu appears with many options listed. You can now rotate, scale and skew the eyebrows. 25. Experiment with Jenkins's eyebrows. You'll notice how changing the eyebrows position and angle can influence his facial expression. Explore the possibilities. If you make a mistake you can always undo a few steps. Save your work as a new version quite regularly so you can revert to an earlier version should you make too many errors. You can complete animating Jenkins by manipulating his right arm holding the pencil. 26. Turn his arm into a symbol by pressing F8. When you create a symbol in Flash it immediately creates a pivot point in the centre of the drawing. This is fine for most symbols but not if you have an arm shape that needs to bend at the elbow, or a head symbol that needs to rotate from the neck, not the centre of the head. You will need to correct the pivot point of the arm in order for the arm rotation to come from the elbow and not from the middle of the forearm. You need to correctly set the pivot point in an arm symbol to correctly have it move when motion tweening 107 of 107

108 27. Reset the pivot point by selecting your symbol and right clicking with your mouse and selecting Edit from the menu. Or alternatively you can select the symbol and press Control + E on your keyboard. Then whilst you are in the edit mode, reposition the drawing to its new location over the crosshair pivot point. This will reset the new pivot point. 28. Motion tween Jenkin's arm rotating to suit the action, using the motion tween as you did for his eyebrows. The eyes are the central focus area where people place their attention when looking at people or cartoon animation. Jenkins's eyes are just two black dots. You can motion tween the eyes in a similar way to the way you animated the eyebrows. All people need to blink and Jenkins is no exception. 29. Draw the blink shape as tiny "U" shape lines as in the picture below. Make sure you draw the eyes in a separate eyes layer and not on the original Jenkin's head layer. By keeping your drawing in as many layers as possible, corrections can easily be made without altering underlying layers. When Jenkins completes his speech, make him blink for 3 or 4 frames. Blink shapes keep your character "alive" and free him from the suspicion that the animation has gone dead and lifeless. OK, you should be skilled and confident enough to continue without step by step instructions from me. Go ahead and complete the animation. I'll stick around and give you advice from time to time. Jenkins's eyes in the blink position There is a lot of discussion relating to phonemes and lip-sync in animation: How many mouth shapes to use? How complex should the mouths be? The correct answer is, the number of mouth shapes should suit the style of animation you choose to create. You have to create a believable character that appears to be actually speaking. In other words, simple rough line characters may need as little as 8 mouth shapes, whereas a realistic 3D animation may need 16 or more. 108 of 108

109 Software manufacturers like Toonboom Studio 2 have even created software that reads the audio track of your characters automatically and creates a lip chart based on eight animation phonemes. This feature can automate your work to a certain extent but not completely. Look at the chart below illustrating the eight mouth shapes. Could these mouth positions be used in a character that is whispering quietly or a character that is yelling at the top of his voice? The answer is no. The basic 8 mouth phonemes in their simplest form (Click on the image to view full size version) The best method in learning to animate lip sync on cue is to use a mirror and study your own mouth expressions as you attempt to form the words. Some tips to consider when animating Jenkins's mouth are as follows: Don't animate a wide open mouth shape (D) to a closed position (X) in one frame. Place a frame like (B) between the two extremes. When a character is holding a mouth shape static such as "Ahhhhhh" for a few seconds don't just use one mouth shape (D) to cover the entire length. It won't look right. Flutter the mouth for (D) to (C) a few times to create variation. Place the audio about two frames in front of the mouth shape. Sometimes the audio should come before the mouth fully forms the word. Psychologically the viewer anticipates the coming dialogue. Upper teeth do not move. They are locked to your skull. Don't animate the upper teeth. Jaws rotate, not slide up and down. Don't be afraid to use extreme mouth positions. Characters that speak unconvincingly, fail to impress the viewer. 109 of 109

110 When a character speaks, he nods his head and changes his facial angle and position. Work a variety of facial poses into your character's verbal delivery. This helps to draw the viewer's eye away from looking at the mouth. Animate the nose and cheeks to work in tandem with the mouth shape. Good observation of a character speaking and then reproducing what you've observed can pay dividends. By scrubbing the timeline bar back and forth, you should be able to hear Jenkins' speak the phrase, "Sugar Sir?" Below is a visual representation of the different mouth shapes used to create this phrase. For more information, go and speak to Lisa, the Head of Timing, who covers this in more detail. For more information on lip sync, phonetics and phonemes, click here to see Lisa, Head of Timing, in the Studio Tour window. Lip-Sync. Breaking down the phrase "Sugar Sir?" Final Jenkins Animation You can view a demonstration of this scene to see how yours should look. Go ahead and produce the lip sync for the animation. Test the movie to see if the lip sync is correct. Make sure you save your working FLA file as you work. Good luck and happy animating! 110 of 110