Introduction to Animation: Summer 2008 week 5 evening

Hi class,
I was much more pleased with how you did in class last night than in a few previous classes. Regarding homework, however, more than half of you had not completed most of what the homework asked for. Therefore, you have your work cut out for you this week as the first draft of entire midterm animation with the snowman is due on Thursday night.
For the most part, I have been very pleased with this class. You all do well in class, it's just the rest of the week that most of you have trouble with. This is the last full posting dealing with the Snowman Animation. Next week will be a bit of a repeat of this week's posting with the addition of the snow movieclip. I will not demonstrate the snow movieclip this week, but will give you a handout so that you can attempt it on your own. I will demonstrate it next week.
In any case, the next project is much more involved, so please try to keep up and do the homework from now on as it will be much more difficult to catch up at the end for the next project.

Good luck. Carter-

*** Please see the link in the homework section below. It outlines how to create animated snow.***

TOPICS:
1. LINK Adding Details to the Snowman
2. LINK Sending in the Snowclouds to Cover the Sun
3. LINK Providing Some Suggestions for the Bird
HOMEWORK:
This week, finish the first draft of your mid-term projects. They will be due next week.
- LINK Handout: Falling Snow.
- By the next class, you should have up to the end of the 3rd and final paragraph of the Snowman Story completed in your animation. Read the story carefully so you do not leave anything out. Each part you leave out means points will be deducted. Please see below for some examples of how to finish up.

SNOWMAN ANIMATION: Below, you will see a few suggestions of how to complete the final paragraph of the snowman animation. As you may have discovered, for most tasks, there are as many ways to complete them as there are people making attempts. Each of you will probably have a slightly different way of doing things. You should work with what you know how to do best, but always keep in mind what would be the most efficient way to do something. Is it with a frame-by-frame animation, or is it with a motion tween animation? Which one of those is best suited for your particular task. As you know, for this snowman animation we are using a combination of these two things throughout.
What I am going to show you first, is the fastest and easiest way to add the Details to the Snowman's face and body. These are the absolute minimum that the Snowman Story require and they have a minimum amount of style, but adding those things take time, and that is something you all have very little of. So, let us begin with what the story says itself:

Now that the snowman’s form is complete, the details must be added. The
invisible person adds each piece from his invisible pocket; they simply
appear on the snowman. The details/pieces must include: two round black
eyes, one carrot nose, six round black circles for the smile, three
round black buttons on the body, two twig arms—you may include other
details if you choose to. Adding each piece takes one quarter of a
second.

Notice two things: first, how many different things that have to appear on the snowman and what they are—two round black eyes, one carrot nose, six round black circles for the smile, three round black buttons on the body, two twig arms; and second, how much time is supposed to elapse for each item to appear—one quarter of a second. Since a second of animation for us is equal to 12 frames, then a quarter of that is 3 frames. That seems a bit short to me, so you can lengthen it to 4 frames if you wish. I will here.

Details: I will create a series of quick little motion tweens, one for each object, and have them sail onto the snowman from offstage. See the three images below to see how I did this.
Notice in the image of the timeline (remember you can click on these images to make them larger) in the eye1 layer that there are only 4 frames from beginning to ending of the motion tween.

1)
Notice in the above image that I added a new layer, and then I added a new keyframe. In this case the keyframe is in frame 140. Yours may be a different frame. You should also notice that I put the piece of coal offstage in this new keyframe. You can place it anywhere you like offstage.
2)
In this image, you should notice that I added another keyframe as mentioned 4 frames later in frame 144. In this frame on the stage, I moved the coal where it should end up, on the snowman's face as one of his eyes.
3)
Here, I right-click between the keyframes and add a motion tween. This will cause the coal to move in a straight line from wherever it is offstage directly to the face of the snowman.
4)
Here, I have clicked back into the first keyframe in the timeline, frame 140 for me, and I have enlarged the piece of coal using the free-transform tool (Q).
5)
Lastly, in the same frame, I have changed the alpha in the properties bar to 20%.

For each of the details that have to be added—the eyes, the mouth, the nose, the buttons, and the arms—you would follow the same basic steps. I'll show you the steps for the next eye.

1)
2)
3)
4)
In the images below, notice in the timeline where the frames are in the two layers for the eyes, eye1 and eye2. In the first image, you see the way the timeline should look if you want both eyes to fly into the face at the same time. In the second image, you see the way the timeline should look if one comes after the other.
5)
6)

If you apply these same steps and this same logic to all the details that you add, then you will end up with something like the following example.

And here is how the timeline looks for that example. click on the image to make it larger and you will see all the names of the layers. Notice how it steps up. Your timeline, in this part of the animation where the details are being applied, should look something like thihs.

But you could add more details if you wished. If you reviewed the rolling snowballs at the beginning of the animation back at the point when the second and third snowballs were lifted up and placed on the one below it, you would see that we squashed down and stretched out the snowballs to give an effect of weight and gravity.
We could do the same for the details. If the details fly onto the stage, into the setting and onto the snowman as fast as they do, they will hit the snowman with some force. You could add a humorous effect by having the snowman react to the force of being hit by these objects that make up the details of his face and body.
If you observe the animation below, keep in mind that when the snowman's head bounces back when it is hit by the carrot, or when its body bounces back when hit by the buttons, that I used the same technique as when I squashed the snowballs down in the beginning of the animation.

Clouds: Putting the clouds in, making them roll in to cover over the sun before it starts to snow is much easier to accomplish. It's basically just a simple motion tween once you've got the cloud symbol, but first you have to draw the clouds.
If you look at the last couple of blog entries, I cover one technique of how to draw convincing clouds, so I won't give a drawing lesson here in this entry. I will just show you a cloud and expect all of you can figure out how to draw one yourselves by now.
1. Symbols: Notice in the next image that I have three (3) different clouds turned into symbols. You should have at least this many so that when you bring your clouds onto the stage, they don't all look exactly the same.
2. Arrange: Next, I moved them around so that they form a kind of horizontal line of clouds. You might notice that I also grouped them closer together on the lefthand side. The reason for this is that I am going to have them slowly move in from the left side of the stage; and, as they move closer to the sun there will be more and more clouds until they cover over the entire sun. That's when it will begin to snow.
  - Try using the free-transform tool (Q) to change the symbols a little even more if you put a number on the stage. Again, this is so that they don't all look like repetitions of each other.
  - Also, if you wish to rearrange the stacking order, recall that to do this you must access the Modify menu:
    Modify >> Arrange
3. Nesting: Once you arrange them as you like, then you must put them all inside a single symbol. The reason for this is that you can only put one symbol per layer when making a motion tween. So, select all the cloud instances at once and select F8 to convert to symbol.
4. Animation: According to the Snowman Story, the clouds come in at the very end after the bird flies (more about the bird later) across the sky; however, I would like the clouds to be there the entire time, throughout the story, moving slowly as clouds normally do. Instead, then, I would like the clouds to just reach the sun at the very end and cover over it after the bird flies by.
  Since this is going to be the way it is, then the clouds must be there at the start in frame 1. Of course, I must have an entirely separate layer for my clouds named clouds, and I want it at the very top of the stacking order of the layers. Let's see how this looks in the timeline:
  
  Next, position the clouds like so in the frame 1 Make sure that the bulk of the clouds are on the left hand side so that at the end of the animation they're completely covering the sun:
  
  You'll need a keyframe (F6) in the last frame so that you can reposition the clouds symbol as you see below covering the sun:
  
  And then you must add a motion tween in the clouds layer.
  
  The following animation is approximately what you will see when you finish with the clouds (not including the bird flying yet or the snow).
Snow: Look at the following animation. Near the end, the snowing begins. If you use the handout from the link at the top of this posting, you should be able to get a start on this. For additional assistance, follow the steps below it.
1. Bird Symbol: I did a search online for a famous German photographer from the 19th century named Eadvard Muybridge. He was among the first to experiment with photography, and in particular with the study of motion. He created thousands of photographs of people and animals performing various forms of movement, walking, running, climbing, dancing, carrying things, flying, etc. His photography is a good place to go to learn about the cycles of motion that people and animals go through when performing natural activities. Below, you will see an image from one of his studies. Although it is not a high-quality image, it is a decent example of how he examined a bird in flight with his photography:
  
  Notice that while a bird is in rapid flight across the sky, its wings are in a basic up-down-up-down motion cycle. I used this image by importing it into Flash and, like the Bugs Bunny exercise we did the first day of class, traced each of the six images and simply colored them black—see the image below:
  1. Bird Movieclip symbol: Once you draw all six states of the flying bird, select them all at the same time and convert them to a movieclip symbol named flying_bird_mc.
  2. Edit mode: Now, double click on the new movieclip symbol to enter into edit mode. What we are going to do is make a movieclip animation of the bird flying one motion cycle of its wings flapping. For this, we want the bird to seem as if it is staying in the same spot while its wings move.
  3. Keyframe: To accomplish this task, we will need a frame-by-frame animation, so, click in frame 2 and add a keyframe (F6).
  4. Onion skin I: We will also need to see more than one frame at the same time, so look at the timeline at the series of buttons to the right of the garbage can. The second one looks like two little squares overlapping each other. This is the onion skin button and allows you to see as many frames at the same time as you need to. Click on it.
  5. Onion skin II: Now, look at the numberline above the timeline. Two little circles appear on either side of the frame. These are handles that let you adjust the number of frames that you are looking at. Make sure that they surround both frames like the image below by pulling on those little circular handles:
  6. Frame 1: When we added the second keyframe, it made a copy of the first one and put it into frame two. That means that all six birds that you traced are in both frames and they are exactly the same; however, all we want in the first frame is the first bird, so click in frame 1 and delete all but the first bird. You should be able to see the ghosts of the birds even after you delete them. This is because of the onion skin.
  7. Frame 2—A: Similarly, in frame two we want only the second bird. So, the first thing we need to do is click in frame 2 and delete the first bird, but don't delete any of the others yet.
  8. Frame 2—B: Next, before we do any other deleting here, we need to copy some of the birds so that we have them available for the other keyframes we are going to add. Make sure you are in frame two, select all the birds except the 2nd one—to do this, you need to hold onto the shift button while you select them—and then cut (ctrl-X).
  9. Frame 3—A: Click in frame 3, add a blank keyframe (F7) and paste-in-place (ctrl-shift-V).
  10. Frame 3—B: Now, select all the last 3 birds and cut (ctrl-X).
  11. Frame 4—A: Click in frame 4, add a blank keyframe (F7) and paste-in-place (ctrl-shift-V).
  12. Frame 4—B: Select the last 2 birds and cut (ctrl-X).
  13. Frame 5—A: Click in frame 5, add a blank keyframe (F7) and paste-in-place (ctrl-shift-V).
  14. Frame 5—B: Select the last bird and cut (ctrl-X).
  15. Frame 6—A: Click in frame 6, add a blank keyframe (F7) and paste-in-place (ctrl-shift-V).
  16. Onion skin: Look at the top on the numberline again. This time, drag those little circles to stretch the onion skin out so that it shows all 6 frames. Notice that the birds get lighter and ligher the further away they are from the current frame (marked by the red playhead). In my image below, I am currently in frame 6 as you can see by the playhead; so in all of the previous frames the birds get lighter and lighter.
  17. Line up—frame 2: In order to get the bird to appear as if it is flying in place we are going to have to stack the birds on top of each other. So, click back in frame 2 and move the 2nd bird so that it is on top of the 1st ghost bird.
  18. Line up—frame 3: Click in frame 3 and move the 3rd bird so that it is on top of the 1st and 2nd ghost birds.
  19. Line up—frame 4: Click in frame 4 and move the 4rd bird so that it is on top of the first 3 ghost birds.
  20. Line up—frame 5: Click in frame 5 and move the 5th bird so that it is on top of the first 4 ghost birds.
  21. Line up—frame 6: Click in frame 6 and move the 6th bird so that it is on top of the first 5 ghost birds.
  22. In-between Frames: If you hit enter, you will see that the bird flaps its wings very fast, perhaps too fast. To slow it down, we simply need to insert additional in-between frames (F5) in between each of the keyframes and at the end:
  23. Exit: Exit the movieclip by clicking on Scene 1 in the upper left. You can use the movieclip now in a motion tween so that the bird appears to fly across the stage.