Spring 2007
week 12
evening—04/09
morning—04/11
hi everyone,
i hope you all are working hard. i am eager to see what you all come up with for your animations. sorry this posting is taking so long. i'll have it up and completed by tomorrow.
carter-
i hope you all are working hard. i am eager to see what you all come up with for your animations. sorry this posting is taking so long. i'll have it up and completed by tomorrow.
carter-
- TOPICS:
- Review:
- LINK Movie-Clips revisited—Making the cat move and play the fiddle;
- LINK Animation without Symbols—Breaking apart the symbols;
- LINK Frame-by-Frame animation I—making the cat move its eyes;
- LINK Frame-by-Frame animation II—making the cat smile;
- Introduce:
- LINK Back to the Movie-Clip—The Cat Resumes Playing the Fiddle;
- LINK Following the Note I—Animation along a guide path;
- LINK Following the Note II—Cut to Medium Shot of Note;
- LINK Following the Note III—Cut to Close Shot of Note;
- LINK Movie-Clips revisited—Making the cat move and play the fiddle;
- Review:
- HOMEWORK:This is the blog entry for week 12 class. Only two more weeks to go, so no official homework. Just continue working on your animations, due on the last day of class.
- 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 1-3
- REVIEW:
- 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.
- Breaking Apart Symbols: breaking the cat_mc symbol;
- Movie-clips: making the cat move and play the fiddle;
- INTRODUCE:
- Return to the Movie-clip: Changing the cat's expression back, and going back to the movie-clip;
1. At this point in the animation, we have made the cat stop playing the fiddle by breaking apart the movie-clip, we have made the cat then look out at the audience, and then we have made it smile.
Next, we would like to allow the cat to return to playing the fiddle. We could do this rather easily, by placing another copy of the movie-clip, cat_mc back on the stage in the cat layer (after placing a blank keyframe (F7) of course), but that would be problematic. Sure, it would solve the problem, but it would be a very quick jump back in the cat's expression. It would avert its eyes to the side again, the smile would fade, and it would begin playing the fiddle all at once, at the same time. It would be too sudden and jerky.
Therefore, what we'll do instead is first make the cat look back off to the side, then we'll cause the smile to fade, and then after that, finally, he'll resume playing the fiddle. First step, however, is to look at the state of things in the image below:
2. If we look at the timeline, we'll soon see that in frame 340, we have broken the cat_mc symbol apart, and moved its eyes so they're facing outward. In frames 350 through 355 the cat's mouth is converting into a smile. This expression and all the other layers are then extended out to frame 380.
What we want next is to make the cat's eyes move off to the side again. We'll have to copy & paste from another frame. However, we do not have another frame from with to copy them. The most recent keyframe in which they eyes are looking off to the side is frame 320, but here the cat is part of the cat_mc symbol. There is no keyframe yet in which the cat is not a symbol, and with its eyes looking off to the side. So what we'll have to do is copy & paste the symbol, and then break it apart (ctrl-B) again.
To do this, click in frame 320 and copy (ctrl-C).
3. Then, click in frame 381 of the cat layer, add a blank keyframe (F7), and paste-in-place (ctrl-shift-V) 
4. Next, select the cat on the stage by clicking on it one time, and break it apart (ctrl-B). You will probably have to do this a few times until it has no more blue boxes remaining. 
5. After you do that, make sure you are in frame 381 and that everything is de-selected. Once done, delete the mouth from this frame, and color it back in like the images above demonstrate. 
6. Next, we have to make the mouth go back to the way it was originally, as it is in the cat_mc symbol. Click in frame 381 of the cat_mouth layer, and add a keyframe (F6). 
7. Now, we'll copy an paste the mouth from frame 350 so that it goes back to its original expression.
- So, click in frame 350 of the cat_mouth layer
- and copy (ctrl-C).
- Then, click in frame 385,
- add a blank keyframe (F7),
- paste-in-place (ctrl-shift-V),
- and extend (F5) the cat layer to 385 also.
8. Open up the properties bar; then, where it says tween select shape. It should turn a greenish color with an arrow pointing to the right. 9. Lastly, we want to finally go back to the movie-clip, so click in frame 386 of the cat layer and add another blank keyframe (F7). 10. Once you do this, click in frame 320 of the cat layer and copy (ctrl-C). 11. Then click back in frame 386 and paste-in-place (ctrl-shift-V). 12. To complete this section, extend the duration (F5) of the following layers out to frame 410: - cat
- fence
- shadow
- house
- ground
- moon
- stars
- Following the Note I: note flutters up fromt eh fiddle—introduction to animation along a guided path;
1. At this point, we will finally get to an aspect of this animation long delayed, and that is the musical notes. From the very beginning of the storyboard and the script, there is mention of musical notes fluttering about in the sky from the cat's fiddle. Now, while we won't yet get to implementing notes throughout the movie from the beginning, we will start right here and now in the progression of the animation.
At this point in the storyboard, we would notice that there is a note that flutters from the fiddle, and that the camera begins to follow towards the left along the fence. Since the note has at this point become more than just background scenery but an integral part of the animation, has become what actually leads us through the animation—another character of sorts if you will—then we will begin to address it.
The note's movement, however, as noted, is not in a straight line, but rather curving and fluttering. To capture this feeling, we will create an irregular curving path along which we want the note to follow. To do this, we will employ a nice feature of Flash which is the ability to have an object in a motion tween to be guided by a path.
The first thing to be done, therefore, is to add a new layer above the cat layer, and name it note.
2. Then add a blank keyframe (F7) in frame 390 and draw a musical note. 3. Once the note is completed, convert it to a graphic symbol (F8), and name itnote. 
4. Lock this layer, add a new layer, and name it path. 5. Click in frame 390 of the path layer and add a blank keyframe (F7) 
6. In the path layer, choose the pencil tool, at the bottom of the toolbar select the smooth option so that the line you draw is smooth and not jagged, select a bright stroke color, and then draw a curving path in frame 390 that circles around the cat's head and exits offstage to the left. 
7. Click in frame 430 of the path layer and extend the duration (F5). Then, click in frame 430 of the note layer and add a keyframe (F6). 
8. Click in frame 390 of the note layer, and then zoom into the note and select it by clicking on it one time. 
9. Notice the little white circle in the middle of the note. This is the center point of the symbol. click on this center point, hold down on it, and move it to the end point of the curving line path that you drew. It should attach to it like a magnet. If this does not happen, then try it again. 
10. Click in frame 430 of the note layer and zoom out. On the stage, move the note so that it is near the other end point, and zoom in once again. Like before, click on the center point, hold down and attach it to the other end point. 
11. Now, right click between the keyframes in the note layer and select create motion tween. 
12. Finally, we must instruct Flash to regard the path layer as a guide, and the note layer as what is being guided by the path we drew.
To do this, double-click on the little icon next to the name of the path layer. This brings up the layer properties for the path layer, so select where it says guide, then click okay.
Next, double-click on the little icon next to the name of the note layer, click where it says guid-ED, and then click okay. Once you do these two last things, the note should follow along the path instead of moving in a straight line.
***NOTE***
If you are not successful at making the object follow along a path, make sure it is attached like a magnet at both endpoints in both keyframes as instructed above.13. Extend the cat, fence, shadow, house, ground, moon, and stars layers out to frame 430. 14. And lastly, click in frame 390 of the note layer, then select the note graphic on the stage by clicking on it one time, open up the properties bar, and change the alpha to 20%.
- Following the Note II: cut to a medium shot of the note—further animation along a guided path;
1. As the subheading notes, the next series of steps will take us through a cut to a new shot. In this case, we will cut to a shot in which we will be following the note back the way we came to the left as it bounces and flutters along the fence.
So let us analyze what all this includes, and we'll start with the movement. The camera will be moving a long with the note in the same direction from which it came from the left. Therefore, we have another panning motion; however, it is a bit more complicated than just that: the note is also moving, and bouncing in toward the left. As a result, there are two movements at the same time, the camera movement, and the movement of the note. As you remember from earlier weeks, when doing a panning motion, we cannot actually move the camera, as there is no camera. Because of this, we must move everything else in the shot instead to simulate a pan.
Next then, we need to analyze exactly which objects this new shot will be composed of. Since we are panning along the fence, we need the fence. And since we have the fence in a medium shot, we also need its shadow, and the ground. Furthermore, both the moon and the stars will be there as well. That's about it. Since we have moved away from the house, that need not be included in the pan, and since we haven't yet reached any of the other animals, those needn't be either. So we have it all: the moon, stars, fence, shadow, and the ground. All the other layers should be locked.2. Add keyframes (F6) to the house, fence, and shadow layers in frame 431. 
3. Now, select the fence and its shadow and shrink them down with the free-transform (Q) tool until the entire fence fits on the stage, and part of the shadow as in the image above. this will constitute the medium shot. 
4. Since we are only panning a short distance (not quite up to the point where the cow would be standing), this panning motion won't take up many frames, only about 30. So, click in frame 460 of the fence, shadow, and house layers, and add keyframes (F6). 5. Move the fence and shadow on the stage to about the position where the cow would be standing.
Then, since the ground is further away it should appear to be moving slower and move less distance, so here move the it only about half the distance that you moved the fence and shadow.
6. Add motion tweens to those three layers, and extend the duration (F5) the moon and stars layers out to frame 460. 
7. Next, we will work on the note, so add a blank keyframe (F7) to the path layer and a keyframe (F6) to the note layer in frame 431. 
8. Move the note to the right side of the stage (increase its size if necessary), and draw a path in frame 431 of the path layer as the image above suggests. 
9. Attach the center point of the note to the endpoint of the line that you just drew. 
10. Click in frame 460 of the path layer and extend the duration (F5). Then click in frame 460 of the note layer and add a keyframe (F6). 
11. Click in frame 460 of the note layer, move the note to the other side of the stage, and attach the centerpoint of the note to the endpoint of the line. 
12. Add a motion tween to the note layer. 13. Normally, we would adjust the layer properties for the note and path layers, but since we already did that, the note should already be following along the path.
- Following the Note III: cut to a close shot of the note—still more animation along a guided path;
1. The next section is almost identical to the previous. In this section, we will also cut to a new shot, but this time instead of a medium shot, we will cut to a close shot of the note bouncing. Therefore, once again, we need to set up the shot. Since it is a close shot, we need fewer layers still, only the fence layer, the ground layer, the moon and stars layers, and of course the note and path layers. So lock all the others.
click in frame 461 of the fence layer and add a keyframe (F6). Use the free-transform tool (Q) to increase the size and position of the fence to approximately what you see above.
2. Click in frame 461 of the ground and note layers, add keyframes (F6), and adjust their positions and size if necessary. 
3. Then, click in frame 461 of the path layer, add a blank keyframe (F7), and redraw a new path as the image above suggests. 
4. Click in frame 490 of the path layer and extend the duration (F5). 5. Then click in frame 490 of the note layer and add a keyfame (F6). 
5. Attach the centerpoint of the note to the endpoints of the line in both keyframes. 6. Add a motion tween to the note layer. 
7. Now, we'll add the panning motion along the fence: click in frame 490 of the fence and ground layers, and add keyframes (F6). 
8. In frame 490, move the fence some to the side, and then move the ground less than half that distance. 9. Add motion tweens to both those layers, and extend the duration (F5) of the moon & stars layers.
- So, click in frame 350 of the cat_mouth layer
- Return to the Movie-clip: Changing the cat's expression back, and going back to the movie-clip;
posted by carter at 6:09 PM
0 comments
