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, May 29, 2009

Summer 09 week 3:
5/26/09: Tue, 12:25 - 3:25

Hi everyone, Great class this week. I was pleased by what everyone did. For homework, you will have to do some drawing and start on the Mid-Term Animation. You do not have to complete it and what you do have to do does not have to be perfect. What I want is for you to try your best on the animation. We will clear up any difficulties or mistakes you make in class next week. What I do want is for you to spend a lot of time on your drawings to make certain they are nice. Have a nice weekend, Carter-

  1. TOPICS:
    1. LINK   Review: 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. LINK   Snowman Animation paragraph 1
  2. HOMEWORK: This week, work on your mid-term projects:
    1. Snowman Story:
      1. You should make a serious attempt at the 1ST PARAGRAPH of the Snowman Story.
      2. For extra credit, by the next class, you should have up to the end of the 2ND PARAGRAPH of the Snowman Story completed in your animation. You do not have to have the 2nd paragraph done perfectly, but you should at least try to do it even if it seems difficult. I will go over how to do both the 1st and 2nd paragraph in class, but the whole idea about learning something new is that you try to do something that you don't know how to do, and then learn how to improve upon what you had done initially.
    2. Quiz: You should also be prepared to take a QUIZ in the beginning of the next class. This will include knowing how to create graphic symbols and motion tweens, and keyboard shortcuts for the following: save, open, print, undo, copy, cut, paste, paste-in-place, keyframe, extending-the-duration, blank keyframe, convert to symbol, the library, and the tools in the toolbar.
    3. 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. SIMPLE DRAWING EXERCISES:
    Last week in class we put some of our flash skills—drawing, creating symbols, creating new layers—to work for us in creating an actual drawing, creating an actual scene of something recognizable, a landscape. To the right here, you will see a series of images of a couple things might go into creating a simple landscape, a cloud and a tree.   For our snowman story, this is not required for you to draw, they are simply examples of how to draw some things for you to practice with.
    TREEtree
    You can use this as an example of how to start your snowman story; however, since we are doing a winter scene with a snowman, perhaps this springlike drawing will not be quite what you want. It can serve as a way to draw various things you DO need, however, like hills, mountains, clouds. The main things that will probably change are the colors and the fact that trees in winter do not have green leaves for the most part.
     
    1. Creating a simple Graphic Symbol:
      1. Once you draw your 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.
      2. To do so, after you have drawn your cloud, for instance, you must choose the selection tool (V) and select the entire cloud.
      3. Then select F8, convert to symbol.
      4. Give it the name cloud, select graphic for behavior and then click okay.
      5. 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.
      6. One thing you should remember is that since the cloud is now a symbol, you must not double-click on it, as this will take you into symbol-edit mode for the cloud.
      7. If you do wish to edit your symbol, then do 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.
      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. After you draw the tree, you should do the same and convert it into a symbol too (F8).
       
    2. Creating a Simple Landscape:
      1. If you haven't drawn your tree or cloud yet, or if you have not yet converted them into symbols, then look at the above exercise to do so first: LINK
      2. Once you have created your symbols, make sure that for now you have only one instance of each of them on the stage. Click one time on the tree and cloud to make sure they are symbols. If the blue box appears around them when they are selected, then they are probably symbols. Next, look in your library (ctrl-L) and make certain both symbols are there. If so, then you're all set, so delete both of them from the stage, but careful not to delete them from the library.
      3. Next, in the timeline, double-click where it says layer 1 and type the name ground
      4. Then, choose the rectangle tool (R) and draw a rectangle over the bottom part of the stage. Adjust the fill and stroke colors of the rectangle if you need to.
      ground
       
    3. Manipulating Layers:
      When creating an animation, it is important to put different objects on different layers, to segregate your content. This is important for several reasons, but primarily because there must only be one symbol per layer when using motion tweens.
      1. Now, lock the ground layer and add a new layer.
      2. Name this new layer, hills.
      3. Choose the line tool (N) and draw two diagonal lines above the ground rectangle as shown in the picture below.
      4. Continuing with the line tool (N) and starting with the end points of those two diagonal lines, draw a box over the ground rectangle.
      5. Once you do this, choose the selection tool (V) convert those two diagonal lines into curves.
      6. And continuing with the line tool (N), stretch the end of the lines so that they attach to each other to form a kind of upside-down W.
      7. Choose a new fill color and then, using the paint-bucket tool (K), fill in the two shapes with different colors. Notice that the one on the left is a little darker than the one on the right. Since we are creating a landscape, and since these are hills, it is good to note that as things get further away, they appear to get lighter. This is why the hill on the right is lighter than the hill on the left, because it is further away.
      8. Now, lock the hills layer, and create a new layer called mountains.
      9. With the line tool (N) draw a zig-zag line to mimic the outline of distant mountans.
      10. Further with the line tool (N) draw a box that connects the end points of the mountain lines and over-laps the hills.
      11. Choose a couple of light fill colors and using the paint-bucket tool (K), color in the mountains.
      12. Now, lock the mountains layer, and create a new layer called clouds.
      13. Open the, library (F11 or ctrl-L), and there you will see your cloud symbol.
      14. Drag several, cloud instances, from the library onto the stange.
      15. Change the size and shapeof the clouds using the free-transform tool (Q). Make certain they are small as they are in the background and far away.
      16. Lock all of the layers.
      17. Then, rearrange the layers to the following order: top-ground, 2nd-hills, 3rd-mountains, and bottom-clouds.
      18. Next, unlock the groundlayer.
      19. Using the selection tool (V) convert the horizontal line to a curve to make a kind of gentle slope.
      20. Save and test (ctrl-enter) the movie, and it will look like the following image.
      21. Now, lock the ground layer.
      22. Add a new layer and name ittree-middle.
      23. Open the library (ctrl-L or F11), and drag an instance of the tree symbol onto the stage.
      24. Use the free-transform tool (Q)to resize the tree appropriately. Place it so that it rests on the nearest hill
      25. Now, lock the tree-middle layer.
      hills 1hills 2hills 3hills 4hills 5mountains 1mountains 2mountains 3mountains 4layers 1layers 2 finish 1tree 1tree 2
     
  4. Foreground & Background: When objects are placed in a landscape, to give the illusion of depth, they take on different sizes. Objects that are far away from the viewer, the camera, appear smaller. Objects that are nearer appear larger. To convey this relative size and relative distance, the free-transform tol (Q) is used to resize an object such as trees that are either further away or closer to the camera.
    1. Add a new layer and name ittree-near.tree 3
    2. Open the library (ctrl-L or F11) again, and drag another instance of the tree symbol onto the stage.
    3. Again, use the free-transform tool (Q)to resize the tree until it is much larger. It should hang off the edges of the stage significantly. Place it so that it rests along the left edge.
    4. Next, select this tree on the stage using the selection tool (V), open the properties bar, and click where it says color and select brightness. Make the tree darker as it is nearest to the viewer.
    5. Now, lock the tree-near layer.
    6. Open the library (ctrl-L or F11) once again, and drag a third instance of the tree symbol onto the stage.
    7. Use the free-transform tool (Q)to resize the tree until it is much smaller. Place it so that it rests on one of the background hills.
     
  5. Dim, Hazy Distance: To further provide an illusion of distance, objects that are further away from the viewer, from the camera, appear dimmer or lighter or hazier. This is due to the effects of the atmosphere and water-vapor. Color and symbol effects may be used to help provide this effect.tree 4
    1. Select this smallest tree on the stage using the selection tool (V), open the properties bar again, click where it says color and select brightness. Make the tree lighter as it is furthest from the viewer.
    2. Save and test (ctrl-enter) the movie, and it will look like the following image.
    3. Finally, you may also add these effects to the clouds, making them lighter, or, perhaps somewhat transparent with alpha.
    4. Save and test (ctrl-enter) the movie, and it will look like the following image.
  6. SNOWMAN ANIMATION: 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:

Tuesday, May 19, 2009

Summer 09 week 2:
5/19/09: Tue, 12:25 - 3:25

Hello everyone,

Welcome to all of you who were not in class the first week of class. Please, the first thing I would like you to do is send me an email (carterdjohnson@aim.com) if you did not do this already in my class. Please type the following information in the email: your name, your ID#, and then type your class (DMA111), and the section (this is the number that follows DMA111 on your schedule).
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 also included here a lesson, which we did not cover in our last class, on drawing and animating a fish. Do this if you wish to have extra practice with the issues of symbols, motion tweens, layers, and easing. If you do it, I will give you extra credit next week. Please do not hesitate to email me or find me at TCI if you have any difficulties or questions. If you follow the instructions at the bottom of this posting, you should be able to complete the following brief animation of the bouncing ball. Remember, please complete this bouncing ball & its shadow for one of your homework exercises, and please do your own work.
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;
    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
    12. LINK   Bouncing-Ball Animation
  2. HOMEWORK: Over the next several weeks, we will be working on your mid-term projects. Please read the handout about the snowman story and storyboarding below. I will discuss it in more detail in our next class.
    1. Due by NEXT week:
      • Flash Drawing—After you read the download for the Snowman Animation, you should simply draw the landscape for this animation (no animation required yet!) in FLASH. It should include the following: the ground, the mountains, a snowman, a sun, some clouds, and a tree.     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 6 or 7 of the term, which is only 3 or 4 weeks away. This is not much time really, so please do not get behind. The more time you give yourself the better your work will be. Creativity is always rewarded in this class, so free yourself and your mind, be experimental and adventurous.
    2. also Due NEXT week: Follow the exercise below about the bouncing ball: LINK
    3. EXTRA CREDIT for NEXT week:
      • Animation—You should begin experimenting with your animation. I know that I have not demonstrated how to begin this yet, but you should try doing it yourselves all on your own nonetheless. EXPERIMENT and try to figure out for yourself. It is all right if you do not succeed. I like to see when people make attempts even if they don't work out; but you do have got to put some time into it if you want to succeed, and there's no time like the present to begin this.     Read the first paragraph of the Snowman Story and complete this part of the animation by next week. This must occur in the scene that you draw for this week's homework.
    4. Link EVERYONE will need to read the following download, The Snowman Story:
      • LINK   The Snowman Story (.doc format)
      • LINK   The Snowman Story (.pdf format)
  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.
       
    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
        Hopefully, you can see that the use of symbols, symbol instances, and the library is not limited to circles. To the right is a quick demonstration of a drawing of a fish. This too can be converted into a symbol. But before we get to that, let's make the CIRCLE SYMBOL created in the previous exercise move around the stage:
      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. Gradientsgradient
      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. Moving the Fish:
      1. On the stage, move the fish symbol to the middle of the right side of the stage.
      2. In the timeline, click in frame 20 and add a keyframe (F6).
      3. On the stage, move the fish to the center of the stage.
      4. n the timeline again, click in frame 40 and add another keyframe (F6).
      5. On the stage again, move the fish to the left-hand side of the stage.
      6. Now, place the arrow between frames 1 and 20, right-click, and select Create Motion Tween.
      7. Finally, place the arrow between frames 20 and 40, right-click, and select Create Motion Tween again.
      8. The final fish animation is here: LINK
      9. To add the easing click here: LINK
       
    13. Symbol Effects
        properties bar
      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
       
    14. Motion Tween Easing
        Motion Tween Easing is a tool that is used to alter the speed of an object through a motion tween. As in the fish animation above (and here), the fish slows down toward the middle, and then speeds off again, as if swimming against the rhythmic current of the ocean waves.
      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. slow down
      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. speed up
       
    15. Scaling Objects & Motion Tweens
        You should already be familiar with how to scale objects up and down (making them larger and smaller) using the free-transform tool (Q). However, you may not know that this can be combined with the motion tween to cause an effect which makes an object like it's changing size over the course of a motion tween.
      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
       
    16. Bouncing Ball
      1. Choose the selection tool (V), open the properties bar, and set the background color.
      2. Choose the oval tool (O), turn OFF the stroke color, and select black as the new color for the fill.
        1. Hold down on the shift key and draw a perfect circle on the stage.
        2. Then, choose the selection tool (V) and select the circle you have drawn on the stage.
        3. Copy (ctrl-C) the circle.
        4. And then, paste-in-place (ctrl-shift-V) the circle.
      3. Choose a new fill color for the pasted circle.
      4. Choose the free-transform tool (Q), make the circle smaller to reveal the original copied black circle, and then using the arrow keys on the keyboard, move the now smaller colored circle toward the center and closer to the top edge.
      5. Choose the line tool (N) and draw two connected lines that form a sort of rooftop shape.
      6. Choose the selection tool (V) and push on the line-segments one at a time to form curves to form a single curve like the one you see in the second image below here.
      7. Using the line tool (N), draw another line-segment connecting the two endpoints of the curve; and then, with the selection tool (V), turn this line into a curve as well.
        1. Choose the paint-bucket tool (K).
        2. Select a lighter value of the color of your ball (in my case, since my ball is blue, I will choose a lighter blue) as your fill color.
        3. Fill up this crescent shape by clicking in it one time.
        4. Then, choose the selection tool (V) and select the stroke of this new little shape.
      8. Delete the stroke and then move the crescent shape into place on the top part of the circle. This is the light reflecting off the spherical shape.
      9. Now, select the entire ball, conver to symbol (F8), give it the name of ball, select graphic for type, and click okay.
        1. Name the first layer ball.
        2. Lock this layer and add a 2nd layer.
        3. Name the new layer ground.
        4. Then move the ground layer so that it is below the ball layer.
        1. Choose the rectangle tool (R).
        2. Select a new color for the fill.
        3. Turn off the stroke color so that you see the red slash in the box instead of a color.
        4. Click in frame 1 of the ground layer.
        5. On the stage, draw a rectangle that covers over approximately the lower third of the stage. Make certain that the edges of the rectangle hang over the edges of the stage on both sides as well as the bottom.
        1. Move the ball so that it sits right above the stage.
        2. Now click in frame 20 of the ball layer.
        3. Add a keyframe (F6).
        4. Then, click in frame 20 of the ground layer and extend its duration (F5).
        1. Click in frame 10 of the ball layer.
        2. Add a keyframe (F6).
        3. Move the ball so that it looks as if it is sitting on the ground. See my example to get an idea.
        4. Then, click in frame 12 and add another keyframe (F6).
      10. Right-click between frames 1 & 10 and select create motion tween. Then, repeat this between frames 12 & 21.
        1. Click somewhere between frames 1 and 10 in the ball layer.
        2. open the properties bar.
        3. Locate where it says ease and set it to -100
        4. Then, click in between frames 12 and 21.
        5. Alter the easing here so that it reads 100.
        1. Click in frame 11 and add a keyframe (F6).
        2. Select the ball on the stage and choose the free-transform tool (Q).
        3. Move the center point, that is the little white circle, so that it is on the bottom.
      11. Flatten the circle a little, but also stretch it out from side to side.
      12. Add a new layer named shadow, and move it below the ball layer.
        1. Unlock the ball layer.
        2. Click in frame 10 of the ball layer.
        3. Copy (ctrl-C).
        4. Click in frame 1 of the shadow layer.
        5. Paste-in-place (ctrl-shift-V).
        1. Select the ball on the stage by clicking on it one time with the selection tool (V).
        2. Open the properties bar.
        3. Click where it says color and select tint.
        4. Choose a dark shade of the color of your ball. In my case, since my ball is blue, I've chosen a very dark blue.
        5. Change the percentage to 100%.
        6. Choose the free-transform tool (Q).
      13. Move the center point (the little white circle) so that it is on the bottom, and then flatten your circle.
      14. Click in frame 10 of the shadow layer and add a keyframe (F6); then, click in frames 11 & 12 and add keyframes to those as well.
        1. Click in frame 1 of the shadow layer.
        2. Select the free-transform tool (Q).
        3. Make the flattened circle a quite a bit wider and a little bit taller.
        4. Then, open up the properties bar.
        5. Click where it says color and choose advanced.
        6. Click on the settings button.
        7. Change the alpha setting on the bottom left of the window that opens up so that it is 15%.
        8. Choose the selection tool (V) and select the now lighter oval on the stage by clicking on it one time.
        9. Copy (ctrl-C).
      15. Click in frame 21 of hte shadow layer, add a blank keyframe (F7), and paste-in-place (ctrl-shift-V).
      16. Add motion tweens between frames 1 & 10 and frames 12 & 21 of the shadow layer.
      17. Click in frame 11 of hte shadow layer, choose the free-transform tool (Q), and make the shadow as wide as the ball.