Fall 2007 week 11 afternoon—11/28

Hi,
We have two more weeks to go from today until the end of the term. You should do your best to complete the animation following my guidelines over the last 5 weeks. Since we are a week behind, we won't have the typical work-day next week in class as I must present new stuff that we haven't covered. However, you should try your best this week to do EVERYTHING in this entry and what I showed you in previous entries.

If you wish to go to entries from previous weeks, recall that there are links on the right-hand side of this page. Just scroll down until you see them.
carter-

1. TOPICS:
   
   1. Review:
      1. LINK   —Pushing-in to a shot;
         
      2. LINK   —Cutting from one shot to another shot;
         
      
      
   2. Introduce:
      1. LINK   —Movie-Clips revisited: Making the cat move and play the fiddle;
         
      2. LINK   —Breaking apart symbols;
         
      3. LINK   —Frame-by-Frame animation I: making the cat move its eyes;
         
      4. LINK   —Frame-by-Frame animation I: making the cat smile;
         
      
      
   
   
2. HOMEWORK:Following the past week's class demonstration and blog entry, you should continue work on your animation and complete at least up to frame 11 of the storyboard. This is the absolute minimum that you should have completed by class if you want to stay on track for a passing grade.
   
   
3. STORYBOARD: below you will find links to each of the pages of the storyboard containing 3-frames each.
   
   • LINK   Frames 1-3
     
   • LINK   Frames 4-6
     
   • LINK   Frames 7-9
     
   • LINK   Frames 10-12
     
   • LINK   Frames 13-15
     
   • LINK   Frames 16-18
     
   • LINK   Frames 19-21
     
   • LINK   Frames 22-24
     
   • LINK   Frames 25-27
     
   • LINK   Frames 28-30
     
   • LINK   Frames 31-33—not yet complete.
     
   
   
    
   
4. REVIEW:
   
   1. Pushing-in to a shot:

      1.	Now that we have reached the cat, according to our storyboard we must push-in, or, in other words , get closer to the cat. To push-in simply means to push the camera closer to the object of interest. In this case, it is the cat. We have already passed all of the characters and we have already seen the landscape, or setting, of our story. When we reach the cat, we will truly begin telling the story.     The sequence of movements we are completing now, the pan and push-in, is known as the establishing sequence. It is called this because it establishes, or sets up the beginning of the animation, and tells us all of the most important information about the setting and the main characters. In the nursery rhyme, Hey, Diddle, Diddle!, our script, and our storyboard, the beginning starts with the cat. Therefore, when we reach the cat, we will begin telling our story.     Now that we have reached the cat, we can begin telling our story, so we push-in, or, we get a little closer so as to get a better look, to pay closer attention to what we will see. This is what the "camera" does for us when it gets closer.
      2.	We will start where we left off at frame 225. But let us first analyze the scene: if we look at the stage, we see that all that is left there are the cat, the fence, the house, the ground, the moon, the stars, and the shadow from the fence. The cow, the dog, the tree, etc, all have already passed across the stage and left the area. They are no longer part of the current shot. That is limited to the cat and the house behind, for the most part. As a result, when we push-in to the cat, we do not need to deal with those things that are off-stage, only what is on-stage.     We will first lock and hide those layers we do not currently need: tree_near, dog, cow, shadow, and tree_far. Furthermore, since we will not be making the moon and stars larger, we will also lock those layers.
      3.	Next, we want to scroll over to determine where we want the next keyframe to be. We'll give ourselves about 50 more frames to complete the next camera action, the push-in. So, we need keyframes in frame 275.     Click in frame 275 in the top layer we are working with, the cat layer, and add a keyframe (F6). Repeat this for the fence, shadow, house, and ground layers.
      4.	Next, we need to select those new keyframes. To do this, click in frame 275 of the cat layer, hold down on the shift key, and then click in frame 275 of the ground layer. This should select the keyframes in all those layers, and highlights them. If it does not do this, then try again. you should also notice that it selects everything on the stage. This is what we want.
      5.	Now, turn on the outlines for all the layers except the cat layer. This will allow us to see everything, but also see through them. It will help us when we make everything larger.
      6.	Then select the free transform tool (Q), hold down on the shift key, and grab one of the corners and make the selection much larger.
      7.	If you are not sure about the size, whether it is big enough or whether it is too big, then move move everything at once not just the cat so that it is on top of the stage. Make certain that the cat is almost the same height as the stage. If it is still not big enough, then repeat the above action: hold on the shift key and grab the corner to make it even larger.
      8.	When it is the correct size, make sure the cat is on the stage and that you can see its entire body within the confines of the stage.
      9.	Now, add a motion tween to all of those layers between the keyframes.
      10.	Extend the duration (F5) of the stars and moon layers to frame 275.
      11.	So that the viewer can see the cat at this point, enlarged like this to what we call a medium shot for a moment, we must increase the number of frames. If we look at the timeline right now, we see that the motion tweens end at frame 275, and that's it. Everything is this large for only that one frame. In order for it to last longer we should extend the duration for a few frames, say 20 or 25 more frames, out to frame 300.     To do this, click in frame 300 of the cat layer and select F5. Repeat this for the fence, shadow, house, ground, moon, and stars layers.

      
      
       
      
   2. Cutting from one shot to another:

      1.	The most common transition from one shot to another is what we call a cut, and, in fact, it is not really a transition at all. The word cut comes from film terminology in which a piece of film was actually cut with a blade and then taped together to another piece of film. This did not produce a seamless smooth transition from one image to another, but rather a very abrupt change from one image, one shot, to another. This is the most common form of editing. Think of music videos in which the images are rapidly changing from one shot to another. Shots are often even less than a second long before the film is cut to show another image.     If we look at the storyboard, we see that in frame 9 we must cut to a close shot of the fiddle. This simply means we must change the view on the stage to show a much larger fiddle instead of the whole cat. The cat will be there, but it will be cut off by the edge of the stage to show only the fiddle in the middle.     To do this, we need only add keyframes. We do NOT require motion tweens.
      2.	Therefore, click in frame 300 of the cat layer and add a keyframe (F6). Repeat this for the fence, shadow, house, and ground layers.
      3.	Now select all these keyframes at once—emember to do this you must hold down on the shift key—and choose the free-transform tool (Q).
      4.	Hold down on the shift key again, grab the corner and make the selection larger. Remember, we want to do a close shot of the fiddle, so make everything large enough so that the fiddle is about the same size as the stage.
      5.	Next, if we look at the storyboard again, this time in frame 10, we see that we have to do another cut. We cut to a close shot of the cat's face. In this case, there's no reason to make things any larger, since we have already made things very big to get a close shot of the fiddle. All we have to do is move things up some so that the cat's face is centered on the stage. But first we have to add keyframes.     Therefore, click in frame 320 of the cat layer and add a keyframe (F6). Repeat this for the fence, shadow, house, and ground layers.
      6.	Now, Select all these keyframes at once, and move everything downwards so that the cat's face is within the frame of the stage.
      7.	Finally, all that we have left to do is to extend the duration so that we can see the cat's face here for a moment. So, click in frame 340 of the cat layer and extend the duration F5. Repeat this for the fence, shadow, house, ground, moon, and stars layers. Then test the movie ctrl-enter.

      
      
      
    
   
5. INTRODUCE:
   
   1. Movie-clips: making the cat move and play the fiddle;

      1.	The first part of today's class will hopefully be a bit familiar as it is the same as what we did with the cow's head. The cat will be playing the fiddle, so like the cow and the dog, we want the cat's head moving back and forth to the music. That is where we will start.     If we begin where we left off in the last blog entry, we are in the very last frame of our animation. If you have closely followed what we have been doing in this blog, then your last frame is probably around frame 340. So, once you scroll there, you need to lock all layers except the cat layer. Since this is the layer we will be working in, there is no need to have any of the other layers open. Locking them, therefore, will prevent us from making mistakes.
      2.	Now, click in the last frame of the cat layer and add a keyframe (F6). Since we will eventually be changing something about the cat—making it look out at the audience and smile at us—we need to add a keyframe. Remember, keyframes are required if ever you wish to make something move, or change something within the animation. However, we are not going to make the cat smile or look at us just yet. First we want to finally get the cat to start playing the fiddle for us. Since this action is going to be a repetitive movement, it is perfect for a movie-clip symbol. That way, we only have to make it move in one cycle, and the movie-clip will play in a continuous loop. Graphic symbols do not do this. Therefore, we have to edit the symbol.     If you recall, we already made all of our characters into nested movie-clip symbols (week 7), we can just add some animation to it, and we will be good to go.
      3.	Next, double-click on the cat symbol on the stage to enter symbol-edit mode.
      4.	If you have only one layer here, then we'll have to separate everything out into different layers. So, first, click in frame one. When you do this, everything becomes selected. If you see a bunch of blue boxes, then you're in good shape. This means that each of the cat's parts is a separate graphic symbol, all here within the main cat_mc symbol. If not, if everything has white dots, then make sure you turn each part of the cat into a graphic symbol before you can proceed.
      5.	Once everything is selected, the move the arrow (selection tool (V)) over the cat and right click. Then choose distribute to layers. This will put each of the graphic symbols in a separate layer. It will also name the layers according to the name of the symbol. If any of the layers are blank, or have an untitled name, then you should delete them.
      6.	Now, lock all the layers except the cat_head layer. Depending on how your cat looks, and how many different parts you have created, the stacking order of your layers may be different from what you see above.
      7.	Now, select the free-transform tool (Q) so that we can position the head to begin looking like it is moving back and forth to the music the cat is playing.
      8.	Click on the image above to make it larger. You should see that once you select the free-transform tool, you then have to move the rotation point, the small white circle that is now in the center, down to the point where the cat's head meets its neck. The reason for this is that the neck is where we rotate our heads, so if the cat is going to be moving its head back and forth, it only seems natural to have it occur at its neck, and not around its nose or eye!!     Don't put the rotation point right exactly at the edge where the head meets the neck, but slightly above it. This will make the rotation look better, and seem more lifelike.
      9.	Then, rotate the cat's head a little to one side. Don't rotate it too much as you don't want the cat to look as if its neck has broken.
      10.	Then, click in frame 20 of the cat_head layer and add a keyframe (F6). Since we are going to be making the cat's head move back and forth as if to the music, and since this is all happening within a movie-clip symbol, it will be a looping animation. We only need make the cat's head move from one side to the other, and then back again one time. And, since it is a movie-clip, it will automatically loop indefinitely when played.     Because of this, because it will loop around over and over, in which the end of it is really the beginning of another loop, the last frame must be the same as the first frame. When we added a keyframe, this copies the previous keyframe in frame 1 and places a duplicate in frame 20. Therefore, now frame 1 and frame 20 are the same, which is as we want it. If you click in frame one, and then in frame 20, you will see nothing on the stage changes. This means they are the same.
      11.	After that, extend the duration of the other layers to frame 20 by clicking F5.
      12.	Next, click in frame 10, and add another keyframe, F6.
      13.	Choose the free-transform tool (Q) again, and rotate the cat's head in the other direction a little.
      14.	Finally, right-click between the keyframes, and select create motion tween.
      15.	That completes the head movement, so if you test the animation, you will see that the cat's head moves back and forth.     The next part that we have to add to this movie-clip, is to make the cat play the fiddle. We will take similar steps to make the cat's arm move as if it is playing the fiddle with the bow. The first thing we need to do, then, is to lock the cat_head layer, and unlock both the bow layer as well as the arm layer, which in my case is named cat_arm2. However, we are only going to work with one of those layers at a time, so hide the bow layer.
      16.	We will do several things to the arm to make it appear as if it is moving the bow across the strings: We must move the rotation point; skew the arm downward; Rotate it a some; Stretch the length out a little; And, adjust it at the top where the arm meets the shoulder to remove the gap.
      17.	Next, show the bow layer and move the bow so that it looks as if the cat is holding it. You may need to rotate it in order for it to look right.
      18.	Click in frame 10 of both the cat_arm2 and the bow layers and add a keyframe (F6); then, click in frame 20 and add another. This will make the keyframes 1, 10, and 20 all the same.
      19.	Now, click in frame 5 of both those same layers and add yet another keyframe (F6), but here you will need to transform the arm so that it looks like it has pushed the bow upwards.
      19.	After that, click in frame 15 of both the bow and the cat_arm2 layers again, but this time add a blank keyframe (F7). You should notice that this time there is no black dot, but instead a white circle. This means the frame is empty, or blank.
      20.	Let's stop for a moment and assess what's happening in all of these keyframes: in frames 1, 10, and 20, the arm and bow are in the down position, and in frame 5, the arm and bow are in the up position. The way it works up to this point is that in frame 1, the arm starts down. It moves up in frame 5, and then moves back down in frame 10. What we're working towards then is an up/down/up/down/up positioning. This means that in frame 15 we want the arm to be up again. The easiest way to do this is simply to copy and paste the objects from frame 5 to frame 15.     Therefore, click in frame 5 of the cat_arm2 layer and copy (ctrl-C). Then, click in frame 15 of the same layer and paste-in-place (ctrl-shift-V).     Repeat the same copy and paste steps for the bow layer.
      21.	Once completed, then add motion tweens all the way across both the bow and the cat_arm2 layers. You now have a cat that moves its head and plays the fiddle.

      
       
      
   2. Breaking Apart Symbols: breaking the cat_mc symbol;

      1.	So that we can make the cat's eyes move to look out at the audience, and then make the cat smile, we have to change the cat so that it is no longer a symbol. You might ask: why do we need to do this? Well, think about it for a moment. If here, inside cat_mc symbol, we make the cat look out at the audience and smile, it will then be part of the symbol. But what does that mean? Well, it means that wherever you use the symbol, then the cat will be looking at us and smiling over and over repetitively. We do not want this to happen. We only want the cat to look at us and smile one time.     That means it CANNOT be part of a symbol. Therefore, we must break apart cat_mc. First, however, we have to exit cat_mc by clicking on Scene 1 in the upper-right corner.
      2.	Once you do that, make sure you are in frame 340 of the cat layer, select the cat on the stage by clicking on it one time, and then break apart (ctrl-B) the symbol.     You will see that when you break it apart, the one symbol is broken into all of its body part symbols, into several symbols. But this is still not what we need. In order for this to work, the cat cannot be a symbol, so we must break-apart (ctrl-B) again.     Now you will see that most of the cat is no longer a symbol. You know this because there are no more blue boxes, just the little dots when the cat is selected. The only exception to this are the eyes. They still have a blue box around them, which means they are still part of a symbol, so we have to break apart (ctrl-B) one last time. When you've done this, the symbol will no longer be a symbol.
      td>
      3.	Now that we have done that, we can start to work on the eyes, so zoom up on the eyes to begin.     Since we want the cat to look out at the audience we'll have to do the following: You'll have to move the colored parts of the eyes to the left and down a little. You will also have to move the colored part and the pupil so they are more in the center. And finally, you'll have to transform the whole colored part so that it is more circular.
      4.	There, now that you have moved the eyes, they should look as if they are looking out at the viewers. We want to give the cat a few moments to just look like that out at us, then we want to make him smile.     So, click in frame 350 of the cat layer, and add a keyframe (F6). Then, extend the duration (F5) of the other layers out to frame 350.
      td>
      5.	Next, we will work on making the cat smile. To do this we will be doing a new kind of tween animation, so we will have to put the mouth on its own new layer. Therefore, select the mouth, and cut (ctrl-X).
      6.	Then, add a new layer, and name it cat_mouth.
      7.	Click in frame 350 of the cat_mouth layer and add a keyframe (F6).
      8.	Click in frame 350 of the cat_mouth layer, and paste-in-place (ctrl-shift-V).
      9.	Now that the mouth is in a new layer of its own, lock all the other layers. Then, click in frame 355 of the cat_mouth layer, add a keyframe (F6) in it, and extend the duration of the other layers out to frame 355.
      10.	In this new keyframe, change the cat's mouth into a smile.
      11.	Now, click in between those two keyframes, frame 350 and frame 355, open up the properties bar, look where it says tween, and select shape. It should turn green and have an arrow pointing to the right. If you drag the playhead back and forth, you should be able to see how the mouth changes into a smile.
      12.	Finally, extend the duration (F5) of the layers out to frame 380, save, and test the movie.