Timeline
OK, so you've gotten slightly accustomed to your Flash workspace, made your own moving blob animation, but the finer points
of the program are still foggy for you. This second tutorial will explain the Timeline for you- an absolutely in making
Flash movies and programs. The things I will cover in this tutorial are:
-What the Timeline is and what it does
-Layers and layer folders
-Frames
-Keyframes
-Adding and Removing Frames
-Copying and pasting frames
OK, so lets get started. What is a timeline? The Timeline is basically the "movie control center." Its where you have access to all you're pictures, what they do, when they do it, and so fourth. The left space is where the layers are stored and the right space is for control of your actual movie. Understnad? Good. Now I will explain layers and layer folders.
You may notice if you have Flash open that on the timeline you have "Layer 1." Every new Flash movie has the default "Layer 1." You can change the name of the layer by doube clicking it and typing a new name in. I reccommend doing this so you don't have to remember what pictures are on what layer. What a layer does, is seperates each picture so that they can each move and be sued seperatly. Sounds confusing, I know, but its not. For anyone who has used any program such as Photoshop you know how layers work, if not- let me try and show you.
Say you want to draw two blobs of the same color, and you want the two blobs to be completly seperate. On "Layer 1" take your paintbrush and draw two seperate blobs. Now pretend like you wanted to move on blob on top of the other. Lay it on the other blob. After you lay it on the other blob, click away so neither blob is selected, and click your blob again. Notice how they have combined into one blob? Now make a new layer and on it draw a new blob of the same color as the other one. Now move the blob on top of the other blob, deselect it and click to move it again. Magically the blobs have STAYED SEPERATE! This is because they are on two seperate layers. Its important that if you have two different pictures they are going to move and be interactive in two different ways, that they be on seperate layers. OK, so hopefully you have a good understanding of layers. Layer folders are simple. All a layer folder is is a grouping layers. You can click the new folder icon under your list of layers to add one and you see a folder has appeared. You can drag your layers into the folder and open and close the folder for easy access. All a layer folder does is let you hide layers if you aren't using them at the moment. You should only use them if you have ridiculous amounts of layers and they are making your work slower. Now lets move on to the action of your movie, understanding frames and keyframes.
What is a frame? I will define a frame as just a piece of your movie. Or the building blocks of your movie if you are the cliche type. The way animatin works is each frame is run together continously, and on each frame yours objects are moved or slightly changed. When each frame is run together they add the look of motion when things change. Believe it or not, the pictures you see when you watch your favorite Homestarrunner cartoon aren't moving, its just a lot of individual frames run together in a string.
Each frame when it is completly empty is symbolized by a white frame. They are in the right half of the timeline, and have numbers in incrememnts of 5 above them (this is used for easy reference). When a frame has an object on it, it will be gray, when there is a motion tween added to the frame it will be blue with an arrow in it, and if it has a shape tween in it the frame will be green with an arrow. If you don't know what those two things are don't worry about it, just know that they exist and in your future Flash work you will use them.
OK, so you understand what a frame is, but knowing that is pretty pointless if you don't know what a keyframe is. Keyframes are what make frames work. A keyframe can be thought of as a marker, but be careful because these "markers" are necessary to adding motion to your movies. Let me explain how they work. Anytime you want an object to change, whether it be position, color, transparency, ANYTHING, you have to add a keyframe. So of course your first frame where you introduce an object for the first time has to be a keyframe, and any time the object changes after that has to be a keyframe.
So if you are making a movie using frame by frame action each frame will be a keyframe where the object does motion or changes shape. If you are using a tween however, you only have to have a keyframe on the first and last frames as a tween, because Flash will take care of it all. The only frames that you are changing ar the first and last, so thats where you need your keyframe. A keyframe is represented by a frame with a black dot in the middle.
The other important thing you need to know about frames and keyframes is, because a keyframe is needed everytime an object changes, if you move an object in the middle of two keyframes it will change its position in the first keyframe, and all the keyframes in between. Also, if you have a keyframe on frame 1, and you add a keyframe on frame 10, all the frames in between will automatically fill up.
Adding and removing frames is a simple process but I often see people making mistakes. You add a frame by right clicking where you want to add a frame and click insert frame. If you insert a frame 10 frames after your last frame, all the frames in between will automatically fill up. If you add a frame in the middle of a group of frames, it will add a frame on the end. The way you remove frames is by right clicking the frame and clicking "Remove Frame." The way to make a frame blank is by right clicking the frame and clicking "Clear Frame." You cannot however remove keyframes. What you must first do is right click the frame and click "Clear Keyframe" and that will turn the keyframe into just a regular frame, and then you can remove the frame using the previously mentioned method. Highlight a group of 5 frames and right clicking them and clicking "Insert Frame" will insert 5 frames into the group of frames. (A group of frames is defined as all the frames in between two keyframes).
Another important step is Copying and Pasting frames. If you want to copy a frame, click it, and right click "Copy Frame." Then to paste it you right click on the frame you wish to paste it on and click "Paste Frame." Seems easy enough. Here are a few things to remember. When you paste a frame it pastes the contents of the frame for whichever layer you pasted it from. It also pastes directly over the frame and does not create a new frame. If you wish to paste frames from mulitple layers in order to paste an entire scene, highlight staight down all the layers of the frame you want to paste, then paste where you want them. You don't have to highlight all the frames you want to paste them to but you should do this anyway to avoid any confusions.
One thing when working with Layers and Frames that you have to always remember is that each layer has its own set of frames. So if you want a layer to be shown in a frame, you have to make sure it has a frame there- also make sure you are adding and tweening objects on the right layer.
-Layers and layer folders
-Frames
-Keyframes
-Adding and Removing Frames
-Copying and pasting frames
OK, so lets get started. What is a timeline? The Timeline is basically the "movie control center." Its where you have access to all you're pictures, what they do, when they do it, and so fourth. The left space is where the layers are stored and the right space is for control of your actual movie. Understnad? Good. Now I will explain layers and layer folders.
You may notice if you have Flash open that on the timeline you have "Layer 1." Every new Flash movie has the default "Layer 1." You can change the name of the layer by doube clicking it and typing a new name in. I reccommend doing this so you don't have to remember what pictures are on what layer. What a layer does, is seperates each picture so that they can each move and be sued seperatly. Sounds confusing, I know, but its not. For anyone who has used any program such as Photoshop you know how layers work, if not- let me try and show you.
Say you want to draw two blobs of the same color, and you want the two blobs to be completly seperate. On "Layer 1" take your paintbrush and draw two seperate blobs. Now pretend like you wanted to move on blob on top of the other. Lay it on the other blob. After you lay it on the other blob, click away so neither blob is selected, and click your blob again. Notice how they have combined into one blob? Now make a new layer and on it draw a new blob of the same color as the other one. Now move the blob on top of the other blob, deselect it and click to move it again. Magically the blobs have STAYED SEPERATE! This is because they are on two seperate layers. Its important that if you have two different pictures they are going to move and be interactive in two different ways, that they be on seperate layers. OK, so hopefully you have a good understanding of layers. Layer folders are simple. All a layer folder is is a grouping layers. You can click the new folder icon under your list of layers to add one and you see a folder has appeared. You can drag your layers into the folder and open and close the folder for easy access. All a layer folder does is let you hide layers if you aren't using them at the moment. You should only use them if you have ridiculous amounts of layers and they are making your work slower. Now lets move on to the action of your movie, understanding frames and keyframes.
What is a frame? I will define a frame as just a piece of your movie. Or the building blocks of your movie if you are the cliche type. The way animatin works is each frame is run together continously, and on each frame yours objects are moved or slightly changed. When each frame is run together they add the look of motion when things change. Believe it or not, the pictures you see when you watch your favorite Homestarrunner cartoon aren't moving, its just a lot of individual frames run together in a string.
Each frame when it is completly empty is symbolized by a white frame. They are in the right half of the timeline, and have numbers in incrememnts of 5 above them (this is used for easy reference). When a frame has an object on it, it will be gray, when there is a motion tween added to the frame it will be blue with an arrow in it, and if it has a shape tween in it the frame will be green with an arrow. If you don't know what those two things are don't worry about it, just know that they exist and in your future Flash work you will use them.
OK, so you understand what a frame is, but knowing that is pretty pointless if you don't know what a keyframe is. Keyframes are what make frames work. A keyframe can be thought of as a marker, but be careful because these "markers" are necessary to adding motion to your movies. Let me explain how they work. Anytime you want an object to change, whether it be position, color, transparency, ANYTHING, you have to add a keyframe. So of course your first frame where you introduce an object for the first time has to be a keyframe, and any time the object changes after that has to be a keyframe.
So if you are making a movie using frame by frame action each frame will be a keyframe where the object does motion or changes shape. If you are using a tween however, you only have to have a keyframe on the first and last frames as a tween, because Flash will take care of it all. The only frames that you are changing ar the first and last, so thats where you need your keyframe. A keyframe is represented by a frame with a black dot in the middle.
The other important thing you need to know about frames and keyframes is, because a keyframe is needed everytime an object changes, if you move an object in the middle of two keyframes it will change its position in the first keyframe, and all the keyframes in between. Also, if you have a keyframe on frame 1, and you add a keyframe on frame 10, all the frames in between will automatically fill up.
Adding and removing frames is a simple process but I often see people making mistakes. You add a frame by right clicking where you want to add a frame and click insert frame. If you insert a frame 10 frames after your last frame, all the frames in between will automatically fill up. If you add a frame in the middle of a group of frames, it will add a frame on the end. The way you remove frames is by right clicking the frame and clicking "Remove Frame." The way to make a frame blank is by right clicking the frame and clicking "Clear Frame." You cannot however remove keyframes. What you must first do is right click the frame and click "Clear Keyframe" and that will turn the keyframe into just a regular frame, and then you can remove the frame using the previously mentioned method. Highlight a group of 5 frames and right clicking them and clicking "Insert Frame" will insert 5 frames into the group of frames. (A group of frames is defined as all the frames in between two keyframes).
Another important step is Copying and Pasting frames. If you want to copy a frame, click it, and right click "Copy Frame." Then to paste it you right click on the frame you wish to paste it on and click "Paste Frame." Seems easy enough. Here are a few things to remember. When you paste a frame it pastes the contents of the frame for whichever layer you pasted it from. It also pastes directly over the frame and does not create a new frame. If you wish to paste frames from mulitple layers in order to paste an entire scene, highlight staight down all the layers of the frame you want to paste, then paste where you want them. You don't have to highlight all the frames you want to paste them to but you should do this anyway to avoid any confusions.
One thing when working with Layers and Frames that you have to always remember is that each layer has its own set of frames. So if you want a layer to be shown in a frame, you have to make sure it has a frame there- also make sure you are adding and tweening objects on the right layer.
