week 6: 10/23/06

Hi class,
If you haven't checked my links to the right side of these postings yet, do so when you have time. I just started putting them up on Sunday, compiling a list of my interests and which I think (I hope) may also interest you.

The top section contains links to art, animation, and computer oriented selections, so check them out and let me know what you think. Last night, Javier, a student in our class, gave me a new link with a fun animation. It is the top item, and I welcome any other ideas. If you have any suggestions of animations, or interesting computer art or designs, please let me know. The second section contains links to news and politics, another interest of mine; and, this being an election year (only 2 weeks away), they contain some timely information for us when it comes to voting. And finally, the last selection contains links to my other class blogs. Check those out too if you want.

Although I was a bit disappointed in the number of students who brought homework to class yesterday, I was very happy with what I did see. It seems you guys have a pretty good handle on the whole storyboard thing, and know pretty much what to do (you just have to sit down and do it!). This is a different situation than in semesters past. It has normally been quite difficult for students to grasp in the past, but you guys really seem to get it. For those of you, however, who are having trouble, take a look at the storyboards of your classmates to get ideas or a better understanding. There are a few very nice ones. So please class, don't take these things lightly. We will be using them every week starting the second half of the semester when we really get into creating our animations, which I am very eager to see.

1. TOPICS:
   
   • LINK   Movie-Clips versus Graphics: Dynamic versus Static;
     
   • LINK   Creating a Movie-Clip Symbol;
     
   • LINK   Nesting Symbols: Graphic Symbols within Movie-Clip Symbols;
     
   • LINK   Animating a Movie-Clip Symbol: Shining Star;
     
   • LINK   Animating a Movie-Clip Symbol: Floating Note;
     
   
   
2. HOMEWORK: Using Pencil and Paper, please use the "Hey Diddle, Diddle!" script to continue drawing your Storyboard.
       Please don't forget the following guidelines:
   
   • Each numbered element in the written script that I provided to you roughly corresponds to a drawing; so, for each number, you should, for the most part, draw one frame in your storyboard.
     
   • Continue work on AT LEAST the first nineteen (19) frames of the storyboard.
     
   • You may use the frame template that I provided to you in class, or, you may create your own; however, you must make certain that there are NO MORE than THREE (3) FRAMES per page. There may be fewer than three, say two (2) or even only one (1) per page, but not more.
     
   • All frames must be the SAME SIZE and SAME SHAPE.
     
   • Please NUMBER your frames and, if necessary, provide explanatory text below or around the frames.
     
   • Arrows are helpful to explain movement of objects (a bird flying across the sky or an arm moving back and forth) within a frame, or the movement of the camera itself (panning motions left or right).
     
   
    
   
3. SYMBOLS: There are three (3) different kind of symbol behaviors in Flash, but so far we have learned only about one kind, Graphic Symbols. We have used these symbol types primarily to create motion tween and to create re-usable graphics, graphics that may be used many times; however, there are many more uses for symbols, and last week's class was an introduction to another behavior type: Movie-Clip symbols.
   
   1. Movie-Clip and Graphic Symbols: The main distinction between these two types of symbols is that one is a dynamic symbol, and one is primarily a static symbol. In other words, one involves activity (animation) and interactivity, and the other involves in-activityor the lack of activity or interactivity. When a web graphic or object is dynamic, such as a movie-clip, it usually involves animation or user interactivity of some kind. Static graphics, on the other hand, are NOT usually active and NEVER interactive. They are static, still, non-moving, inactive.
      
      1. Graphic Symbols: Graphic symbols are the most basic symbol types. It is the only type that we have learned up to now, but it possesses all of the fundamental properties of symbols: they are reusable graphics, in which multiple instances of the symbol may be used without drawing more, and without adding filesize to your movie; they allow you to create motion tween animations, and they reside in the library (ctrl-L || F11). All types of symbols have these three fundamental properties, but a graphic symbol is probably the type that is used most often. As its name suggests, it is for graphics, any ordinary drawing or object that you would create in Flash. Some graphic symbols do contain animation within them; however, the vast majority will not.
         
      2. Movie-Clip Symbols: Next to graphic symbols, Movie-Clips are the most widely used type of symbol; and, in fact, for web-sites or interactive movies, they are perhaps even more widely used than graphic symbols. This type of symbol, being dynamic, often contains animation within it. Unlike simple graphic symbols, which usually contain a simple drawing of some type, movie-clips may contain within themselves entire animations. More often, however, they contain snippets of animation, brief animated sequences. Furthermore, one of the properties of movie-clips is that they may be allowed to play endlessly in a loop. As a result, those brief snippets of animation are played over and over and over again, such as an eye blinking, a raindrop falling, or a bird's wings flapping. If the sequence requires repetitive movement of some kind, then it is ideal for being placed in a movie-clip symbol. The blinking eyes here are an example:
         
         Notice that not only do the eyes blink repetitively, but they also move from side to side at about the same interval. What we have here are basically three (3) layers: an eyelid layer, an iris (colored part of eye) layer, and then the eyeball (white of eye) layer. The eyelid layer simply blinks, moving up and down; and the iris layer moves side to side. In these two layers are just two simple motion tweens. I've used the free transform tool (Q) also, to give the illusion of 3D animation, but it is really flat as a pancake 2D Flash animation. The bottom layer, the eyeball layer, does nothing, so it just has one keyframe and simply sits there at the bottom. All of this is inside a movie-clip symbol. We will cover something like this in another class, but feel try to try it on your own until then.
       
   2. Creating a Movie-Clip Symbol: Next, we will create our own movie-clip symbol. Doing this is like creating the simple graphic symbols that we have made up to now. We will start first with a drawing:
      
      1. Using the line tool (N) or the polygon tool (R - press down on the tool until the polygon shows itself, then click on options in the toolbar to select STAR) to draw a star. It may be any type of star you like, 5 points or 6 points, fat or skinny.
         
      2. Once drawn, select the selection tool (V), look closely, and select only the stroke or outline of the star.
         
      3. Now hit delete.
         
      4. Make sure the selection tool (V) is still activated, and then select the star on the stage.
         
      5. Choose convert to symbol (F8).
         
      6. Give it the name star_mc, select movieclip for behavior, and then select okay.
         
      7. Once done, it should have a blue box around it just like a graphic symbol does when it is selected.
         
       
      
   3. Nesting Symbols: The star symbol is now a movie-clip symbol; however, it is not yet animated. We must create the animation inside of the symbol with symbol-edit mode.
      
      1. As you should know, to do this we must double-click on the symbol instance on the stage.
      2. Once you do so, look in the upper left-hand corner of the stage. There, it should say Scene 1 - star_mc. This means you are in symbol-edit mode for the star symbol. If it is not there, you should try double-clicking again on the star on the stage. To proceed, you must be in symbol-edit mode.
         
      3. Now, select the selection tool (V) and select the star on the stage by double-clicking on it. Once you do so, you should be able to tell it is selected because it should have the little dots all over it.
         
      4. Eventually, we are going to put animation inside of this movie-clip symbol by creating a motion-tween. But as you can see, this star graphic has little dots all over it when it is selected, and as you know, it must have a blue box around it.
         
      5. Try not to get confused, but remember we are inside the movie-clip symbol. Try to imagine it as a completely separate movie inside the movie-clip, and if we are going to make this star into a motion tween, we need to convert it into a graphic symbol. But before we do, once again, look in the upper left-hand corner and see if it still says Scene 1 - star_mc to make sure you're still inside the symbol.
         
      6. If so, then make sure the star is selected, and then convert to symbol (F8).
         
      7. Give it the name star, select graphic and then click okay.
         
      8. Now, it should have a blue box around it when it is selected. This means you have a nested symbol. In other words, it is a symbol WITHIN a symbol. To see for yourself, double-click on the new symbol there on the stage. Then look in the upper left-hand corner again, and you should see Scene 1 - star_mc - star: the star graphic symbol is inside the star_mc movie-clip symbol which is in Scene 1 of the main movie.
         
      9. To exit symbol-edit mode, click on where it says Scene 1 in the upper left.
       
      
   4. Animating a Movie-Clip Symbol - Shining Star: Now that we have our symbols nested, a graphic symbol inside of a movie-clip symbol, we can go about creating our animated movie-clip.
      1. Select the selection tool (V) and double-click on the star on the stage to go into symbol-edit mode for the star_mc movie-clip.
         
      2. Once inside the movie-clip symbol, name the first layer star and add a second layer.
         
      3. Name the second layer shine and lock it
         
      4. Click in frame 1 of the star layer and copy (ctrl-C).
         
      5. Now lock the star layer and unlock the shine layer.
         
      6. Click in frame 1 of the shine layer and paste (ctrl-V).
         
      7. Now, click in frame 10 of the shine layer and add a keyfame (F6).
         
      8. Select the free transform tool (Q), hold onto the shift key, grab the corner of the star, and make it larger.
         
      9. After that, choose the selection tool (V) and select the star on the stage by clicking on it one time.
         
      10. Then open the properties bar, click where it says color, and set the alpha to zero.
          
      11. Now click in the timeline between the two keyframes, and add a motion tween.
          
      12. Also in the timeline, drag the shine layer so that it is below the star layer.
          
      13. Next, click in frame 10 of the star layerand extend the duration (F5).
          
      14. Finally, exit symbol-edit mode by clicking on Scene 1 in the upper left-hand corner.
          
      15. Save and test the movie, you will see your star shining over and over in an endless loop.
          
          
      
       
      
   5. Animating a Movie-Clip Symbol - Floating Note:
      
   
   

week 5: 10/16/06

Hello Everyone,
I'm sorry that this week's posting has taken so long again to arrive online; however, as I am doing the same sort of blog for all of my classes, and, since I only decided to do so in the third week, not only am I trying to keep up with my weekly postings, but I am also trying to play catch-up. So, please, just give me a week or so more and hopefully I will be able to post each class on the following day (each Tuesday for us).

In any case, I'd like to continue to remind all of you, that if you need any assistance during the week, I can be found each night on the 2^nd floor, or you can email me at one of my emails found above at the top of this page.

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 Pencil and Paper, please use the "Hey Diddle, Diddle!" script to continue drawing your Storyboard with the following guidelines:
   
   • Each numbered element in the written script that I provided to you roughly corresponds to a drawing; so, for each number, you should, for the most part, draw one frame in your storyboard.
     
   • Continue work on AT LEAST the first eleven (1) frames of the storyboard.
     
   • You may use the frame template that I provided to you in class, or, you may create your own; however, you must make certain that there are NO MORE than THREE (3) FRAMES per page. There may be fewer than three, say two (2) or even only one (1) per page, but not more.
     
   • All frames must be the SAME SIZE and SAME SHAPE.
     
   • Please NUMBER your frames and, if necessary, provide explanatory text below or around the frames.
     
   • Arrows are helpful to explain movement of objects (a bird flying across the sky or an arm moving back and forth) within a frame, or the movement of the camera itself (panning motions left or right).
     
   
    
   
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.
   
   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.
    
   
   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.
      5. Adjust the fill and stroke colors of the rectangle if you need to.
         
      
       
      
   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.
          
      
       
      
   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.
      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.
      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.
         
      
      
   
   

week 4: 10/11/06

Class, I'm very sorry for not posting this before now. What you have below is our last class (week 4) from Wednessday evening. Although it is late, I did want to say that I was overall happy with the homework from Wednesday, and that as a class you already have quite a good grasp of how to create MOTION TWEENS as demonstrated by your quizes.

Please email me if you have any questions, or post a comment yourself at the bottom of this posting if you wish to respond to the class or this blog.

See you Monday, Carter-

1. TOPICS:
   
   • LINK   more on Symbols and the Library
     
   • LINK   more with Motion Tween Animations
     
   • LINK   more on Color Gradients
     
   • LINK   more on Symbol Effects (brightness, tint, alpha) and their use in Motion Tweens,
     
   • LINK   more on Scaling Objects and their use in Motion Tweens
     
   • LINK   Easing Motion Tweens IN/OUT
     
   
   
2. HOMEWORK: Using Pencil and Paper, please use the "Hey Diddle, Diddle!" script to begin drawing your Storyboard with the following guidelines:
   
   • Each numbered element in the written script that I provided to you corresponds to a drawing; so, for each number, you should draw roughly one frame in your storyboard.
     
   • Begin work on AT LEAST the first five (5) frames of the storyboard.
     
   • You may use the frame template that I provided to you in class, or, you may create your own; however, you must make certain that there are NO MORE than THREE (3) FRAMES per page.
     
   • All frames must be the SAME SIZE and SAME SHAPE.
     
   • Please NUMBER your frames and, if necessary, provide explanatory text below or around the frames.
     
   
    
   
3. SYMBOLS and the LIBRARY: During the first four (4) weeks of class, you have been introduced to a vary 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.
         
      
       
      
   2. 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
         
      
       
      
   3. 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
          
      
       
      
   4. 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
         
      
       
      
   5. 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.
         
         
      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.
         
         
      
       
      
   6. 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
         
      
      
   
   

week 3: 10/02/06

TOPICS: Symbols and the Library, Symbol Edit Mode, Symbol Effects (brightness/tint/alpha), Motion Tweens with Symbol Effects.

HOMEWORK:
    A) Complete the homework from Week 2 (tracing Bugs Bunny) and bring to next class, Wednesday, 10/11/06.
    B) Read the 'Hey, Diddle, Diddle!' script, then sketch out on paper your initial ideas of the three main characters: the Cat, the Dog, and the Cow.

Storyboarding: links to handouts for the Mid-Term Project--a storyboard for 'Hey, Diddle, Diddle!'
        LINK -- storyboard explanation.
        LINK -- Alfred Hitchcock's "The Birds"
        LINK -- script example
        LINK -- Mid-Term Script: "Hey, Diddle, Diddle!"
        LINK -- storyboard template
        LINK -- Motion Tweens using Symbol Effects (tint).


I) Symbols and the Library:
   A) 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 would be better, such as the name Triangle for the symbol.
      5) Select Graphic for behavior and then select Okay.

   B) Symbols and Symbol Instances:
      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.***

   C) 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.

   D) 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).

   E) Modifying Symbols:
      1) Draw an object, such as an oval or a rectangle;
      2) Double-click on the object with the arrow tool (V) to select it;
      3) Choose F8 to convert the object into a graphic symbol;
      4) If you wish to change this object in any way after it is a group, you must choose the arrow tool (V), and then double-click on the graphic symbol—this brings you into Symbol-Edit Mode.
      5) Now you may edit, alter, add-to, subtract-from the object(s), or otherwise change it in anyway you wish.
      6) once 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 NAME beside it. You must click on Scene 1 to exit the symbol and return to the main movie.

   F) Breaking-Apart Symbols:
      1) choose the arrow tool (V);
      2) click one time on the symbol on the stage to select it;
      3) on the keyboard, select CTRL-B to break the symbol apart.
      4) once you do this, that particular graphic on the stage is no longer a Symbol Instance; however, the Symbol will remain in the library.



   G) 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 (for a discussion of this, see above at the TOP OF THIS POST--"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 the 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 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.
      8) Add a motion tween between the two keframes in frames 30 and 50 above in the timeline.
      9) Click in frame 75 in the timeline and add a 4th keyframe by select 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 5th keyframe by selecting 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 6th and final keyframe by selecting 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. Then, you should make sure that the circle is where it should be in each keyframe:
            in frame 1, it should be OFFSTAGE to the upper right corner.
            in frame 30, it should be in the UPPER LEFT CORNER;
            in frame 50, it should be in the LOWER LEFT CORNER;
            in frame 75, it should be in the LOWER RIGHT CORNER;
            in frame 95, it should be in the UPPER RIGHT CORNER;
            in 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.
      20) If you wish to add Symbol Effects (Brightness/Tint/Alpha), you can only do so in the keyframes.
      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 then 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.

week 2: 09/25/06

TOPICS: Object Transformations, Creating & Modifying Gradients, Creating & Arranging Groups, Importing Graphics.

HOMEWORK: Download and trace the image at the following link and bring to class for WEEK 4, 10/11/06:
        LINK -- to download an image from the web using the PC, simply right-click on the image and choose 'SAVE IMAGE AS' or 'SAVE FILE' from the menu.

For directions to complete this assignment, see the bottom of this week's post.


I) Object Transformations:
   A) Free-Transform Tool (Q) – once you draw an object you may modify and transform it in various ways:
      1) Rotate:
         a) choose the Arrow Tool (V) to select the object or objects you wish to modify;
         b) choose the Free Transform Tool (Q);
         c) using the mouse, 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;
         d) click, hold down, and drag in one direction or another to rotate your object.
      2) Height:
         a) choose the Arrow Tool (V) to select the object or objects;
         b) choose the Free-Transform Tool (Q);
         c) using the mouse, place the pointer near over the middle black box on top or on bottom;
         d) click, hold down, and drag up or down to increase or decrease the height of the object.
      3) Width:
         a) choose the Arrow Tool (V) to select the object or objects you wish to modify;
         b) choose the Free-Transform Tool (Q);
         c) using the mouse, place the pointer near over the middle black box on the right or left side;
         d) click, hold down, and drag right or left to increase or decrease the width of the object.
      4) Simultaneous:
         a) choose the Arrow Tool (V) to select the object or objects you wish to modify;
         b) choose the Free-Transform Tool (Q);
         c) using the mouse, place the pointer on one of the little black boxes in the corners;
         d) click, hold down, and drag in any direction to increase or decrease the width AND height of the object.
      5) Proportionally: 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:
         a) choose the Arrow Tool (V) to select the object or objects you wish to modify;
         b) choose the Free-Transform Tool (Q);
         c) using the mouse, place the pointer between any of the little black boxes until the pointer turns into two little arrows pointing in opposite directions;
         d) click, hold down, and drag in any direction to skew the angle of the object.
   B) 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: Modify >> Transform >> scale & rotate

II) Gradients—a gradient is a gradual change from one color to another. The most basic gradient must have at least 2 colors, but it may have many more:
   A) Linear Gradients—indicates a gradual change from one color to another along a straight line from one side of a shape to another or from top to bottom.
   B) Radial Gradients—indicates a gradual change from one color to another from a center point (of an oval or a circle, for example) to the outer edge. The color changes in all directions from a center point outward in all 360 degrees.
   C) Modifying Gradients—to modify a gradient, you must use the fill transform tool (F). After you have drawn a shape with a gradient as a fill, you may alter the gradient in several ways by clicking on it with the fill transform tool (F):
      1) you may rotate it;
      2) you may increase or decrease the size;
      3) and in the case of radial gradients, you may distort them.

III) 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).
   A) Creating a Group: To create a group,
      1) draw an object, an oval for example;
      2) select 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.
   B) 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.
   C) 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 diamond and the other a circle.
      1) Select the circle with the arrow tool by clicking on it once, then;
      2) do the following: Modify >> Arrange >> send backward

IV) Importing Images and Graphics:
   A) Prepare your stage: 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)Name the 1st layer 'Image' and then lock it.
     2) Add a new 2nd layer, name it 'Drawing', and then lock this one as well.
     3) Next, unlock the 'Image' layer again and select frame one in this layer.
     4) Go to the 'File' menu above and select the following: File >> Import >> Import to Stage.
     5) 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.
     6) Once again, lock the 'Image' layer and unlock the 'Drawing' layer.
     7) Select the LINE TOOL (N).
     8) Set your Stroke color temporarily to something other than black that will contrast with the image that you are going to trace over.
     9) 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.
     10) For nice clean lines, switch frequently back-and-forth from the LINE TOOL to the SELECTION TOOL.

week 1: 09/14/06

Basic Introduction to the FLASH interface:
additional tutorials online: www.flashkit.com

1. TOPICS:
   
   1. LINK   Tools & Toolbar;
      
   2. LINK   Keyboard Shortcuts;
      
   3. LINK   Selecting & Deselecting; and
      
   4. LINK   Movie Properties;
      
   
   
2. HOMEWORK: LINK   Please download the homework from this link and complete by the next class. If you do not understand, please email me (see my addresses at the top), or post a comment below.
   
   
3. INTRODUCE:
   
   1. Tools & Toolbar (those tools not mentioned will be discussed during another class):
      
      1. Arrow Tool—one of two selection tools (arrow & lasso) used to select objects onstage, offstage, and in the timeline; also used to move and modify objects.
         
      2. Line Tool—used to draw straight vertical, horizontal, or diagonal lines.
         
      3. Oval Tool—one of two shape tools (oval & rectangle) used to draw ovals and circles composed of strokes and/or fills.
         
      4. Rectangle Tool—one of two shape tools (oval & rectangle used to draw rectangles and squares composed of strokes and/or fills.
         
      5. Paintbucket Tool—used to add or change the fill of an object.
         
      6. Ink Bottle Tool—used to add or change the stroke of an object.
         
      7. Eyedropper Tool—used to select a fill color or a stroke color from an object already drawn on the stage.
         
      8. Eraser Tool—used to erase objects or parts of objects on the stage.
         
      9. Pencil Tool—used to draw irregular strokes on the stage.
         
      10. Brush Tool—used to create irregular fills on the stage.
          
      11. Lasso Tool—one of two selection tools (arrow & lasso) used to select irregular objects or shapes or partial objects onstange and offstage.
          
      12. Zoom Tool—used to get closer and make the objects on your stage appear larger, or to get further away and make the objects appear smaller.
          
      13. Hand Tool—used to move around on and offstage much as the scrollbars do on the righthand side or bottom of the stage.
          
      
      
   2. Shortcuts:
      
      1. Selection (arrow) Tool—V
         
      2. Line Tool—N
         
      3. Oval Tool—O
         
      4. Rectangle Tool—R
         
      5. Paint-Bucket Tool—K
         
      6. Ink-Bottle Tool—S
         
      7. Eye-Dropper Tool Tool—I
         
      8. Eraser Tool—E
         
      9. Pencil Tool—Y
         
      10. Brush Tool—B
          
      11. Lasso Tool—L
          
      12. Zoom Tool—Z, M
          
      13. Hand Tool—H
          
      14. Free-Transform Tool—Q
          
      15. Fill-Transform Tool—I
          
      16. Sub-Select Tool—E
          
      17. Save Movie—Ctrl-S
          
      18. Test Movie—Ctrl-Enter
          
      19. Select All—Ctrl-A
          
      20. Copy—Ctrl-C
          
      21. Cut—Ctrl-X
          
      22. Paste—Ctrl-V
          
      
      
   3. Selecting & Deselecting:
      
      1. Selecting Objects:
         
         1. one object—the most common way to select a single object is to use the arrow tool (V) and click one time on the object you wish to select.
            
         2. one shape (oval, rectangle, polygon or star)—to select an oval or a rectangle you must use the arrow tool (V) and double-click on the fill of that shape. This will select both the fill and the stroke of the object.
            
         3. additional objects (after one has already been selected)—to select additional object, or add to an existing selection, you must first select something on the stage. You may do this with the arrow tool, or some other selection tool. If there is another object that you wish to ADD to the current selection, you must hold down on the shift key while you make your additional selection (shift-click).
            
         4. everything (all present on and off the stage)—to select everything visible on and offstage, you must select all, CTRL-A.
            
         
         
      2. Deselecting Objects:
         
         1. using the mouse—select the arrow tool (V) and click on the background of the stage or offstage.
            
         2. using the keyboard—click on the escape key (ESC) on the upper-lefthand corner of your keyboard.
            
         
         
      
      
   4. Movie Properties:
      1. Stage Size—(550 x 400) by default, the size of the stage (the white rectangular area you see) is 400 pixels (the digital unit of measurement—px) in height by 550 px in width.
         
      2. Frame Rate—(12fps) by default, the rate at which you will view the frames passing from one to the next in Flash is 12fps (frames-per-second). By comparison, in film and video, the rate is usually 31fps.
         
      3. Background Color—(white) by default, the background color of the stage is white. You may change this to the color of your choice, but whatever color you decide upon will remain throughout your movie.
         
      
      
   5. Motion-Tween Animation:
      
      1. Draw something on the stage—there must be only ONE object.
         
      2. Draw something on the stage—there must be only ONE object.
         
      3. Select the object that you have drawn on the stage—make sure you select the object and all its parts, including outlines.
         
      4. Convert it into a symbol:
         
         1. select object on the stage;
            
         2. select F8 (convert to symbol) on the keyboard;
            
         3. provide a unique name to your new symbol;
            
         4. select GRAPHIC for behavior, and then OKAY;
            
      5. Once you have converted your object to a symbol, you are ready to animate—just remember not to double-click on your symbol. If you do do this by accident, simply look in the upper-left corner of your screen and select SCENE 1.
         
      6. Now, click in a new frame in the time-line above, frame 40 for example—make sure you click in the time-line and NOT in the number-line above it.
         
      7. Select F6—Add a 2nd key frame. Once you do this, you will see that you have two (2) keyframes in your timeline--those are the ones that have a little dot in them.
         
      8. Click in the second one to select it—this is the one in frame 40.
         
      9. Now, ON YOUR STAGE, move the symbol object to a new location.
         
      10. CHECK, and make certain you have done the right thing—click in frame one of your time-line and you will see that your symbol object will be in one location. Then click in the second keyframe in frame 40 and you will see that the symbol object has moved to another location. If it has not, then simply move it to a new spot ON THE STAGE.
          
      11. Finally, place your arrow BETWEEN your keyframes in the TIMELINE above and RIGHT-CLICK.
          
      12. Select, 'CREATE MOTION TWEEN'—This should turn the gray area to lavendar, and there should also be an arrow pointing to the right. If you get a dashed line then you will have to start over again.