1. week 1
  2. week 2
  3. week 3
  4. week 4
  5. week 5
  6. week 6
  7. week 7
  8. week 8
  9. week 9
  10. week 10
  11. week 11
  12. week 12
  13. week 13

Aniboom: Latest hits

Friday, February 27, 2009

Spring 09 week 6:
2/26/09:  Thur, 8:00am & 6:00pm
—2/24/09:  Tues, 12:25pm

Hi everyone, You all should be happy with what you did this term so far. The work that I saw yesterday was pretty good as a whole, and I see that many of you grasp the basic concepts that we will put into play for the rest of the term. As a matter of fact, regarding Flash as an animation tool, you've learned pretty much all the technical skills it has to offer. Many of you need practice, obviously, and if that is you, please put in some extra time to this class the next few weeks to try and catch up.    Here is what you have learned:

  1. the various types of animation:
    1. motion tweens;
    2. frame-by-frame;
    3. motion tweens with motion guides;
    4. and some of you have learned about shape tweens;
  2. you've learned about 2 of the 3 types of symbols:
      one which is largely graphic and static (does not contain animation)—graphic symbols;
    1. and the other that is animated and/or dynamic (may contain animation)—movieclip symbols
  3. you've learned about alpha and other effects that can be applied to symbols and colors;
  4. you've learned about how to use the tools in the toolbar (although I think many of you need work here, especially with the pen tool and the gradient transform tool);
  5. and you have learned about different types of frames in the timeline:
    1. keyframes;
    2. blank keyframes;
    3. and in-between frames.
There is more, but I think that that is a lot already. Congrats.    Next, we have to learn to use all those things to form something more together than what they are separately. The first little animation we've done is a little bit like a kit-of-parts. Our next animation will be a much more seamless whole: It will have a real story, with 'camera shots' and 'camera angles', and perhaps some 'lighting' if you're really good and adventurous (a couple students already considered this in our last animation, putting shadows down on the ground while the snowballs rolled, attempting to change things from light to dark). Of course that is all fake and simulated. We are not dealing with a camera at all, just a computer; but the Flash stage is our camera and what's in our heads, in our imaginations, is going to be the world that we 'film.' Keep in mind, from here on out EVERYTHING WE DO is part of the THE FINAL PROJECT. Many of you have not show me much work and you're going to be sad when you see that even if you do a nice final project your final grade isn't very good. So please, please, PLEASE start doing your homework each week. Carter-
  1. MIDTERM QUIZ:
    1. Keyboard Shortcuts:
      1. Selection Tool —V
      2. Sub-Selection Tool —A
      3. Free-Transform Tool —Q
      4. Gradient-Transform Tool —F
      5. Line Tool —N
      6. Pen Tool —P
      7. Rectangle Tool —R
      8. Oval Tool —O
      9. Pencil Tool —Y
      10. Brush Tool —B
      11. Paint-Bucket Tool —K
      12. Ink-Bottle Tool —S
      13. Eraser Tool —E
      14. Eye-Dropper Tool —I
      15. Zoom Tool —Z & M
      16. Hand Tool —H
      17. Open —ctrl-O
      18. New —ctrl-N
      19. Save —ctrl-S
      20. Print —ctrl-P
      21. Copy —ctrl-C
      22. Cut —ctrl-X
      23. Paste —ctrl-V
      24. Paste-in-Place —ctrl-shift-V
      25. Undo —ctrl-Z
      26. Library —ctrl-L & F11
      27. Keyframe —F6
      28. Blank Keyframe —F7
      29. Extend the Duration (in-between Frames) —F5
    2. Create a Symbol:
      1. Draw an Object
      2. Select the Object
      3. Convert to Symbol (F8)
      4. Type a name
      5. Select a type and click okay.
    3. Create a Motion Tween:
      1. Draw an Object.
      2. Select the object.
      3. Convert to symbol (F8)
      4. Type a name
      5. Select Graphic for type and click OK.
      6. Move your object on the stage to its starting position, wherever you desire that to be.
      7. In the timeline, click in a new frame 10, 20, 50 or some number of frames later.
      8. Add a keyframe (F6).
      9. On the stage, move your object to its ending position somewhere.
      10. In the timeline, somewhere in the gray area between the keyframes, right-click and select Create Motion Tween.
    4. Requirements for Motion Tweens:
      1. You must use one object per layer.
      2. You must use symbols as your objects.
      3. You must have two keyframes at least.

Friday, February 13, 2009

Spring 09 week 5:
2/12/09:  Thur, 8:00am & 6:00pm
—2/17/09:  Tues, 12:25pm

Hi class, I was very pleased with how most of you did in class this week. Most of you did quite well with the material and grasped almost everything I taught. A few of you, however, did not do so well, largely due to the fact that you have not been practicing at home. You cannot expect to pass this class if you forget about it during the week. So, to those of you who haven't done much work until now, PLEASE RECONSIDER YOUR WAY OF WORKING. It isn't working, so do something new. To the rest of you, however, by the end of the night, what was completely new last week, this week seemed like practically old hat.     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 until the next class as the entire midterm animation with the snowman is due next week.     For the most part, I have been very pleased with this class. You all do well IN CLASS, it's just during the rest of the week that most of you have trouble. This is the last full posting dealing with the Snowman Animation. 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 help you with it in our next class.   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, and have a nice long weekend. Carter- *** Please see the link in the homework section below. It outlines how to create animated snow.***

  1. 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
  2. HOMEWORK:This week, finish 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 as well as the first two paragraphs. 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.
    • LINK   The Snowman Story in .doc format
    • LINK   The Snowman Story in .pdf format
     
  3. 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.
    1. 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.  
    2. 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.
          You should also consider using the following options:
        • 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).
    3. 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. flying_bird.gif

Friday, February 6, 2009

Spring 09 week 4:
2/05/09:  Thur, 8:00am & 6:00pm
—2/10/09:  Tues, 12:25pm

Hi class, Although I was a bit disappointed in the number of students who brought work to class in our class, it seems you guys have a pretty good handle on what we're doing in here. I'm sure, however, that you need a lot of practice on how to make the animation that we did in the last class. I know it was VERY complicated and difficult for many of you, but don't worry, we will go over much of it again in class next week. So, although you all seem to know pretty much what to do, you just have to sit down and do it!! For those of you who are having trouble, take a look at the drawings of your classmates to get ideas or a better understanding. Making silly pictures move is FUN. And, as I often say, it could be much worse: you could be in a calculus or physics or economics class instead. What would you prefer to do, spend three or four hours working out differential equations or trying to understand the shapes of chemical bods; or would you rather draw pictures of snowmen and play with colors? I think the answer to that question is easy for most of you. However, you simply have to spend time doing it. Anything worthwhile in life takes a little effort. Please class, don't take these things lightly. We will be continuing our animations this week and the next two, and using what you produce each week to complete it by the 7th class. I really am very eager to see your work. Some of you are really diving in, and this is very exciting for me. I'll help you as much as I can to get your animations to be what you want. Some people stay after class to get my help. They know I'll stay almost as late as they want to answer their questions. The more excited my students are, the more excited I am. Excitement and Passion feed on themselves. The more passionate those around us are, the more likely we will be passionate. Allow yourselves to be excited and passionate about this. Who cares if it seems a little goofy. I promise you that it will show in your work, and it will do wonders for your confidence. Good luck, Carter-

  1. TOPICS:
    1. LINK   Review: Snowman Story—paragraph 1
    2. LINK   Introduce: Snowman Story—paragraph 2
      • LINK   Squashing the Snowballs
      • LINK   Movie-clip Symbols: A rising, shining sun
    3. LINK   Movie-Clips versus Graphics: Dynamic versus Static;
      • LINK   Creating a Movie-Clip Symbol;
      • LINK   Nesting Symbols: Graphic Symbols within Movie-Clip Symbols;
      • LINK   Animating a Movie-Clip Symbol: Shining Star;
      • LINK   Animating a Movie-Clip Symbol: Floating Note;
  2. HOMEWORK:This week, finish the first draft of your mid-term projects. They will be due in two weeks.
    • LINK   Handout: Falling Snow.
    • For this past week, I assigned up to the end of the 2nd paragraph. In class this week, I went over many of the issues that the 2nd paragraph covers. For our next class, therefore, you should have up to the 2nd paragraph complete and pretty well finalized (as well as the 1st paragaraph).
    • By the next class, you should also have up to the end of the 3rd and final paragraph of the Snowman Story completed in your animation. You do NOT have to have the 3rd paragraph perfect, just try your best to get through it. 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.
    • Link: for the mid-term project—You will see a couple links below for the snowman story. They are both for the same story, they just are in different formats, .doc, and .pdf. EVERYONE will need to read the first download, The Snowman Story, as it provides the guidelines for your midterm animation:
      • LINK   The Snowman Story in .doc format
      • LINK   The Snowman Story in .pdf format
  3. REVIEW—SNOWMAN ANIMATION I: Below, you will see a review the first step of the snowman animation as it is described in the first paragraph of the Snowman story and as we started 2 weeks ago. Notice two things: first, how many layers there are and what their names are; second, how many frames each part of the animation takes. Remember, the lavendar areas are the motion tweens.
    1. Create your first layer and name it mountains.
    2. In this layer, draw the two mountains in the background as described in the Snowman Story.
    3. Now lock this layer.
    4. Create a new layer and name it ground.
    5. In this layer draw the ground in the foreground where the snowman will be standing.
    6. Now lock this layer too.
    7. Create a new layer and name it snowman1.
    8. In this layer, draw the large circular snowball that will form the parts of the snowman. You may use any tools you wish to do this. I used the brush tool (B) to make mine because I didn't want it to be an absolutely perfect circle as the oval would probably have done. I then created a radial gradient and used the paint bucket (K) tool to fill it up. Afterwards, I selected the brush tool (B) again and made some marks to make the snowball seem irregular.
    9. Once you complete your snowball, select the entire thing and convert it to a symbol (F8).
    10. Give it the name snowball, select graphic for type, and then click okay.
    11. Place the snowball symbol off the stage to the right-hand side.
    12. Choose the free transform tool (Q) and make the snowball a little bit smaller. To do this, remember, you must hold onto the shift key and drag on one of the corner handles.
    13. Now, in the timeline in the snowman1 layer, click in frame 1 and then release.
    14. Once you release, click again and hold down. Before you let go, drag it to frame 10 and then release. This will move the keyframe to that frame, frame 10.
    15. Next, since the part of the animation in which the snowball rolls into the stage is supposed to take one and a half seconds (check the Snowman Story), this means that it should take 18 frames. Recall, the frame rate is 12 frames per second. This means for one second there are 12 frames of animation. Therefore, if you need 1 1/2 seconds of animation, you need 18 frames. I altered this a little and made it 20 frames in my animation.     What you should do next, then, is to click in frame 30 of your animation in the snowman1 layer and add a keyframe (F6).
    16. Now, move the snowball to a position on the stage somewhere in the middle.
    17. Make the snowball larger now using the free transform tool (Q).
    18. Once you have done this, in the timeline between the keyframes in the gray area, right-click and select create motion tween.
    19. Then, click somewhere in the timeline in the lavendar area of new motion tween.
    20. Open up the properties bar and locate where it says rotate.
    21. Since the snowball is moving to the left, we want it to rotate in the counter-clockwise direction, so select CCW, and the number of times it should rotate is one.
    22. Next, click in frame 35 of each layer one at a time and extend the duration (F5).
    23. Lock the snowman1 layer, add a new layer, and name it snowman2.
    24. Click in frame 35 of this layer and add a new keyframe (F6).
    25. From the library (F11 or crl-L), drag an instance of the snowball symbol onto the stage off to the right side like the first one.
    26. Make this snowball even smaller than you did the first one.
    27. Next, click in frame 55 of this layer, and add a keyframe (F6).
    28. Move the smaller snowball next to the first one and then make it a little larger.
    29. Now add your next motion tween between those two keyframes, frames 35 and 55.
    30. You should also make this rotate CCW and one time.
    31. In the next eight (8) keyframes we will use a frame-by-frame animation that lifts the second snowball onto the first and then makes the two snowballs squash down and back up. So, click in frame 56 and add a keyframe (F6).
    32. Now, lift up the second snowball and move it upwards slightly and a little to the left.
    33. Then click in frame 57 and add a keyframe (F6).
    34. Repeat this action 2 more times for frames 58 and 59.
    35. The next four frames follow the squash and stretch effect of the weight of the second snowball as it comes to rest onto the first snowball. squash it down a little: squash it down a little more: make them taller again, even taller than they started as a kind of bounce back: put them back to their original size:
  4. INTRODUCE—SNOWMAN ANIMATION II: Below, you will see an introduction of the next step of the snowman.
    1. New Layer: The first thing we need to do is create a new layer for the third snowball of the snowman. I call this layer snowman3.
    2. Third Snowball: Next, we need to open the library and bring a third instance of the snowball symbol onto the stage. Remember, since this snowball is going to be on top as the head, it needs to be smaller than the other two snowballs. Also recall, that the snowball needs to grow a little larger as it rolls toward the snowman in the center.
    3. Motion Tween: After we move the snowball toward the center near the other two snowballs and make it a little larger, we need to add a motion tween in the timeline.
    4. Rotation: The final step in this first part is to make sure that the snowball rotates as it moves onstage.
    5. Frame-by-Frame: The next step is to create a frame-by-frame animation that has the third snowball being lifted up on top of the other two. Each time you move the snowball a little, you must add a new keyframe (F6).
      1.2.
      3.4.
      5.6.
      7.8.
    6. Squash: The final step in this part of the animation is again to create the squashing motion of the snowballs as the third snowball is placed on top the other two. This comes in two parts: the squashing and then the slight bounce back. Both are created with a frame-by-frame animation.
      1.Here is how the snowman starts.2.Here the snowman is squashed down a little from the previous frame.
      3.The snowman is squashed down a little bit more in this frame.4.Here the snowman bounces back up even a little taller than it started.
      5.A nd finally here, the snowman goes back to its original size. 
    7. Rising Sun: If you look at the beginning of the second paragraph of the snowman story, you will see that the sun is supposed to rise as the second snowball rolls into the center of the stage. This is a simple enough thing to do in the animation; however, if you think about a sun and how it looks, it will not only rise up from the horizon behind the mountains, but it also has to shine like a sun shines. This means that the sun must be animated in two ways: It must rise up from behind the mountains; and, it must also shine.   These are two completely different kinds of animations. One only happens one time—the rising of the sun; and one happens repetitively over and over again as if in a kind of loop—the shining. When this kind of multiple animation happens, particularly when there is a repetitive animation, then that is a signal that you must use a movie-clip symbol.
      1. Layer: Lock all the layers, add a new layer and name it sun.
      2. Keyframe: From reading the snowman story, we know that the sun begins to rise as the second snowball begins to roll in from offstage. So, at the top of the timeline, click on the red playhead and slowly drag it until you see the 2nd snowball appear. Once you do, click in this frame in the sun layer and add a keyframe (F6).
      3. Draw: Remember, almost always the first thing you must do is to draw your object. In this case, we will be drawing our sun. So, click in the keyframe you have just added and let's keep it simple by drawing a basic cirle.
      4. Select: Using the selection tool (V), select the circle that you have drawn.
      5. Convert: Then convert it into a symbol (F8). Give it the name sun_mc, choose movieclip for type, and then click okay
      6. Edit: Now enter into edit mode for this symbol by double-clicking on it. If you look in the upper left corner, you will see the name of the symbol sun next to where it says Scene 1. This tells you that you are in edit mode for that symbol.
      7. Convert Again: Now select the sun on the stage again and convert it once again into a symbol (F8).
      8. Graphic: This time, you will give it the name sun, select graphic for type, and then click okay. By doing this, what you have done is nested two symbols. This means that you have a symbol inside of another symbol, and in this case the graphic symbol is inside the movieclip symbol. This is necessary if you want to do two types of animation at the same time.
      9. Copy: To start the animation here in the movieclip symbol, we need two identical copies of the sun. So, select the sun on the stage and copy (ctrl-C) it.
      10. Layers: Next, lock the first layer, add a second layer and name it sun. Now name the first layer, the one on the bottom, shine.
      11. Paste: Select frame 1 of the sun layer and paste-in-place (ctrl-shift-V) and then lock this layer.
      12. Keyframe: Unlock the shine layer, and then click in frame 10 and add a keyframe (F6).
      13. Enlarge: Click in frame 10 of the shine layer, select the free-transform (Q) tool, hold on to the shift key and grab one of the corner handles to slightly enlarge the sun.
      14. Alpha: Now, choose the selection tool (V), click once on the enlarged circle on the stage, and open the properties bar. Click where it says color, select alpha, and then choose 0%. This will make the circle completely invisible.
      15. Motion tween: In the timeline, right-click in between the keyframes and select create motion tween when the menu pops down. The circle will enlarge at the same time it becomes invisible.
      16. Extend: Lastly, click in frame 10 of the sun layer and extend its duration (F5). The top layer has the sun graphic symbol just sitting there doing nothing. The bottom layer has the sun expanding and disappearing. This give the appearance of the sun shining.
      17. Exit: Exit symbol-edit mode by clicking in the upper left where it says Scene 1.
      18. Layer: Temporarily, we want to make sure that the sun layer is the top layer in the stack, so drag it up there if it is not already at the top.
      19. Start Position: Now, on the stage, drag the sun so that it is below the mountains.
      20. Keyframe: Next, drag the red playhead again until you see that the 2nd snowball is sitting on top of the first one. Once you see this, stop dragging, click in this frame in the sun layer and add a keyframe (F6).
      21. End Position: On the stage, move the sun so that it has risen up into the sky between the mountains.
      22. Motion tween: Right-click in the timeline between the keyframes and select create motion tween.
      23. Layers: Move the sun layer so that it is below the ground and mountains layer.
      24. Save: Finally, save (ctrl-S) and test (ctrl-enter) your movie.
     
  5. SYMBOLS: There are three (3) different kind of symbol behaviors in Flash, but so far we have learned only about one kind, Graphic Symbols. We have used these symbol types primarily to create motion tween and to create re-usable graphics, graphics that may be used many times; however, there are many more uses for symbols, and last week's class was an introduction to another behavior type: Movie-Clip symbols.
    1. Movie-Clip and Graphic Symbols: The main distinction between these two types of symbols is that one is a dynamic symbol, and one is primarily a static symbol. In other words, one involves activity (animation) and interactivity, and the other involves in-activityor the lack of activity or interactivity. When a web graphic or object is dynamic, such as a movie-clip, it usually involves animation or user interactivity of some kind. Static graphics, on the other hand, are NOT usually active and NEVER interactive. They are static, still, non-moving, inactive.
      1. Graphic Symbols: Graphic symbols are the most basic symbol types. It is the only type that we have learned up to now, but it possesses all of the fundamental properties of symbols: they are reusable graphics, in which multiple instances of the symbol may be used without drawing more, and without adding filesize to your movie; they allow you to create motion tween animations, and they reside in the library (ctrl-L || F11). All types of symbols have these three fundamental properties, but a graphic symbol is probably the type that is used most often. As its name suggests, it is for graphics, any ordinary drawing or object that you would create in Flash. Some graphic symbols do contain animation within them; however, the vast majority will not.
      2. Movie-Clip Symbols: Next to graphic symbols, Movie-Clips are the most widely used type of symbol; and, in fact, for web-sites or interactive movies, they are perhaps even more widely used than graphic symbols. This type of symbol, being dynamic, often contains animation within it. Unlike simple graphic symbols, which usually contain a simple drawing of some type, movie-clips may contain within themselves entire animations. More often, however, they contain snippets of animation, brief animated sequences. Furthermore, one of the properties of movie-clips is that they may be allowed to play endlessly in a loop. As a result, those brief snippets of animation are played over and over and over again, such as an eye blinking, a raindrop falling, or a bird's wings flapping. If the sequence requires repetitive movement of some kind, then it is ideal for being placed in a movie-clip symbol. The blinking eyes here are an example: Notice that not only do the eyes blink repetitively, but they also move from side to side at about the same interval. What we have here are basically three (3) layers: an eyelid layer, an iris (colored part of eye) layer, and then the eyeball (white of eye) layer. The eyelid layer simply blinks, moving up and down; and the iris layer moves side to side. In these two layers are just two simple motion tweens. I've used the free transform tool (Q) also, to give the illusion of 3D animation, but it is really flat as a pancake 2D Flash animation. The bottom layer, the eyeball layer, does nothing, so it just has one keyframe and simply sits there at the bottom. All of this is inside a movie-clip symbol. We will cover something like this in another class, but feel try to try it on your own until then.
      creating star_mc 
    2. Creating a Movie-Clip Symbol: Next, we will create our own movie-clip symbol. Doing this is like creating the simple graphic symbols that we have made up to now. We will start first with a drawing:
      1. Using the line tool (N) or the polygon tool (R - press down on the tool until the polygon shows itself, then click on options in the toolbar to select STAR) to draw a star. It may be any type of star you like, 5 points or 6 points, fat or skinny.
      2. Once drawn, select the selection tool (V), look closely, and select only the stroke or outline of the star.
      3. Now hit delete.
      4. Make sure the selection tool (V) is still activated, and then select the star on the stage.
      5. Choose convert to symbol (F8).
      6. Give it the name star_mc, select movieclip for behavior, and then select okay.
      7. Once done, it should have a blue box around it just like a graphic symbol does when it is selected.
       
    3. Nesting Symbols: The star symbol is now a movie-clip symbol; however, it is not yet animated. We must create the animation inside of the symbol with symbol-edit mode.
      1. As you should know, to do this we must double-click on the symbol instance on the stage.stars_mc
      2. Once you do so, look in the upper left-hand corner of the stage. There, it should say Scene 1 - star_mc. This means you are in symbol-edit mode for the star symbol. If it is not there, you should try double-clicking again on the star on the stage. To proceed, you must be in symbol-edit mode.
      3. Now, select the selection tool (V) and select the star on the stage by double-clicking on it. Once you do so, you should be able to tell it is selected because it should have the little dots all over it.
      4. Eventually, we are going to put animation inside of this movie-clip symbol by creating a motion-tween. But as you can see, this star graphic has little dots all over it when it is selected, and as you know, it must have a blue box around it.
      5. Try not to get confused, but remember we are inside the movie-clip symbol. Try to imagine it as a completely separate movie inside the movie-clip, and if we are going to make this star into a motion tween, we need to convert it into a graphic symbol. But before we do, once again, look in the upper left-hand corner and see if it still says Scene 1 - star_mc to make sure you're still inside the symbol.
      6. If so, then make sure the star is selected, and then convert to symbol (F8).
      7. Give it the name star, select graphic and then click okay.
      8. Now, it should have a blue box around it when it is selected. This means you have a nested symbol. In other words, it is a symbol WITHIN a symbol. To see for yourself, double-click on the new symbol there on the stage. Then look in the upper left-hand corner again, and you should see Scene 1 - star_mc - star: the star graphic symbol is inside the star_mc movie-clip symbol which is in Scene 1 of the main movie.
      9. To exit symbol-edit mode, click on where it says Scene 1 in the upper left.
       
    4. Animating a Movie-Clip Symbol - Shining Star: Now that we have our symbols nested, a graphic symbol inside of a movie-clip symbol, we can go about creating our animated movie-clip.
      1. Select the selection tool (V) and double-click on the star on the stage to go into symbol-edit mode for the star_mc movie-clip.
      2. Once inside the movie-clip symbol, name the first layer star and add a second layer.
      3. Name the second layer shine and lock it
      4. Click in frame 1 of the star layer and copy (ctrl-C).
      5. Now lock the star layer and unlock the shine layer.
      6. Click in frame 1 of the shine layer and paste (ctrl-V).
      7. Now, click in frame 10 of the shine layer and add a keyfame (F6).
      8. Select the free transform tool (Q), hold onto the shift key, grab the corner of the star, and make it larger.
      9. After that, choose the selection tool (V) and select the star on the stage by clicking on it one time.
      10. Then open the properties bar, click where it says color, and set the alpha to zero.
      11. Now click in the timeline between the two keyframes, and add a motion tween.
      12. Also in the timeline, drag the shine layer so that it is below the star layer.
      13. Next, click in frame 10 of the star layerand extend the duration (F5).
      14. Finally, exit symbol-edit mode by clicking on Scene 1 in the upper left-hand corner.
      15. Save and test the movie, you will see your star shining over and over in an endless loop.