Summer 2007 week 5: evening—06/11 morning—06/13

Hi everyone,
Below you will find steps leading you through what we covered in class this week, the drawings with the plants, the water, and darwing and animating the fish. Basically, we put together a number of things we'd already gone through to produce a quick little animation of something we can recognize, not just circles and squares but plants and fish.
    At this point, we are beginning work on our animations starting in our next class next week, so please do not fall behind in the homework. We're halfway through the term, and now the real work begins.

Good luck! Carter-

1. TOPICS:
   
   • LINK   Drawing Examples: Trees & Clouds
     
   • LINK   more on using Symbols
     
   • LINK   Composing a Setting: a Landscape
     
   • LINK   more on using Layers
     
   • LINK   more on Scaling Objects: Foreground & Background
     
   • LINK   more on Symbol Effects: the fading, hazy distance
     
   
   
2. HOMEWORK: Using Flash 8, please download and look at frame 1 and frame 4 from the storyboard.
   
       Using those two frames as guides, please try to draw them yourself. They don't have to be perfect yet, but this is a first step in trying to create our animations due at the end of the term. Draw them in separate files, and do them quickly. If you have more time, you can always go back and make them look nicer. Try to remember to use layers—the stars in one layer, the moon in another layer, the notes in a third layer, and the title in a fourth layer for example
   
       Any kind of creative work and art is done by iteration and reiteration. This means, that you do something once, and then you go back and edit it, correct it, or redo it completely. And you continue to do this until you get it to the way you want or you run out of time.
   
   Good luck, work hard, and give yourself a little time to relax this weekend. See you next week. Carter-
   
   *** Please bring your homework to class. We will use the drawings in another in-class exercise. ***
   
   
3. STORYBOARD: below you will find links to each of the pages of the storyboard containing 3-frames each.
   
   • LINK   Frames 1-3
     
   • LINK   Frames 4-6
     
   • LINK   Frames 7-9
     
   • LINK   Frames 10-12
     
   • LINK   Frames 13-15
     
   • LINK   Frames 16-18
     
   • LINK   Frames 19-21—not yet complete
     
   • LINK   Frames 22-24—not yet complete
     
   • LINK   Frames 25-27—not yet complete
     
   • LINK   Frames 28-30—not yet complete
     
   
    
   
4. SETTING UP A SCENE:
   
   1. Creating and Naming layers:
      
      1. For the exercise we did in class this week, we first created all the layers we needed. Name the first layer water, and then lock it, and add a new layer.
         
      2. Name the second layer fish, lock it, and add a new layer.
         
      3. Name the third layer plants, lock it, and then UN-lock the water layer.
         
      
      
   2. Creating a Linear Gradient:
      
      1. Click in the water layer to make it the active layer, and select the rectangle tool (R).
         
      2. Open the color mixer, and in this panel, click on the little paint-bucket icon to select the fill color.
         
      3. Also in this panel, click where it says solid and select linear. This will allow you to create a linear gradient.
         
      4. Before we create, however, we must draw something: we are going to draw a rectangle without a stroke. To do this, you must first select the rectangle tool (R), which you probably already have done.
         
      5. Then, you must click on the little pencil icon underneath the word colors in the toolbar. This selects the stroke color so we can edit it.
         
      6. Then, just below this, you will see a small white box with a red slash. Click on this to turn off the stroke color.
         
      7. 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 that covers over the ENTIRE stage. 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.
         
      8. Notice in the color mixer panel the horizontal bar below that shows a gradual change from one color to another, probably from black to white. This represents the gradient as it is right now. By default it is set from black to white.
         
      9. 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-click on it and the color selection panel appears.
         
      10. 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.
          
      11. Use the paint bucket tool (K) to fill the rectangle with the gradient, and the gradient transform tool (F) to rotate it so that it goes from light to dark from bottom to top. Choose whatever colors best represents water to you. Usually, the lighter color is on the top.
          
      
       
      
   3. Creating a simple Graphic Symbol:
      
      1. Once you complete your gradient, you should LOCK the water layer, and unlock the plants layer. Click in this layer to make it active.
         
      2. Utilizing whatever tools you like, draw a single plant that resembles seaweed to you.
         
      3. Once you draw your object, a plant, a fish, a cloud or tree, it should be converted to a symbol (F8) like many of the other much more simple objects we have draw thus far, ovals and rectangles mostly.
         
      4. To do so, after you have drawn your plant, for instance, you must choose the selection tool (V) and select the entire thing.
         
      5. Then chose F8, convert to symbol.
         
      6. Give it the name plant, select graphic for type and then click okay.
         
      7. Now you will see that it has a blue box around it when it is selected. If you de-select by selecting escape or by clicking on the background somewhere, you will see the blue box disappears.
         
      8. One thing you should remember is that since the plant is now a symbol, you must not double-click on it, as this will take you into symbol-edit mode for the cloud.
         
      9. If you do wish to edit your symbol, then you may double-click on it; however, you must remember to exit symbol-edit mode by clicking on Scene 1 in the upper-lefthand corner of the window when you are finished your edits.
         
      10. 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.
          
      11. 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.
          
      
       
      
   4. Symbol Effects:
      
      
      
      1. As you now know from the above steps, 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. Using the selection tool (V), click one time on one of the plants on the stage to select it. Its blue box should appear.
         
      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 where it says tint again, but this time select advanced. Once you do this, click on the button that says options. If you alter the alpha here, it will have both the new tint color and be a bit transparent.
         
      6. You may also use the free-transform tool (Q) to change the plants so that each one has a somewhat different size and shape.
         
      7. There are other transformations possible in the modify menu. Just click on it at the top, and select transform. Try them all to see what happens.
         
      8. If you need to change the stacking order of the various plants; that is, if you want to put one plant below or above another one, you must also use the modify menu. Simply select the plant, and then click on modify menu and then arrange. Choose one of the options to alter the stacking order.
         
      9. When you have completed your underwater garden, then lock the plants layer.
         
      
       
      
   5. Animation:
      
      
      
      1. Now, unlock the fish layer and click on it to make it the active layer.
         
      2. Using whatever tools you like, draw a fish. When you choose one of the drawing tools, however, such as the line tool, pencil tool, or one of the shape tools, make sure that the drawing object option at the bottom is NOT selected.
         
      3. Once you have drawn your fish or sea creature, choose the selection tool (V) and select the entire thing.
         
      4. Make certain that the entire fish is selected and that no parts at all are left out, and then convert to symbol (F8).
         
      5. Type fish as the name, choose graphic for type, and click okay.
         
      6. Now, place the fish on the lefthand side of the stage, but it should be facing toward the stage in the direction that it will swim.
         
      7. We are going to make the fish swim across the stage over to the other side, just as we have done with the circle and square in past class; however, our fish is going to slow down and pause in the middle, before it speeds up and continues on its way to the other side. This means that we will have two pieces of animation, or two motion tweens: one for the fish to move to the middle of the stage, and then the second for it move off to the right side of the stage.
             So, to do the first half of the animation, click in frame 25 of the fish layer and add a keyframe (F6). You will probably notice that everything else disappears, the water and the plants. This is because those two layers only have the duration of one frame, and now, the fish layer has the duration of 25 frames. The fish layer lasts longer at the moment, but don't worry we will correct this in a moment.
         
      8. Next, move the fish so that it is in the center of the stage.
         
      9. Then, right-click in the timeline between the two keyframes in frames one and twenty-five, and select create motion tween.
         
      10. Now, click in frame 50 of the fish layer and add another keyframe (F6).
          
      11. Afterwards, this time, move the fish off the stage to the right side.
          
      12. Then, right-click in the timeline between the two keyframes in frames twenty-five and fifty and select create motion tween.
          
      13. If you press enter a couple of times now, you will see the fish move steadily across the stage. There is no pause in the middle. This is what we will do next.
          
      14. In the timeline, click in between frames 1 and 25.
          
      15. Then, open up the properties bar and locate where it says ease.
          
      16. Click there, and drag the lever all the way to the top until it reads 100.
          
      17. After, click in the timeline between frames 25 and 50.
          
      18. This time, in the properties bar change the easing until it reads -100.
          
      19. Select ctrl-enter to test the movie.