Introduction to Animation: Spring 2008 week 3 evening

Hello everyone,
I was very happy with the way class turned out this week. You all did quite well with the material and picking up the notion of layers, symbols and motion tween animation.

Although I did cover a few other things, this weeks posting primarily concerns itself with symbols and motion tweens.

Below you will find the posting for this week's class. It details all of the same issues that we covered in class, namely the drawing and animation. I have included here a lesson that we covered in our last class on the fish. It covers much of what we did in other previous classes, but if you have any difficulties or questions, please do not hesitate to email me or find me at TCI.

Regarding the Mid-term, please begin working on your symbols by starting on the drawing of the various parts of the scene. Experiment with what you want things to look like. Starting in our next class we will be drawing more and more.

Please, Please don't put things off. If you don't keep up with the weekly work, you'll soon find yourself buried in it. Carter-

TOPICS: Symbols and the Library, Symbol Edit Mode, Symbol Effects (brightness/tint/alpha), Motion Tweens with Symbol Effects.
1. LINK Creating Symbols;
2. LINK Symbol Library;
3. LINK Editing Symbols
4. LINK Breaking-Apart Symbols
5. LINK Symbol Effects;
6. LINK Motion Tweens with Symbol Effects;
7. LINK more with Motion Tween Animations
8. LINK more on Color Gradients
9. LINK more on Symbol Effects (brightness, tint, alpha) and their use in Motion Tweens,
10. LINK more on Scaling Objects and their use in Motion Tweens
11. LINK Easing Motion Tweens IN/OUT
HOMEWORK:
- Read: Please read all the handouts about scripting and storyboarding listed below and that I gave to you in class. I will discuss them in more detail in the next class.
  For the Mid-Term Project you will be required to make the animation of the snowman as outlined in the handout from this week's class. The first step in this is to draw. You are going to have to draw ALL of the parts of the snowman and the environment in Flash over the next two (2) weeks. Please make certain that you use your own creativity when drawing, and do NOT rush through the drawings.
- Draw: Due NEXT THURSDAY, you must draw in Flash, the entire scene, including the main character, the snowman. Please, do NOT add any animation yet to the homework that you show me. You may experiment all you like with animation, but for the homework I only want drawings.
  Since this class is an animation course, we will be creating a couple animations, one due on the last day of class, and the other due at mid-term, week 7 of the term, which is only 3 weeks away. Creativity is always rewarded in this class, so free yourself and your mind, be experimental and adventurous.
- Links:
  - LINK storyboard explanation: what is a storyboard?
  - LINK storyboard example: Alfred Hitchcock's "The Birds"
  - LINK script example: "The Boy Who Cried 'Wolf!'"
  - LINK storyboard template
- Quiz:
INTRODUCE:
1. Creating a Graphic Symbol:
2. Symbols, Symbol Instances, and the Library:
3. Selecting a Graphic Symbol: When selecting a graphic symbol you must only click on it ONE time no matter how many pieces or objects it contains. When selected it will have a blue box around it.
4. Arranging Symbols: When you have multiple symbols drawn and created, you may arrange the stacking order of them, putting one above the other or one below another. To alter the stacking order of multiple Symbols you must first select the item you wish to change.
  1. Select the item with the selection tool (V) by clicking on it once, then;
  2. Do the following:
    Modify >> Arrange >> send [backward, to back, forward, or to front]
5. Editing Symbols:
  1. Draw an object, such as an oval or a rectangle;
  2. Double-click on the object with the selection tool (V) to select it;
  3. Choose F8 to convert the object into a graphic symbol;
  4. If you wish to edit this object in any way after it is a symbol, you must choose the selection tool (V), and then double-click on the graphic symbol—this brings you into Symbol-Edit Mode. Once you do so, you may edit, alter, add-to, subtract-from the object(s), or otherwise change it in anyway you wish.
  5. When you have completed your changes, you must Exit Symbol-Edit Mode—to do this, look in the upper left corner of the stage. You will see the words SCENE 1 and then the SYMBOL's NAME beside it. You must click on Scene 1 to exit the symbol and return to the main movie.
6. Breaking-Apart Symbols:
  1. Choose the selection tool (V);
  2. Select the symbol on the stage by clicking on it one time;
  3. Select CTRL-B on the keyboard to break apart the symbol. Once you do this, that particular graphic on the stage will no longer be a symbol Instance; however, the symbol itself still remains in the library.
7. Adding Effects to Symbols:
  1. Choose the selection tool (V);
  2. Select the symbol on the stage by clicking on it one time;
  3. Open the properties bar below the stage.
  4. In the properties bar, click in the center where it says color adn select either brightness, tint, or alpha.
  5. Experiment with changing the numbers and percentages to see what kind of effect you get.
8. Motion-Tween Animation with Symbol Effects: In the following set of steps, you will be creating a circle that will move around the perimeter of the stage using a series of motion tweens. In the second part, you will learn how to add Symbol Effects so that the circle changes its color, brightness, and transparency as it moves around the stage.
  
  LINK Motion Tweens using Symbol Effects (tint).
  1. Draw a circle using the Oval Tool (O) and convert it into a graphic symbol (see above Creating a Graphic Symbol).
  2. Once you draw your object and convert it into a symbol, choose the Selection Tool (V) and move the circle to its starting point. We will begin with it placed just OFF-stage to the upper-right corner.
  3. Next, click in frame 30 in the timeline above, that is just below the number 30, and add a keyframe (F6).
  4. Then, using the Selection Tool (V), move the circle on the stage to the UPPER-LEFT corner.
  5. Right-click in the timeline above in the gray area between the keyframes in frames 1 and 30 and select Create Motion Tween from the menu that appears. This will turn the gray area to lavendar, and there will be an arrow there pointing to the right. If this does not occur, or if a dashed line appears instead, you must undo and start over again.
  6. Then, click in frame 50 and add a keyframe (F6).
  7. Once again, move the circle, but this time to the LOWER-LEFT corner of the stage.
  8. Add a motion tween between the two keyframes in frames 30 and 50 above in the timeline.
  9. Click in frame 75 in the timeline and add a keyframe (F6) on the keyboard.
  10. Move the circle on the stage to the LOWER-RIGHT corner of the stage.
  11. Add a motion tween between the two keyframes in frames 50 and 75 above in the timeline.
  12. Click in frame 95 in the timeline and add a keyframe (F6) on the keyboard.
  13. Move the circle on the stage to the UPPER-RIGHT corner of the stage.
  14. Add a motion tween between the two keyframes in frames 75 and 95 and above in the timeline.
  15. Click in frame 100 in the timeline and add a (final) keyframe (F6) on the keyboard.
  16. Move the circle just OFFSTAGE of the upper-right corner to the point where we began with the circle.
  17. Add a final motion tween between the last two keyframes in frames 95 and 100 above in the timeline.
  18. Select CTRL-ENTER to test the movie.
  19. If your circle does not travel as you expect, around the perimeter of the stage, there are steps you can take to correct it. First, make sure you only have 6 keyframes in your timeline in frames 1, 30, 50, 75, 95, and 100. If you have any additional keyframes or blank keyframes, you should delete them by first selecting the frame you want to eliminate by clicking on it, then selecting SHIFT-F6.
    Finally, you should make sure that the circle is where it should be in each keyframe:
    - frame 1—OFFSTAGE to the upper right corner;
    - frame 30—in the UPPER LEFT CORNER of the stage;
    - frame 50—in the LOWER LEFT CORNER of the stage;
    - frame 75—in the LOWER RIGHT CORNER of the stage;
    - frame 95—in the UPPER RIGHT CORNER of the stage;
    - frame 100—just OFFSTAGE to the upper right corner;
    - Finally, make sure that motion tweens go all the way across from frame 1 to frame 100. They should be lavendar with arrows pointing to the right. Dashed lines indicate an error.
  20. If you wish to add Symbol Effects (Brightness/Tint/Alpha), you can only do so in the keyframes. Those are the frames with the dots in the timeline.
  21. If you wish to add an effect to frame 30, for example, then you must first select frame 30 by clicking in that frame.
  22. Then you must use the Selection Tool (V) and select the circle ON THE STAGE by clicking on it only ONE time.
  23. Then you must open the Properties Bar at the bottom and click where it says COLOR near the center of the Properties Bar. A list of properties will appear, Brightness, Tint, and Alpha. Choose one of these and then change the numbers to add an effect.
  24. You can repeat STEPS 21-23 to add effects to other keyframes in your animation.
9. SYMBOLS and the LIBRARY: During the first three weeks of class, you have been introduced to a very important feature of Flash Graphics and Animation, creating Symbols:
  1. Creating a simple Graphic Symbol:
    1. Choose your stroke and fill colors.
    2. Set the thickness and type of your stroke.
    3. Choose the oval tool (O), hold onto the shift key and draw a circle.
    4. Choose the selection tool (V), and double-click on the fill of the circle to select both the fill and the stroke.
    5. Select F8 on the keyboard to convert the circle into a symbol.
    6. Type a unique name for the symbol, select graphic as the behavior, and then click okay.
    7. Once completed, a blue box will appear around the new symbol. This indicates that it is no longer an un-grouped object. If you double-click on it, you will be taken into symbol-edit mode. In symbol-edit mode, you will be able to edit your symbol. Once you have completed the edits, you must exit symbol-edit mode before you continue. To do this, click on Scene 1 in the upper-lefthand corner of the window.
    8. If you select F11 or ctrl-L the Library will open up. To close, you simply select F11 orctrl-Lagain. Once open, you will see a smaller representation of your circle symbol there. If there are more symbols, you will see them all listed there. Here is where your symbols are stored. What is on the stage is known as a symbol instance. It is like a clone, or a copy of what is in the library. Symbol instances may be deleted from the stage without affecting the symbol in the library. However, take great care of your symbols in the library. Do not delete the symbols from the library if you are using them in your movie. If you delete the symbols in the library, they will also be deleted from the entire movie.
    9. You may use as many symbol instances as you need. All you need to do is drag an instance from the library onto the stage.
10. More with Motion Tweens
  1. If you haven't created a symbol yet, then look at the above exercise to do so: LINK
  2. Once you have created your symbol, make sure that you have one instance of it on the stage, and only one instance. Click one time on the circle to make sure it is a symbol. If the blue box appears around it when it is selected, then it is probably a symbol. Next, look in your library (ctrl-L) and make certain the circle symbol is there. If so, then you're all set, so move the circle symbol instance just offstage to the upper-right corner.
  3. Next, in the timeline, click in a new frame, say frame 30, and add a new keyframe (F6).
  4. Now, on the stage, move the circle across the stage to the upper-left corner.
  5. In order to make sure that all is correct, let's check the keyframes. Click in frame one. Here, the circle should be just offstage to the upper-right corner. If it is not, then you simply need to move the circle to where it should be.
  6. Then, click in frame 30 in the timeline. In this frame, the circle should be in the upper-right corner of the stage. Likewise here, if the circle is not where it should be on the stage, you simply need to move it where it belongs.
  7. Finally, place the mouse over the timeline, in between the two keyframes over the grey area somewhere in the middle, and right-click.
  8. A menu should appear, so choose Create Motion Tween. LINK
11. Gradients
  1. Now let's apply some color to our background using linear gradients. A gradient is a gradual change from one color to another. First, using the rectangle tool (R), draw a rectangle for the ground. It is all right whatever color you choose for now, because we will change it with the gradients. Also, the rectangle should hang over the edges of the stage some. Don't try to draw exactly to the edge of the stage.
  2. After you draw the first rectangle, draw a second one for the remander of the background. The color for this one will also be altered by the gradients.
  3. Next, open the color mixer panel.
  4. Notice in the panel where it says solid. Click there and select linear, and then next notice the horizontal line below that appears. It represents the gradient, and by default goes from black to white.
  5. The gradient colors can be changed by manipulating the square boxes below the horizontal line. To change the color of one of them, simply double-clip on it and the color selection panel appears.
  6. Choose a color that you like, and the gradient is altered. If you double-click on the other box, you can select its color also.
  7. Use the paint bucket tool (K) to fill the bottom rectangle with the gradient, and the fill transform tool (F) to rotate it so that it goes from light to dark from bottom to top.
  8. Repeat the previous 4 steps for the top rectangle.
  9. This will be the background of your animation, so name the first layer backgound and lock it.
  10. Add a new layer and name it fish.
  11. Place the fish graphic symbol that you created in this layer.
  12. On the stage, move the fish symbol to the middle of the right side of the stage.
  13. In the timeline, click in frame 20 and add a keyframe (F6).
  14. On the stage, move the fish to the center of the stage.
  15. n the timeline again, click in frame 40 and add another keyframe (F6).
  16. On the stage again, move the fish to the left-hand side of the stage.
  17. Now, place the arrow between frames 1 and 20, right-click, and select Create Motion Tween.
  18. Finally, place the arrow between frames 20 and 40, right-click, and select Create Motion Tween again.
  19. The final fish animation is here: LINK
  20. To add the easing click here: LINK
12. Symbol Effects
  1. As you should already know, if you edit a symbol (using symbol-edit mode), then all instances of it will be edited to look exactly the same; however, you may change various properties of a symbol instance using the properties bar.
  2. Go to the previous movie with the circle, choose the selection tool (V), and click one time on the circle on the stage to select it.
  3. Open the properties bar, look in the center where it says color, click and select tint.
  4. Select a tint color and a percentage. This will change alter the color of your symbol, the fish.
  5. Now click in frame 30.
  6. Select the circle in the center of the stage by clicking on it one time.
  7. Open the properties bar again, and alter the tint color again. Click here to see the results: LINK
13. Motion Tween Easing
  1. Returning to the fish lesson, click in the middle of the first tween in the timeline, that is between frame 1 and frame 20 in the lavendar area.
  2. Next, open up the properties bar, locate the ease setting, click there, and select 100. This will cause the fish to slow down at the end of the tween.
  3. Then, click in the second tween between frame 20 and frame 40, look in the properties bar again, and set the ease to -100. This will cause the tween to start slow and speed up toward the end of the tween.
14. Scaling Objects & Motion Tweens
  1. Let us return to the circle motion tween that was discussed earlier. Click here to see it: LINK
  2. Click here to see the instructions to create it: LINK
  3. To add a scaling effect to this little animation, first click in frame 1. This automatically selects the circle on the stage.
  4. Then select the free-transform tool (Q) and change the size or shape of the circle with it.
  5. Next, click in last frame. This automatically selects the circle on the stage again.
  6. And again, using the free-transform tool (Q), and change the size or shape of the circle with it. The circle will now gradually change shape and/or size through the course of the animation.
  7. View the final circle animation. Click here to see it: LINK