Introduction to Animation: Summer 09 week 10:—7/14/09: Tue, 12:25

Hi, class, Okay, it's a small class and most of you are getting what we are doing in class. Unfortunately, a couple of you are falling far, far behind as far as the final project is concerned. I am BEGGING you for your own sake, please get caught up this week even if it means losing a bit of sleep. Starting in our next class things definitely get a little more difficult, and they speed up. The others who are relatively caught up, please do not rest on your laurels. There is tons left to be done. Try to work ahead of what we are doing in class. Much of what is in the storyboard, I am sure you can figure out on your own, so please do not hesitate to do so. IF YOU WANT EXTRA CREDIT IN THIS CLASS, THEN YOU MUST WORK AHEAD ON THE STORYBOARD. I GIVE LOTS AND LOTS OF EXTRA CREDIT IF YOU GO BEYOND WHAT I REQUIRE. Have a nice weekend. Carter-

TOPICS:
1. Complex Symbols:
  - LINK Graphic Symbols—creating the initial graphic drawings of your characters, and creating all of their parts as individual symbols;
  - LINK Nested Symbols—placing symbols within symbols;
  - LINK Animated Symbols I—animating symbols within symbols: moving the cow's head;
  - LINK Animated Symbols II—animating symbols within symbols: giving the cow blinking eyes;
  - LINK Animated Symbols II—animating symbols within symbols: making the cat play the fiddle;
HOMEWORK:This week, work on your animation projects. We will be working on these animations from now until the end of the term. The assigned homework is always going to be the minimum amount you should accomplish during the week, so I highly recommend you do MUCH MORE each week.
- Continue work on creating complex symbols for your characters as demonstrated in class, and in this week's posting.
- For your cow and dog symbols, attempt to add the necessary animation. If you look at the storyboard, you will see that their heads move back and forth.
- Also, make all of your characters have blinking eyes according to the blog posting this week. Remember, give it a try. The work that you do is important even if you're not successful and it turns out badly. You can always repair what you've done badly the first time.
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

CHARACTER SYMBOLS:

Graphic Symbols—making the entire drawing one single symbol:
1. Following last Monday's class, after you have drawn your cow character, select the entire drawing (if there is nothing else on the stage, click in frame 1 of the layer to this).
2. Click on F8 to Convert to Symbol.
3. Give it a unique name (name it cow), select graphic for behavior, and then click okay.

Complex Symbols—creating nested symbols: symbols within symbols


1.	Sometimes it is necessary to create complex symbols. In the following situation, we will make the head, the body, the legs, and the arms into separate symbols. First, we must break apart the graphic symbol that we have already created. To do this, select the cow symbol by clicking on it one time.


2.	Next, break the symbol apart by selecting ctrl-B. At this point, the drawing of the cow on the stage is no longer a symbol instance; however, if you look into the library, you will see that you still have the symbol there.


3.	Now, select only the head of the cow. To do this you must use the arrow tool, and zoom up very close. Make certain you get all of the pieces of the cow’s head in the selection. It is very important that you do not leave any piece of the head out of your selection.


4.	Next, once you select the head, choose the arrow tool (V) and move the head away from the body.

5.	5.If you find that there are pieces of the head left out, little fragments of lines or color, then undo until the head goes back into place, and try selecting again.


6.	Once you select the head and move it away from the rest of the cow’s body, then convert it into a symbol (F8).

7.	Give it the name cow_Head, select graphic for behavior, and then click okay.



8.	Now, look at the cow’s body. You should notice that there are little gaps in the body where the head used to be. Fill in these gaps and round them out.


9.	Once done, let us try and select one of the arms of the cow; however, you will probably soon see that in such a case, when you click on the black area, it selects the black on the arm, as well as all the black on the body. So, we'll have to separate the arm from the body by drawing a single line. We can do this with a colored line so that we can see it stand out from the rest of the drawing. We will also know that we have to later delete the line. We can do so with both arms right now.


10.	Now, double-click on one of the arms and move it away from the body. Then, do the same thing to the other arm.


11.	Remember to delete those lines that you drew to separate the arms from the body.


12.	Then, select one arm at a time and convert them to graphic symbols. Name them cow_arm1 and cow_arm2.


13.	We need to do the same thing for the legs, although with this particular cow, they will be a bit easier than the arms. Therefore, simply select each leg, one at a time, move them away from the body, and convert them into symbols named cow_leg1 and cow_leg2. Don't forget to round out the tops of the legs, and to remove the strokes there.



14.	Before we convert the body into a symbol, you may have noticed that there are gaps missing from the body, chunks cut out where the arms used to be. We must fill these two areas in before we convert the body into a symbol. To do this, we must use the line tool again to close off the spaces, and then the paint bucket to fill them in.


15.	Finally, select the body, and convert it to symbol (F8). Give it the name cow_body, select graphic for type, and then click okay.


16.	Now that we have at least five graphic symbols, you may try to put them all back into place, as in a puzzle. You will find that the head is below the body, partially hidden by the body. To correct this, select the head by clicking on it one time.


17.	Next, go to Modify >> Arrange >> Bring to Front. This will put it above the body. Repeat this for the arms so that they are also above the body.

Movie-Clip Symbols—combining all the individual graphic symbols into one single movie-clip symbol:
1. Once the cow is reassembled and looks like it did originally, we will put it together into a single symbol. As it is now, it is composed of six parts: the head and the body, the two arms, and the two legs; but we want to envelope all of these parts together in a single symbol. To start, we must select all the symbol instances, each of the body parts together.
2. They must all be selected in order for this to work, so make certain you see blue boxes around them all. If so, then click on F8, convert to symbol.
3. Give this new symbol the name of cow_mc, select Movie Clip for type, and then click okay.

Animated Symbols—creating symbols that move: Moving Head tr>


18.	The reason we are doing this is because we are going to make the head move back-and-forth as the script calls for. The graphic symbol is usually a static symbol, meaning there is no movement within it. The movie-clip symbol, on the other hand, is a dynamic symbol. It often is a symbol that contains animation. In order to make our new movie-clip into an animated symbol, we must therefore put animation inside of it. To do this we must go into the symbol (into symbol-edit mode). As we have learned, to go into symbol edit mode we must double click on the symbol or symbol instace. So, using the arrow tool (V), double-click on the cow_mc symbol. Once you do this, look in the upper-left-hand corner of the window and you will see scene 1, cow_mc. This tells us we are currently working inside the cow_mc movie-clip, in symbol-edit mode for the cow_mc symbol.


19.	Since we are going to animate the head to make it move back and forth, we must put the head into its own layer. We can actually put all of the various body parts, the various graphic symbols into their own layers. To do this we must first select all of the symbols. Then, right-click on the selection and choose distribute to layers.

20.	Next, look at all your layers. You will see that this action distribute to layers has given the layers the same names as the symbols within them; however, you might also see a few layers without names, that instead have the names layer 8 or layer 3 or layer 13. More than likely, these layers have little fragments that should be discarded and deleted. Before you do such an action, however, you should always make certain there is nothing in the layer that you need. When you are done, you should only have the layers with the names of the symbols.

21.	Now you have six layers, one with the head another with the body, others with the arms, and still others with the legs. To make certain everything is in the right place, hide one layer at a time. If you hide the body layer the body of the dog should disappear from the stage. If you hide the head layer, the head should disappear from the stage. Do this for each layer to make certain you have all the necessary parts.

22.	Lock all of the layers except the head layer.

23.	Choose the zoom tool (Z) and zoom into the head.

24.	Then, choose the free-transform tool (Q) and select the head.


25.	You should notice the little white circle in the center. This is the center-point of the head symbol. Click and drag it straight down to the top of the nose. This is the point around which the head will rotate when we make the head move back-and-forth.


26.	Now rotate the head a little.

27.	Next, click in frame sixteen (16) of the head layer and add a keyframe (F6)—don’t be alarmed if the body disappears.

28.	Then, click back in frame eight (8) of the head layer and add another keyframe (F6).

29.	Make sure that you’re still in frame eight (8) by checking to see if the red playhead in the timeline is over frame eight. Once you are in frame eight then, choose the free-transform tool (Q) again.


30.	If the center-point is not still above the top of the nose move it there again, and then rotate the head to the other direction.

31.	Finally, add motion-tweens between frames 1 and 8, and between frames 8 and 16.

32.	Hit enter to see the head move back and forth once.


33.	You should notice that the body disappears but the head remains. That is because there is only one frame in the body layer. When the playhead moves past frame one, then the body disappears. Therefore, we just need to extend the duration of the body out to frame sixteen (16). To do that, you just click in frame 16 of the body layer and hit F5 to extend the sprite (aka extend the duration).

34.	Next, click back on scene one in the upper-lefthand corner to exit symbol-edit mode.

35.	And lastly, select ctrl-enter to view the animated movie-clip looping.

Animated Symbols II—creating symbols that move: Blinking Eyes


36.	The next thing we'll do is create another movie-clip, but this one will be inside of the cow. We need to have the cow's eyes blinking, which means its eyes need to be animated. Remember, animation is just the change of something across a span of time. It may change colors, or positions, or it may change the way it looks, its size for example; or, in our case, the eyes will change the way they look, from being opened to being closed. Any of these things will constitute animation. Therefore, we will use a movie-clip symbol for the eyes. We've already drawn the eyes inside the cow_head symbol, so we must go in there to begin. Using the selection tool (V), double-click on the cow_mc symbol, and then double-click again on the cow_head symbol. These two actions will take you inside of the two symbols. If you look in the upper-lefthand corner, you should see.


36.	Once inside the cow_head symbol, zoom into the eyes, so they are large and fill up most of the screen area. We will need to get into there pretty close.


36.	Then, select the eyes. Remember, to select more than one thing, you must hold down on the shift key to add to your selection. Before doing so, however, lines must be drawn to separate the eyes from teh rest of the face. Please note the green lines that were drawn to do just that.

37.	Once you select both the eyes, convert them to a symbol (F8), and name it eyes_mc, choose movie clip for behavior.

38.	Open up the library, and make certain that the eyes_mc symbol is there in the list.


39.	Then, select the eyes ON THE STAGE and delete. Notice that there are holes where the eyes were.


40.	These holes need to be filled up with the paint bucket (K) tool.


41.	Then, from the library, drag the eyes_mc symbol back onto the stage.

42.	Double-click on the eyes_mc symbol, to enter into symbol-edit mode.

43.	Delete the little green lines that were drawn earlier from the eyes.


44.	Next, click in frame 28 and add a keyframe (F6).


45.	Since one eye is surrounded by black, and the other eye is surrounded by white, we are going to treat them each a little differently. First, make certain you are in frame 38. Then, for the one in the black, choose the paint bucket (K) and fill in the whole eye with black. As a result, it should completely disappear. For the other eye, the one surrounded by white, delete the stroke at the top, and fill the rest of the eye with white. As a result of this, just a kind of U-shaped stroke remains. This gives the illusion of a closed eye.


46.	Finally, click in frame 30 and extend its duration (F5).

47.	Click back on scene 1 when you have done this to exit the symbol.

Animated Symbols III:
1. Movie-clip:Just as the above actions with the cow's head moving aback and forth, and its eyes blinking, we are going to 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 cat_mc symbol. At this point, BEFORE YOU BEGIN WITH THE CAT, YOU SHOULD ALREADY HAVE MADE ALL OF YOUR CHARACTERS INTO NESTED MOVIECLIP SYMBOLS. If you have not, see above with the cow and how to do so (week 10). If you are still here, then I will assume you have already done this and so we can just add some animation to the cat symbol; we will then be good to go. To repeat, however, if you have followed the steps above, you have already done this when you made the cow's heads move back and forth (week 10). The cat's movements are a bit more complex, however, so it deserves further review.
  1. First, double-click on the cat_mc symbol in the library to enter symbol-edit mode.
  2. 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 you MUST be certain that you convert each part of the cat into a graphic symbol before you can proceed.
  3. 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.
  4. 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 in the images above and below.
  5. Then, 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.
  6. 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.
  7. 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.
  8. Now, 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. This is where Flash helps us: when we added a keyframe, Flash copies the previous keyframe in frame 1 and places a duplicate in frame 20. Therefore, now frame 1 and frame 20 are exactly 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.
  9. After that, extend the duration of the other layers to frame 20 by clicking F5.
  10. Next, click in frame 10 of the cat-head layer, and add another keyframe, F6.
  11. Choose the free-transform tool (Q) again, and rotate the cat's head in the other direction a little.
  12. Finally, right-click between the keyframes, and select create motion tween.
  13. 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. To begin, then, we must 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.
  14. 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;
    - Rotate it a some;
    - Shorten the length out a little;
    - And, adjust it at the top where the arm meets the shoulder to remove the gap. We'll start in the up position, so I'm first going to move the rotation point:
  15. Now, We'll rotate and shorten it a little. Also, if there is a gap at the point where the arm meets the shoulder, I will have to close that with the arrow keys on the keyboard:
  16. 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.
  17. 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.
  18. Now, that we have the up position set in those three keyframes, we must set the down position. In order for the arm to appear as if it is moving up and down, the up and down positions must alternate keyframes, which means, we need keyframes in frames 5 and 15 to set the down position. Therefore, click in frame 5 of both those same layers and add yet another keyframe (F6). Here you will need to transform the arm so that it looks like it has pulled the bow downward.
  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. 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. Exit symbol edit mode.