There are good ways to use Flash animation tools and bad ways. We will begin to explore both of these so that you learn the difference and can recognize the pitfalls. While we are doing this you must keep the old CGI adage in mind: Garbage In: Garbage Out. GIGO! In other words, do not expect the computer to somehow make the junk you put into it look beautiful. It is only a tool and cannot work magic. But it is a powerful tool, and it is a tool that can make you look like a magician if you learn to use it correctly.
Here now for you edification it a brief discussion of a few terms in Flash animation jargon...
First, I must go no further without explaining what a "Symbol" is. Or, I should say can be. A symbol is a graphic element that you can save and use again and again. A symbol can be a simple static graphic, an animated cycle, a movie clip and a few other things that we will ignore for now. Simplifying this a bit: it means is that if you use the paint tools to create a static graphic, this can become a symbol. If you want to make an animated cycle, that too can become a symbol, which you can then use the tools in flash to manipulate in all sorts of ways....
For instance. If I make an animated cycle of a snow flake falling, I only need to animate that cycle once and then I can use the tools in Flash to move it scale it and change its color, and I can duplicate it all over the screen numerous times to get a flurry of animation going. We will get back to Symbols later, let's discuss tweening now.
The first thing you should know is that there are three types of tweening in Flash
- Classic Tweening
- Motion Tweening
- Shape Tweening
Please note: that there is also a form of animation called inverse kinematics. This is also considered a form of tweening by some. It is similar to the bones tool that you may have used in Toon Boom or Harmony. For now we will not discuss this and it remains to be seen if Adobe is going to keep the inverse kinematics tools around.
Classic Tweening is, in terms of Flash animation, not the same thing as the kind of tweening that you do on paper; Flash provides some automation in this sort of tweening that is controlled by where you choose to place keyframes. [Remember when I use the term "keyframe" in this blog, I mean it in the sense that Flash uses it...when I speak of the traditional kind I will use the term "Keys."] You place a keyframe and then a number of frames later place another keyframe and every frame between these becomes a tween created for you by Flash.
Horrors! you say. A computer does not know how to animate. It is true that what you will get in this case is a very mechanical even set of changes to your images, position shape, etc. However, once this is done you can manipulate these to adjust the timing and make it look rather nice. I tend to be the sort of person that prefers to tween by drawing on every frame. Still, I insist that there are times when the automated tools can make quick and neat work of things that are not important, leaving your time and effort for the areas you really want to shine.
Motion Tweening is using a static symbol and manipulating it by moving it along a path (which you determine) for a defined set of frames (which you also determine). I'll explain how to do this shortly.
Shape Tweening is what you might imagine it to be: you set up a shape and define what that shape will be at the end of a set of frames. For instance you could very easily change a circle into a square over the span of 24 frames (I will explain this in a later post to this blog).
For a start with this automated animation we will start with something very simple, of course: a bouncing ball. [Hey look, I know you are all advanced students, so make what ever you want for this symbol, but if you really just want a quick and dirty start to this follow my steps listed here.]
1) First create a new Flash file. Call it what ever you like, but bouncing ball might work well since it is clearly descriptive. Note: you can open up a grid to help you position things by going to "View" in the menu bar and clicking "Grid" then "Show Grid."
2) Select the first frame of the timeline then use the oval tool to draw a circle in the lower third of the stage. For a clear view of the frame contents of the frames go to the timeline's panel menu and choose "Preview in Context."You can also use the Panel Menu to to change the size of the frames in the timeline– play with it to see how it works. [The panel menu is the little square of lines with the tiny down arrow on top left corner of the timeline.]
3) Select frame 3 on the timeline and from the top menu bar chose Insert > Timeline > Keyframe, this copies the ball from frame one across all the frames up to frame 4. with frame 4 still selected, reposition the ball on the stage into a position half way between the top of the stage and where it is now.
4) Now follow the same instructions as the above step using frame 5 then position the ball near the top of the stage.
5) Now click in frame 7 and position this instance of the ball where it was in frame 3. Select frame 9 and position the ball where it was in frame 1. [Tip: you can open the onionskin tool at the bottom of the timeline window to help you see where the ball was in frame 1 or you could turn on "snapping" in the "View" menu of the main menu bar.]
6) Now press the play and loop icons at the bottom of the timeline window. Viola! a very rough ball bouncing on 2s. You can do this on every frame and for a longer durations and really fineness the ball's timing.
Of course this is really, really rough animation, but we did it this way to show you how to use the tools. Now that you have the idea you can practice this one a bit by really trying to do a serious ball bounce.
Here is how to get a copy of the flash file I made of a slightly less rough bounce for you to look at: email me and ask or pick up a copy in the lab on the 7th floor. (I'm off the main animation network right now for some reason, I will find a nice place to store it there for pick-up too.)
Cheers and have a fun weekend animating. See you on campus on Monday!
Horrors! you say. A computer does not know how to animate. It is true that what you will get in this case is a very mechanical even set of changes to your images, position shape, etc. However, once this is done you can manipulate these to adjust the timing and make it look rather nice. I tend to be the sort of person that prefers to tween by drawing on every frame. Still, I insist that there are times when the automated tools can make quick and neat work of things that are not important, leaving your time and effort for the areas you really want to shine.
Motion Tweening is using a static symbol and manipulating it by moving it along a path (which you determine) for a defined set of frames (which you also determine). I'll explain how to do this shortly.
Shape Tweening is what you might imagine it to be: you set up a shape and define what that shape will be at the end of a set of frames. For instance you could very easily change a circle into a square over the span of 24 frames (I will explain this in a later post to this blog).
For a start with this automated animation we will start with something very simple, of course: a bouncing ball. [Hey look, I know you are all advanced students, so make what ever you want for this symbol, but if you really just want a quick and dirty start to this follow my steps listed here.]
1) First create a new Flash file. Call it what ever you like, but bouncing ball might work well since it is clearly descriptive. Note: you can open up a grid to help you position things by going to "View" in the menu bar and clicking "Grid" then "Show Grid."
2) Select the first frame of the timeline then use the oval tool to draw a circle in the lower third of the stage. For a clear view of the frame contents of the frames go to the timeline's panel menu and choose "Preview in Context."You can also use the Panel Menu to to change the size of the frames in the timeline– play with it to see how it works. [The panel menu is the little square of lines with the tiny down arrow on top left corner of the timeline.]
3) Select frame 3 on the timeline and from the top menu bar chose Insert > Timeline > Keyframe, this copies the ball from frame one across all the frames up to frame 4. with frame 4 still selected, reposition the ball on the stage into a position half way between the top of the stage and where it is now.
4) Now follow the same instructions as the above step using frame 5 then position the ball near the top of the stage.
5) Now click in frame 7 and position this instance of the ball where it was in frame 3. Select frame 9 and position the ball where it was in frame 1. [Tip: you can open the onionskin tool at the bottom of the timeline window to help you see where the ball was in frame 1 or you could turn on "snapping" in the "View" menu of the main menu bar.]
6) Now press the play and loop icons at the bottom of the timeline window. Viola! a very rough ball bouncing on 2s. You can do this on every frame and for a longer durations and really fineness the ball's timing.
Of course this is really, really rough animation, but we did it this way to show you how to use the tools. Now that you have the idea you can practice this one a bit by really trying to do a serious ball bounce.
Here is how to get a copy of the flash file I made of a slightly less rough bounce for you to look at: email me and ask or pick up a copy in the lab on the 7th floor. (I'm off the main animation network right now for some reason, I will find a nice place to store it there for pick-up too.)
Cheers and have a fun weekend animating. See you on campus on Monday!
