Flash Beginner Animation – Layers and Keyframes Tutorial in Flash Professional

Frame by frame animation in flash

In this tutorial, we will be looking at how Keyframes work in Flash layers, and how to use them to create flash animation (for beginners). The animation we will make is a simple counter. It goes from 1 to 3 and continues in a loop.

The Flash timeline consists of layers, frames and keyframes. In all the layers in flash, you can add frames or keyframes. Keyframes have a black circle inside them, while regular frames do not. A keyframe represents change. When adding a new keyframe, you can change the contents on that layer from that frame and any regular frame after it. Regular frames after a keyframe will have the same content as the keyframe before them.

Part 1

To understand better, we will go step-by-step in making the 1-3 counter easy Flash animation.

Step 1)  Start by drawing a square on the stage with the rectangle tool. Hint: Hold down shift to make the square perfect.

Optional: Remove the outlines of the square by double clicking on one of them and pressing backspace / delete.

Picture

 

Step 2) Give the square a blue color

Picture.

 

Step 3) With the Text tool, write down 1 inside the square.

Picture

 

Step 4) Go back to the selection tool, select the text and choose the black color, then reposition the text in the middle.

Picture

Picture

 

Step 5) Select the whole drawing with the select tool, or press Control + A. Tip: You can also enlarge the text’s font size like shown in this picture.

Picture

 

Right Click – Convert to Symbol.

Picture

 

Give it a name, I chose mcClip1 and I will refer to this MovieClip with this name in this tutorial.

Set the Registration point to middle.

Picture

 

Step 6) On frame 11 – Right Click – Insert Keyframe.

We will change the image on this frame, so that it appears as an animation.

Picture

 

You will notice that the frames before the Keyframe(from 2 to 10) are regular frames, so they will have the image from the first frame.

Picture

 

Step 7) Right click on the “1” symbol on the 11th frame and click Duplicate Symbol. This will create a separate symbol in the library same as the one we have now. We will give it another name: mcClip2. We will also change its color to Yellow and change the number to 2.

Picture

Picture

Picture

 

Step 8) Repeat the same process, but add a keyframe on frame 21. Duplicate the “2” symbol and give it the name mcClip3. We will make this one green with the number 3.

Picture

Picture

Picture

Picture

 

Step 9) Add a regular frame on frame 30. Right Click – Insert Frame.

Picture

 

Step 10) Test it out! Either press Enter (Play in the Command menu) or Control / Command + Enter.

Picture

 

Part 2

Now for adding this into 1 MovieClip… Most of the work is already done now, so we won’t repeat most of the process. Make a new Flash file and follow these steps:

Step 1) Copy the first symbol on the stage(mcClip1).

Step 2) Convert the whole symbol to another symbol and name it mcAnimation.

Picture

 

Double click on this new symbol to Edit it. Inside it, you will see that it has its own independent timeline.

Now we will repeat these 3 steps from Part 1 here…

 

Step 3) Insert a keyframe on Frame 11, like before and then copy mcClip2 from the previous project and add it on the stage.

Hint: If you used Center for the registration point of the symbols as I mentioned earlier, you can set the position of the new symbol manually at 0, 0.

 

Step 4) Like before, instert a keyframe on Frame 21 and copy mcClip3 on the stage at the same position as the previous 2 symbols.

And again, like before, add a regular frame on frame 30.

 

Step 5) Test the SWF file.

easy_frames_animation

 

More Flash tutorials:

Share with friends: