Flash Tutorial 6: Layers

In this tutorial, I will be talking about layers and their advantages. Yes I know these tutorials are boring but in the near future we will be making cool stuff, but first we need to know the basics.

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!