BisectedBrioche
2008-03-12, 03:51 PM
OK, I asked if anyone would be interested in an animation tutorial. There was some interest so here we go. Before you continue I'd just like to say a few things;
Animated images signature's and avatars are not allowed on the GitP forums, so if you're reading this to find out how to make them (for this site anyway) its really a losing endevor. Of course if you want to use them in other forums then you should check the rules there.
The programs I'll be demonstrating are Macromedia Fireworks and Macromedia Flash (now known as Adobe Fireworks and Adobe Flash). The tools and techniques can be used on most other programs. As a rule: If it can export an Animated GIF then it can be used in place of Fireworks. As long as you're comfortable with the program it should be OK.
This tutorial will assume that you're already comfortable with drawing vector art in the program of your choice. If you know the difference between vector and bitmap you should be good to go.
The tutorial will be split into four parts with a few "lessons" in each. Part one will be the basics (i.e. frames and simple animation), part two will focus on the tools used in fireworks, part three will focus on animating OotS style artwork (limbs, faces, that sort of thing mostly) and part four will focus on more advanced stuff (i.e. using flash). The last lesson will not cover interactivity or sound, this tutorial will only deal with simple animations (I might change my mind if I feel up to it however).
Part one and two are below. Expect part three (A guide to animating OotS style art) this weekend or early next week.
Part One: The basics.
This section will explain....the basics. If you already know this stuff then bare with me, I'll have part two up soon.
Lesson 1 (The basic basics)
As you've probably heard from somewhere or other, an animation is made up of a series of pictures (called frames) which are shown one after another, quickly. Each image is slightly different. When your brain sees the series of images it is tricked into seeing a moving image. For example, click here (http://img147.imageshack.us/img147/6475/squaredemostillsxu9.gif) to see a series of images of a square (24 to be exact). You'll notice that in each one the square is a little more to the right. When you combine them all and play them one after another you get this (http://img147.imageshack.us/img147/8117/squaredemovg0.gif).
And that's all there is to it, to make an animation you simply have your computer show a series of images one after the other.
The framerate of most online animations tends to be 12 fps (frames per second). In other words, every second 12 images are flashed one after the other. The above gif was two seconds long, thus it contained 24 frames.
Lesson 2 (shapes)
Making a square move is one thing, changing its size, orientation or even what type of shape it is...well that's exactly the same thing! Back in the days when people had to actually draw each frame by hand they would just draw the shape differently (*shudder*). As you have the advantage of using vector based shapes (if you plan to animate an image try to make sure its made up of vector shapes and curves, you'll save yourself a lot of time and bother) you can easily rotate, transform or reshape them to your heart's content, and do so a little bit frame by frame. I'll go into more detail with this in parts two and three.
Lesson 3 (colour shifts)
Finally you will eventually want to change the colour of your shapes in the course of your animation. This can be acheived by slowly moving the colour gradient. This can be acheived by creating a rectangle, adding a gradient and then taking samples of said gradiant with the dropper tool at regular intervals, like this one (http://img187.imageshack.us/img187/8011/winggradiantrq2.jpg) I had lying around. Its then a simple case of recolouring each (vector, don't forget vector!) shape in each frame to form the fade into each colour. If you want to see that gradient "in action" as it were, then watch Celia's wings (http://img235.imageshack.us/img235/6306/animation3bl2.gif).
Part Two: Using The Animation Tools.
As I noted above the same tools described here should be in any program you use, as long as it can export animated GIFs.
Lesson 1 (The user interface)
The say an image is worth 1000 words, so here's a diagram: LINK (http://img166.imageshack.us/img166/894/fireworksdiagramxo9.gif)
Items numbers 1-4 should already be familier to you. The rest of the lessons will concentrate on 5 to 10 in detail.
Lesson 2 (Frames)
At point number 5 on the above image you can see the frame menu. This allows you to edit frames. You can add frames with item 9 and remove them with item 10. To delete a frame, click on it to highlight it and then click on "delete", to add a new frame click on new frame. If you add a new frame it always appears after the others. Finally you can change the order of the frames by clicking on one and dragging it to the apropriate place.
You can rename a frame (normally they're just called frame 1, frame 2, frame 3 and so on) by double clicking on it.
Lesson 3 (The contents of the frames)
Next to the add and delete buttons you'll notice another button (item 8). This is the distribute to frames button. If you press this while you have multiple objects selected on the canvus then it'll distribute them amoung the other frames. Try it yourself: Open a blank document, add a few frames, put a few shapes in the first, select them and then click on the button.
Now that you have some frames with various shapes on them I can also demonstrate onion skinning. This basically means that a faint image of any frames near the one you're viewing appears. You'll notice that the furthest button to the left (number 6). Clicking on this gives you a small menu. The items on the menu are as follows;
{TABLE]No onion Skinning|There is no onion skinning
Show next frame|A faint image of the next frame appears
Before and after|Shows a faint image of the frames which come before and after the one you have selected
Show all frames|Shows the contents of every frame in the animation
Custom|Lets you control how faint the "onion skinned" frames are, which frames are onion skinned and such like
Multiframed Editing|Lets you edit onion skinned frames[/TABLE]
Finally I'll explain how to duplicate a frame. Duplicating a frame allows you to create an exact copy (or several if you like) of any given frame. To do this first select the frame. Next, go to the top right hand corner of the frames window. Click on the symbol which looks like this;
http://img329.imageshack.us/img329/71/menuiconic7.gif
On the menu that comes up, click on "duplicate frame". This will bring up a box;
http://img174.imageshack.us/img174/3562/duplicateframejq3.gif
The box at the top allows you to select how many duplicates you want to make of the frame and the options below allow you to select where the duplicates are placed.
Lesson 4 (How the animation will play)
Next to the onion skinning button there is a button (item number 7). This allows you to decide how the animation loops when you export it. If a gif loops it will go back to the start and play again. You can select a number of times it will loop, no looping or just set it to "forever", meaning it'll keep looping until the image is no longer being viewed (the majority of GIFs favour the latter).
You can also have the animation pause on a frame for a moment. This is a good way of having the animation stop for a moment (for example in the final frame, before it loops again). To do this, select the frame, open the frame menu (as you did a moment ago) and select "Properties...". The number in the box is the amount of time (in 100ths of a second) that the image will wait for before moving onto the next frame. The default is 7, by increasing it you can make the frame pause for a moment.
Lesson 5 (Exporting an animation)
Exporting an animation as a gif is rather easy. Go to file > Export Preview. In the menu that comes up you'll notice a drop down menu labelled "format". Make sure this is set to "animated GIF". Now simply click on "export" and save the image.
Play around with these tools, it'll help you become familiar with them.
Part Three: Animating OotS Style Artwork.
Obviously there's technically no right way to animate, so if you think you have a better way by all means post it in this thread.
Lesson 1: Arms (and other limbs with end affecters)
The three rules of animating arms are;
The closer someone's hand is to their shoulder the more bent the arm should be.
The point at which the arm meets the character's body must be constant.
Remember the normal degree of movement afforded to limbs.
In other words, you need to remeber to simulate the joints in an arm, even in a relativly simple style like OotS art. If you look at this image (http://img248.imageshack.us/img248/6711/armexamplegoodat8.gif) you can see what I mean. As the hand (represented by a red blob) moves towards the body (represented by a blue oval) the arm bends (as your elbow would). While this image (http://img403.imageshack.us/img403/3655/armexamplepoorol1.gif) simply moves the hand and looks a little less realistic.
You'll also notice that (as you'd expect) the arm remains attached to the shoulder joint (AKA the top of the blue oval).
Finally you have to remember how a real arm moves. This isn't really too easy to describe but if you can't move your arm in that way, don't make a character move their arm that way (unless they're a non-human creature which can of course :smallwink:).
The best way to move an arm is to select the node/vector point (or whatever you want to call it) where the hand is, move it and then add the bend. Make the changes bit by bit over the frames and you'll have a smooth arm movement.
Lesson 2: The legs
Animating legs isn't too different to arms; the same rules apply. However, while arms tend to move freely, legs are supporting the character's body. This means that you must take into account the gait (i.e. method of walking) of the character. The standard walking gait (http://img141.imageshack.us/img141/852/walkinggaitai0.gif) is simple; one leg moves in front of the other, is placed on the ground and then the next leg moves in front of it. When running both feet will be off the ground at two and the character will be making longer strides. For other walking gaits I suggest you consult this wikipedia article (http://en.wikipedia.org/wiki/Human_gait).
Lesson 3: Faces
The simplist way to show expressions in OotS style is obviously just to switch between them, like this;
http://img176.imageshack.us/img176/149/happyshockedqx9.gif
However, it is possible to get a better effect by animating the transition, like this;
http://img507.imageshack.us/img507/302/happyshockedfluidxq6.gif
Unfortunatly I don't have the time or space to list every possible expression and the best way to transition in and out of it but here are some general rules;
When moving a mouth from a neutral expression (i.e. a strait line) make it a little longer than the curved (that is, curved up or down to represent a sad or happy mouth) line in the next frame.
When moving from an open to a closed mouth, try drawing a polygon with the two lines touching and expanding it.
When bringing in lines around the eyes, make them small and then expand them.
Bring in a "blush" with a gradiant effect (see part 1 lesson three).
These aren't the only way to animate OotS style art, so by all means experiment and choose different methods of animation.
Animated images signature's and avatars are not allowed on the GitP forums, so if you're reading this to find out how to make them (for this site anyway) its really a losing endevor. Of course if you want to use them in other forums then you should check the rules there.
The programs I'll be demonstrating are Macromedia Fireworks and Macromedia Flash (now known as Adobe Fireworks and Adobe Flash). The tools and techniques can be used on most other programs. As a rule: If it can export an Animated GIF then it can be used in place of Fireworks. As long as you're comfortable with the program it should be OK.
This tutorial will assume that you're already comfortable with drawing vector art in the program of your choice. If you know the difference between vector and bitmap you should be good to go.
The tutorial will be split into four parts with a few "lessons" in each. Part one will be the basics (i.e. frames and simple animation), part two will focus on the tools used in fireworks, part three will focus on animating OotS style artwork (limbs, faces, that sort of thing mostly) and part four will focus on more advanced stuff (i.e. using flash). The last lesson will not cover interactivity or sound, this tutorial will only deal with simple animations (I might change my mind if I feel up to it however).
Part one and two are below. Expect part three (A guide to animating OotS style art) this weekend or early next week.
Part One: The basics.
This section will explain....the basics. If you already know this stuff then bare with me, I'll have part two up soon.
Lesson 1 (The basic basics)
As you've probably heard from somewhere or other, an animation is made up of a series of pictures (called frames) which are shown one after another, quickly. Each image is slightly different. When your brain sees the series of images it is tricked into seeing a moving image. For example, click here (http://img147.imageshack.us/img147/6475/squaredemostillsxu9.gif) to see a series of images of a square (24 to be exact). You'll notice that in each one the square is a little more to the right. When you combine them all and play them one after another you get this (http://img147.imageshack.us/img147/8117/squaredemovg0.gif).
And that's all there is to it, to make an animation you simply have your computer show a series of images one after the other.
The framerate of most online animations tends to be 12 fps (frames per second). In other words, every second 12 images are flashed one after the other. The above gif was two seconds long, thus it contained 24 frames.
Lesson 2 (shapes)
Making a square move is one thing, changing its size, orientation or even what type of shape it is...well that's exactly the same thing! Back in the days when people had to actually draw each frame by hand they would just draw the shape differently (*shudder*). As you have the advantage of using vector based shapes (if you plan to animate an image try to make sure its made up of vector shapes and curves, you'll save yourself a lot of time and bother) you can easily rotate, transform or reshape them to your heart's content, and do so a little bit frame by frame. I'll go into more detail with this in parts two and three.
Lesson 3 (colour shifts)
Finally you will eventually want to change the colour of your shapes in the course of your animation. This can be acheived by slowly moving the colour gradient. This can be acheived by creating a rectangle, adding a gradient and then taking samples of said gradiant with the dropper tool at regular intervals, like this one (http://img187.imageshack.us/img187/8011/winggradiantrq2.jpg) I had lying around. Its then a simple case of recolouring each (vector, don't forget vector!) shape in each frame to form the fade into each colour. If you want to see that gradient "in action" as it were, then watch Celia's wings (http://img235.imageshack.us/img235/6306/animation3bl2.gif).
Part Two: Using The Animation Tools.
As I noted above the same tools described here should be in any program you use, as long as it can export animated GIFs.
Lesson 1 (The user interface)
The say an image is worth 1000 words, so here's a diagram: LINK (http://img166.imageshack.us/img166/894/fireworksdiagramxo9.gif)
Items numbers 1-4 should already be familier to you. The rest of the lessons will concentrate on 5 to 10 in detail.
Lesson 2 (Frames)
At point number 5 on the above image you can see the frame menu. This allows you to edit frames. You can add frames with item 9 and remove them with item 10. To delete a frame, click on it to highlight it and then click on "delete", to add a new frame click on new frame. If you add a new frame it always appears after the others. Finally you can change the order of the frames by clicking on one and dragging it to the apropriate place.
You can rename a frame (normally they're just called frame 1, frame 2, frame 3 and so on) by double clicking on it.
Lesson 3 (The contents of the frames)
Next to the add and delete buttons you'll notice another button (item 8). This is the distribute to frames button. If you press this while you have multiple objects selected on the canvus then it'll distribute them amoung the other frames. Try it yourself: Open a blank document, add a few frames, put a few shapes in the first, select them and then click on the button.
Now that you have some frames with various shapes on them I can also demonstrate onion skinning. This basically means that a faint image of any frames near the one you're viewing appears. You'll notice that the furthest button to the left (number 6). Clicking on this gives you a small menu. The items on the menu are as follows;
{TABLE]No onion Skinning|There is no onion skinning
Show next frame|A faint image of the next frame appears
Before and after|Shows a faint image of the frames which come before and after the one you have selected
Show all frames|Shows the contents of every frame in the animation
Custom|Lets you control how faint the "onion skinned" frames are, which frames are onion skinned and such like
Multiframed Editing|Lets you edit onion skinned frames[/TABLE]
Finally I'll explain how to duplicate a frame. Duplicating a frame allows you to create an exact copy (or several if you like) of any given frame. To do this first select the frame. Next, go to the top right hand corner of the frames window. Click on the symbol which looks like this;
http://img329.imageshack.us/img329/71/menuiconic7.gif
On the menu that comes up, click on "duplicate frame". This will bring up a box;
http://img174.imageshack.us/img174/3562/duplicateframejq3.gif
The box at the top allows you to select how many duplicates you want to make of the frame and the options below allow you to select where the duplicates are placed.
Lesson 4 (How the animation will play)
Next to the onion skinning button there is a button (item number 7). This allows you to decide how the animation loops when you export it. If a gif loops it will go back to the start and play again. You can select a number of times it will loop, no looping or just set it to "forever", meaning it'll keep looping until the image is no longer being viewed (the majority of GIFs favour the latter).
You can also have the animation pause on a frame for a moment. This is a good way of having the animation stop for a moment (for example in the final frame, before it loops again). To do this, select the frame, open the frame menu (as you did a moment ago) and select "Properties...". The number in the box is the amount of time (in 100ths of a second) that the image will wait for before moving onto the next frame. The default is 7, by increasing it you can make the frame pause for a moment.
Lesson 5 (Exporting an animation)
Exporting an animation as a gif is rather easy. Go to file > Export Preview. In the menu that comes up you'll notice a drop down menu labelled "format". Make sure this is set to "animated GIF". Now simply click on "export" and save the image.
Play around with these tools, it'll help you become familiar with them.
Part Three: Animating OotS Style Artwork.
Obviously there's technically no right way to animate, so if you think you have a better way by all means post it in this thread.
Lesson 1: Arms (and other limbs with end affecters)
The three rules of animating arms are;
The closer someone's hand is to their shoulder the more bent the arm should be.
The point at which the arm meets the character's body must be constant.
Remember the normal degree of movement afforded to limbs.
In other words, you need to remeber to simulate the joints in an arm, even in a relativly simple style like OotS art. If you look at this image (http://img248.imageshack.us/img248/6711/armexamplegoodat8.gif) you can see what I mean. As the hand (represented by a red blob) moves towards the body (represented by a blue oval) the arm bends (as your elbow would). While this image (http://img403.imageshack.us/img403/3655/armexamplepoorol1.gif) simply moves the hand and looks a little less realistic.
You'll also notice that (as you'd expect) the arm remains attached to the shoulder joint (AKA the top of the blue oval).
Finally you have to remember how a real arm moves. This isn't really too easy to describe but if you can't move your arm in that way, don't make a character move their arm that way (unless they're a non-human creature which can of course :smallwink:).
The best way to move an arm is to select the node/vector point (or whatever you want to call it) where the hand is, move it and then add the bend. Make the changes bit by bit over the frames and you'll have a smooth arm movement.
Lesson 2: The legs
Animating legs isn't too different to arms; the same rules apply. However, while arms tend to move freely, legs are supporting the character's body. This means that you must take into account the gait (i.e. method of walking) of the character. The standard walking gait (http://img141.imageshack.us/img141/852/walkinggaitai0.gif) is simple; one leg moves in front of the other, is placed on the ground and then the next leg moves in front of it. When running both feet will be off the ground at two and the character will be making longer strides. For other walking gaits I suggest you consult this wikipedia article (http://en.wikipedia.org/wiki/Human_gait).
Lesson 3: Faces
The simplist way to show expressions in OotS style is obviously just to switch between them, like this;
http://img176.imageshack.us/img176/149/happyshockedqx9.gif
However, it is possible to get a better effect by animating the transition, like this;
http://img507.imageshack.us/img507/302/happyshockedfluidxq6.gif
Unfortunatly I don't have the time or space to list every possible expression and the best way to transition in and out of it but here are some general rules;
When moving a mouth from a neutral expression (i.e. a strait line) make it a little longer than the curved (that is, curved up or down to represent a sad or happy mouth) line in the next frame.
When moving from an open to a closed mouth, try drawing a polygon with the two lines touching and expanding it.
When bringing in lines around the eyes, make them small and then expand them.
Bring in a "blush" with a gradiant effect (see part 1 lesson three).
These aren't the only way to animate OotS style art, so by all means experiment and choose different methods of animation.