Summer 2007 week 3: evening—05/31 morning—05/30

Hello everyone,
I was very happy with the way class turned out this week for both of my Animation Classes. You all did quite well with the material and picking up the Motion Tween Animation.

Although I did cover a few other things, this weeks posting primarily concerns itself with Symbols and Motion Tweens.

1. 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;
      
   
   
2. HOMEWORK:
   
   • Complete the Bugs Bunny drawing by tracing the rest of the lines and filling it in with color
     
   • LINK   Please read this script for "Hey, Diddle, Diddle!".
     
         You are going to have to draw ALL of the characters in Flash over the next two (2) weeks. You may trace other images or you may draw your own. In either case, however, please make certain that you use your own creativity. If you must trace, please make certain that you make your own drawings unique in some way and not exact duplicates of someone else's work.
     
         Due THIS MONDAY, you must draw in Flash, the first character, the DOG.
     
         LINK    Tracing instructions are outlined here in the blog entry for WEEK 2.
     
         Since this class is an animation course, we will be creating an animation due on the last day of class. At the previous link above, I have given you a script for the nursery rhyme, Hey, Diddle, Diddle!. You should read this script and make sure you understand what is going on. Notice, that it does not merely tell the story, but it also gives camera information: how far away the camera is, is the camera still or is it moving, and what position the camera is in, above, below, to one side, etc. Everyone of these things affects how the animation will look. Next week, I will give you a storyboard that will show you how the important frames of the animation should look.
         However, if you wish to do your own animation, if you wish to create your own idea, then you must come to class and let me know what that will be. You will have to write your own script and do your own storyboard. This is a lot of extra work, but it will also mean a lot of EXTRA CREDIT. If you choose to do your own animation from your own storyboard, then you will have an advantage over others in the class who follow mine.
         Creativity is always rewarded in this class, so free yourself and your mind, be experimental and adventurous.
     
   • LINK   storyboard explanation;
     
   • LINK    Alfred Hitchcock's "The Birds"
     
   • LINK   script example
     
   • LINK   storyboard template
   
   
   Also, recall that there is a quiz in our next class covering keyboard shortcuts of the tools in the toolbar:
   
   • V     selection tool
     
   • Q     free-transform tool
     
   • N     line tool
     
   • O     oval tool
     
   • R     rectangle tool
     
   • Y     pencil tool
     
   • B     brush tool
     
   • S     ink-bottle tool
     
   • K     paint-bucket tool
     
   • E     eraser tool
     
   • H     hand tool
     
   • Z, M     zoom tool
     
   
   
   
3. INTRODUCE:
   
   1. Creating a Graphic Symbol:
   1. Draw an object, an oval for example;
      
   2. Select the object by double-clicking on it with the arrow tool (V). Make certain that you select both the fill and the stroke.
      
   3. Select F8 on your keyboard. This converts the oval into a Graphic Symbol.
      
   4. Type a UNIQUE but DESCRIPTIVE name for the symbol. For example, it would not be a good idea to name a triangle that you have drawn the name Maria because you like the name Maria. Something more descriptive of what it is and obvious would be better, such as the name Triangle.
      
   5. Select Graphic for behavior and then select Okay.
   
   
   
   2. Symbols, Symbol Instances, and the Library:
   1. Once you create a symbol, it then resides in the LIBRARY. To open the library, select the F11 key on your keyboard, or CTRL-L. This will open up the library where you will see a list of all your symbols.
      
   2. You can click and drag symbols from the library onto the stage. The advantage to using symbols is that you may use them as many times as you like without having to redraw them each time.
      
   3. You may delete your symbols from the Stage (here called a SYMBOL INSTANCE, which is actually just a copy or clone of the symbol), but you should use extreme caution in deleting symbols from the Library (here is where the actual SYMBOL stays).
      *** Keep in mind, if you delete a symbol from the library, it will also be deleted from the stage EVERYWHERE THAT YOU USED IT IN THE MOVIE.***
   
   
   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.