Join Anastasia McCune for an in-depth discussion in this video Introducing the Timeline, frames, and keyframes, part of Up and Running with Flash Professional CC.
Controlling the appearance and disappearance of objects on the screen overtime is that basic Flash skill. You'll need to understand how to use the Timeline, Frames and Keyframes. To practice these concepts I have created a test file called travelPhotos.fla. Its a pretty simple file with only five layers and four images in the Library. Before we start working, in the Exercise files I'm going to pop open the travelPhotosPreview.swf to see what we are building toward. It's a short movie. Only five seconds long. Four images appear in succession, with a short piece of text appearing at the same time as the last image.
Then the movie starts over. So, when I close this Preview file and return to travelPhotos.fla and Flash. Before starting, I'm going to use the View drop-down on the upper right of the stage and choose Fit in Window, so we're sure to see the entire stage. The Flash Timeline, which appears across the bottom of the screen, is measured in frames. You can see the frame numbering across the top of the timeline. How fast those frames are played is determined by the frames per second. To see what our frames per second is, click on your Stage and then open the Property Inspector. We're at 24 frames per second.
Well, our movie currently only has one frame, so to have a movie that's five seconds long, we need to extend our timeline out to 120 frames. Five seconds multiplied by 24 frames equals 120. So I'll click on frame one of the image1 layer. You can add frames one at a time by pressing F5. You could also right-click and choose Insert Frame. Of course adding frames one at a time is pretty tedious, so I'm going to grab the slider bar that appears under the Timeline and slide over to frame 120.
I'm going to choose frame 120 making sure I've got the one on the image1 layer and now right-click on the frame and choose Insert Frame. Or of course you could have pressed F5. So the image1 layer has 120 frames. I'm going to open the Library and Drag and Drop vacation_1.jpg to the stage kind of over on the left. You can see that if you try to drag something to the time line Flash doesn't let you. You have to drag things onto the stage. So, with the picture on the stage, the frame and the Timeline now all turn gray to indicate that there's content on the screen. When I click the top of the Timeline, also notice the vertical red line that appears. This is called the Playhead.
You can drag it across the time line to preview what your Flash movie looks like so far. Dragging the playhead is better known as scrubbing the Timeline. Of course, right now all of the frames look the same for the entire movie, so let's extend our other layers out to frame 120. I'll click on frame 120 on the image2 layer. But instead of extending each layer out individually you can multiple-select by holding down the Shift key on your keyboard. Then I'll select frame 120 for the image3 and image4 layers as well. I'll add the frames by pressing F5.
We now have 120 frames on these layers too, but you'll notice that they all have a darker gray background instead of the lighter gray like the image one layer. That's because there's nothing on the stage for these layers yet. So I'm going to scroll over to the beginning of the Timeline and click just above Frame 1. Now I'm going to press Enter on the keyboard. You'll see that the Playhead moves. And also there's two counters on the bottom that show what frame the Playhead is on and how many seconds that corresponds to. Notice that the Playhead stops when it gets to the end.
Now in the text layer I'm going to select frame 125 and Insert Frames. And I'm going to scrub the Timeline near the end of the frames. We'll see the stage update appropriately depending on what frame the playhead's on. The stage of course is empty from frame 121 to frame 125, since there's only blank frames. Anything before frame 120 has the picture of the bird, so let's test the movie. It looks just about like it did when we scrubbed the play head, but at the end you'll see the little blip. What's happening is that we see five seconds worth of seabird and then the five blank frames at the end. Well on the Timeline, when working in the FLA, when we pressed Enter, the Playhead stopped at the last frame.
In the SWF, the Playhead reaches the last frame and then returns to Frame 1. So now that you've seen this, we don't need those blank frames anymore. To get rid of them, I'll click on Frame 121 in the text layer, hold down the Shift key, select Frame 125, and then right-click and choose Remove Frames. Let's move on to the idea of Keyframes. One way that might be helpful to think of Keyframes is to think about stop frame animation as used in Claymation. If you've watched shows like The California Raisins, or Shawn the Sheep, or Wallace and Gromit. You can imagine how the clay characters are put into position, and image is snapped, and then the characters repositioned. Another image is taken, and so on and so on in succession. Keyframes are a lot like this.
Each key frame shows the starting position, size, and other attributes of items on the screen. When you need new positioning you need a new Keyframe. Keyframes and Flash are indicated by a circle. Looking at Frame 1 of the Timeline, you'll notice that all our layers have a Keyframe on Frame 1. However image one is the only one that has anything on the keyboard. You can tell because the circle is filled in and the background is light grey. A non filled-in circle and a dark grey background indicates a blank keyframe.
Regular frames simply copy everything from the closest previous keyframe. For instance, Frames 2 through 120 on the image1 layer all look exactly the same as the keyframe on Frame 1. Those are frames, not keyframes. So they simply extend over time whatever the keyframe defines. If you wanted the seabird image to be in a different position on say, frame 20. You'd need to add a new keyframe by right-clicking on Frame 20 and choosing Insert Keyframe. What it first does is copy the information from the most previous keyframe. In this case, Frame 1 and stick it in the new keyframe. I can then move the bird image around on frame 20 to a different position. You can see the effect when you scrub the playhead. By the way, this little rectangle on Frame 19 is basically saying, I'm the last regular frame before a new keyframe is defined. Personally, I think it's a little annoying, since the keyframe on Frame 20 to me seems obvious.
But Flash puts them in automatically, you can ignore them. Since the keyframe on 20 was just for demonstration, lets get rid of it by right-clicking and choosing Clear Keyframe. Now all of our frames are restored back to the positioning defined in keyframe 1. I am going to rotate the image slightly to give it a little more visual interest. So I am going to click on the image to select it, you will notice that all the frames in the timeline are now highlighted. That's because we only have one keyframe and all the other frames look exactly like it. What we're about to do, will effect the image all the way down the Timeline. I'm going to choose the Free Transform tool, or just press the hot key of Q. I'm going to rotate the image to the left a little bit. So our project here is meant to have a succession of images appear on top of one another.
I'm going to go ahead and lock image1, because we're done with that. I'm going to have the second image appear in the image2 layer at one second into the movie. At a frame rate of 24 frames per second that would be of course, Frame 24. So I'll find Frame 24 in the image2layer. And it may help to look at the little number under the timeline to see exactly which frame you've selected. I'm going to right-click, and choose Insert Blank Keyframe. You could also go to the Insert menu, then Timeline then Insert Blank Keyframe. You may be wondering if you can choose Insert Keyframe instead. Remember that inserting a key frame creates a new keyframe but, with the information from the previous keyframe copied over into it. So, to start out they look exactly the same. Well in our case on the image2 layer, since the previous keyframe is a blank keyframe.
It doesn't really matter if you choose to Insert a Keyframe or a Blank Keyframe, you end up with the same thing. From the Library I'm going to Drag and Drop image2 onto the stage offsetting it from the other image a little bit. Notice that the keyframe on the image2 layer is now filled in. The rest of the frames on down the timeline are the lighter gray, since they display the image as well. I am going to rotate this image a little bit too. If you don't have your Free Transform tool going already, select the image of the tree and then press Q on the keyboard. Now I am going to rotate and position this.
This looks good so far. I'm going to lock our image2 layer and add that third image in at two seconds into the movie, that's Frame 48. Similar to what we just did I'm going to right-click and choose Insert Keyframe on Frame 48. Now I'm going to Drag and Drop vacation_3.jpg on to the stage. And I'm going to position it so it's offset from the other images. I'll rotate it just a little bit as well. That's all we have to do for this layer. I'm going to lock the image3 layer and repeat one more time for the fourth image. But this time we'll make a mistake on purpose so we can see how to easily move keyframes around.
I'm going to select Frame 1 of the image4 layer. Now I'll Drag and Drop vacation_4.jpg from the Library. Well, this is obviously not the right place to put this image if we want it to be our fourth image to appear in the succession. It should appear at four seconds into the movie, which is Frame 72. Well, this is easy enough to fix. I'll simply select the keyframe on Frame 1, and then Drag and Drop it to Frame 72. Now, this looks more correct, so I'm going to reposition the image so it looks good and then lock the layer. The text layer is where we'll type the greeting.
If we were to follow the pattern we've done so far, the text should appear one second after the last image, so at Frame 96. But one second is not long if you expect people to actually be able to read what the greeting says. So we will have it appear at the same time as the last image. So on the Text layer I am going to select Frame 72 and Insert a Blank Keyframe. Now I am going to use my Text tool and in the property inspector I am going to make sure that under the drop down at the top static text is selected. We'll talk about the other options in this drop-down later. In the Character options, for my Font, I'm going to make sure that I have Arial. We're going to work with Bold Italic, 16 point Font, and the Color is going to be White.
I'm also going to make sure, in the Paragraph section, that I've got Align Center. I'm going to click on the stage once and type the greeting. I'm going to put, Having a great time, wish you were here. Love, Uncle Chris. I'm going to reposition the text box with the Arrow tool. And now I'm happy with the layout. I'm going to lock the layer. And let's test the movie. It takes a total of 5 seconds and the images and text appear in succession. So this piece is done. I'm going to close the SWF file and lets take a moment to look at frame rate again.
Open the Property Inspector and click on the stage or the pace board somewhere if you need to. So you can see the document properties we've laid out our flash movie with the understanding that we're at 24 frames per second. I'm going to try changing the frame rate to 12 and Publish again. As you'd expect, the playhead is not moving half as fast as it did before. The movie now takes ten seconds to run. If I close the SWF and change the frame rate to 48 and then Publish, the movie plays a little too fast, taking only two and a half seconds for one loop.
So I'll close this SWF and change the Frame Rate back to 24. (SOUND). Frame rates between 12 and 30 are commonly accepted, so it's fine to choose the frame rate that works best for you. If you're working on a piece that might interact with or be loaded in by another Flash movie. Or, you're working with something that needs to sync up with a video, be sure to agree with your colleagues ahead of time what the frame rate is so all the pieces match. The best practice is to choose your Frame Rate ahead of time, and position items on the Timeline accordingly. Positioning on the timeline first and changing the framerate later can sometimes be a big disaster.
That's because changing the Frame Rate to adjust one part of the movie may adversely affect other parts you designed at a different Frame Rate. So using Frames and Keyframes is how you control what appears when. And for how long in Flash. Remember that Keyframes define the positioning and other properties of content on the screen. Frames copy the content from the closest previous Keyframe.
- What is Flash?
- Using the Timeline
- Creating shapes in the Merge and Object drawing modes
- Using symbols
- Creating simple animations
- Using ActionScript to create navigation
- Converting and integrating video
- Publishing for web, mobile, and desktop applications