Understanding When to Insert Frames, Keyframes and Blank Keyframes - Flash Tutorial for Beginners

This article comes with exercise files. Click on the link below to download:
[GO TO EXERCISE FILES DOWNLOAD PAGE]

In Flash, you have the option to insert frames, keyframes and blank keyframes in the timeline. In this article, I'll show you a couple of examples that will help you understand when you should be inserting which.

Inserting Frames

Step 1
Open the insert-frame.fla file.

Step 2
Test the movie by pressing ctrl + enter (PC) or cmd + return (Mac) on your keyboard.

You'll see a jumping stickman animation, but you'll notice that the "jump!" title at the top only appears for a split second and then disappears (you might have to wait until it loops again to see it because it happens pretty fast).

Why is this happening?
If you take a look at the timeline, you'll see a layer called Jump. This is the layer that contains the "jump!" title. You'll see that this layer only has one keyframe at the very beginning.

After that first keyframe, the layer doesn't have any more frames. This is why the "jump!" title only appears for a split second - it only appears in that first keyframe. After that, there are no more frames that show it, so it disappears.

How do we make the "jump!" title appear all throughout the animation?
We'll need to insert more frames.

Step 3
Position your mouse pointer over the empty box on the Jump layer that's right on top of the very last keyframe of the Animation layer, then right-click on it.

From the context menu that pops up, choose Insert Frame.

This is going to insert frames starting at frame 2, all the way up to the frame that you right-clicked on.

There is no need to insert the frames one by one. Flash will automatically fill the frames in between the empty box that you right-click on and the nearest keyframe to the left.

Step 4
Test the movie and you should see the "jump!" title appear all throughout the animation.

So why did we have to insert frames?
Think of frames as extensions of keyframes. Inserting frames will extend the duration of whatever content is on the keyframe that is to the left of the frames. So since we simply wanted to extend the duration of the "jump!" title on the first keyframe, then inserting frames after the first keyframe is what we needed to do.

Inserting Keyframes

Step 1
Open the insert-keyframe.fla file.

Just like in the previous section on inserting frames, the Jump layer in this file only has one keyframe, so the "jump!" title is only going to appear for a split second. We're going to extend the duration of the "jump!" title for this exercise as well. But aside from doing that, we'll also make some changes so that the title changes to a new location after every 1 second or so. To do this, we'll need to add keyframes.

Step 2
This Flash document has a frame rate of 12 frames per second so that means that after every 12 frames, 1 second passes. So let's go ahead and insert a keyframe.

In the Jump layer, position the pointer over empty box no. 13. You'll see numbers after every 5 frames at the top of the timeline, so you can use that as a guide to locate empty box no. 13 in the Jump layer.

Then right-click on it and choose Insert Keyframe from the context menu.

You should now see a keyframe on frame no. 13.

So we now have two keyframes in the Jump layer. There is a keyframe on frame 1 and another keyframe on frame 13. You'll also notice that Flash automatically adds frames in between the 2 keyframes.

Step 3
Then let's add a couple more keyframes. Insert keyframes in the empty boxes for nos. 13, 25 and 37.

Step 4
Then position the pointer on empty box no. 48 of the Jump layer. Right-click on it, but instead of inserting a keyframe, just insert a regular frame. For this exercise, we don't need a keyframe at the end of the Jump layer. We just want to make sure that we have enough frames to match the keyframes in the Animation layer below.

What happens when you insert a keyframe?
When you insert a keyframe, the contents of the previous keyframe (the objects that are on the stage) are copied to the newly inserted keyframe. So just like frames, inserting a keyframe will also end up extending the duration of the contents of the previous keyframe. But the difference is that you can make independent changes to the contents of each keyframe. This is not the case when you make changes to just regular frames. If you make changes to the contents of one frame, the contents of the frames connected to it will change as well. The concept of being able to make independent changes with keyframes will be illustrated in the next steps.

Step 5
So now that we've added a total of 3 new keyframes, we'll go ahead and change the position of the "jump!" title on each of those new keyframes.

First, click on the keyframe on frame 13 in order to select it.

Then make sure you choose the selection tool from the tool bar.

Then click and drag the "jump!" title on the stage and move it to a new location anywhere on the stage.

Then go to the keyframes on frames 25 and 37 and move the "jump!" title on these keyframes to new locations as well.

So in all of the keyframes in the Jump layer, the "jump!" title should be in different locations.

Step 6
Go ahead and test the movie, and you should see that every 1 second, the "jump!" title is going to move to a new location.

So when should we insert keyframes?
Add a keyframe everytime you want to make some kind of change. Each keyframe is independent of the other keyframes. This means that if you make changes to the objects on the stage in one keyframe, the state of the objects in the other keyframes are unaffected. This is why when we move the location of the "jump!" title in one keyframe, the positions of the "jump!" title in the other keyframes are unaffected. So when we play the animation, the title moves to a new location each time the playhead gets to a new keyframe.

Inserting Blank Keyframes

Step 1
Open the insert-frame.fla file.

Step 2
Test the movie, and you will see that the "jump!" title appears all throughout the animation. In this section, we'll make the "jump!" title disappear when it gets to the middle of the animation.

Step 3
Position the cursor over frame 25 of the Jump layer.

Then right-click on it and choose Insert Blank Keyframe.

You should immediately see the "jump!" title disappear from the stage. And you'll also see the remaining frames right after the blank keyframe become blank as well. This means that starting from the new blank keyframe, the "jump!" title will no longer be on the stage.

What is the difference between a keyframe and a blank keyframe?
You can make independent changes with both a keyframe and a blank keyframe. The main difference is that with a blank keyframe, there is simply nothing on the stage (but only for the layer with the blank keyframe - the other layers are unaffected since they have their own set of frames, keyframes and blank keyframes). Whenever you insert a blank keyframe, you start off with a blank slate at that point of insertion. You can then keep it empty, or you can decide to add or draw something new on that blank keyframe. But once you draw something, then it's no longer a blank keyframe since there is already something on the stage. Conversely, if you have a keyframe, but you decide to remove the contents of that keyframe, then that keyframe becomes a blank keyframe.

Step 4
Test the movie to see the "jump!" title disappear in the middle of the animation.

Summary

• Insert frames if you simply want to extend the duration of something that appears on the stage.
• Insert keyframes if you want to make independent changes at certain points in the animation.
• Insert blank keyframes if you want to make a keyframe that is empty.

Try This On Your Own
Create one Flash movie where the following things happen:

1. When the Flash movie begins, a green circle appears for 1 second and then disappears. Place this green circle in the lower-left corner.
2. When the Flash movie begins, wait 1 second, and then a blue circle appears in the center of the stage and stays there for 2 seconds. After that, it will disappear for the next 2 seconds, and then it will reappear again in the exact same spot, and stay there for 1 more second.
3. When the flash movie begins, wait 3 seconds and then a red circle appears and stays there for 2 seconds, and then disappears again after that. Place this red circle in the lower-right corner.