Fall 2007 week 3 afternoon—09/26

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 Motion Tween Animation. If you keep going like you have been, you'll have the best animations yet.

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

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:
   
   • 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
       
     
     
   • LINK    Complete the Bugs Bunny drawing by tracing the rest of the lines and filling it in with color.
                 Tracing instructions are outlined here in the blog entry for WEEK 2.
     
   • LINK   Please read this script for "Hey, Diddle, Diddle!".
     
   • Also, due THIS MONDAY, you must draw in Flash, the first two (2) characters, the DOG and the COW.
     
     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.
         Since this class is an animation course, we will be creating an animation due on the last day of class. At a 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
   
   
   
   
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.
          
      
      
   
   

Fall 2007 week 2 afternoon—09/19

Hi Everyone,
This is the blog entry for the second week of class for my DMA101 Introduction to Animation Classes for the fall term.

Class went well Wednesday. You all seemed to pick things up fairly quickly; but remember, the only way to learn even more quickly is to spend as much time as you can outside of class.

There are two pieces of homework this week, so please read carefully what to do down below where I disuss the HOMEWORK.

Some things posted here I have not yet covered in class, but that usually means that I will cover it in the next class.

If you have any questions, please email me. my address is at the top of this page. carter-

1. TOPICS:
   
   1. LINK   Object Transformations;
      
   2. LINK   Creating Groups;
      
   3. LINK   Arranging Groups
      
   4. LINK   Importing Graphics;
      
   5. LINK   Tracing Graphics;
      
   
   
2. HOMEWORK: LINK   <-- Download and trace the image at the link and bring to class for WEEK 3, 02/05/07. You should complete the tracing and try to color it in as the image is, gray where it needs to be, and white where indicated.
   
   
   1. Once you click on the link, an image will appear.
      
   2. To save this image and download it onto your computer, simply right-click on the image and choose SAVE IMAGE AS or SAVE FILE from the menu.
      
   3. Then, so that you may located it easily, it is often best to save it onto the DESKTOP of your computer. So, at the top of the Save As.. window, make sure you Save In the desktop.
      
          For instructions as to how to complete this assignment, review this week's in-class tutorial at the bottom of this posting.     LINK
      
   
   
   
   
3. INTRODUCE:
   
   1. Object Transformations:
   1. Free-Transform Tool (Q)—once you draw an object you may modify and transform it in various ways:
      
      1. Rotation:
         
         1. choose the Arrow Tool (V) to select the object or objects you wish to modify;
            
         2. select the object by clicking on it one (1) time;;
            
         3. choose the Free Transform Tool (Q);
            
         4. next, place the pointer near one of the little black boxes in the corners until the pointer turns into a curved arrow pointing in a circular direction;
            
         5. click, hold down, and drag in one direction or another to rotate your object.
            
         
         
      2. Height:
         
         1. choose the Arrow Tool (V) to select the object or objects you wish to modify;
            
         2. choose the Free-Transform Tool (Q) ;
            
         3. using the mouse, place the pointer over the middle black box on top or on bottom;
            
         4. click, hold down, and drag to increase or decrease the height of the object;
            
         
         
      3. Width:
         
         1. choose the Arrow Tool (V) to select the object or objects you wish to modify;
            
         2. choose the Free-Transform Tool (Q) ;
            
         3. using the mouse, place the pointer over the middle black box on the right or on the left side;
            
         4. click, hold down, and drag to increase or decrease the width of the object;
            
         
         
      4. Height & Width:
         
         1. choose the Arrow Tool (V) to select the object or objects you wish to modify;
            
         2. choose the Free-Transform Tool (Q) ;
            
         3. using the mouse, place the pointer over one of the little black boxes in the corners;
            
         4. click, hold down, and drag in any direction to increase or decrease the width AND height of the object;
            
         
         
      5. Proportional: same as number 4 above, but hold down on the shift key as you are dragging the corner box to maintain the object’s proportions.
         
         
      6. Skew:
         
         1. choose the Arrow Tool (V) to select the object or objects you wish to modify;
            
         2. choose the Free-Transform Tool (Q) ;
            
         3. using the mouse, place the pointer between any of the little black boxes until the pointer turns into two little arrowspointing in opposite directions;
            
         4. click, hold down, and drag in any direction to skew the angle of the object;
            
         
         
   2. Modify Menu—choose the Modify Menu to make various transformations (others will be discussed at another time):
      
      1. upside-down: Modify >> Transform >> flip vertical
         
      2. mirrored: Modify >> Transform >> flip horizontal
         
      3. scale & rotation: Modify >> Transform >> scale & rotate
      
      
   
   
   2. Groups—to group objects allows you to treat multiple objects, or multiple parts, as a single object. This simplifies your objects in several ways: it allows you to move around a complicated drawing (such as a face) with multiple parts (eyes, nose, mouth, etc.) on the stage without having to select each individual part beforehand; it allows you to modify such a complicated drawing with all of its parts together (to make it larger for example, or smaller).
      
      1. Creating a Group:
         
         1. draw an object, an oval for example;
            
         2. select the object by double-clicking on it with the arrow tool (V);
            
         3. then select CTRL-G on your keyboard. This converts the ungrouped oval into a group.
            
         
      2. Selecting a Group—When selecting a group you must only click on it one time no matter how many pieces or objects it contains whether it consists of multiple strokes or fills or not. When selected it will have a blue box around it.
         
         
      3. Arranging Groups—When you have multiple groups, drawn and created, you may arrange the stacking order of them, putting one above the other or one below another. In the graphic (right) there are two groups, one star and the other a flower.
         
         1. Select the star with the selection tool by clicking on it once, then;
            
         2. rearrange the groups: Modify >> Arrange >> bring to front
         
         
      
      
   3. Importing Images and Graphics—If you are going trace over an image, you must first prepare your stage for doing so. The following steps will make it easier to trace and view your drawing as distinct from the image that you are looking at.
      
      1. Prepare your stage: Name the 1st layer 'Image' and then lock it.
         
      2. Add a new 2nd layer, name it Trace, and then lock it also.
         
      3. Finally, add a new 3rd layer, name it Drawing, and then lock this one as well. The layers should be in this order:
         top: DRAWING, middle: TRACE, and bottom: IMAGE
         
      4. Next, unlock the Image layer again and select frame one in this layer.
      5. Go to the File menu above and select the following: File >> Import >> Import to Stage.
         
      6. The Import dialogue box pops up, so you should select the image that you wish to import onto the Flash Stage. Once you do so, double-click on it to bring it to the stage.
         
      7. Then, lock the Image layer and unlock the Trace layer and draw a rectangle. This rectangle should have a black stroke and a white fill.
         
      8. Open the Color Mixer Panel from the Window Menu. Select the fill color and change the alpha to 50%.
         
      9. Use the Paint Bucket Tool (K) and fill up the rectangle with the new fill color. This will make the white somewhat transparent.
      10. Once again, lock the Trace layer and unlock the Drawing layer.
          
      11. Select the LINE TOOL (N).
          
      12. Set your Stroke color temporarily to black that will contrast with the trace rectangle that you drew. that you are going to trace over.
          
      13. You will be using the line tool to straight draw line segments, but take care not make them too long. Once you draw one segment, switch to the SELECTION TOOL (V). This will allow you to change the straight line drawn with the line tool to a curved line segment.
          
      14. For nice clean lines, switch frequently back-and-forth from the LINE TOOL to the SELECTION TOOL.
          
          
      
      
   
   

Fall 2007 week 1 afternoon—09/12

Hi Everyone,
This first posting will not include much this week, just a short note to get you all used to coming to this site. Hopefully it will become a regular thing.

    All other weekly postings after this one will be much more informative and inclusive. Each posting will include a step by step set of instructions for each lesson covered in class. Therefore, please take advantage of it as often as you can. If ever you have a question of how to do something in class, this should be your first place to look.

   Homework for next week includes three (3) things:

1. You must purchase and bring the text to class;
   
2. You must bring your temporary USB storage drive to class;
   
3. and, you must open up the FLASH software and do something, draw something, anything in it at all. Then save it in your USB drive, and bring it to class and show me what you have done.
   

Please email me if you have any questions. my email addresses are at the top of this page.

See you next week. Carter-