• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Creating Animation > Creating a Frame-By-Frame Animation

Creating a Frame-By-Frame Animation

The most basic form of animation is frame-by-frame animation. Because this type of animation employs unique artwork in each frame, it is ideal for complex animations, such as facial expressions that require subtle changes. Frame-by-frame animation can also be useful for making dramatic changes in a short period of time—in a slide show, for example.

Frame-by-frame animation does have drawbacks. Drawing a unique image for each frame of the animation can be tedious and time-consuming. And all those unique drawings contribute to a larger file size.

Let's start things off with a simple frame-by-frame animation.

Open neptune13.fla from the Lesson04/Assets folder. Lock the Outlines and Blue Vector Graphic layers.

This file is nearly identical to the one that you completed in Lesson 3. The only changes are that the AQUATIC ADVENTURES text is centered inside the Neptune Resorts Text symbol, and the Neptune Logo symbol is unlinked.

You have finished using these layers and don't want to move things around accidentally, so it's best to lock them.

Select frame 2 of the Blue Vector Graphic layer, and insert a frame by choosing Insert > Frame. Repeat this step for frame 2 of the Outlines layer.

You can select a frame by clicking it in the timeline. When you select a frame, it becomes highlighted.

Inserting a frame does not change the animation in a layer; it only extends the animation for a longer period. The contents of the frame that you just added are identical to those of the preceding frame in the same layer.

Up until this point, you've known the timeline as the place where Flash keeps all your layers, but it's really much more than that. Layers contain the actual content of your movie, but the timeline is where you animate the content of the movie. The timeline enables you to create an animation by changing the contents of the stage over time.

The major parts of the timeline are layers, frames, and the playhead. Frames in a Flash movie represent time. The playhead shows you which frame is currently visible on the stage.

The playhead is the red rectangle above the timeline. It moves through the timeline to indicate the current frame displayed on the stage. To display a frame on the stage, you move the playhead to the frame on the timeline. Drag the playhead back and forth between frames 1 and 2 to see what you accomplished in this step. Notice that in frame 2, only the graphics from the Blue Vector Graphic and Outlines layers appear; these are the only layers in the timeline with frames at this point. You should also notice that the contents of these layers have not changed.


You can also insert a frame by pressing F5 on your keyboard.

Select frame 2 of the Navigation Bar layer, and insert a keyframe by choosing Insert > Keyframe. Select the instance of the Navigation Bar symbol that's on the stage, and use the Info panel to move it to X: –25 and Y: 85.

A keyframe marks a point on the timeline where the contents of a layer may change. A black dot should appear on the timeline in frame 2 of the Navigation Bar layer. This black dot signifies a keyframe at this point in the timeline.


You can also insert a keyframe by pressing F6 on your keyboard.

Select frame 2 of the Tagline layer, and insert a blank keyframe by choosing Insert > Blank Keyframe.

In frame 1 of the Tagline layer, you have an instance of the Tagline symbol. In frame 2 you have nothing, because the keyframe you inserted was blank. Drag the playhead back and forth between frames 1 and 2 to see the difference.

Insert another blank keyframe at frame 2 of the Background Graphics layer. Open the library, and drag an instance of the Diver Graphic from the Background Graphics folder onto the stage, using the Info panel to position it at X: 10 and Y: 110.

This time, you inserted a blank keyframe but then put something in that keyframe. Once again, a change has been made in your animation. Drag the playhead between frames 1 and 2 to see the change.

Insert a keyframe at frame 2 of the Neptune Logo layer, and use the Info panel to move the instance of the Neptune Logo in that keyframe to X: 19 and Y: 15.

Once again, you're animating a layer—this time, the Neptune Logo layer. Drag the playhead between frames 1 and 2 to see the change.


If you're having trouble seeing the changes, click the show/hide layers button (the eye icon in the layers area of the timeline) to hide all the layers. Then click on the dot below the eye icon next to the layer you want to see.

Insert a keyframe at frame 2 of the Neptune Resorts Text layer. Select the instance of the Neptune Resorts Text symbol in frame 2 of that layer and use the Transform panel to make it 80% of its original size. Then position this symbol next to the Neptune Logo.

You can accomplish transformations quickly by using the Transform panel. Also, you can click the reset button in the Transform panel to undo the last transformation. You can apply the transformation to a duplicate of the shape, leaving the original shape intact, by clicking the copy and apply button. You can check the Constrain checkbox to ensure that the height and width of the instance are scaled to the same percentage.

Save your file as neptune14.fla in the MyWork folder.

Congratulations! You just made your first animation. That wasn't so tough, was it? Now let's move on to something a little more complicated: masking.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint