Making An Animation Using Keyframes:

First, you have to draw the original shape you want to animate on the stage (the white area). This will be the first frame in your animation. When you are done, press Insert > Timeline > Keyframe (or push F6). Now, slightly change your shape (for example, move it slightly, or use the Free Transform Tool (Q) to modify the shape). Then insert another keyframe, and change you shape again. Repeat this until your animation is complete. You can press Control > Test Movie (or push ctrl + enter) to view your animation.

Making An Animation Using A Shape Tween:

A shape tween is used to blend one shape into another. It can also blend other factors of shapes together including color, size, position and alpha (transparency). To use a shape tween, you first have to create the first frame of your animation. Next, on the timeline, click on frame 50 (you can use any frame, but for the purposes of this tutorial, i will use frame 50), and create a new keyframe (F6). On this keyframe draw the last frame of your animation. Now, click on any frame on the timeline in between your two keyframes. On the Properties Inspector on the bottom of the screen, you should see a Tween option, with a drop-down menu. Select shape from the list.

Your time line should now look like the one shown below:

Your shape tween animation is now complete! You can press Control > Test Movie (or ctrl + enter) to view it.

Making an animation using a motion tween:

A motion tween is used to move a movie clip from one place to another. You can move the movie clip along a set path (called a motion guide), and make it rotate a custom number of times. First, you need to start by creating the first frame of your animation (see above). Now, you use the Selection Tool (V) to select what you have just drawn, and press Modify > Convert to Symbol (or push F8). Type in a suitable name to the box that comes up (e.g. tween_shape), and make sure "Movie clip" is selected as the type. Also, make sure the registration is set to center. It should look like the box shown below.

Next, on the timeline, click on frame 50 (again, you can use any frame, but I will use 50), and create a new keyframe (F6). Now, drag the shape you drew on the first frame (now a movie clip), to where you want it to move to in the animation. Just as you did in the shape tween, click on any frame in between your keyframes, and select Motion as the tween option in the properties inspector. Your timeline should now look the same as the timeline for the shape tween shown above, except the frames on the timeline should be a slightly different color. If you test your movie now (ctrl + enter), your movie clip should move from its position in the first frame, to its position in the last frame.

You can now do a few things to make it more interesting. If you click on any frame in between your keyframes on your timeline, and then look at the property inspector, there are a number of options here that you can use, including: rotations (make the shape rotate while it moves), easing (makes the shape accelerate while it moves, instead of moving at a flat speed), and the option to orient the shape to a path. We will look at this latter option in more detail.

Orienting A Motion Tween To A Path:

Orienting a motion tween to a path allows you to make whatever is in your tween (i.e. your movie clip) move along a certain path, that you can draw. To do this, right click on the layer that has your motion tween on it, and select "Add Motion Guide". Now, using the pen tool, brush tool, line tool, or similiar, draw a path for your movie clip to follow. Here's the path i drew for my movie clip:

Now, if you click anywhere on your motion tween in the timeline, you need to check the box that says "Orient to path", and also checking the box that says "Snap" may help. Next, you have to click on the first frame in your timeline, and drag your movie clip to the "start" position of your motion guide. Make sure you get the center of the movie clip as close to the line as possible. You then have to click on the last frame, and drag your movie clip to the "end" position on your motion tween. If you now test your movie (ctrl + enter), your movie clip should follow your motion guide! Hint: if you click the dot beneath the eye logo next to the motion guide layer, you can make the motion guide "invisible".

Improving The Quality Of Your Animations

You may find that your animations jolt and lag a little. This is because the animation has a low frame rate (12 frames per second by default). If you increase the fps, your animation will run much more smoothly. You can change the fps by double-clicking where it says "12.0 fps" beneath the timeline.

Also, when playing your animation, it will continuously loop. I think that this can ruin the animation, so here are two ways to solve this problem: You can make the animation's first and last frames the same, so that in one play, the animation makes a full circle.. in other words, where continuously looped, you cant tell where the start and end of the animation is. Or, alternatively, if you click on the last frame of your animation, you could push F9 (which opens the actions panel), and paste this code:

Stop();

You can now push F9 to close the actions panel. If you test your movie now (ctrl + enter), you will see that your animation only plays once, and then stops.

And that's about it for this tutorial! Don't forget that you can mix and match all of these forms of animation in flash. Have fun!

This is my first ever tutorial, so any comments or suggestions would be welcome, as they would help me improve future tutorials! Thanks!

LAYERS:

1. Open up a new flash document.
2. You will see on the time line "Layer 1":
3. A flash document is made up of layers whether it is 1 layer or 100 layers.
4. Draw a square on the stage in layer 1.
5. Rename layer 1 by double clicking on it in the timeline, rename it "BOX":
6. Create a new layer by clicking on this button:
7. A new layer will appear above the layer that you are currently on. By default, it should be "Layer 2". Drag that layer and place it underneath BOX layer and rename it "CIRCLE".
8. As the name suggests, draw a red circle in the CIRCLE layer so that it is joined together with the box like this:
9. As you can see, the circle is underneath the box. Layers that are on top will be displayed over the layers underneath it. Now, move the circle away from the box.
10. You will see that the circle hasn't been cut off by the box as it would if they were in the same layer, content on layers don't disrupt other content on other layers.
11. Make a new layer named TRIANGLE and place it underneath the circle layer.
12. Go to the tools panel and click and HOLD the rectangle tool, another hidden tool will show up:
13. Select the PolyStar tool.
14. Down at the properties panel, select "Options":
15. Another window will come up, edit it so it looks like this:
16. Press OK and change the fill color to green.
17. In the triangle layer, draw a triangle which is partially covered by the circle like this:
18. Now, make key frames on all layers in frame 10:
19. In the first key frame of each layer, move the shape within it so the end product looks like this:
20. Now, make motion tweens with the 1st and 2nd key frame of each layer:
21. Now, test your movie.
22. You will see that all 3 shapes enter the stage and stop. That is another advantage of layers; it would be a real hassle trying to animate all 3 shapes in just one layer.
23. You might be wondering what the buttons under the layers are:
24. Obviously the first button is creating a new layer, the 2nd is making a layer guide (I won't bother explaining this to you until we need to), and the third is a button for creating a layer folder. Layer folders are for keeping layers together (like all the layers with shapes go in this folder and all layers with words in another etc). The rubbish bin on the other is for deleting layers that you don't want. To delete a layer, simply drag the layer from the time line and place it over the rubbish bin.

LAYERS IN MOVIE CLIPS:

I will be explaining layers in movie clips now; in this example we are going to make a stick figure walk (or look like it's walking).

1. Open up a new flash document.
2. Create a new symbol by going to "Insert" and then "New symbol":
3. Name the movie clip "Walking person" and press OK:
4. Movie clips and buttons can have layers as well, I will show you buttons in the next tutorial.
5. Name the current layer in the movie clip "Body".
6. Draw a vertical line anywhere on the stage, doesn't matter:
7. Select that line and look down at the properties panel:
8. Here, you can edit the width, height and position of the selected object(s).
9. Change it so it looks like this:
10. If the middle of the line aligns with the + then that's great. Otherwise, don't worry we are going to fix that.
11. Go to the “align & info & transformation” panel. If you don't have it, open it by pressing CONTROL + I:
12. Click on the "Info" tab in the panel if you haven't already and select the line using the selection tool. The panel should look a bit like this:
13. Now, this part of the panel: Is the symbol alignment, right now it is top left corner so at 0, 0 the top left corner of the symbol will align with the +.
14. Change the alignment by clicking on it, to the centre so it looks like this:
15. Now, change the Y coordinates to 0.
16. The line will now line up in the center.
17. Make a new layer named "Head" and draw a circle for a head in the head layer.
18. Move the circle so it connects with the body like this:
19. Make a new layer named “Arms” and draw arms for your stick figure as shown:
20. Create another layer for legs named “leg” but don't draw in the legs.
21. So far we made different body pieces in different layers, although they are on different layers, you can still select multiple objects on multiple layers using the selection tool but the don't interfere with other content's layers.
22. Back to making the stick figure. Create a new symbol by pressing CONTROL + F8.
23. Name it leg.
24. Draw a line with these properties and align the centre of the line with the + as I showed before:
25. Now, return to the stage and go back into the "Walking person" movie clip via the library.
26. Drag the legs movie clip that you just made from the library and place it in the legs layer and align it up with the body. You can have a movie clip inside another movie clip, but you cannot have a movie clip inside the same movie clip.
27. Select the transformation tool (Hotkey Q) and use it on the leg movie clip:
28. Now you see that white circle in the middle of the leg? Well click and drag it up to the top of the leg, this changes the center of rotation.
29. Now, go to the lower part of the leg (The 2nd back square dot) and the mouse should change into a rotating symbol, it looks a bit like this: (excuse my bad drawing)
30. Rotate it so it ends up like this:
31. Make another layer named “leg2” and place it underneath the “leg” layer. Your time line should look a bit like this:
32. Repeat steps 27-30 for the 2nd leg but rotate it the other way so the stick figure ends up like this:
33. Create a key frame in frame 5 for both of the leg layers and another key frame in frame 10.
34. Note that now you can only see the legs, we don't want that so add frames in all layers apart from the leg layers so the time line looks like this:
35. In the "Leg" layer in the 2nd key frame, rotate the leg so that it is in the position (or close to it) of the leg in the "leg2" layer:
36. Hide the "leg" layer by pressing the hide dot:
37. Now, in the "leg2" layer, rotate the leg so it was where the first leg originally was or close to it:
38. Show the "leg" layer by pressing the hide dot again. Now make motion tweens as I have shown here:
39. Now return to the stage.
40. In that one layer you have, click and drag the "Walking person" movie clip onto that layer in the top left corner of the stage and resize him using the transformation tool to make him smaller:
41. In frame 20 create a key frame.
42. In the key frame that you just made, move the stick figure so he's at the bottom right of the stage:
43. Create a motion tween between these 2 key frames.
44. Test your movie by pressing CONTROL + ENTER/RETURN.
45. Now, you have your own walking stick figure, but it looks a bit weird, so we are going to make it a bit better.
46. Close the testing screen and go into the "leg" movie clip.
47. Add a line to the end of the movie clip so it looks like an "L":
48. Now test your movie, it looks way better now.

Congratulations, you have just gained knowledge in layers and made a walking stick figure!